diff --git a/404.html b/404.html index 0c976cb9..6c1f0bb2 100644 --- a/404.html +++ b/404.html @@ -22,13 +22,13 @@ - - + + -

404

There's nothing here.
+ - + diff --git a/about.html b/about.html index 65d8d18d..67144596 100644 --- a/about.html +++ b/about.html @@ -37,8 +37,8 @@ - - + +
Visnalize

# 🙋‍♂️ About Me

Howdy, glad to see that you are interested to know about me. I am a full-time software developer and a free-time app maker. I love all sorts of web technologies and visual-related stuff. I tend to spend all of my free time exploring and playing around with those things by making a lot of, probably silly, of-no-use apps, apps that are meant for entertainment, or simply to satisfy my hobby.

I am not good at math and problem solving, or positively speaking, just decent. I cannot build complex programs or software that appears to be useful to mankind, so I took the route that fits me best: to build apps for entertainment. If you would like, follow me on my journey to contribute to the world in my own way.

Tools I use:

# Visnalize

Visnalize is Visualize (not Visnalize) with the letter u upside down, my brand name of choice. I did not really care about the name when I first started and having little to no knowledge about branding or marketing, I just picked a name that was somewhat relevant to my interest and went with it, though the letter u upside down was a small intentional touch that has luckily helped me stand out from the crowd in terms of search engine results (opens new window).

The logo is also shamelessly created by myself using MS Paint and eventually on Figma.

# Contact

I am not actively available via direct messaging or chat apps like Discord, WhatsApp etc. You can reach me via email at hey@visnalize.com or with a little help from the form below:

Last Updated: 9/3/2024, 8:15:04 AM
- + diff --git a/assets/css/0.styles.e559ef7a.css b/assets/css/0.styles.5267e067.css similarity index 98% rename from assets/css/0.styles.e559ef7a.css rename to assets/css/0.styles.5267e067.css index 6b3a51cb..ee8122f1 100644 --- a/assets/css/0.styles.e559ef7a.css +++ b/assets/css/0.styles.5267e067.css @@ -1 +1 @@ -code[class*=language-],pre[class*=language-]{color:#ccc;background:none;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#2d2d2d}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.block-comment,.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#999}.token.punctuation{color:#ccc}.token.attr-name,.token.deleted,.token.namespace,.token.tag{color:#e2777a}.token.function-name{color:#6196cc}.token.boolean,.token.function,.token.number{color:#f08d49}.token.class-name,.token.constant,.token.property,.token.symbol{color:#f8c555}.token.atrule,.token.builtin,.token.important,.token.keyword,.token.selector{color:#cc99cd}.token.attr-value,.token.char,.token.regex,.token.string,.token.variable{color:#7ec699}.token.entity,.token.operator,.token.url{color:#67cdcc}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}.token.inserted{color:green}.theme-default-content code{color:#476582;padding:.25rem .5rem;margin:0;font-size:.85em;background-color:rgba(27,31,35,.05);border-radius:3px}.theme-default-content code .token.deleted{color:#ec5975}.theme-default-content code .token.inserted{color:#1bb89b}.theme-default-content pre,.theme-default-content pre[class*=language-]{line-height:1.4;padding:1.25rem 1.5rem;margin:.85rem 0;background-color:#282c34;border-radius:6px;overflow:auto}.theme-default-content pre[class*=language-] code,.theme-default-content pre code{color:#fff;padding:0;background-color:transparent;border-radius:0}div[class*=language-]{position:relative;background-color:#282c34;border-radius:6px}div[class*=language-] .highlight-lines{-webkit-user-select:none;user-select:none;padding-top:1.3rem;position:absolute;top:0;left:0;width:100%;line-height:1.4}div[class*=language-] .highlight-lines .highlighted{background-color:rgba(0,0,0,.66)}div[class*=language-] pre,div[class*=language-] pre[class*=language-]{background:transparent;position:relative;z-index:1}div[class*=language-]:before{position:absolute;z-index:3;top:.8em;right:1em;font-size:.75rem;color:hsla(0,0%,100%,.4)}div[class*=language-]:not(.line-numbers-mode) .line-numbers-wrapper{display:none}div[class*=language-].line-numbers-mode .highlight-lines .highlighted{position:relative}div[class*=language-].line-numbers-mode .highlight-lines .highlighted:before{content:" ";position:absolute;z-index:3;left:0;top:0;display:block;width:3.5rem;height:100%;background-color:rgba(0,0,0,.66)}div[class*=language-].line-numbers-mode pre{padding-left:4.5rem;vertical-align:middle}div[class*=language-].line-numbers-mode .line-numbers-wrapper{position:absolute;top:0;width:3.5rem;text-align:center;color:hsla(0,0%,100%,.3);padding:1.25rem 0;line-height:1.4}div[class*=language-].line-numbers-mode .line-numbers-wrapper br{-webkit-user-select:none;user-select:none}div[class*=language-].line-numbers-mode .line-numbers-wrapper .line-number{position:relative;z-index:4;-webkit-user-select:none;user-select:none;font-size:.85em}div[class*=language-].line-numbers-mode:after{content:"";position:absolute;z-index:2;top:0;left:0;width:3.5rem;height:100%;border-radius:6px 0 0 6px;border-right:1px solid rgba(0,0,0,.66);background-color:#282c34}div[class~=language-js]:before{content:"js"}div[class~=language-ts]:before{content:"ts"}div[class~=language-html]:before{content:"html"}div[class~=language-md]:before{content:"md"}div[class~=language-vue]:before{content:"vue"}div[class~=language-css]:before{content:"css"}div[class~=language-sass]:before{content:"sass"}div[class~=language-scss]:before{content:"scss"}div[class~=language-less]:before{content:"less"}div[class~=language-stylus]:before{content:"stylus"}div[class~=language-go]:before{content:"go"}div[class~=language-java]:before{content:"java"}div[class~=language-c]:before{content:"c"}div[class~=language-sh]:before{content:"sh"}div[class~=language-yaml]:before{content:"yaml"}div[class~=language-py]:before{content:"py"}div[class~=language-docker]:before{content:"docker"}div[class~=language-dockerfile]:before{content:"dockerfile"}div[class~=language-makefile]:before{content:"makefile"}div[class~=language-javascript]:before{content:"js"}div[class~=language-typescript]:before{content:"ts"}div[class~=language-markup]:before{content:"html"}div[class~=language-markdown]:before{content:"md"}div[class~=language-json]:before{content:"json"}div[class~=language-ruby]:before{content:"rb"}div[class~=language-python]:before{content:"py"}div[class~=language-bash]:before{content:"sh"}div[class~=language-php]:before{content:"php"}.custom-block .custom-block-title{font-weight:600;margin-bottom:-.4rem}.custom-block.danger,.custom-block.tip,.custom-block.warning{padding:.1rem 1.5rem;border-left-width:.5rem;border-left-style:solid;margin:1rem 0}.custom-block.tip{background-color:#f3f5f7;border-color:#42b983}.custom-block.warning{background-color:rgba(255,229,100,.3);border-color:#e7c000;color:#6b5900}.custom-block.warning .custom-block-title{color:#b29400}.custom-block.warning a{color:#2c3e50}.custom-block.danger{background-color:#ffe6e6;border-color:#c00;color:#4d0000}.custom-block.danger .custom-block-title{color:#900}.custom-block.danger a{color:#2c3e50}.custom-block.details{display:block;position:relative;border-radius:2px;margin:1.6em 0;padding:1.6em;background-color:#eee}.custom-block.details h4{margin-top:0}.custom-block.details figure:last-child,.custom-block.details p:last-child{margin-bottom:0;padding-bottom:0}.custom-block.details summary{outline:none;cursor:pointer}.arrow{display:inline-block;width:0;height:0}.arrow.up{border-bottom:6px solid #ccc}.arrow.down,.arrow.up{border-left:4px solid transparent;border-right:4px solid transparent}.arrow.down{border-top:6px solid #ccc}.arrow.right{border-left:6px solid #ccc}.arrow.left,.arrow.right{border-top:4px solid transparent;border-bottom:4px solid transparent}.arrow.left{border-right:6px solid #ccc}.theme-default-content:not(.custom){max-width:740px;margin:0 auto;padding:2rem 2.5rem}@media (max-width:959px){.theme-default-content:not(.custom){padding:2rem}}@media (max-width:419px){.theme-default-content:not(.custom){padding:1.5rem}}.table-of-contents .badge{vertical-align:middle}body,html{padding:0;margin:0;background-color:#fff}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px;color:#2c3e50}.page{padding-left:20rem}.navbar{z-index:20;right:0;height:3.6rem;background-color:#fff;box-sizing:border-box;border-bottom:1px solid #eaecef}.navbar,.sidebar-mask{position:fixed;top:0;left:0}.sidebar-mask{z-index:9;width:100vw;height:100vh;display:none}.sidebar{font-size:16px;background-color:#fff;width:20rem;position:fixed;z-index:10;margin:0;top:3.6rem;left:0;bottom:0;box-sizing:border-box;border-right:1px solid #eaecef;overflow-y:auto}.theme-default-content:not(.custom)>:first-child{margin-top:3.6rem}.theme-default-content:not(.custom) a:hover{text-decoration:underline}.theme-default-content:not(.custom) p.demo{padding:1rem 1.5rem;border:1px solid #ddd;border-radius:4px}.theme-default-content:not(.custom) img{max-width:100%}.theme-default-content.custom{padding:0;margin:0}.theme-default-content.custom img{max-width:100%}a{font-weight:500;text-decoration:none}a,p a code{color:#1bb89b}p a code{font-weight:400}kbd{background:#eee;border:.15rem solid #ddd;border-bottom:.25rem solid #ddd;border-radius:.15rem;padding:0 .15em}blockquote{font-size:1rem;color:#999;border-left:.2rem solid #dfe2e5;margin:1rem 0;padding:.25rem 0 .25rem 1rem}blockquote>p{margin:0}ol,ul{padding-left:1.2em}strong{font-weight:600}h1,h2,h3,h4,h5,h6{font-weight:600;line-height:1.25}.theme-default-content:not(.custom)>h1,.theme-default-content:not(.custom)>h2,.theme-default-content:not(.custom)>h3,.theme-default-content:not(.custom)>h4,.theme-default-content:not(.custom)>h5,.theme-default-content:not(.custom)>h6{margin-top:-3.1rem;padding-top:4.6rem;margin-bottom:0}.theme-default-content:not(.custom)>h1:first-child,.theme-default-content:not(.custom)>h2:first-child,.theme-default-content:not(.custom)>h3:first-child,.theme-default-content:not(.custom)>h4:first-child,.theme-default-content:not(.custom)>h5:first-child,.theme-default-content:not(.custom)>h6:first-child{margin-top:-1.5rem;margin-bottom:1rem}.theme-default-content:not(.custom)>h1:first-child+.custom-block,.theme-default-content:not(.custom)>h1:first-child+p,.theme-default-content:not(.custom)>h1:first-child+pre,.theme-default-content:not(.custom)>h2:first-child+.custom-block,.theme-default-content:not(.custom)>h2:first-child+p,.theme-default-content:not(.custom)>h2:first-child+pre,.theme-default-content:not(.custom)>h3:first-child+.custom-block,.theme-default-content:not(.custom)>h3:first-child+p,.theme-default-content:not(.custom)>h3:first-child+pre,.theme-default-content:not(.custom)>h4:first-child+.custom-block,.theme-default-content:not(.custom)>h4:first-child+p,.theme-default-content:not(.custom)>h4:first-child+pre,.theme-default-content:not(.custom)>h5:first-child+.custom-block,.theme-default-content:not(.custom)>h5:first-child+p,.theme-default-content:not(.custom)>h5:first-child+pre,.theme-default-content:not(.custom)>h6:first-child+.custom-block,.theme-default-content:not(.custom)>h6:first-child+p,.theme-default-content:not(.custom)>h6:first-child+pre{margin-top:2rem}h1:focus .header-anchor,h1:hover .header-anchor,h2:focus .header-anchor,h2:hover .header-anchor,h3:focus .header-anchor,h3:hover .header-anchor,h4:focus .header-anchor,h4:hover .header-anchor,h5:focus .header-anchor,h5:hover .header-anchor,h6:focus .header-anchor,h6:hover .header-anchor{opacity:1}h1{font-size:2.2rem}h2{font-size:1.65rem;padding-bottom:.3rem;border-bottom:1px solid #eaecef}h3{font-size:1.35rem}a.header-anchor{font-size:.85em;float:left;margin-left:-.87em;padding-right:.23em;margin-top:.125em;-webkit-user-select:none;user-select:none;opacity:0}a.header-anchor:focus,a.header-anchor:hover{text-decoration:none}.line-number,code,kbd{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}ol,p,ul{line-height:1.7}hr{border:0;border-top:1px solid #eaecef}table{border-collapse:collapse;margin:1rem 0;display:block;overflow-x:auto}tr{border-top:1px solid #dfe2e5}tr:nth-child(2n){background-color:#f6f8fa}td,th{border:1px solid #dfe2e5;padding:.6em 1em}.theme-container.sidebar-open .sidebar-mask{display:block}.theme-container.no-navbar .theme-default-content:not(.custom)>h1,.theme-container.no-navbar h2,.theme-container.no-navbar h3,.theme-container.no-navbar h4,.theme-container.no-navbar h5,.theme-container.no-navbar h6{margin-top:1.5rem;padding-top:0}.theme-container.no-navbar .sidebar{top:0}@media (min-width:720px){.theme-container.no-sidebar .sidebar{display:none}.theme-container.no-sidebar .page{padding-left:0}}@media (max-width:959px){.sidebar{font-size:15px;width:16.4rem}.page{padding-left:16.4rem}}@media (max-width:719px){.sidebar{top:0;padding-top:3.6rem;transform:translateX(-100%);transition:transform .2s ease}.page{padding-left:0}.theme-container.sidebar-open .sidebar{transform:translateX(0)}.theme-container.no-navbar .sidebar{padding-top:0}}@media (max-width:419px){h1{font-size:1.9rem}.theme-default-content div[class*=language-]{margin:.85rem -1.5rem;border-radius:0}}#app{transition:background .3s}.homepage .logo,.homepage>.home{padding:0;max-width:unset}.homepage .logo .footer,.homepage .logo .hero,.homepage>.home .footer,.homepage>.home .hero{display:none}.homepage .navbar{opacity:0;transform:translateY(-58px);transition:.3s}.homepage .navbar.show{opacity:1;transform:translateY(0)}.navbar{border:0;box-shadow:0 1px 1rem rgba(0,0,0,.08);transition:background .3s}.navbar .links{background:none!important}.navbar .search-box>input{border-color:transparent;border-radius:.5rem;background-color:#eee}.navbar .search-box>input.focused{background-color:transparent}.navbar .nav-item>a{height:2.4rem}.sidebar{transition:background .3s,transform .2s ease}.page{min-height:100vh;box-sizing:border-box}.nav-item>.dropdown-wrapper .nav-dropdown{border:0;box-shadow:0 .3rem .3rem rgba(0,0,0,.2)}.nav-item>.dropdown-wrapper .nav-dropdown .dropdown-item .nav-link{border-left:2px solid transparent;transition:.3s}.nav-item>.dropdown-wrapper .nav-dropdown .dropdown-item .nav-link.router-link-active{border-left-color:#1bb89b}.nav-item>.dropdown-wrapper .nav-dropdown .dropdown-item .nav-link:after{content:none}main{overflow-x:hidden}img[alt=win7simu]{width:45px;height:45px;vertical-align:bottom}.banner{margin:1rem 0;width:100%}.embed-responsive iframe{display:block;margin:auto;max-width:100%}.contains-task-list{list-style:none;padding:0}.contains-task-list input{margin:0 8px 0 0;transform:scale(1.2)}@media (max-width:719px){.nav-item>.dropdown-wrapper .nav-dropdown{box-shadow:none}}.nav-item:nth-child(2):before{content:"";position:absolute;z-index:-1;top:50%;left:30%;width:64px;height:64px;background:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik04LjU2NiAzLjU4NmE1IDUgMCAwMC0zLjUzIDYuMTI4bDMuNjM4IDEzLjUxOSA0LjgwNy01LjIyOSA2Ljc4MSAyLjExLTMuNjM3LTEzLjUxOGE1IDUgMCAwMC02LjEyOC0zLjUzbC0xLjkzMS41MnptLjA3NiA2LjU1Yy4wODMuMzA3LjA5NS41ODMuMDM2LjgzYTEuMjUgMS4yNSAwIDAxLS4zNC42MTkgMS4zOCAxLjM4IDAgMDEtLjYyMy4zNDljLS4yNS4wNjctLjQ4OS4wNy0uNzE4LjAxYTEuMjU0IDEuMjU0IDAgMDEtLjYwMy0uMzY1IDEuNjkgMS42OSAwIDAxLS4zODMtLjczNCAxLjY5NCAxLjY5NCAwIDAxLS4wMzctLjgyOWMuMDU3LS4yNDYuMTctLjQ1MS4zMzgtLjYxNy4xNjgtLjE2Ny4zNzctLjI4NC42MjYtLjM1MS4yNDgtLjA2Ny40ODctLjA3LjcxNi0uMDEuMjMuMDU5LjQzLjE4LjYwNC4zNjQuMTczLjE4My4zMDIuNDI4LjM4NC43MzV6bS0uNjAyLjE2M2ExLjMgMS4zIDAgMDAtLjIyNC0uNDc4LjcwNC43MDQgMCAwMC0uMzMyLS4yNDMuNjkyLjY5MiAwIDAwLS40MDQtLjAwNS42OTIuNjkyIDAgMDAtLjM0OC4yMDcuNzEyLjcxMiAwIDAwLS4xNjYuMzc3Yy0uMDIyLjE1Mi0uMDA2LjMyNy4wNDcuNTI2LjA1NC4xOTguMTI4LjM1Ny4yMjMuNDc4LjA5Ni4xMi4yMDcuMjAxLjMzMy4yNDMuMTI2LjA0MS4yNjEuMDQzLjQwNS4wMDRhLjY5Mi42OTIgMCAwMC4zNDctLjIwNi43MDQuNzA0IDAgMDAuMTY1LS4zNzcgMS4zIDEuMyAwIDAwLS4wNDYtLjUyNnptMS40MiAxLjEyNGwtLjc1Ni0yLjgxIDEuMTA4LS4yOTdjLjIxMy0uMDU4LjQwNi0uMDY2LjU3OC0uMDI1LjE3MS4wNC4zMTYuMTIyLjQzMy4yNDQuMTE4LjEyMS4yMDIuMjc1LjI1Mi40NjIuMDUuMTg2LjA1NS4zNjIuMDEzLjUyNmEuODYyLjg2MiAwIDAxLS4yNi40MjdjLS4xMzEuMTItLjMwNC4yMS0uNTIuMjY4bC0uNS4xMzQuMjQ2LjkxMS0uNTk0LjE2em0uNjI0LTEuNjU1bC0uNDAzLjEwOC0uMjUyLS45MzYuNC0uMTA4YS42MzMuNjMzIDAgMDEuMzAxLS4wMTguMzkuMzkgMCAwMS4yMTIuMTE4Yy4wNTYuMDYuMDk2LjEzNi4xMjIuMjMuMDI0LjA5Mi4wMjguMTc4LjAxLjI2YS40MDQuNDA0IDAgMDEtLjEyMy4yMS42Mi42MiAwIDAxLS4yNjcuMTM2em0xLjg3Ny45ODJsLS43NTYtMi44MSAxLjg5My0uNTA4LjEzMi40OS0xLjMuMzQ5LjE4LjY3IDEuMjAyLS4zMjQuMTMyLjQ5LTEuMjAxLjMyMy4xOC42NyAxLjMwNC0uMzUuMTMyLjQ5LTEuODk4LjUxem0zLjk1OS00LjA3OGwuNzU2IDIuODEtLjUxMy4xMzctMS42OTgtMS40MzktLjAyLjAwNi40NzUgMS43NjgtLjU5NC4xNi0uNzU2LTIuODEuNTIxLS4xNCAxLjY4OCAxLjQ0LjAyNS0uMDA2LS40NzUtMS43NjcuNTktLjE1OXptLTcuODQgMTAuM2wtLjc1Ny0yLjgwOSAxLjEyNS0uMzAyYy4yMDctLjA1Ni4zODctLjA3Mi41NDItLjA0OGEuNzExLjcxMSAwIDAxLjM4LjE3MmMuMDk4LjA4OS4xNjcuMjA0LjIwNC4zNDVhLjU4OC41ODggMCAwMS0uMTE0LjU1OS43Ny43NyAwIDAxLS4yMy4xOGwuMDA3LjAyOGEuNjY0LjY2NCAwIDAxLjYxNy4xODMuNzE2LjcxNiAwIDAxLjE4My4zMzMuNzU2Ljc1NiAwIDAxLS4wMDMuNDI5Ljc3NS43NzUgMCAwMS0uMjUxLjM2MyAxLjI4NCAxLjI4NCAwIDAxLS41MDQuMjQ0bC0xLjIuMzIzem0uNDYyLS42NDVsLjQ4NS0uMTNjLjE2NS0uMDQ1LjI3Ny0uMTA5LjMzNi0uMTkyYS4zMjguMzI4IDAgMDAuMDQ1LS4yODYuMzkuMzkgMCAwMC0uMTExLS4xOS4zOTYuMzk2IDAgMDAtLjE5OC0uMDk4LjU3LjU3IDAgMDAtLjI2LjAxNmwtLjQ5Ny4xMzQuMi43NDZ6bS0uMzA5LTEuMTQ4bC40NC0uMTE5YS41NDMuNTQzIDAgMDAuMjA2LS4xLjM3NC4zNzQgMCAwMC4xMTgtLjE2NC4zMzMuMzMzIDAgMDAuMDA1LS4yMDYuMzIuMzIgMCAwMC0uMTc1LS4yMTcuNDY1LjQ2NSAwIDAwLS4zMy0uMDFsLS40NS4xMi4xODYuNjk2em0yLjQgMS4xMDZsLS43NTYtMi44MDkgMS44OTMtLjUxLjEzMi40OS0xLjMuMzUuMTguNjcgMS4yMDItLjMyNC4xMzIuNDktMS4yMDEuMzIzLjE4LjY3IDEuMzA0LS4zNS4xMzIuNDktMS44OTguNTF6bTEuNjM0LTIuOTI3bC0uMTMyLS40OSAyLjMwNy0uNjIuMTMyLjQ5LS44Ni4yMy42MjQgMi4zMi0uNTg3LjE1OC0uNjI0LTIuMzItLjg2LjIzMnptMy40NTIgMS41NTlsLS42MzYuMTcxLjIxMy0zLjA3Ljc2Ni0uMjA2IDEuNzI0IDIuNTQ5LS42MzYuMTctLjM4LS41ODQtMS4wMTUuMjczLS4wMzYuNjk3em0uMTQ0LTIuMzYzbC42My45Ny0uNzEyLjE5Mi4wNi0xLjE1Ni4wMjItLjAwNnptLTUuNTktNi40NzZjLjUzMi0uMTQzLjg1NC0uNjcuNzE4LTEuMTc3LS4xMzYtLjUwNi0uNjgtLjgtMS4yMTMtLjY1Ny0uNTMzLjE0My0uODU1LjY3LS43MTggMS4xNzcuMTM2LjUwNy42NzkuOCAxLjIxMi42NTd6IiBmaWxsPSIjRUU0QjRCIi8+PC9zdmc+") no-repeat;background-size:100%}.is-dark body{color:#ededed;background:#1c1c1c}.is-dark .homepage section:first-child{background-image:url(/assets/home-bg-dark.jpg);background-color:transparent}.is-dark .navbar{background:#292929}.is-dark .navbar .links .dropdown-title{color:#ededed}.is-dark .navbar .links .nav-dropdown{background:#363636}.is-dark .navbar .links .nav-dropdown .dropdown-item h4{border-color:#434343}.is-dark .navbar .links .nav-link,.is-dark .navbar .site-name{color:#ededed}.is-dark .navbar .search-box input{background-color:hsla(0,0%,100%,.08);color:#eaeaea}.is-dark .sidebar{background:#212121;border-color:transparent}.is-dark .sidebar-link,.is-dark .sidebar .mobile-dropdown-title{color:#ededed}.is-dark .custom-block.tip{background:hsla(0,0%,100%,.08)}.is-dark .custom-block.warning{color:gold}.is-dark .custom-block.warning .custom-block-title{color:#ff0}.is-dark table td,.is-dark table th{border-color:#363636}.is-dark table tr:nth-child(2n){background:hsla(0,0%,100%,.08)}.is-dark h2{border-color:#434343}.is-dark code{color:#ededed;background-color:hsla(0,0%,100%,.08)}.is-dark .page-nav .inner{border-color:#434343}.is-dark .page-edit .last-updated .prefix{color:#ededed}.is-dark .page-edit .last-updated .time{color:#bebebe}.is-dark .content__default>footer{border-color:#434343;color:#eaeaea}.is-dark kbd{background-color:#282c34;border-color:#444;color:#eaeaea}.changelog h2{border:none;font-size:2rem;font-weight:700}.changelog .content__default ul:not(.social-share-list){margin-left:1rem}.changelog .sidebar .sidebar-sub-headers{padding-left:2.5rem;position:relative}.changelog .sidebar .sidebar-sub-headers:before{content:"";position:absolute;width:2px;height:100%;background:$$borderColor}.is-dark .changelog .sidebar .sidebar-sub-headers:before{background:#444}.changelog .sidebar .sidebar-sub-headers li a{padding-left:1rem}.tooltip{display:block!important;z-index:10000}.tooltip .tooltip-inner{background:#000;color:#fff;border-radius:6px;padding:5px 10px 4px}.tooltip .tooltip-arrow{width:0;height:0;border-style:solid;position:absolute;margin:5px;border-color:#000;z-index:1}.tooltip[x-placement^=top]{margin-bottom:5px}.tooltip[x-placement^=top] .tooltip-arrow{border-width:5px 5px 0;border-left-color:transparent!important;border-right-color:transparent!important;border-bottom-color:transparent!important;bottom:-5px;left:calc(50% - 5px);margin-top:0;margin-bottom:0}.tooltip[x-placement^=bottom]{margin-top:5px}.tooltip[x-placement^=bottom] .tooltip-arrow{border-width:0 5px 5px;border-left-color:transparent!important;border-right-color:transparent!important;border-top-color:transparent!important;top:-5px;left:calc(50% - 5px);margin-top:0;margin-bottom:0}.tooltip[x-placement^=right]{margin-left:5px}.tooltip[x-placement^=right] .tooltip-arrow{border-width:5px 5px 5px 0;border-left-color:transparent!important;border-top-color:transparent!important;border-bottom-color:transparent!important;left:-5px;top:calc(50% - 5px);margin-left:0;margin-right:0}.tooltip[x-placement^=left]{margin-right:5px}.tooltip[x-placement^=left] .tooltip-arrow{border-width:5px 0 5px 5px;border-top-color:transparent!important;border-right-color:transparent!important;border-bottom-color:transparent!important;right:-5px;top:calc(50% - 5px);margin-left:0;margin-right:0}.tooltip.popover{$color:#f9f9f9}.tooltip.popover .popover-inner{background:$color;color:#000;padding:24px;border-radius:5px;box-shadow:0 5px 30px rgba(0,0,0,.1)}.tooltip.popover .popover-arrow{border-color:$color}.tooltip[aria-hidden=true]{visibility:hidden;opacity:0;transition:opacity .15s,visibility .15s}.tooltip[aria-hidden=false]{visibility:visible;opacity:1;transition:opacity .15s}#nprogress{pointer-events:none}#nprogress .bar{background:#1bb89b;position:fixed;z-index:1031;top:0;left:0;width:100%;height:2px}#nprogress .peg{display:block;position:absolute;right:0;width:100px;height:100%;box-shadow:0 0 10px #1bb89b,0 0 5px #1bb89b;opacity:1;transform:rotate(3deg) translateY(-4px)}#nprogress .spinner{display:block;position:fixed;z-index:1031;top:15px;right:15px}#nprogress .spinner-icon{width:18px;height:18px;box-sizing:border-box;border-color:#1bb89b transparent transparent #1bb89b;border-style:solid;border-width:2px;border-radius:50%;animation:nprogress-spinner .4s linear infinite}.nprogress-custom-parent{overflow:hidden;position:relative}.nprogress-custom-parent #nprogress .bar,.nprogress-custom-parent #nprogress .spinner{position:absolute}@keyframes nprogress-spinner{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}html{scroll-behavior:smooth}.social-share{position:relative;box-sizing:border-box}.social-share-list{list-style:none;padding:0;margin:0;line-height:1}.social-share-network{position:relative;display:inline-block;vertical-align:middle}.social-share-trigger{color:#6a8bad}.social-share-btn{position:relative;width:56px;height:56px;padding:0;border-radius:50%;font-size:32px;font-family:inherit;text-align:center;background:none;border:none;box-shadow:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);transition:all .3s ease-out}.social-share-btn:not(.social-share-trigger){color:#545e66}.social-share-btn:not(.social-share-trigger):hover{background-color:hsla(0,0%,73.7%,.15)}.social-share-icon-svg svg{width:1em!important;height:1em!important;fill:currentColor!important;vertical-align:-.15em!important;overflow:hidden!important}.social-share-icon-img{position:absolute;top:50%;left:50%;display:block;width:1em;height:1em;margin:-.5em 0 0 -.5em;background-repeat:no-repeat;background-position:50%;background-size:contain}.social-share-global{position:fixed;right:0;bottom:50%;z-index:99999;background-color:#fff;border:1px solid #efefef;border-right:none;border-radius:8px 0 0 8px;transform:translateY(50%);transition:all .3s ease-out;box-shadow:-2px 1px 6px rgba(0,0,0,.08)}.social-share-global .social-share-network{display:block}.social-share-global .social-share-btn{width:60px;height:60px;border-radius:5px;font-size:36px}.social-share-overlay{position:fixed;top:0;left:0;right:0;bottom:0;z-index:99999;display:flex;justify-content:center;align-items:center;background-color:rgba(0,0,0,.5);transition:all .3s ease-out;opacity:0}.social-share-overlay.show{opacity:1}.social-share-qrcode{display:block;border-radius:4px;overflow:hidden;box-shadow:0 0 4px rgba(0,0,0,.08)}@media screen and (max-width:719px){.social-share-btn{width:40px;height:40px;font-size:28px}.social-share-global{bottom:15%;border-radius:5px 0 0 5px;transform:translate(0);box-shadow:-1px 1px 3px rgba(0,0,0,.03)}.social-share-global .social-share-btn{width:40px;height:40px;font-size:28px;border-radius:3px}}.icon.outbound{color:#aaa;display:inline-block;vertical-align:middle;position:relative;top:-1px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.home{padding:3.6rem 2rem 0;max-width:960px;margin:0 auto;display:block}.home .hero{text-align:center}.home .hero img{max-width:100%;max-height:280px;display:block;margin:3rem auto 1.5rem}.home .hero h1{font-size:3rem}.home .hero .action,.home .hero .description,.home .hero h1{margin:1.8rem auto}.home .hero .description{max-width:35rem;font-size:1.6rem;line-height:1.3;color:#6a8bad}.home .hero .action-button{display:inline-block;font-size:1.2rem;color:#fff;background-color:#1bb89b;padding:.8rem 1.6rem;border-radius:4px;transition:background-color .1s ease;box-sizing:border-box;border-bottom:1px solid #18a68b}.home .hero .action-button:hover{background-color:#1fd2b1}.home .features{border-top:1px solid #eaecef;padding:1.2rem 0;margin-top:2.5rem;display:flex;flex-wrap:wrap;align-items:flex-start;align-content:stretch;justify-content:space-between}.home .feature{flex-grow:1;flex-basis:30%;max-width:30%}.home .feature h2{font-size:1.4rem;font-weight:500;border-bottom:none;padding-bottom:0;color:#3a5169}.home .feature p{color:#4e6e8e}.home .footer{padding:2.5rem;border-top:1px solid #eaecef;text-align:center;color:#4e6e8e}@media (max-width:719px){.home .features{flex-direction:column}.home .feature{max-width:100%;padding:0 2.5rem}}@media (max-width:419px){.home{padding-left:1.5rem;padding-right:1.5rem}.home .hero img{max-height:210px;margin:2rem auto 1.2rem}.home .hero h1{font-size:2rem}.home .hero .action,.home .hero .description,.home .hero h1{margin:1.2rem auto}.home .hero .description{font-size:1.2rem}.home .hero .action-button{font-size:1rem;padding:.6rem 1.2rem}.home .feature h2{font-size:1.25rem}}.search-box{display:inline-block;position:relative;margin-right:1rem}.search-box input{cursor:text;width:10rem;height:2rem;color:#4e6e8e;display:inline-block;border:1px solid #cfd4db;border-radius:2rem;font-size:.9rem;line-height:2rem;padding:0 .5rem 0 2rem;outline:none;transition:all .2s ease;background:#fff url(/assets/img/search.83621669.svg) .6rem .5rem no-repeat;background-size:1rem}.search-box input:focus{cursor:auto;border-color:#1bb89b}.search-box .suggestions{background:#fff;width:20rem;position:absolute;top:2rem;border:1px solid #cfd4db;border-radius:6px;padding:.4rem;list-style-type:none}.search-box .suggestions.align-right{right:0}.search-box .suggestion{line-height:1.4;padding:.4rem .6rem;border-radius:4px;cursor:pointer}.search-box .suggestion a{white-space:normal;color:#5d82a6}.search-box .suggestion a .page-title{font-weight:600}.search-box .suggestion a .header{font-size:.9em;margin-left:.25em}.search-box .suggestion.focused{background-color:#f3f4f5}.search-box .suggestion.focused a{color:#1bb89b}@media (max-width:959px){.search-box input{cursor:pointer;width:0;border-color:transparent;position:relative}.search-box input:focus{cursor:text;left:0;width:10rem}}@media (-ms-high-contrast:none){.search-box input{height:2rem}}@media (max-width:959px) and (min-width:719px){.search-box .suggestions{left:0}}@media (max-width:719px){.search-box{margin-right:0}.search-box input{left:1rem}.search-box .suggestions{right:0}}@media (max-width:419px){.search-box .suggestions{width:calc(100vw - 4rem)}.search-box input:focus{width:8rem}}.sidebar-button{cursor:pointer;display:none;width:1.25rem;height:1.25rem;position:absolute;padding:.6rem;top:.6rem;left:1rem}.sidebar-button .icon{display:block;width:1.25rem;height:1.25rem}@media (max-width:719px){.sidebar-button{display:block}}.dropdown-enter,.dropdown-leave-to{height:0!important}.dropdown-wrapper{cursor:pointer}.dropdown-wrapper .dropdown-title,.dropdown-wrapper .mobile-dropdown-title{display:block;font-size:.9rem;font-family:inherit;cursor:inherit;padding:inherit;line-height:1.4rem;background:transparent;border:none;font-weight:500;color:#2c3e50}.dropdown-wrapper .dropdown-title:hover,.dropdown-wrapper .mobile-dropdown-title:hover{border-color:transparent}.dropdown-wrapper .dropdown-title .arrow,.dropdown-wrapper .mobile-dropdown-title .arrow{vertical-align:middle;margin-top:-1px;margin-left:.4rem}.dropdown-wrapper .mobile-dropdown-title{display:none;font-weight:600}.dropdown-wrapper .mobile-dropdown-title font-size inherit:hover{color:#1bb89b}.dropdown-wrapper .nav-dropdown .dropdown-item{color:inherit;line-height:1.7rem}.dropdown-wrapper .nav-dropdown .dropdown-item h4{margin:.45rem 0 0;border-top:1px solid #eee;padding:1rem 1.5rem .45rem 1.25rem}.dropdown-wrapper .nav-dropdown .dropdown-item .dropdown-subitem-wrapper{padding:0;list-style:none}.dropdown-wrapper .nav-dropdown .dropdown-item .dropdown-subitem-wrapper .dropdown-subitem{font-size:.9em}.dropdown-wrapper .nav-dropdown .dropdown-item a{display:block;line-height:1.7rem;position:relative;border-bottom:none;font-weight:400;margin-bottom:0;padding:0 1.5rem 0 1.25rem}.dropdown-wrapper .nav-dropdown .dropdown-item a.router-link-active,.dropdown-wrapper .nav-dropdown .dropdown-item a:hover{color:#1bb89b}.dropdown-wrapper .nav-dropdown .dropdown-item a.router-link-active:after{content:"";width:0;height:0;border-left:5px solid #1bb89b;border-top:3px solid transparent;border-bottom:3px solid transparent;position:absolute;top:calc(50% - 2px);left:9px}.dropdown-wrapper .nav-dropdown .dropdown-item:first-child h4{margin-top:0;padding-top:0;border-top:0}@media (max-width:719px){.dropdown-wrapper.open .dropdown-title{margin-bottom:.5rem}.dropdown-wrapper .dropdown-title{display:none}.dropdown-wrapper .mobile-dropdown-title{display:block}.dropdown-wrapper .nav-dropdown{transition:height .1s ease-out;overflow:hidden}.dropdown-wrapper .nav-dropdown .dropdown-item h4{border-top:0;margin-top:0;padding-top:0}.dropdown-wrapper .nav-dropdown .dropdown-item>a,.dropdown-wrapper .nav-dropdown .dropdown-item h4{font-size:15px;line-height:2rem}.dropdown-wrapper .nav-dropdown .dropdown-item .dropdown-subitem{font-size:14px;padding-left:1rem}}@media (min-width:719px){.dropdown-wrapper{height:1.8rem}.dropdown-wrapper.open .nav-dropdown,.dropdown-wrapper:hover .nav-dropdown{display:block!important}.dropdown-wrapper .nav-dropdown{display:none;height:auto!important;box-sizing:border-box;max-height:calc(100vh - 2.7rem);overflow-y:auto;position:absolute;top:100%;right:0;background-color:#fff;padding:.6rem 0;border:1px solid;border-color:#ddd #ddd #ccc;text-align:left;border-radius:.25rem;white-space:nowrap;margin:0}}.nav-links{display:inline-block}.nav-links a{line-height:1.4rem;color:inherit}.nav-links a.router-link-active,.nav-links a:hover{color:#1bb89b}.nav-links .nav-item{position:relative;display:inline-block;margin-left:1.5rem;line-height:2rem}.nav-links .nav-item:first-child{margin-left:0}.nav-links .repo-link{margin-left:1.5rem}@media (max-width:719px){.nav-links .nav-item,.nav-links .repo-link{margin-left:0}}@media (min-width:719px){.nav-links a.router-link-active,.nav-links a:hover{color:#2c3e50}.nav-item>a:not(.external).router-link-active,.nav-item>a:not(.external):hover{margin-bottom:-2px;border-bottom:2px solid #1ecdad}}.navbar{padding:.7rem 1.5rem;line-height:2.2rem}.navbar a,.navbar img,.navbar span{display:inline-block}.navbar .logo{height:2.2rem;min-width:2.2rem;margin-right:.8rem;vertical-align:top}.navbar .site-name{font-size:1.3rem;font-weight:600;color:#2c3e50;position:relative}.navbar .links{padding-left:1.5rem;box-sizing:border-box;background-color:#fff;white-space:nowrap;font-size:.9rem;position:absolute;right:1.5rem;top:.7rem;display:flex}.navbar .links .search-box{flex:0 0 auto;vertical-align:top}@media (max-width:719px){.navbar{padding-left:4rem}.navbar .can-hide{display:none}.navbar .links{padding-left:1.5rem}.navbar .site-name{width:calc(100vw - 9.4rem);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}}.page-edit{max-width:740px;margin:0 auto;padding:2rem 2.5rem}@media (max-width:959px){.page-edit{padding:2rem}}@media (max-width:419px){.page-edit{padding:1.5rem}}.page-edit{padding-top:1rem;padding-bottom:1rem;overflow:auto}.page-edit .edit-link{display:inline-block}.page-edit .edit-link a{color:#4e6e8e;margin-right:.25rem}.page-edit .last-updated{float:right;font-size:.9em}.page-edit .last-updated .prefix{font-weight:500;color:#4e6e8e}.page-edit .last-updated .time{font-weight:400;color:#767676}@media (max-width:719px){.page-edit .edit-link{margin-bottom:.5rem}.page-edit .last-updated{font-size:.8em;float:none;text-align:left}}.page-nav{max-width:740px;margin:0 auto;padding:2rem 2.5rem}@media (max-width:959px){.page-nav{padding:2rem}}@media (max-width:419px){.page-nav{padding:1.5rem}}.page-nav{padding-top:1rem;padding-bottom:0}.page-nav .inner{min-height:2rem;margin-top:0;border-top:1px solid #eaecef;padding-top:1rem;overflow:auto}.page-nav .next{float:right}.page{padding-bottom:2rem;display:block}.sidebar-group .sidebar-group{padding-left:.5em}.sidebar-group:not(.collapsable) .sidebar-heading:not(.clickable){cursor:auto;color:inherit}.sidebar-group.is-sub-group{padding-left:0}.sidebar-group.is-sub-group>.sidebar-heading{font-size:.95em;line-height:1.4;font-weight:400;padding-left:2rem}.sidebar-group.is-sub-group>.sidebar-heading:not(.clickable){opacity:.5}.sidebar-group.is-sub-group>.sidebar-group-items{padding-left:1rem}.sidebar-group.is-sub-group>.sidebar-group-items>li>.sidebar-link{font-size:.95em;border-left:none}.sidebar-group.depth-2>.sidebar-heading{border-left:none}.sidebar-heading{color:#2c3e50;transition:color .15s ease;cursor:pointer;font-size:1.1em;font-weight:700;padding:.35rem 1.5rem .35rem 1.25rem;width:100%;box-sizing:border-box;margin:0;border-left:.25rem solid transparent}.sidebar-heading.open,.sidebar-heading:hover{color:inherit}.sidebar-heading .arrow{position:relative;top:-.12em;left:.5em}.sidebar-heading.clickable.active{font-weight:600;color:#1bb89b;border-left-color:#1bb89b}.sidebar-heading.clickable:hover{color:#1bb89b}.sidebar-group-items{transition:height .1s ease-out;font-size:.95em;overflow:hidden}.sidebar .sidebar-sub-headers{padding-left:1rem;font-size:.95em}a.sidebar-link{font-size:1em;font-weight:400;display:inline-block;color:#2c3e50;border-left:.25rem solid transparent;padding:.35rem 1rem .35rem 1.25rem;line-height:1.4;width:100%;box-sizing:border-box}a.sidebar-link:hover{color:#1bb89b}a.sidebar-link.active{font-weight:600;color:#1bb89b;border-left-color:#1bb89b}.sidebar-group a.sidebar-link{padding-left:2rem}.sidebar-sub-headers a.sidebar-link{padding-top:.25rem;padding-bottom:.25rem;border-left:none}.sidebar-sub-headers a.sidebar-link.active{font-weight:500}.sidebar ul{padding:0;margin:0;list-style-type:none}.sidebar a{display:inline-block}.sidebar .nav-links{display:none;border-bottom:1px solid #eaecef;padding:.5rem 0 .75rem}.sidebar .nav-links a{font-weight:600}.sidebar .nav-links .nav-item,.sidebar .nav-links .repo-link{display:block;line-height:1.25rem;font-size:1.1em;padding:.5rem 0 .5rem 1.5rem}.sidebar>.sidebar-links{padding:1.5rem 0}.sidebar>.sidebar-links>li>a.sidebar-link{font-size:1.1em;line-height:1.7;font-weight:700}.sidebar>.sidebar-links>li:not(:first-child){margin-top:.75rem}@media (max-width:719px){.sidebar .nav-links{display:block}.sidebar .nav-links .dropdown-wrapper .nav-dropdown .dropdown-item a.router-link-active:after{top:calc(1rem - 2px)}.sidebar>.sidebar-links{padding:1rem 0}}.content__default[data-v-56d60325]{max-width:1200px}[data-v-56d60325] .page-edit{display:none}.ad-wrapper{max-width:740px;margin:0 auto}[data-v-93cd5b66] .page-edit{display:none}.content__default[data-v-71da9cb2]{max-width:900px}[data-v-71da9cb2] .page-edit{display:none}ins[data-v-71da9cb2]{margin:2rem 0}.feature-links[data-v-71da9cb2]{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));grid-gap:2.5rem 1.5rem;list-style:none;padding:0;margin:0}.feature-links li[data-v-71da9cb2]{flex:1 1 200px}.feature-links li a[data-v-71da9cb2]{color:currentColor;display:block;text-align:center;transition:color .3s}.feature-links li a .image[data-v-71da9cb2]{color:#eee;height:200px;overflow:hidden;border-radius:6px;box-shadow:0 .2rem .6rem rgba(0,0,0,.1);position:relative}.is-dark .feature-links li a .image[data-v-71da9cb2]{color:#292929}.feature-links li a .image iconify-icon[data-v-71da9cb2]{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:0}.feature-links li a .image img[data-v-71da9cb2]{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:top left;object-position:top left;transition:transform .3s ease-out;position:relative;z-index:1}.feature-links li a span[data-v-71da9cb2]{display:block;margin-top:5px;font-size:1.2em;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;text-align:center;text-transform:capitalize}.feature-links li a[data-v-71da9cb2]:hover{color:#1bb89b;text-decoration:none}.feature-links li a:hover img[data-v-71da9cb2]{transform:scale(1.06)}.content__default[data-v-41cc6025]{margin-bottom:-2.5rem}.ad-wrapper[data-v-41cc6025]{max-width:740px;margin:0 auto}.grid_2WlwxHu5 p{display:grid;gap:1rem;align-items:center;justify-content:center;grid-template-areas:"a" "b" "c" "d" "e"}.grid_2WlwxHu5 img:first-child{grid-area:a}.grid_2WlwxHu5 img:nth-child(2){grid-area:b}.grid_2WlwxHu5 img:nth-child(3){grid-area:c}.grid_2WlwxHu5 img:nth-child(4){grid-area:d}.grid_2WlwxHu5 img:nth-child(5){grid-area:e}@media (min-width:640px){.grid_2WlwxHu5 p{grid-template-areas:"a b" "a c" "d e"}}.a-button[data-v-4ef368cc]{background:#545e66;border:0;border-radius:.2rem;box-shadow:0 4px #2c3e50;color:#fff;cursor:pointer;display:inline-block;font-size:1rem;padding:.6rem 1.8rem;transition:transform .2s,box-shadow .2s}.a-button[data-v-4ef368cc]:active{transform:translateY(4px);box-shadow:none}.a-button[data-v-4ef368cc]:hover{text-decoration:none!important}a[data-v-7233fed5]{display:flex;align-items:center;color:#2c3e50;transition:color .3s;margin-right:.5rem}.is-dark a[data-v-7233fed5]{color:#eaeaea}a[data-v-7233fed5]:hover{color:#1bb89b;text-decoration:none!important}a img[data-v-7233fed5]{width:2rem;height:2rem;margin-right:.25rem}button[data-v-00e9533b]{width:24px;height:24px;padding:12px;box-sizing:unset;background:#eee;border:none;border-radius:50%;color:#2c3e50;cursor:pointer;transition:all .2s}button[data-v-00e9533b]:hover{transform:scale(1.15)}button.active[data-v-00e9533b]{transform:scale(1.15);background:#1bb89b;color:#fff}.is-dark button[data-v-00e9533b]:not(.active){background:#292929;color:#aaa}.first-created[data-v-08d268a8]{display:flex;align-items:center;gap:4px}.adsbygoogle[data-ad-status=filled][data-v-653796b7]{margin:3rem 0;text-align:center}iconify-icon[data-v-d01ba734]{display:block}span[data-v-1f6ea1c9]{display:inline-flex;align-items:center;vertical-align:middle;margin-left:.25rem}.banner[data-v-2685687c]{margin:2rem auto}.page-edit[data-v-d53989e8]{padding:0}p[data-v-d53989e8]{text-align:right}b[data-v-d53989e8]{font-weight:500}.Vue-Toastification__container{z-index:9999;position:fixed;padding:4px;width:600px;box-sizing:border-box;display:flex;min-height:100%;color:#fff;flex-direction:column;pointer-events:none}@media only screen and (min-width:600px){.Vue-Toastification__container.top-center,.Vue-Toastification__container.top-left,.Vue-Toastification__container.top-right{top:1em}.Vue-Toastification__container.bottom-center,.Vue-Toastification__container.bottom-left,.Vue-Toastification__container.bottom-right{bottom:1em;flex-direction:column-reverse}.Vue-Toastification__container.bottom-left,.Vue-Toastification__container.top-left{left:1em}.Vue-Toastification__container.bottom-left .Vue-Toastification__toast,.Vue-Toastification__container.top-left .Vue-Toastification__toast{margin-right:auto}@supports not (-moz-appearance:none){.Vue-Toastification__container.bottom-left .Vue-Toastification__toast--rtl,.Vue-Toastification__container.top-left .Vue-Toastification__toast--rtl{margin-right:unset;margin-left:auto}}.Vue-Toastification__container.bottom-right,.Vue-Toastification__container.top-right{right:1em}.Vue-Toastification__container.bottom-right .Vue-Toastification__toast,.Vue-Toastification__container.top-right .Vue-Toastification__toast{margin-left:auto}@supports not (-moz-appearance:none){.Vue-Toastification__container.bottom-right .Vue-Toastification__toast--rtl,.Vue-Toastification__container.top-right .Vue-Toastification__toast--rtl{margin-left:unset;margin-right:auto}}.Vue-Toastification__container.bottom-center,.Vue-Toastification__container.top-center{left:50%;margin-left:-300px}.Vue-Toastification__container.bottom-center .Vue-Toastification__toast,.Vue-Toastification__container.top-center .Vue-Toastification__toast{margin-left:auto;margin-right:auto}}@media only screen and (max-width:600px){.Vue-Toastification__container{width:100vw;padding:0;left:0;margin:0}.Vue-Toastification__container .Vue-Toastification__toast{width:100%}.Vue-Toastification__container.top-center,.Vue-Toastification__container.top-left,.Vue-Toastification__container.top-right{top:0}.Vue-Toastification__container.bottom-center,.Vue-Toastification__container.bottom-left,.Vue-Toastification__container.bottom-right{bottom:0;flex-direction:column-reverse}}.Vue-Toastification__toast{display:inline-flex;position:relative;max-height:800px;min-height:64px;box-sizing:border-box;margin-bottom:1rem;padding:22px 24px;border-radius:8px;box-shadow:0 1px 10px 0 rgba(0,0,0,.1),0 2px 15px 0 rgba(0,0,0,.05);justify-content:space-between;font-family:Lato,Helvetica,Roboto,Arial,sans-serif;max-width:600px;min-width:326px;pointer-events:auto;overflow:hidden;transform:translateZ(0);direction:ltr}.Vue-Toastification__toast--rtl{direction:rtl}.Vue-Toastification__toast--default{background-color:#1976d2;color:#fff}.Vue-Toastification__toast--info{background-color:#2196f3;color:#fff}.Vue-Toastification__toast--success{background-color:#4caf50;color:#fff}.Vue-Toastification__toast--error{background-color:#ff5252;color:#fff}.Vue-Toastification__toast--warning{background-color:#ffc107;color:#fff}@media only screen and (max-width:600px){.Vue-Toastification__toast{border-radius:0;margin-bottom:.5rem}}.Vue-Toastification__toast-body{flex:1;line-height:24px;font-size:16px;word-break:break-word;white-space:pre-wrap}.Vue-Toastification__toast-component-body{flex:1}.Vue-Toastification__toast.disable-transition{transition:none!important;animation:none!important}.Vue-Toastification__close-button{font-weight:700;font-size:24px;line-height:24px;background:transparent;outline:none;border:none;padding:0 0 0 10px;cursor:pointer;transition:.3s ease;align-items:center;color:#fff;opacity:.3;transition:visibility 0s,opacity .2s linear}.Vue-Toastification__close-button:focus,.Vue-Toastification__close-button:hover{opacity:1}.Vue-Toastification__toast:not(:hover) .Vue-Toastification__close-button.show-on-hover{opacity:0}.Vue-Toastification__toast--rtl .Vue-Toastification__close-button{padding-left:unset;padding-right:10px}@keyframes scale-x-frames{0%{transform:scaleX(1)}to{transform:scaleX(0)}}.Vue-Toastification__progress-bar{position:absolute;bottom:0;left:0;width:100%;height:5px;z-index:10000;background-color:hsla(0,0%,100%,.7);transform-origin:left;animation:scale-x-frames linear 1 forwards}.Vue-Toastification__toast--rtl .Vue-Toastification__progress-bar{right:0;left:unset;transform-origin:right}.Vue-Toastification__icon{margin:auto 18px auto 0;background:transparent;outline:none;border:none;padding:0;transition:.3s ease;align-items:center;width:20px;height:100%}.Vue-Toastification__toast--rtl .Vue-Toastification__icon{margin:auto 0 auto 18px}@keyframes bounceInRight{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:translate3d(3000px,0,0)}60%{opacity:1;transform:translate3d(-25px,0,0)}75%{transform:translate3d(10px,0,0)}90%{transform:translate3d(-5px,0,0)}to{transform:none}}@keyframes bounceOutRight{40%{opacity:1;transform:translate3d(-20px,0,0)}to{opacity:0;transform:translate3d(1000px,0,0)}}@keyframes bounceInLeft{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:translate3d(-3000px,0,0)}60%{opacity:1;transform:translate3d(25px,0,0)}75%{transform:translate3d(-10px,0,0)}90%{transform:translate3d(5px,0,0)}to{transform:none}}@keyframes bounceOutLeft{20%{opacity:1;transform:translate3d(20px,0,0)}to{opacity:0;transform:translate3d(-2000px,0,0)}}@keyframes bounceInUp{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:translate3d(0,3000px,0)}60%{opacity:1;transform:translate3d(0,-20px,0)}75%{transform:translate3d(0,10px,0)}90%{transform:translate3d(0,-5px,0)}to{transform:translateZ(0)}}@keyframes bounceOutUp{20%{transform:translate3d(0,-10px,0)}40%,45%{opacity:1;transform:translate3d(0,20px,0)}to{opacity:0;transform:translate3d(0,-2000px,0)}}@keyframes bounceInDown{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:translate3d(0,-3000px,0)}60%{opacity:1;transform:translate3d(0,25px,0)}75%{transform:translate3d(0,-10px,0)}90%{transform:translate3d(0,5px,0)}to{transform:none}}@keyframes bounceOutDown{20%{transform:translate3d(0,10px,0)}40%,45%{opacity:1;transform:translate3d(0,-20px,0)}to{opacity:0;transform:translate3d(0,2000px,0)}}.Vue-Toastification__bounce-enter-active.bottom-left,.Vue-Toastification__bounce-enter-active.top-left{animation-name:bounceInLeft}.Vue-Toastification__bounce-enter-active.bottom-right,.Vue-Toastification__bounce-enter-active.top-right{animation-name:bounceInRight}.Vue-Toastification__bounce-enter-active.top-center{animation-name:bounceInDown}.Vue-Toastification__bounce-enter-active.bottom-center{animation-name:bounceInUp}.Vue-Toastification__bounce-leave-active.bottom-left,.Vue-Toastification__bounce-leave-active.top-left{animation-name:bounceOutLeft}.Vue-Toastification__bounce-leave-active.bottom-right,.Vue-Toastification__bounce-leave-active.top-right{animation-name:bounceOutRight}.Vue-Toastification__bounce-leave-active.top-center{animation-name:bounceOutUp}.Vue-Toastification__bounce-leave-active.bottom-center{animation-name:bounceOutDown}.Vue-Toastification__bounce-move{transition-timing-function:ease-in-out;transition-property:all;transition-duration:.4s}@keyframes fadeOutTop{0%{transform:translateY(0);opacity:1}to{transform:translateY(-50px);opacity:0}}@keyframes fadeOutLeft{0%{transform:translateX(0);opacity:1}to{transform:translateX(-50px);opacity:0}}@keyframes fadeOutBottom{0%{transform:translateY(0);opacity:1}to{transform:translateY(50px);opacity:0}}@keyframes fadeOutRight{0%{transform:translateX(0);opacity:1}to{transform:translateX(50px);opacity:0}}@keyframes fadeInLeft{0%{transform:translateX(-50px);opacity:0}to{transform:translateX(0);opacity:1}}@keyframes fadeInRight{0%{transform:translateX(50px);opacity:0}to{transform:translateX(0);opacity:1}}@keyframes fadeInTop{0%{transform:translateY(-50px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes fadeInBottom{0%{transform:translateY(50px);opacity:0}to{transform:translateY(0);opacity:1}}.Vue-Toastification__fade-enter-active.bottom-left,.Vue-Toastification__fade-enter-active.top-left{animation-name:fadeInLeft}.Vue-Toastification__fade-enter-active.bottom-right,.Vue-Toastification__fade-enter-active.top-right{animation-name:fadeInRight}.Vue-Toastification__fade-enter-active.top-center{animation-name:fadeInTop}.Vue-Toastification__fade-enter-active.bottom-center{animation-name:fadeInBottom}.Vue-Toastification__fade-leave-active.bottom-left,.Vue-Toastification__fade-leave-active.top-left{animation-name:fadeOutLeft}.Vue-Toastification__fade-leave-active.bottom-right,.Vue-Toastification__fade-leave-active.top-right{animation-name:fadeOutRight}.Vue-Toastification__fade-leave-active.top-center{animation-name:fadeOutTop}.Vue-Toastification__fade-leave-active.bottom-center{animation-name:fadeOutBottom}.Vue-Toastification__fade-move{transition-timing-function:ease-in-out;transition-property:all;transition-duration:.4s}@keyframes slideInBlurredLeft{0%{transform:translateX(-1000px) scaleX(2.5) scaleY(.2);transform-origin:100% 50%;filter:blur(40px);opacity:0}to{transform:translateX(0) scaleY(1) scaleX(1);transform-origin:50% 50%;filter:blur(0);opacity:1}}@keyframes slideInBlurredTop{0%{transform:translateY(-1000px) scaleY(2.5) scaleX(.2);transform-origin:50% 0;filter:blur(240px);opacity:0}to{transform:translateY(0) scaleY(1) scaleX(1);transform-origin:50% 50%;filter:blur(0);opacity:1}}@keyframes slideInBlurredRight{0%{transform:translateX(1000px) scaleX(2.5) scaleY(.2);transform-origin:0 50%;filter:blur(40px);opacity:0}to{transform:translateX(0) scaleY(1) scaleX(1);transform-origin:50% 50%;filter:blur(0);opacity:1}}@keyframes slideInBlurredBottom{0%{transform:translateY(1000px) scaleY(2.5) scaleX(.2);transform-origin:50% 100%;filter:blur(240px);opacity:0}to{transform:translateY(0) scaleY(1) scaleX(1);transform-origin:50% 50%;filter:blur(0);opacity:1}}@keyframes slideOutBlurredTop{0%{transform:translateY(0) scaleY(1) scaleX(1);transform-origin:50% 0;filter:blur(0);opacity:1}to{transform:translateY(-1000px) scaleY(2) scaleX(.2);transform-origin:50% 0;filter:blur(240px);opacity:0}}@keyframes slideOutBlurredBottom{0%{transform:translateY(0) scaleY(1) scaleX(1);transform-origin:50% 50%;filter:blur(0);opacity:1}to{transform:translateY(1000px) scaleY(2) scaleX(.2);transform-origin:50% 100%;filter:blur(240px);opacity:0}}@keyframes slideOutBlurredLeft{0%{transform:translateX(0) scaleY(1) scaleX(1);transform-origin:50% 50%;filter:blur(0);opacity:1}to{transform:translateX(-1000px) scaleX(2) scaleY(.2);transform-origin:100% 50%;filter:blur(40px);opacity:0}}@keyframes slideOutBlurredRight{0%{transform:translateX(0) scaleY(1) scaleX(1);transform-origin:50% 50%;filter:blur(0);opacity:1}to{transform:translateX(1000px) scaleX(2) scaleY(.2);transform-origin:0 50%;filter:blur(40px);opacity:0}}.Vue-Toastification__slideBlurred-enter-active.bottom-left,.Vue-Toastification__slideBlurred-enter-active.top-left{animation-name:slideInBlurredLeft}.Vue-Toastification__slideBlurred-enter-active.bottom-right,.Vue-Toastification__slideBlurred-enter-active.top-right{animation-name:slideInBlurredRight}.Vue-Toastification__slideBlurred-enter-active.top-center{animation-name:slideInBlurredTop}.Vue-Toastification__slideBlurred-enter-active.bottom-center{animation-name:slideInBlurredBottom}.Vue-Toastification__slideBlurred-leave-active.bottom-left,.Vue-Toastification__slideBlurred-leave-active.top-left{animation-name:slideOutBlurredLeft}.Vue-Toastification__slideBlurred-leave-active.bottom-right,.Vue-Toastification__slideBlurred-leave-active.top-right{animation-name:slideOutBlurredRight}.Vue-Toastification__slideBlurred-leave-active.top-center{animation-name:slideOutBlurredTop}.Vue-Toastification__slideBlurred-leave-active.bottom-center{animation-name:slideOutBlurredBottom}.Vue-Toastification__slideBlurred-move{transition-timing-function:ease-in-out;transition-property:all;transition-duration:.4s}.Vue-Toastification__toast--default{background:#292929;box-shadow:none;color:#eaeaea}.Vue-Toastification__close-button{color:#eaeaea}.Vue-Toastification__icon{display:none}.site-settings[data-v-39672356]{position:fixed;right:0;bottom:0;width:64px;height:64px}.toggle[data-v-39672356]{width:100%;height:100%;padding:20% 54% 54% 20%;background:none;border:none;border-radius:50%;cursor:pointer;background:#1bb89b;transition:transform .2s;color:#fff}.site-settings:hover .toggle[data-v-39672356],.toggle.active[data-v-39672356]{transform:scale(1.2)}.toggle[data-v-39672356] iconify-icon{margin-top:-16px;margin-left:8px}ul[data-v-39672356]{position:absolute;width:100%;height:100%;top:0;left:0;margin:0;padding:0;list-style:none;display:flex;z-index:-1;transform:scale(0)}ul li[data-v-39672356]{position:absolute}ul li[data-v-39672356]:first-child{transform:translateX(-150%)}ul li[data-v-39672356]:nth-child(2){transform:translate(-100%,-100%)}ul li[data-v-39672356]:last-child{transform:translateY(-150%)}.access[data-v-54c781ee]{margin:2rem 0;text-align:center}.access a[data-v-54c781ee]{display:inline-block;margin:.6rem;transition:transform .2s}.access a[data-v-54c781ee]:hover{transform:scale(1.05)}.blog-links[data-v-bb2a7418]{display:grid;gap:3rem 2rem;list-style:none;padding:0}.blog-links>li[data-v-bb2a7418]{border-radius:1rem;box-shadow:0 .2rem 1rem rgba(0,0,0,.1);display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}.is-dark .blog-links>li[data-v-bb2a7418]{background:#1f1f1f}.blog-links a[data-v-bb2a7418]{display:flex;flex-direction:column;color:currentColor;font-weight:unset}.blog-links a[data-v-bb2a7418]>:not(.blog-image){padding:0 1.5rem}.blog-links a .blog-image[data-v-bb2a7418]{height:250px;overflow:hidden}.blog-links a .blog-image img[data-v-bb2a7418]{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;transition:transform .3s ease-out}.blog-links a .first-created[data-v-bb2a7418]{font-size:.9rem}.blog-links a h2[data-v-bb2a7418]{border-bottom:none;transition:color .3s}.blog-links a[data-v-bb2a7418]:hover{text-decoration:none}.blog-links a:hover img[data-v-bb2a7418]{transform:scale(1.06)}.blog-links a:hover h2[data-v-bb2a7418]{color:#1bb89b}@media (min-width:720px){.blog-links[data-v-bb2a7418]{grid-template-columns:1fr 1fr}}@media (min-width:960px){.blog-links[data-v-bb2a7418]{grid-template-columns:1fr 1fr 1fr}}.blog-meta[data-v-37d0b7b8]{display:flex;flex-wrap:wrap;justify-content:space-between}div[data-v-7e0173ee]{display:flex;align-items:center}div svg[data-v-7e0173ee]{width:1rem;height:1rem}ul[data-v-7e0173ee]{list-style:none;display:flex;gap:.5rem;padding:1rem 1.5rem 1.5rem;font-size:.85rem}ul a[data-v-7e0173ee]{background:#eee;border-radius:.4rem;color:currentColor;font-weight:400;padding:.3rem .4rem}ul a[data-v-7e0173ee]:hover{text-decoration:underline}.is-dark ul a[data-v-7e0173ee]{background:#292929}nav[data-v-7c5b105f]{display:flex;flex-wrap:wrap;justify-content:center;margin:2rem 0}nav a[data-v-7c5b105f]{background:#eee;border-radius:1rem;color:currentColor;margin:.3rem;padding:.6rem;min-width:4rem;text-align:center}nav a.router-link-exact-active[data-v-7c5b105f]{color:#fff;background:#1bb89b}nav a[data-v-7c5b105f]:hover{text-decoration:none!important}.is-dark nav a[data-v-7c5b105f]:not(.router-link-exact-active){background:#292929}@media (min-width:420px){nav a[data-v-7c5b105f]{margin:.5rem;padding:1rem}}section[data-v-a37ba0d0]{margin:0 auto;max-width:740px;padding:2rem 2.5rem}div[data-v-43263439]{margin:.5rem 0}input[data-v-43263439],textarea[data-v-43263439]{outline:none;padding:.5rem 1rem;width:100%;font-size:100%;font-family:inherit;box-sizing:border-box;border-radius:6px;border:1px solid #aaa}input[data-v-43263439]:focus,textarea[data-v-43263439]:focus{border-color:#1bb89b}input.error[data-v-43263439],textarea.error[data-v-43263439]{border-color:red}textarea[data-v-43263439]{height:200px;resize:vertical}ul[data-v-59795e29]{list-style:none;margin:0;padding:0}li[data-v-59795e29]{border:1px solid;border-radius:4px;box-sizing:border-box;text-align:center;margin:12px 4px;padding:0 16px;width:100%}h2[data-v-59795e29]{border:0;margin-bottom:0;padding:0}@media (min-width:720px){ul[data-v-59795e29]{display:flex}}.link-buttons[data-v-fe445868]{margin:0 auto 1.8rem;padding:0;list-style:none;display:flex;justify-content:center}.link-buttons a[data-v-fe445868]{display:block;min-width:64px;padding:12px;margin:0 4px;border-radius:8px;box-sizing:border-box;transition-property:transform,box-shadow;transition-duration:.2s;background:#eee;box-shadow:0 3px #d0d0d0;border-bottom:2px solid #d0d0d0}.link-buttons a[data-v-fe445868]:hover{transform:translateY(3px);box-shadow:none!important}.link-buttons a img[data-v-fe445868]{display:block;margin:auto;width:auto}.link-buttons a[data-social=twitter][data-v-fe445868]{background:#1da1f2;box-shadow:0 3px #2f81be;border-bottom:2px solid #2f81be}.link-buttons a[data-social=twitter][data-v-fe445868]:hover{transform:translateY(3px);box-shadow:none!important}.link-buttons a[data-social=github][data-v-fe445868]{background:#333;box-shadow:0 3px #000;border-bottom:2px solid #000}.link-buttons a[data-social=github][data-v-fe445868]:hover{transform:translateY(3px);box-shadow:none!important}.link-buttons a[data-social=youtube][data-v-fe445868]{background:red;box-shadow:0 3px #900;border-bottom:2px solid #900}.link-buttons a[data-social=youtube][data-v-fe445868]:hover{transform:translateY(3px);box-shadow:none!important}footer[data-v-fe445868]{border-top:1px solid #eaecef;color:#2c3e50;padding:2.5rem;text-align:center}.is-dark footer[data-v-fe445868]{border-color:#444;color:#eaeaea}.home .footer{padding:0}.social[data-v-4bc0a2be]{display:flex;align-items:center;justify-content:flex-end}.is-dark .social[data-v-4bc0a2be] .social-share .social-share-btn{color:#8c8c8c}.social[data-v-4bc0a2be] .social-share .social-share-btn:hover{color:#1bb89b}.social[data-v-4bc0a2be] .social-share .social-share-btn{width:2.5rem;height:2.5rem;font-size:1.5rem}.social[data-v-4bc0a2be] .social-share .social-share-btn>span,section[data-v-568d8f4c]{display:flex;align-items:center;justify-content:center}section[data-v-568d8f4c]{background-image:url(/assets/home-bg.jpg);background-color:#1596f2;background-size:cover;background-attachment:fixed;transition:background .3s;height:100vh;max-height:900px;min-height:500px;box-sizing:border-box;flex-direction:column;position:relative}h1[data-v-568d8f4c]{font-weight:400}button[data-v-568d8f4c]{background:none;border:0;display:block;cursor:pointer;position:relative}button span[data-v-568d8f4c]{display:block;color:#fff;font-size:1.5rem;text-align:center;text-shadow:0 1px 2px #000}button span[data-v-568d8f4c]:first-child{width:150px;height:150px}button span:first-child img[data-v-568d8f4c]{width:100%;height:100%}h1[data-v-568d8f4c]{padding:1rem 2rem;margin:0;color:#fff;text-align:center;text-shadow:0 1px 2px #000;max-width:600px;font-size:3.5rem}.indicator[data-v-568d8f4c]{border:2px solid #fff;border-radius:24px;width:24px;height:36px;position:absolute;bottom:12px}.indicator[data-v-568d8f4c]:before{content:"";position:absolute;width:4px;height:6px;background:#fff;border-radius:2px;top:10%;left:calc(50% - 2px);animation:scroll-down-568d8f4c 1.5s infinite}@media (max-width:640px){h1[data-v-568d8f4c]{font-size:2rem}}@keyframes scroll-down-568d8f4c{0%{opacity:.2;transform:translateY(0)}to{opacity:1;transform:translateY(8px)}}div[data-v-e7a7a3f0]{width:180px;height:200px;flex-shrink:0;overflow:hidden;border-radius:50%}div>iframe[data-v-e7a7a3f0]{border:0;width:180px;height:300px}div[data-v-e7a7a3f0],img[data-v-e7a7a3f0]{margin-right:2rem}.right div[data-v-e7a7a3f0],.right img[data-v-e7a7a3f0]{margin-right:0;margin-left:2rem}@media (max-width:640px){div[data-v-e7a7a3f0],img[data-v-e7a7a3f0]{margin:0!important}}ul[data-v-65ae56a6]{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,1fr);gap:2rem}li[data-v-65ae56a6]{background:rgba(0,0,0,.05);border-radius:1rem;padding:3rem;position:relative}li[data-v-65ae56a6]:before{content:"\201C";display:block;font-family:serif;font-size:16rem;opacity:.1;position:absolute;top:-6rem;left:.5rem}li .content[data-v-65ae56a6]{font-style:italic;margin-bottom:2rem}li figure[data-v-65ae56a6]{margin:0;display:flex;align-items:center}li figure img[data-v-65ae56a6]{border-radius:50%}li figcaption[data-v-65ae56a6]{margin-left:2rem}li figcaption .author[data-v-65ae56a6]{font-size:1.2rem;font-weight:700}.is-dark li[data-v-65ae56a6]{background:#292929}@media (max-width:959px){ul[data-v-65ae56a6]{grid-template-columns:none}}@media (max-width:419px){li[data-v-65ae56a6]{padding:2rem}}section[data-v-06508d2a]{padding:8rem 4rem}section>div[data-v-06508d2a]{align-items:center;display:flex;justify-content:center;margin:auto;max-width:1024px}section article>h2[data-v-06508d2a]{border:0;margin-top:0;font-size:2.5rem}section article>p[data-v-06508d2a]{text-align:justify;max-width:640px}section article>footer[data-v-06508d2a]{text-align:right}section article>footer>a[data-v-06508d2a]{display:inline-block;font-size:1rem;padding:.4rem 1.5rem}section article>footer>a[data-v-06508d2a]:not(:first-child){margin-left:8%}section.right>div>[data-v-06508d2a]:first-child{order:1}section.right article>footer[data-v-06508d2a]{text-align:left}section.right article>footer>a[data-v-06508d2a]:not(:first-child){margin-right:8%}section.center footer[data-v-06508d2a],section.center h2[data-v-06508d2a]{text-align:center}section.is-dark[data-v-06508d2a]{background:rgba(0,0,0,.05)}@media (max-width:640px){section[data-v-06508d2a]{padding:4rem 2rem}section>div[data-v-06508d2a]{flex-direction:column}section>div article>footer[data-v-06508d2a],section>div article>h2[data-v-06508d2a]{text-align:center}section.right>div [data-v-06508d2a]:first-child{order:unset}section.right article>footer[data-v-06508d2a],section.right article>h2[data-v-06508d2a]{text-align:center}}ul[data-v-145d0661]{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin:0 0 1rem;padding:0}li[data-v-145d0661]{background:#fff;border-radius:.75rem;box-shadow:0 .2rem 1rem rgba(0,0,0,.1);overflow:hidden}li:hover img[data-v-145d0661]{transform:scale(1.4)}.is-dark li[data-v-145d0661]{background:#292929}span[data-v-145d0661]{display:block;overflow:hidden}span[data-v-145d0661]:last-child{color:#2c3e50;padding:.5rem 1rem;text-align:center}.is-dark span[data-v-145d0661]:last-child{color:#eaeaea}img[data-v-145d0661]{display:block;transform:scale(1.35);transition:transform .3s ease-out}@media (max-width:959px){ul[data-v-145d0661]{grid-template-columns:repeat(2,1fr)}}@media (max-width:719px){ul[data-v-145d0661]{grid-template-columns:none}}.badge[data-v-15b7b770]{display:inline-block;font-size:14px;height:18px;line-height:18px;border-radius:3px;padding:0 6px;color:#fff}.badge.green[data-v-15b7b770],.badge.tip[data-v-15b7b770],.badge[data-v-15b7b770]{background-color:#42b983}.badge.error[data-v-15b7b770]{background-color:#da5961}.badge.warn[data-v-15b7b770],.badge.warning[data-v-15b7b770],.badge.yellow[data-v-15b7b770]{background-color:#e7c000}.badge+.badge[data-v-15b7b770]{margin-left:5px}.theme-code-block[data-v-759a7d02]{display:none}.theme-code-block__active[data-v-759a7d02]{display:block}.theme-code-block>pre[data-v-759a7d02]{background-color:orange}.theme-code-group__nav[data-v-deefee04]{margin-bottom:-35px;background-color:#282c34;padding-bottom:22px;border-top-left-radius:6px;border-top-right-radius:6px;padding-left:10px;padding-top:10px}.theme-code-group__ul[data-v-deefee04]{margin:auto 0;padding-left:0;display:inline-flex;list-style:none}.theme-code-group__nav-tab[data-v-deefee04]{border:0;padding:5px;cursor:pointer;background-color:transparent;font-size:.85em;line-height:1.4;color:hsla(0,0%,100%,.9);font-weight:600}.theme-code-group__nav-tab-active[data-v-deefee04]{border-bottom:1px solid #42b983}.pre-blank[data-v-deefee04]{color:#42b983} \ No newline at end of file +code[class*=language-],pre[class*=language-]{color:#ccc;background:none;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#2d2d2d}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.block-comment,.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#999}.token.punctuation{color:#ccc}.token.attr-name,.token.deleted,.token.namespace,.token.tag{color:#e2777a}.token.function-name{color:#6196cc}.token.boolean,.token.function,.token.number{color:#f08d49}.token.class-name,.token.constant,.token.property,.token.symbol{color:#f8c555}.token.atrule,.token.builtin,.token.important,.token.keyword,.token.selector{color:#cc99cd}.token.attr-value,.token.char,.token.regex,.token.string,.token.variable{color:#7ec699}.token.entity,.token.operator,.token.url{color:#67cdcc}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}.token.inserted{color:green}.theme-default-content code{color:#476582;padding:.25rem .5rem;margin:0;font-size:.85em;background-color:rgba(27,31,35,.05);border-radius:3px}.theme-default-content code .token.deleted{color:#ec5975}.theme-default-content code .token.inserted{color:#1bb89b}.theme-default-content pre,.theme-default-content pre[class*=language-]{line-height:1.4;padding:1.25rem 1.5rem;margin:.85rem 0;background-color:#282c34;border-radius:6px;overflow:auto}.theme-default-content pre[class*=language-] code,.theme-default-content pre code{color:#fff;padding:0;background-color:transparent;border-radius:0}div[class*=language-]{position:relative;background-color:#282c34;border-radius:6px}div[class*=language-] .highlight-lines{-webkit-user-select:none;user-select:none;padding-top:1.3rem;position:absolute;top:0;left:0;width:100%;line-height:1.4}div[class*=language-] .highlight-lines .highlighted{background-color:rgba(0,0,0,.66)}div[class*=language-] pre,div[class*=language-] pre[class*=language-]{background:transparent;position:relative;z-index:1}div[class*=language-]:before{position:absolute;z-index:3;top:.8em;right:1em;font-size:.75rem;color:hsla(0,0%,100%,.4)}div[class*=language-]:not(.line-numbers-mode) .line-numbers-wrapper{display:none}div[class*=language-].line-numbers-mode .highlight-lines .highlighted{position:relative}div[class*=language-].line-numbers-mode .highlight-lines .highlighted:before{content:" ";position:absolute;z-index:3;left:0;top:0;display:block;width:3.5rem;height:100%;background-color:rgba(0,0,0,.66)}div[class*=language-].line-numbers-mode pre{padding-left:4.5rem;vertical-align:middle}div[class*=language-].line-numbers-mode .line-numbers-wrapper{position:absolute;top:0;width:3.5rem;text-align:center;color:hsla(0,0%,100%,.3);padding:1.25rem 0;line-height:1.4}div[class*=language-].line-numbers-mode .line-numbers-wrapper br{-webkit-user-select:none;user-select:none}div[class*=language-].line-numbers-mode .line-numbers-wrapper .line-number{position:relative;z-index:4;-webkit-user-select:none;user-select:none;font-size:.85em}div[class*=language-].line-numbers-mode:after{content:"";position:absolute;z-index:2;top:0;left:0;width:3.5rem;height:100%;border-radius:6px 0 0 6px;border-right:1px solid rgba(0,0,0,.66);background-color:#282c34}div[class~=language-js]:before{content:"js"}div[class~=language-ts]:before{content:"ts"}div[class~=language-html]:before{content:"html"}div[class~=language-md]:before{content:"md"}div[class~=language-vue]:before{content:"vue"}div[class~=language-css]:before{content:"css"}div[class~=language-sass]:before{content:"sass"}div[class~=language-scss]:before{content:"scss"}div[class~=language-less]:before{content:"less"}div[class~=language-stylus]:before{content:"stylus"}div[class~=language-go]:before{content:"go"}div[class~=language-java]:before{content:"java"}div[class~=language-c]:before{content:"c"}div[class~=language-sh]:before{content:"sh"}div[class~=language-yaml]:before{content:"yaml"}div[class~=language-py]:before{content:"py"}div[class~=language-docker]:before{content:"docker"}div[class~=language-dockerfile]:before{content:"dockerfile"}div[class~=language-makefile]:before{content:"makefile"}div[class~=language-javascript]:before{content:"js"}div[class~=language-typescript]:before{content:"ts"}div[class~=language-markup]:before{content:"html"}div[class~=language-markdown]:before{content:"md"}div[class~=language-json]:before{content:"json"}div[class~=language-ruby]:before{content:"rb"}div[class~=language-python]:before{content:"py"}div[class~=language-bash]:before{content:"sh"}div[class~=language-php]:before{content:"php"}.custom-block .custom-block-title{font-weight:600;margin-bottom:-.4rem}.custom-block.danger,.custom-block.tip,.custom-block.warning{padding:.1rem 1.5rem;border-left-width:.5rem;border-left-style:solid;margin:1rem 0}.custom-block.tip{background-color:#f3f5f7;border-color:#42b983}.custom-block.warning{background-color:rgba(255,229,100,.3);border-color:#e7c000;color:#6b5900}.custom-block.warning .custom-block-title{color:#b29400}.custom-block.warning a{color:#2c3e50}.custom-block.danger{background-color:#ffe6e6;border-color:#c00;color:#4d0000}.custom-block.danger .custom-block-title{color:#900}.custom-block.danger a{color:#2c3e50}.custom-block.details{display:block;position:relative;border-radius:2px;margin:1.6em 0;padding:1.6em;background-color:#eee}.custom-block.details h4{margin-top:0}.custom-block.details figure:last-child,.custom-block.details p:last-child{margin-bottom:0;padding-bottom:0}.custom-block.details summary{outline:none;cursor:pointer}.arrow{display:inline-block;width:0;height:0}.arrow.up{border-bottom:6px solid #ccc}.arrow.down,.arrow.up{border-left:4px solid transparent;border-right:4px solid transparent}.arrow.down{border-top:6px solid #ccc}.arrow.right{border-left:6px solid #ccc}.arrow.left,.arrow.right{border-top:4px solid transparent;border-bottom:4px solid transparent}.arrow.left{border-right:6px solid #ccc}.theme-default-content:not(.custom){max-width:740px;margin:0 auto;padding:2rem 2.5rem}@media (max-width:959px){.theme-default-content:not(.custom){padding:2rem}}@media (max-width:419px){.theme-default-content:not(.custom){padding:1.5rem}}.table-of-contents .badge{vertical-align:middle}body,html{padding:0;margin:0;background-color:#fff}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px;color:#2c3e50}.page{padding-left:20rem}.navbar{z-index:20;right:0;height:3.6rem;background-color:#fff;box-sizing:border-box;border-bottom:1px solid #eaecef}.navbar,.sidebar-mask{position:fixed;top:0;left:0}.sidebar-mask{z-index:9;width:100vw;height:100vh;display:none}.sidebar{font-size:16px;background-color:#fff;width:20rem;position:fixed;z-index:10;margin:0;top:3.6rem;left:0;bottom:0;box-sizing:border-box;border-right:1px solid #eaecef;overflow-y:auto}.theme-default-content:not(.custom)>:first-child{margin-top:3.6rem}.theme-default-content:not(.custom) a:hover{text-decoration:underline}.theme-default-content:not(.custom) p.demo{padding:1rem 1.5rem;border:1px solid #ddd;border-radius:4px}.theme-default-content:not(.custom) img{max-width:100%}.theme-default-content.custom{padding:0;margin:0}.theme-default-content.custom img{max-width:100%}a{font-weight:500;text-decoration:none}a,p a code{color:#1bb89b}p a code{font-weight:400}kbd{background:#eee;border:.15rem solid #ddd;border-bottom:.25rem solid #ddd;border-radius:.15rem;padding:0 .15em}blockquote{font-size:1rem;color:#999;border-left:.2rem solid #dfe2e5;margin:1rem 0;padding:.25rem 0 .25rem 1rem}blockquote>p{margin:0}ol,ul{padding-left:1.2em}strong{font-weight:600}h1,h2,h3,h4,h5,h6{font-weight:600;line-height:1.25}.theme-default-content:not(.custom)>h1,.theme-default-content:not(.custom)>h2,.theme-default-content:not(.custom)>h3,.theme-default-content:not(.custom)>h4,.theme-default-content:not(.custom)>h5,.theme-default-content:not(.custom)>h6{margin-top:-3.1rem;padding-top:4.6rem;margin-bottom:0}.theme-default-content:not(.custom)>h1:first-child,.theme-default-content:not(.custom)>h2:first-child,.theme-default-content:not(.custom)>h3:first-child,.theme-default-content:not(.custom)>h4:first-child,.theme-default-content:not(.custom)>h5:first-child,.theme-default-content:not(.custom)>h6:first-child{margin-top:-1.5rem;margin-bottom:1rem}.theme-default-content:not(.custom)>h1:first-child+.custom-block,.theme-default-content:not(.custom)>h1:first-child+p,.theme-default-content:not(.custom)>h1:first-child+pre,.theme-default-content:not(.custom)>h2:first-child+.custom-block,.theme-default-content:not(.custom)>h2:first-child+p,.theme-default-content:not(.custom)>h2:first-child+pre,.theme-default-content:not(.custom)>h3:first-child+.custom-block,.theme-default-content:not(.custom)>h3:first-child+p,.theme-default-content:not(.custom)>h3:first-child+pre,.theme-default-content:not(.custom)>h4:first-child+.custom-block,.theme-default-content:not(.custom)>h4:first-child+p,.theme-default-content:not(.custom)>h4:first-child+pre,.theme-default-content:not(.custom)>h5:first-child+.custom-block,.theme-default-content:not(.custom)>h5:first-child+p,.theme-default-content:not(.custom)>h5:first-child+pre,.theme-default-content:not(.custom)>h6:first-child+.custom-block,.theme-default-content:not(.custom)>h6:first-child+p,.theme-default-content:not(.custom)>h6:first-child+pre{margin-top:2rem}h1:focus .header-anchor,h1:hover .header-anchor,h2:focus .header-anchor,h2:hover .header-anchor,h3:focus .header-anchor,h3:hover .header-anchor,h4:focus .header-anchor,h4:hover .header-anchor,h5:focus .header-anchor,h5:hover .header-anchor,h6:focus .header-anchor,h6:hover .header-anchor{opacity:1}h1{font-size:2.2rem}h2{font-size:1.65rem;padding-bottom:.3rem;border-bottom:1px solid #eaecef}h3{font-size:1.35rem}a.header-anchor{font-size:.85em;float:left;margin-left:-.87em;padding-right:.23em;margin-top:.125em;-webkit-user-select:none;user-select:none;opacity:0}a.header-anchor:focus,a.header-anchor:hover{text-decoration:none}.line-number,code,kbd{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}ol,p,ul{line-height:1.7}hr{border:0;border-top:1px solid #eaecef}table{border-collapse:collapse;margin:1rem 0;display:block;overflow-x:auto}tr{border-top:1px solid #dfe2e5}tr:nth-child(2n){background-color:#f6f8fa}td,th{border:1px solid #dfe2e5;padding:.6em 1em}.theme-container.sidebar-open .sidebar-mask{display:block}.theme-container.no-navbar .theme-default-content:not(.custom)>h1,.theme-container.no-navbar h2,.theme-container.no-navbar h3,.theme-container.no-navbar h4,.theme-container.no-navbar h5,.theme-container.no-navbar h6{margin-top:1.5rem;padding-top:0}.theme-container.no-navbar .sidebar{top:0}@media (min-width:720px){.theme-container.no-sidebar .sidebar{display:none}.theme-container.no-sidebar .page{padding-left:0}}@media (max-width:959px){.sidebar{font-size:15px;width:16.4rem}.page{padding-left:16.4rem}}@media (max-width:719px){.sidebar{top:0;padding-top:3.6rem;transform:translateX(-100%);transition:transform .2s ease}.page{padding-left:0}.theme-container.sidebar-open .sidebar{transform:translateX(0)}.theme-container.no-navbar .sidebar{padding-top:0}}@media (max-width:419px){h1{font-size:1.9rem}.theme-default-content div[class*=language-]{margin:.85rem -1.5rem;border-radius:0}}#app{transition:background .3s}.homepage .logo,.homepage>.home{padding:0;max-width:unset}.homepage .logo .footer,.homepage .logo .hero,.homepage>.home .footer,.homepage>.home .hero{display:none}.homepage .navbar{opacity:0;transform:translateY(-58px);transition:.3s}.homepage .navbar.show{opacity:1;transform:translateY(0)}.navbar{border:0;box-shadow:0 1px 1rem rgba(0,0,0,.08);transition:background .3s}.navbar .links{background:none!important}.navbar .search-box>input{border-color:transparent;border-radius:.5rem;background-color:#eee}.navbar .search-box>input.focused{background-color:transparent}.navbar .nav-item>a{height:2.4rem}.sidebar{transition:background .3s,transform .2s ease}.page{min-height:100vh;box-sizing:border-box}.nav-item>.dropdown-wrapper .nav-dropdown{border:0;box-shadow:0 .3rem .3rem rgba(0,0,0,.2)}.nav-item>.dropdown-wrapper .nav-dropdown .dropdown-item .nav-link{border-left:2px solid transparent;transition:.3s}.nav-item>.dropdown-wrapper .nav-dropdown .dropdown-item .nav-link.router-link-active{border-left-color:#1bb89b}.nav-item>.dropdown-wrapper .nav-dropdown .dropdown-item .nav-link:after{content:none}main{overflow-x:hidden}img[alt=win7simu]{width:45px;height:45px;vertical-align:bottom}.banner{margin:1rem 0;width:100%}.embed-responsive iframe{display:block;margin:auto;max-width:100%}.contains-task-list{list-style:none;padding:0}.contains-task-list input{margin:0 8px 0 0;transform:scale(1.2)}@media (max-width:719px){.nav-item>.dropdown-wrapper .nav-dropdown{box-shadow:none}}.nav-item:nth-child(2):before{content:"";position:absolute;z-index:-1;top:50%;left:30%;width:64px;height:64px;background:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik04LjU2NiAzLjU4NmE1IDUgMCAwMC0zLjUzIDYuMTI4bDMuNjM4IDEzLjUxOSA0LjgwNy01LjIyOSA2Ljc4MSAyLjExLTMuNjM3LTEzLjUxOGE1IDUgMCAwMC02LjEyOC0zLjUzbC0xLjkzMS41MnptLjA3NiA2LjU1Yy4wODMuMzA3LjA5NS41ODMuMDM2LjgzYTEuMjUgMS4yNSAwIDAxLS4zNC42MTkgMS4zOCAxLjM4IDAgMDEtLjYyMy4zNDljLS4yNS4wNjctLjQ4OS4wNy0uNzE4LjAxYTEuMjU0IDEuMjU0IDAgMDEtLjYwMy0uMzY1IDEuNjkgMS42OSAwIDAxLS4zODMtLjczNCAxLjY5NCAxLjY5NCAwIDAxLS4wMzctLjgyOWMuMDU3LS4yNDYuMTctLjQ1MS4zMzgtLjYxNy4xNjgtLjE2Ny4zNzctLjI4NC42MjYtLjM1MS4yNDgtLjA2Ny40ODctLjA3LjcxNi0uMDEuMjMuMDU5LjQzLjE4LjYwNC4zNjQuMTczLjE4My4zMDIuNDI4LjM4NC43MzV6bS0uNjAyLjE2M2ExLjMgMS4zIDAgMDAtLjIyNC0uNDc4LjcwNC43MDQgMCAwMC0uMzMyLS4yNDMuNjkyLjY5MiAwIDAwLS40MDQtLjAwNS42OTIuNjkyIDAgMDAtLjM0OC4yMDcuNzEyLjcxMiAwIDAwLS4xNjYuMzc3Yy0uMDIyLjE1Mi0uMDA2LjMyNy4wNDcuNTI2LjA1NC4xOTguMTI4LjM1Ny4yMjMuNDc4LjA5Ni4xMi4yMDcuMjAxLjMzMy4yNDMuMTI2LjA0MS4yNjEuMDQzLjQwNS4wMDRhLjY5Mi42OTIgMCAwMC4zNDctLjIwNi43MDQuNzA0IDAgMDAuMTY1LS4zNzcgMS4zIDEuMyAwIDAwLS4wNDYtLjUyNnptMS40MiAxLjEyNGwtLjc1Ni0yLjgxIDEuMTA4LS4yOTdjLjIxMy0uMDU4LjQwNi0uMDY2LjU3OC0uMDI1LjE3MS4wNC4zMTYuMTIyLjQzMy4yNDQuMTE4LjEyMS4yMDIuMjc1LjI1Mi40NjIuMDUuMTg2LjA1NS4zNjIuMDEzLjUyNmEuODYyLjg2MiAwIDAxLS4yNi40MjdjLS4xMzEuMTItLjMwNC4yMS0uNTIuMjY4bC0uNS4xMzQuMjQ2LjkxMS0uNTk0LjE2em0uNjI0LTEuNjU1bC0uNDAzLjEwOC0uMjUyLS45MzYuNC0uMTA4YS42MzMuNjMzIDAgMDEuMzAxLS4wMTguMzkuMzkgMCAwMS4yMTIuMTE4Yy4wNTYuMDYuMDk2LjEzNi4xMjIuMjMuMDI0LjA5Mi4wMjguMTc4LjAxLjI2YS40MDQuNDA0IDAgMDEtLjEyMy4yMS42Mi42MiAwIDAxLS4yNjcuMTM2em0xLjg3Ny45ODJsLS43NTYtMi44MSAxLjg5My0uNTA4LjEzMi40OS0xLjMuMzQ5LjE4LjY3IDEuMjAyLS4zMjQuMTMyLjQ5LTEuMjAxLjMyMy4xOC42NyAxLjMwNC0uMzUuMTMyLjQ5LTEuODk4LjUxem0zLjk1OS00LjA3OGwuNzU2IDIuODEtLjUxMy4xMzctMS42OTgtMS40MzktLjAyLjAwNi40NzUgMS43NjgtLjU5NC4xNi0uNzU2LTIuODEuNTIxLS4xNCAxLjY4OCAxLjQ0LjAyNS0uMDA2LS40NzUtMS43NjcuNTktLjE1OXptLTcuODQgMTAuM2wtLjc1Ny0yLjgwOSAxLjEyNS0uMzAyYy4yMDctLjA1Ni4zODctLjA3Mi41NDItLjA0OGEuNzExLjcxMSAwIDAxLjM4LjE3MmMuMDk4LjA4OS4xNjcuMjA0LjIwNC4zNDVhLjU4OC41ODggMCAwMS0uMTE0LjU1OS43Ny43NyAwIDAxLS4yMy4xOGwuMDA3LjAyOGEuNjY0LjY2NCAwIDAxLjYxNy4xODMuNzE2LjcxNiAwIDAxLjE4My4zMzMuNzU2Ljc1NiAwIDAxLS4wMDMuNDI5Ljc3NS43NzUgMCAwMS0uMjUxLjM2MyAxLjI4NCAxLjI4NCAwIDAxLS41MDQuMjQ0bC0xLjIuMzIzem0uNDYyLS42NDVsLjQ4NS0uMTNjLjE2NS0uMDQ1LjI3Ny0uMTA5LjMzNi0uMTkyYS4zMjguMzI4IDAgMDAuMDQ1LS4yODYuMzkuMzkgMCAwMC0uMTExLS4xOS4zOTYuMzk2IDAgMDAtLjE5OC0uMDk4LjU3LjU3IDAgMDAtLjI2LjAxNmwtLjQ5Ny4xMzQuMi43NDZ6bS0uMzA5LTEuMTQ4bC40NC0uMTE5YS41NDMuNTQzIDAgMDAuMjA2LS4xLjM3NC4zNzQgMCAwMC4xMTgtLjE2NC4zMzMuMzMzIDAgMDAuMDA1LS4yMDYuMzIuMzIgMCAwMC0uMTc1LS4yMTcuNDY1LjQ2NSAwIDAwLS4zMy0uMDFsLS40NS4xMi4xODYuNjk2em0yLjQgMS4xMDZsLS43NTYtMi44MDkgMS44OTMtLjUxLjEzMi40OS0xLjMuMzUuMTguNjcgMS4yMDItLjMyNC4xMzIuNDktMS4yMDEuMzIzLjE4LjY3IDEuMzA0LS4zNS4xMzIuNDktMS44OTguNTF6bTEuNjM0LTIuOTI3bC0uMTMyLS40OSAyLjMwNy0uNjIuMTMyLjQ5LS44Ni4yMy42MjQgMi4zMi0uNTg3LjE1OC0uNjI0LTIuMzItLjg2LjIzMnptMy40NTIgMS41NTlsLS42MzYuMTcxLjIxMy0zLjA3Ljc2Ni0uMjA2IDEuNzI0IDIuNTQ5LS42MzYuMTctLjM4LS41ODQtMS4wMTUuMjczLS4wMzYuNjk3em0uMTQ0LTIuMzYzbC42My45Ny0uNzEyLjE5Mi4wNi0xLjE1Ni4wMjItLjAwNnptLTUuNTktNi40NzZjLjUzMi0uMTQzLjg1NC0uNjcuNzE4LTEuMTc3LS4xMzYtLjUwNi0uNjgtLjgtMS4yMTMtLjY1Ny0uNTMzLjE0My0uODU1LjY3LS43MTggMS4xNzcuMTM2LjUwNy42NzkuOCAxLjIxMi42NTd6IiBmaWxsPSIjRUU0QjRCIi8+PC9zdmc+") no-repeat;background-size:100%}.is-dark body{color:#ededed;background:#1c1c1c}.is-dark .homepage section:first-child{background-image:url(/assets/home-bg-dark.jpg);background-color:transparent}.is-dark .navbar{background:#292929}.is-dark .navbar .links .dropdown-title{color:#ededed}.is-dark .navbar .links .nav-dropdown{background:#363636}.is-dark .navbar .links .nav-dropdown .dropdown-item h4{border-color:#434343}.is-dark .navbar .links .nav-link,.is-dark .navbar .site-name{color:#ededed}.is-dark .navbar .search-box input{background-color:hsla(0,0%,100%,.08);color:#eaeaea}.is-dark .sidebar{background:#212121;border-color:transparent}.is-dark .sidebar-link,.is-dark .sidebar .mobile-dropdown-title{color:#ededed}.is-dark .custom-block.tip{background:hsla(0,0%,100%,.08)}.is-dark .custom-block.warning{color:gold}.is-dark .custom-block.warning .custom-block-title{color:#ff0}.is-dark table td,.is-dark table th{border-color:#363636}.is-dark table tr:nth-child(2n){background:hsla(0,0%,100%,.08)}.is-dark h2{border-color:#434343}.is-dark code{color:#ededed;background-color:hsla(0,0%,100%,.08)}.is-dark .page-nav .inner{border-color:#434343}.is-dark .page-edit .last-updated .prefix{color:#ededed}.is-dark .page-edit .last-updated .time{color:#bebebe}.is-dark .content__default>footer{border-color:#434343;color:#eaeaea}.is-dark kbd{background-color:#282c34;border-color:#444;color:#eaeaea}.changelog h2{border:none;font-size:2rem;font-weight:700}.changelog .content__default ul:not(.social-share-list){margin-left:1rem}.changelog .sidebar .sidebar-sub-headers{padding-left:2.5rem;position:relative}.changelog .sidebar .sidebar-sub-headers:before{content:"";position:absolute;width:2px;height:100%;background:$$borderColor}.is-dark .changelog .sidebar .sidebar-sub-headers:before{background:#444}.changelog .sidebar .sidebar-sub-headers li a{padding-left:1rem}.tooltip{display:block!important;z-index:10000}.tooltip .tooltip-inner{background:#000;color:#fff;border-radius:6px;padding:5px 10px 4px}.tooltip .tooltip-arrow{width:0;height:0;border-style:solid;position:absolute;margin:5px;border-color:#000;z-index:1}.tooltip[x-placement^=top]{margin-bottom:5px}.tooltip[x-placement^=top] .tooltip-arrow{border-width:5px 5px 0;border-left-color:transparent!important;border-right-color:transparent!important;border-bottom-color:transparent!important;bottom:-5px;left:calc(50% - 5px);margin-top:0;margin-bottom:0}.tooltip[x-placement^=bottom]{margin-top:5px}.tooltip[x-placement^=bottom] .tooltip-arrow{border-width:0 5px 5px;border-left-color:transparent!important;border-right-color:transparent!important;border-top-color:transparent!important;top:-5px;left:calc(50% - 5px);margin-top:0;margin-bottom:0}.tooltip[x-placement^=right]{margin-left:5px}.tooltip[x-placement^=right] .tooltip-arrow{border-width:5px 5px 5px 0;border-left-color:transparent!important;border-top-color:transparent!important;border-bottom-color:transparent!important;left:-5px;top:calc(50% - 5px);margin-left:0;margin-right:0}.tooltip[x-placement^=left]{margin-right:5px}.tooltip[x-placement^=left] .tooltip-arrow{border-width:5px 0 5px 5px;border-top-color:transparent!important;border-right-color:transparent!important;border-bottom-color:transparent!important;right:-5px;top:calc(50% - 5px);margin-left:0;margin-right:0}.tooltip.popover{$color:#f9f9f9}.tooltip.popover .popover-inner{background:$color;color:#000;padding:24px;border-radius:5px;box-shadow:0 5px 30px rgba(0,0,0,.1)}.tooltip.popover .popover-arrow{border-color:$color}.tooltip[aria-hidden=true]{visibility:hidden;opacity:0;transition:opacity .15s,visibility .15s}.tooltip[aria-hidden=false]{visibility:visible;opacity:1;transition:opacity .15s}#nprogress{pointer-events:none}#nprogress .bar{background:#1bb89b;position:fixed;z-index:1031;top:0;left:0;width:100%;height:2px}#nprogress .peg{display:block;position:absolute;right:0;width:100px;height:100%;box-shadow:0 0 10px #1bb89b,0 0 5px #1bb89b;opacity:1;transform:rotate(3deg) translateY(-4px)}#nprogress .spinner{display:block;position:fixed;z-index:1031;top:15px;right:15px}#nprogress .spinner-icon{width:18px;height:18px;box-sizing:border-box;border-color:#1bb89b transparent transparent #1bb89b;border-style:solid;border-width:2px;border-radius:50%;animation:nprogress-spinner .4s linear infinite}.nprogress-custom-parent{overflow:hidden;position:relative}.nprogress-custom-parent #nprogress .bar,.nprogress-custom-parent #nprogress .spinner{position:absolute}@keyframes nprogress-spinner{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}html{scroll-behavior:smooth}.social-share{position:relative;box-sizing:border-box}.social-share-list{list-style:none;padding:0;margin:0;line-height:1}.social-share-network{position:relative;display:inline-block;vertical-align:middle}.social-share-trigger{color:#6a8bad}.social-share-btn{position:relative;width:56px;height:56px;padding:0;border-radius:50%;font-size:32px;font-family:inherit;text-align:center;background:none;border:none;box-shadow:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);transition:all .3s ease-out}.social-share-btn:not(.social-share-trigger){color:#545e66}.social-share-btn:not(.social-share-trigger):hover{background-color:hsla(0,0%,73.7%,.15)}.social-share-icon-svg svg{width:1em!important;height:1em!important;fill:currentColor!important;vertical-align:-.15em!important;overflow:hidden!important}.social-share-icon-img{position:absolute;top:50%;left:50%;display:block;width:1em;height:1em;margin:-.5em 0 0 -.5em;background-repeat:no-repeat;background-position:50%;background-size:contain}.social-share-global{position:fixed;right:0;bottom:50%;z-index:99999;background-color:#fff;border:1px solid #efefef;border-right:none;border-radius:8px 0 0 8px;transform:translateY(50%);transition:all .3s ease-out;box-shadow:-2px 1px 6px rgba(0,0,0,.08)}.social-share-global .social-share-network{display:block}.social-share-global .social-share-btn{width:60px;height:60px;border-radius:5px;font-size:36px}.social-share-overlay{position:fixed;top:0;left:0;right:0;bottom:0;z-index:99999;display:flex;justify-content:center;align-items:center;background-color:rgba(0,0,0,.5);transition:all .3s ease-out;opacity:0}.social-share-overlay.show{opacity:1}.social-share-qrcode{display:block;border-radius:4px;overflow:hidden;box-shadow:0 0 4px rgba(0,0,0,.08)}@media screen and (max-width:719px){.social-share-btn{width:40px;height:40px;font-size:28px}.social-share-global{bottom:15%;border-radius:5px 0 0 5px;transform:translate(0);box-shadow:-1px 1px 3px rgba(0,0,0,.03)}.social-share-global .social-share-btn{width:40px;height:40px;font-size:28px;border-radius:3px}}.icon.outbound{color:#aaa;display:inline-block;vertical-align:middle;position:relative;top:-1px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.home{padding:3.6rem 2rem 0;max-width:960px;margin:0 auto;display:block}.home .hero{text-align:center}.home .hero img{max-width:100%;max-height:280px;display:block;margin:3rem auto 1.5rem}.home .hero h1{font-size:3rem}.home .hero .action,.home .hero .description,.home .hero h1{margin:1.8rem auto}.home .hero .description{max-width:35rem;font-size:1.6rem;line-height:1.3;color:#6a8bad}.home .hero .action-button{display:inline-block;font-size:1.2rem;color:#fff;background-color:#1bb89b;padding:.8rem 1.6rem;border-radius:4px;transition:background-color .1s ease;box-sizing:border-box;border-bottom:1px solid #18a68b}.home .hero .action-button:hover{background-color:#1fd2b1}.home .features{border-top:1px solid #eaecef;padding:1.2rem 0;margin-top:2.5rem;display:flex;flex-wrap:wrap;align-items:flex-start;align-content:stretch;justify-content:space-between}.home .feature{flex-grow:1;flex-basis:30%;max-width:30%}.home .feature h2{font-size:1.4rem;font-weight:500;border-bottom:none;padding-bottom:0;color:#3a5169}.home .feature p{color:#4e6e8e}.home .footer{padding:2.5rem;border-top:1px solid #eaecef;text-align:center;color:#4e6e8e}@media (max-width:719px){.home .features{flex-direction:column}.home .feature{max-width:100%;padding:0 2.5rem}}@media (max-width:419px){.home{padding-left:1.5rem;padding-right:1.5rem}.home .hero img{max-height:210px;margin:2rem auto 1.2rem}.home .hero h1{font-size:2rem}.home .hero .action,.home .hero .description,.home .hero h1{margin:1.2rem auto}.home .hero .description{font-size:1.2rem}.home .hero .action-button{font-size:1rem;padding:.6rem 1.2rem}.home .feature h2{font-size:1.25rem}}.search-box{display:inline-block;position:relative;margin-right:1rem}.search-box input{cursor:text;width:10rem;height:2rem;color:#4e6e8e;display:inline-block;border:1px solid #cfd4db;border-radius:2rem;font-size:.9rem;line-height:2rem;padding:0 .5rem 0 2rem;outline:none;transition:all .2s ease;background:#fff url(/assets/img/search.83621669.svg) .6rem .5rem no-repeat;background-size:1rem}.search-box input:focus{cursor:auto;border-color:#1bb89b}.search-box .suggestions{background:#fff;width:20rem;position:absolute;top:2rem;border:1px solid #cfd4db;border-radius:6px;padding:.4rem;list-style-type:none}.search-box .suggestions.align-right{right:0}.search-box .suggestion{line-height:1.4;padding:.4rem .6rem;border-radius:4px;cursor:pointer}.search-box .suggestion a{white-space:normal;color:#5d82a6}.search-box .suggestion a .page-title{font-weight:600}.search-box .suggestion a .header{font-size:.9em;margin-left:.25em}.search-box .suggestion.focused{background-color:#f3f4f5}.search-box .suggestion.focused a{color:#1bb89b}@media (max-width:959px){.search-box input{cursor:pointer;width:0;border-color:transparent;position:relative}.search-box input:focus{cursor:text;left:0;width:10rem}}@media (-ms-high-contrast:none){.search-box input{height:2rem}}@media (max-width:959px) and (min-width:719px){.search-box .suggestions{left:0}}@media (max-width:719px){.search-box{margin-right:0}.search-box input{left:1rem}.search-box .suggestions{right:0}}@media (max-width:419px){.search-box .suggestions{width:calc(100vw - 4rem)}.search-box input:focus{width:8rem}}.sidebar-button{cursor:pointer;display:none;width:1.25rem;height:1.25rem;position:absolute;padding:.6rem;top:.6rem;left:1rem}.sidebar-button .icon{display:block;width:1.25rem;height:1.25rem}@media (max-width:719px){.sidebar-button{display:block}}.dropdown-enter,.dropdown-leave-to{height:0!important}.dropdown-wrapper{cursor:pointer}.dropdown-wrapper .dropdown-title,.dropdown-wrapper .mobile-dropdown-title{display:block;font-size:.9rem;font-family:inherit;cursor:inherit;padding:inherit;line-height:1.4rem;background:transparent;border:none;font-weight:500;color:#2c3e50}.dropdown-wrapper .dropdown-title:hover,.dropdown-wrapper .mobile-dropdown-title:hover{border-color:transparent}.dropdown-wrapper .dropdown-title .arrow,.dropdown-wrapper .mobile-dropdown-title .arrow{vertical-align:middle;margin-top:-1px;margin-left:.4rem}.dropdown-wrapper .mobile-dropdown-title{display:none;font-weight:600}.dropdown-wrapper .mobile-dropdown-title font-size inherit:hover{color:#1bb89b}.dropdown-wrapper .nav-dropdown .dropdown-item{color:inherit;line-height:1.7rem}.dropdown-wrapper .nav-dropdown .dropdown-item h4{margin:.45rem 0 0;border-top:1px solid #eee;padding:1rem 1.5rem .45rem 1.25rem}.dropdown-wrapper .nav-dropdown .dropdown-item .dropdown-subitem-wrapper{padding:0;list-style:none}.dropdown-wrapper .nav-dropdown .dropdown-item .dropdown-subitem-wrapper .dropdown-subitem{font-size:.9em}.dropdown-wrapper .nav-dropdown .dropdown-item a{display:block;line-height:1.7rem;position:relative;border-bottom:none;font-weight:400;margin-bottom:0;padding:0 1.5rem 0 1.25rem}.dropdown-wrapper .nav-dropdown .dropdown-item a.router-link-active,.dropdown-wrapper .nav-dropdown .dropdown-item a:hover{color:#1bb89b}.dropdown-wrapper .nav-dropdown .dropdown-item a.router-link-active:after{content:"";width:0;height:0;border-left:5px solid #1bb89b;border-top:3px solid transparent;border-bottom:3px solid transparent;position:absolute;top:calc(50% - 2px);left:9px}.dropdown-wrapper .nav-dropdown .dropdown-item:first-child h4{margin-top:0;padding-top:0;border-top:0}@media (max-width:719px){.dropdown-wrapper.open .dropdown-title{margin-bottom:.5rem}.dropdown-wrapper .dropdown-title{display:none}.dropdown-wrapper .mobile-dropdown-title{display:block}.dropdown-wrapper .nav-dropdown{transition:height .1s ease-out;overflow:hidden}.dropdown-wrapper .nav-dropdown .dropdown-item h4{border-top:0;margin-top:0;padding-top:0}.dropdown-wrapper .nav-dropdown .dropdown-item>a,.dropdown-wrapper .nav-dropdown .dropdown-item h4{font-size:15px;line-height:2rem}.dropdown-wrapper .nav-dropdown .dropdown-item .dropdown-subitem{font-size:14px;padding-left:1rem}}@media (min-width:719px){.dropdown-wrapper{height:1.8rem}.dropdown-wrapper.open .nav-dropdown,.dropdown-wrapper:hover .nav-dropdown{display:block!important}.dropdown-wrapper .nav-dropdown{display:none;height:auto!important;box-sizing:border-box;max-height:calc(100vh - 2.7rem);overflow-y:auto;position:absolute;top:100%;right:0;background-color:#fff;padding:.6rem 0;border:1px solid;border-color:#ddd #ddd #ccc;text-align:left;border-radius:.25rem;white-space:nowrap;margin:0}}.nav-links{display:inline-block}.nav-links a{line-height:1.4rem;color:inherit}.nav-links a.router-link-active,.nav-links a:hover{color:#1bb89b}.nav-links .nav-item{position:relative;display:inline-block;margin-left:1.5rem;line-height:2rem}.nav-links .nav-item:first-child{margin-left:0}.nav-links .repo-link{margin-left:1.5rem}@media (max-width:719px){.nav-links .nav-item,.nav-links .repo-link{margin-left:0}}@media (min-width:719px){.nav-links a.router-link-active,.nav-links a:hover{color:#2c3e50}.nav-item>a:not(.external).router-link-active,.nav-item>a:not(.external):hover{margin-bottom:-2px;border-bottom:2px solid #1ecdad}}.navbar{padding:.7rem 1.5rem;line-height:2.2rem}.navbar a,.navbar img,.navbar span{display:inline-block}.navbar .logo{height:2.2rem;min-width:2.2rem;margin-right:.8rem;vertical-align:top}.navbar .site-name{font-size:1.3rem;font-weight:600;color:#2c3e50;position:relative}.navbar .links{padding-left:1.5rem;box-sizing:border-box;background-color:#fff;white-space:nowrap;font-size:.9rem;position:absolute;right:1.5rem;top:.7rem;display:flex}.navbar .links .search-box{flex:0 0 auto;vertical-align:top}@media (max-width:719px){.navbar{padding-left:4rem}.navbar .can-hide{display:none}.navbar .links{padding-left:1.5rem}.navbar .site-name{width:calc(100vw - 9.4rem);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}}.page-edit{max-width:740px;margin:0 auto;padding:2rem 2.5rem}@media (max-width:959px){.page-edit{padding:2rem}}@media (max-width:419px){.page-edit{padding:1.5rem}}.page-edit{padding-top:1rem;padding-bottom:1rem;overflow:auto}.page-edit .edit-link{display:inline-block}.page-edit .edit-link a{color:#4e6e8e;margin-right:.25rem}.page-edit .last-updated{float:right;font-size:.9em}.page-edit .last-updated .prefix{font-weight:500;color:#4e6e8e}.page-edit .last-updated .time{font-weight:400;color:#767676}@media (max-width:719px){.page-edit .edit-link{margin-bottom:.5rem}.page-edit .last-updated{font-size:.8em;float:none;text-align:left}}.page-nav{max-width:740px;margin:0 auto;padding:2rem 2.5rem}@media (max-width:959px){.page-nav{padding:2rem}}@media (max-width:419px){.page-nav{padding:1.5rem}}.page-nav{padding-top:1rem;padding-bottom:0}.page-nav .inner{min-height:2rem;margin-top:0;border-top:1px solid #eaecef;padding-top:1rem;overflow:auto}.page-nav .next{float:right}.page{padding-bottom:2rem;display:block}.sidebar-group .sidebar-group{padding-left:.5em}.sidebar-group:not(.collapsable) .sidebar-heading:not(.clickable){cursor:auto;color:inherit}.sidebar-group.is-sub-group{padding-left:0}.sidebar-group.is-sub-group>.sidebar-heading{font-size:.95em;line-height:1.4;font-weight:400;padding-left:2rem}.sidebar-group.is-sub-group>.sidebar-heading:not(.clickable){opacity:.5}.sidebar-group.is-sub-group>.sidebar-group-items{padding-left:1rem}.sidebar-group.is-sub-group>.sidebar-group-items>li>.sidebar-link{font-size:.95em;border-left:none}.sidebar-group.depth-2>.sidebar-heading{border-left:none}.sidebar-heading{color:#2c3e50;transition:color .15s ease;cursor:pointer;font-size:1.1em;font-weight:700;padding:.35rem 1.5rem .35rem 1.25rem;width:100%;box-sizing:border-box;margin:0;border-left:.25rem solid transparent}.sidebar-heading.open,.sidebar-heading:hover{color:inherit}.sidebar-heading .arrow{position:relative;top:-.12em;left:.5em}.sidebar-heading.clickable.active{font-weight:600;color:#1bb89b;border-left-color:#1bb89b}.sidebar-heading.clickable:hover{color:#1bb89b}.sidebar-group-items{transition:height .1s ease-out;font-size:.95em;overflow:hidden}.sidebar .sidebar-sub-headers{padding-left:1rem;font-size:.95em}a.sidebar-link{font-size:1em;font-weight:400;display:inline-block;color:#2c3e50;border-left:.25rem solid transparent;padding:.35rem 1rem .35rem 1.25rem;line-height:1.4;width:100%;box-sizing:border-box}a.sidebar-link:hover{color:#1bb89b}a.sidebar-link.active{font-weight:600;color:#1bb89b;border-left-color:#1bb89b}.sidebar-group a.sidebar-link{padding-left:2rem}.sidebar-sub-headers a.sidebar-link{padding-top:.25rem;padding-bottom:.25rem;border-left:none}.sidebar-sub-headers a.sidebar-link.active{font-weight:500}.sidebar ul{padding:0;margin:0;list-style-type:none}.sidebar a{display:inline-block}.sidebar .nav-links{display:none;border-bottom:1px solid #eaecef;padding:.5rem 0 .75rem}.sidebar .nav-links a{font-weight:600}.sidebar .nav-links .nav-item,.sidebar .nav-links .repo-link{display:block;line-height:1.25rem;font-size:1.1em;padding:.5rem 0 .5rem 1.5rem}.sidebar>.sidebar-links{padding:1.5rem 0}.sidebar>.sidebar-links>li>a.sidebar-link{font-size:1.1em;line-height:1.7;font-weight:700}.sidebar>.sidebar-links>li:not(:first-child){margin-top:.75rem}@media (max-width:719px){.sidebar .nav-links{display:block}.sidebar .nav-links .dropdown-wrapper .nav-dropdown .dropdown-item a.router-link-active:after{top:calc(1rem - 2px)}.sidebar>.sidebar-links{padding:1rem 0}}.content__default[data-v-56d60325]{max-width:1200px}[data-v-56d60325] .page-edit{display:none}.ad-wrapper{max-width:740px;margin:0 auto}[data-v-93cd5b66] .page-edit{display:none}.content__default[data-v-71da9cb2]{max-width:900px}[data-v-71da9cb2] .page-edit{display:none}ins[data-v-71da9cb2]{margin:2rem 0}.feature-links[data-v-71da9cb2]{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));grid-gap:2.5rem 1.5rem;list-style:none;padding:0;margin:0}.feature-links li[data-v-71da9cb2]{flex:1 1 200px}.feature-links li a[data-v-71da9cb2]{color:currentColor;display:block;text-align:center;transition:color .3s}.feature-links li a .image[data-v-71da9cb2]{color:#eee;height:200px;overflow:hidden;border-radius:6px;box-shadow:0 .2rem .6rem rgba(0,0,0,.1);position:relative}.is-dark .feature-links li a .image[data-v-71da9cb2]{color:#292929}.feature-links li a .image iconify-icon[data-v-71da9cb2]{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:0}.feature-links li a .image img[data-v-71da9cb2]{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:top left;object-position:top left;transition:transform .3s ease-out;position:relative;z-index:1}.feature-links li a span[data-v-71da9cb2]{display:block;margin-top:5px;font-size:1.2em;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;text-align:center;text-transform:capitalize}.feature-links li a[data-v-71da9cb2]:hover{color:#1bb89b;text-decoration:none}.feature-links li a:hover img[data-v-71da9cb2]{transform:scale(1.06)}.content__default[data-v-41cc6025]{margin-bottom:-2.5rem}.ad-wrapper[data-v-41cc6025]{max-width:740px;margin:0 auto}.grid_2WlwxHu5 p{display:grid;gap:1rem;align-items:center;justify-content:center;grid-template-areas:"a" "b" "c" "d" "e"}.grid_2WlwxHu5 img:first-child{grid-area:a}.grid_2WlwxHu5 img:nth-child(2){grid-area:b}.grid_2WlwxHu5 img:nth-child(3){grid-area:c}.grid_2WlwxHu5 img:nth-child(4){grid-area:d}.grid_2WlwxHu5 img:nth-child(5){grid-area:e}@media (min-width:640px){.grid_2WlwxHu5 p{grid-template-areas:"a b" "a c" "d e"}}.a-button[data-v-4ef368cc]{background:#545e66;border:0;border-radius:.2rem;box-shadow:0 4px #2c3e50;color:#fff;cursor:pointer;display:inline-block;font-size:1rem;padding:.6rem 1.8rem;transition:transform .2s,box-shadow .2s}.a-button[data-v-4ef368cc]:active{transform:translateY(4px);box-shadow:none}.a-button[data-v-4ef368cc]:hover{text-decoration:none!important}a[data-v-7233fed5]{display:flex;align-items:center;color:#2c3e50;transition:color .3s;margin-right:.5rem}.is-dark a[data-v-7233fed5]{color:#eaeaea}a[data-v-7233fed5]:hover{color:#1bb89b;text-decoration:none!important}a img[data-v-7233fed5]{width:2rem;height:2rem;margin-right:.25rem}button[data-v-00e9533b]{width:24px;height:24px;padding:12px;box-sizing:unset;background:#eee;border:none;border-radius:50%;color:#2c3e50;cursor:pointer;transition:all .2s}button[data-v-00e9533b]:hover{transform:scale(1.15)}button.active[data-v-00e9533b]{transform:scale(1.15);background:#1bb89b;color:#fff}.is-dark button[data-v-00e9533b]:not(.active){background:#292929;color:#aaa}.first-created[data-v-08d268a8]{display:flex;align-items:center;gap:4px}.adsbygoogle[data-ad-status=filled][data-v-653796b7]{margin:3rem 0;text-align:center}iconify-icon[data-v-d01ba734]{display:block}span[data-v-1f6ea1c9]{display:inline-flex;align-items:center;vertical-align:middle;margin-left:.25rem}.banner[data-v-2685687c]{margin:2rem auto}.page-edit[data-v-d53989e8]{padding:0}p[data-v-d53989e8]{text-align:right}b[data-v-d53989e8]{font-weight:500}.Vue-Toastification__container{z-index:9999;position:fixed;padding:4px;width:600px;box-sizing:border-box;display:flex;min-height:100%;color:#fff;flex-direction:column;pointer-events:none}@media only screen and (min-width:600px){.Vue-Toastification__container.top-center,.Vue-Toastification__container.top-left,.Vue-Toastification__container.top-right{top:1em}.Vue-Toastification__container.bottom-center,.Vue-Toastification__container.bottom-left,.Vue-Toastification__container.bottom-right{bottom:1em;flex-direction:column-reverse}.Vue-Toastification__container.bottom-left,.Vue-Toastification__container.top-left{left:1em}.Vue-Toastification__container.bottom-left .Vue-Toastification__toast,.Vue-Toastification__container.top-left .Vue-Toastification__toast{margin-right:auto}@supports not (-moz-appearance:none){.Vue-Toastification__container.bottom-left .Vue-Toastification__toast--rtl,.Vue-Toastification__container.top-left .Vue-Toastification__toast--rtl{margin-right:unset;margin-left:auto}}.Vue-Toastification__container.bottom-right,.Vue-Toastification__container.top-right{right:1em}.Vue-Toastification__container.bottom-right .Vue-Toastification__toast,.Vue-Toastification__container.top-right .Vue-Toastification__toast{margin-left:auto}@supports not (-moz-appearance:none){.Vue-Toastification__container.bottom-right .Vue-Toastification__toast--rtl,.Vue-Toastification__container.top-right .Vue-Toastification__toast--rtl{margin-left:unset;margin-right:auto}}.Vue-Toastification__container.bottom-center,.Vue-Toastification__container.top-center{left:50%;margin-left:-300px}.Vue-Toastification__container.bottom-center .Vue-Toastification__toast,.Vue-Toastification__container.top-center .Vue-Toastification__toast{margin-left:auto;margin-right:auto}}@media only screen and (max-width:600px){.Vue-Toastification__container{width:100vw;padding:0;left:0;margin:0}.Vue-Toastification__container .Vue-Toastification__toast{width:100%}.Vue-Toastification__container.top-center,.Vue-Toastification__container.top-left,.Vue-Toastification__container.top-right{top:0}.Vue-Toastification__container.bottom-center,.Vue-Toastification__container.bottom-left,.Vue-Toastification__container.bottom-right{bottom:0;flex-direction:column-reverse}}.Vue-Toastification__toast{display:inline-flex;position:relative;max-height:800px;min-height:64px;box-sizing:border-box;margin-bottom:1rem;padding:22px 24px;border-radius:8px;box-shadow:0 1px 10px 0 rgba(0,0,0,.1),0 2px 15px 0 rgba(0,0,0,.05);justify-content:space-between;font-family:Lato,Helvetica,Roboto,Arial,sans-serif;max-width:600px;min-width:326px;pointer-events:auto;overflow:hidden;transform:translateZ(0);direction:ltr}.Vue-Toastification__toast--rtl{direction:rtl}.Vue-Toastification__toast--default{background-color:#1976d2;color:#fff}.Vue-Toastification__toast--info{background-color:#2196f3;color:#fff}.Vue-Toastification__toast--success{background-color:#4caf50;color:#fff}.Vue-Toastification__toast--error{background-color:#ff5252;color:#fff}.Vue-Toastification__toast--warning{background-color:#ffc107;color:#fff}@media only screen and (max-width:600px){.Vue-Toastification__toast{border-radius:0;margin-bottom:.5rem}}.Vue-Toastification__toast-body{flex:1;line-height:24px;font-size:16px;word-break:break-word;white-space:pre-wrap}.Vue-Toastification__toast-component-body{flex:1}.Vue-Toastification__toast.disable-transition{transition:none!important;animation:none!important}.Vue-Toastification__close-button{font-weight:700;font-size:24px;line-height:24px;background:transparent;outline:none;border:none;padding:0 0 0 10px;cursor:pointer;transition:.3s ease;align-items:center;color:#fff;opacity:.3;transition:visibility 0s,opacity .2s linear}.Vue-Toastification__close-button:focus,.Vue-Toastification__close-button:hover{opacity:1}.Vue-Toastification__toast:not(:hover) .Vue-Toastification__close-button.show-on-hover{opacity:0}.Vue-Toastification__toast--rtl .Vue-Toastification__close-button{padding-left:unset;padding-right:10px}@keyframes scale-x-frames{0%{transform:scaleX(1)}to{transform:scaleX(0)}}.Vue-Toastification__progress-bar{position:absolute;bottom:0;left:0;width:100%;height:5px;z-index:10000;background-color:hsla(0,0%,100%,.7);transform-origin:left;animation:scale-x-frames linear 1 forwards}.Vue-Toastification__toast--rtl .Vue-Toastification__progress-bar{right:0;left:unset;transform-origin:right}.Vue-Toastification__icon{margin:auto 18px auto 0;background:transparent;outline:none;border:none;padding:0;transition:.3s ease;align-items:center;width:20px;height:100%}.Vue-Toastification__toast--rtl .Vue-Toastification__icon{margin:auto 0 auto 18px}@keyframes bounceInRight{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:translate3d(3000px,0,0)}60%{opacity:1;transform:translate3d(-25px,0,0)}75%{transform:translate3d(10px,0,0)}90%{transform:translate3d(-5px,0,0)}to{transform:none}}@keyframes bounceOutRight{40%{opacity:1;transform:translate3d(-20px,0,0)}to{opacity:0;transform:translate3d(1000px,0,0)}}@keyframes bounceInLeft{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:translate3d(-3000px,0,0)}60%{opacity:1;transform:translate3d(25px,0,0)}75%{transform:translate3d(-10px,0,0)}90%{transform:translate3d(5px,0,0)}to{transform:none}}@keyframes bounceOutLeft{20%{opacity:1;transform:translate3d(20px,0,0)}to{opacity:0;transform:translate3d(-2000px,0,0)}}@keyframes bounceInUp{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:translate3d(0,3000px,0)}60%{opacity:1;transform:translate3d(0,-20px,0)}75%{transform:translate3d(0,10px,0)}90%{transform:translate3d(0,-5px,0)}to{transform:translateZ(0)}}@keyframes bounceOutUp{20%{transform:translate3d(0,-10px,0)}40%,45%{opacity:1;transform:translate3d(0,20px,0)}to{opacity:0;transform:translate3d(0,-2000px,0)}}@keyframes bounceInDown{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:translate3d(0,-3000px,0)}60%{opacity:1;transform:translate3d(0,25px,0)}75%{transform:translate3d(0,-10px,0)}90%{transform:translate3d(0,5px,0)}to{transform:none}}@keyframes bounceOutDown{20%{transform:translate3d(0,10px,0)}40%,45%{opacity:1;transform:translate3d(0,-20px,0)}to{opacity:0;transform:translate3d(0,2000px,0)}}.Vue-Toastification__bounce-enter-active.bottom-left,.Vue-Toastification__bounce-enter-active.top-left{animation-name:bounceInLeft}.Vue-Toastification__bounce-enter-active.bottom-right,.Vue-Toastification__bounce-enter-active.top-right{animation-name:bounceInRight}.Vue-Toastification__bounce-enter-active.top-center{animation-name:bounceInDown}.Vue-Toastification__bounce-enter-active.bottom-center{animation-name:bounceInUp}.Vue-Toastification__bounce-leave-active.bottom-left,.Vue-Toastification__bounce-leave-active.top-left{animation-name:bounceOutLeft}.Vue-Toastification__bounce-leave-active.bottom-right,.Vue-Toastification__bounce-leave-active.top-right{animation-name:bounceOutRight}.Vue-Toastification__bounce-leave-active.top-center{animation-name:bounceOutUp}.Vue-Toastification__bounce-leave-active.bottom-center{animation-name:bounceOutDown}.Vue-Toastification__bounce-move{transition-timing-function:ease-in-out;transition-property:all;transition-duration:.4s}@keyframes fadeOutTop{0%{transform:translateY(0);opacity:1}to{transform:translateY(-50px);opacity:0}}@keyframes fadeOutLeft{0%{transform:translateX(0);opacity:1}to{transform:translateX(-50px);opacity:0}}@keyframes fadeOutBottom{0%{transform:translateY(0);opacity:1}to{transform:translateY(50px);opacity:0}}@keyframes fadeOutRight{0%{transform:translateX(0);opacity:1}to{transform:translateX(50px);opacity:0}}@keyframes fadeInLeft{0%{transform:translateX(-50px);opacity:0}to{transform:translateX(0);opacity:1}}@keyframes fadeInRight{0%{transform:translateX(50px);opacity:0}to{transform:translateX(0);opacity:1}}@keyframes fadeInTop{0%{transform:translateY(-50px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes fadeInBottom{0%{transform:translateY(50px);opacity:0}to{transform:translateY(0);opacity:1}}.Vue-Toastification__fade-enter-active.bottom-left,.Vue-Toastification__fade-enter-active.top-left{animation-name:fadeInLeft}.Vue-Toastification__fade-enter-active.bottom-right,.Vue-Toastification__fade-enter-active.top-right{animation-name:fadeInRight}.Vue-Toastification__fade-enter-active.top-center{animation-name:fadeInTop}.Vue-Toastification__fade-enter-active.bottom-center{animation-name:fadeInBottom}.Vue-Toastification__fade-leave-active.bottom-left,.Vue-Toastification__fade-leave-active.top-left{animation-name:fadeOutLeft}.Vue-Toastification__fade-leave-active.bottom-right,.Vue-Toastification__fade-leave-active.top-right{animation-name:fadeOutRight}.Vue-Toastification__fade-leave-active.top-center{animation-name:fadeOutTop}.Vue-Toastification__fade-leave-active.bottom-center{animation-name:fadeOutBottom}.Vue-Toastification__fade-move{transition-timing-function:ease-in-out;transition-property:all;transition-duration:.4s}@keyframes slideInBlurredLeft{0%{transform:translateX(-1000px) scaleX(2.5) scaleY(.2);transform-origin:100% 50%;filter:blur(40px);opacity:0}to{transform:translateX(0) scaleY(1) scaleX(1);transform-origin:50% 50%;filter:blur(0);opacity:1}}@keyframes slideInBlurredTop{0%{transform:translateY(-1000px) scaleY(2.5) scaleX(.2);transform-origin:50% 0;filter:blur(240px);opacity:0}to{transform:translateY(0) scaleY(1) scaleX(1);transform-origin:50% 50%;filter:blur(0);opacity:1}}@keyframes slideInBlurredRight{0%{transform:translateX(1000px) scaleX(2.5) scaleY(.2);transform-origin:0 50%;filter:blur(40px);opacity:0}to{transform:translateX(0) scaleY(1) scaleX(1);transform-origin:50% 50%;filter:blur(0);opacity:1}}@keyframes slideInBlurredBottom{0%{transform:translateY(1000px) scaleY(2.5) scaleX(.2);transform-origin:50% 100%;filter:blur(240px);opacity:0}to{transform:translateY(0) scaleY(1) scaleX(1);transform-origin:50% 50%;filter:blur(0);opacity:1}}@keyframes slideOutBlurredTop{0%{transform:translateY(0) scaleY(1) scaleX(1);transform-origin:50% 0;filter:blur(0);opacity:1}to{transform:translateY(-1000px) scaleY(2) scaleX(.2);transform-origin:50% 0;filter:blur(240px);opacity:0}}@keyframes slideOutBlurredBottom{0%{transform:translateY(0) scaleY(1) scaleX(1);transform-origin:50% 50%;filter:blur(0);opacity:1}to{transform:translateY(1000px) scaleY(2) scaleX(.2);transform-origin:50% 100%;filter:blur(240px);opacity:0}}@keyframes slideOutBlurredLeft{0%{transform:translateX(0) scaleY(1) scaleX(1);transform-origin:50% 50%;filter:blur(0);opacity:1}to{transform:translateX(-1000px) scaleX(2) scaleY(.2);transform-origin:100% 50%;filter:blur(40px);opacity:0}}@keyframes slideOutBlurredRight{0%{transform:translateX(0) scaleY(1) scaleX(1);transform-origin:50% 50%;filter:blur(0);opacity:1}to{transform:translateX(1000px) scaleX(2) scaleY(.2);transform-origin:0 50%;filter:blur(40px);opacity:0}}.Vue-Toastification__slideBlurred-enter-active.bottom-left,.Vue-Toastification__slideBlurred-enter-active.top-left{animation-name:slideInBlurredLeft}.Vue-Toastification__slideBlurred-enter-active.bottom-right,.Vue-Toastification__slideBlurred-enter-active.top-right{animation-name:slideInBlurredRight}.Vue-Toastification__slideBlurred-enter-active.top-center{animation-name:slideInBlurredTop}.Vue-Toastification__slideBlurred-enter-active.bottom-center{animation-name:slideInBlurredBottom}.Vue-Toastification__slideBlurred-leave-active.bottom-left,.Vue-Toastification__slideBlurred-leave-active.top-left{animation-name:slideOutBlurredLeft}.Vue-Toastification__slideBlurred-leave-active.bottom-right,.Vue-Toastification__slideBlurred-leave-active.top-right{animation-name:slideOutBlurredRight}.Vue-Toastification__slideBlurred-leave-active.top-center{animation-name:slideOutBlurredTop}.Vue-Toastification__slideBlurred-leave-active.bottom-center{animation-name:slideOutBlurredBottom}.Vue-Toastification__slideBlurred-move{transition-timing-function:ease-in-out;transition-property:all;transition-duration:.4s}.Vue-Toastification__toast--default{background:#292929;box-shadow:none;color:#eaeaea}.Vue-Toastification__close-button{color:#eaeaea}.Vue-Toastification__icon{display:none}.site-settings[data-v-39672356]{position:fixed;right:0;bottom:0;width:64px;height:64px}.toggle[data-v-39672356]{width:100%;height:100%;padding:20% 54% 54% 20%;background:none;border:none;border-radius:50%;cursor:pointer;background:#1bb89b;transition:transform .2s;color:#fff}.site-settings:hover .toggle[data-v-39672356],.toggle.active[data-v-39672356]{transform:scale(1.2)}.toggle[data-v-39672356] iconify-icon{margin-top:-16px;margin-left:8px}ul[data-v-39672356]{position:absolute;width:100%;height:100%;top:0;left:0;margin:0;padding:0;list-style:none;display:flex;z-index:-1;transform:scale(0)}ul li[data-v-39672356]{position:absolute}ul li[data-v-39672356]:first-child{transform:translateX(-150%)}ul li[data-v-39672356]:nth-child(2){transform:translate(-100%,-100%)}ul li[data-v-39672356]:last-child{transform:translateY(-150%)}.access[data-v-54c781ee]{margin:2rem 0;text-align:center}.access a[data-v-54c781ee]{display:inline-block;margin:.6rem;transition:transform .2s}.access a[data-v-54c781ee]:hover{transform:scale(1.05)}.blog-links[data-v-bb2a7418]{display:grid;gap:3rem 2rem;list-style:none;padding:0}.blog-links>li[data-v-bb2a7418]{border-radius:1rem;box-shadow:0 .2rem 1rem rgba(0,0,0,.1);display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}.is-dark .blog-links>li[data-v-bb2a7418]{background:#1f1f1f}.blog-links a[data-v-bb2a7418]{display:flex;flex-direction:column;color:currentColor;font-weight:unset}.blog-links a[data-v-bb2a7418]>:not(.blog-image){padding:0 1.5rem}.blog-links a .blog-image[data-v-bb2a7418]{height:250px;overflow:hidden}.blog-links a .blog-image img[data-v-bb2a7418]{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;transition:transform .3s ease-out}.blog-links a .first-created[data-v-bb2a7418]{font-size:.9rem}.blog-links a h2[data-v-bb2a7418]{border-bottom:none;transition:color .3s}.blog-links a[data-v-bb2a7418]:hover{text-decoration:none}.blog-links a:hover img[data-v-bb2a7418]{transform:scale(1.06)}.blog-links a:hover h2[data-v-bb2a7418]{color:#1bb89b}@media (min-width:720px){.blog-links[data-v-bb2a7418]{grid-template-columns:1fr 1fr}}@media (min-width:960px){.blog-links[data-v-bb2a7418]{grid-template-columns:1fr 1fr 1fr}}.blog-meta[data-v-37d0b7b8]{display:flex;flex-wrap:wrap;justify-content:space-between}div[data-v-7e0173ee]{display:flex;align-items:center}div svg[data-v-7e0173ee]{width:1rem;height:1rem}ul[data-v-7e0173ee]{list-style:none;display:flex;gap:.5rem;padding:1rem 1.5rem 1.5rem;font-size:.85rem}ul a[data-v-7e0173ee]{background:#eee;border-radius:.4rem;color:currentColor;font-weight:400;padding:.3rem .4rem}ul a[data-v-7e0173ee]:hover{text-decoration:underline}.is-dark ul a[data-v-7e0173ee]{background:#292929}nav[data-v-7c5b105f]{display:flex;flex-wrap:wrap;justify-content:center;margin:2rem 0}nav a[data-v-7c5b105f]{background:#eee;border-radius:1rem;color:currentColor;margin:.3rem;padding:.6rem;min-width:4rem;text-align:center}nav a.router-link-exact-active[data-v-7c5b105f]{color:#fff;background:#1bb89b}nav a[data-v-7c5b105f]:hover{text-decoration:none!important}.is-dark nav a[data-v-7c5b105f]:not(.router-link-exact-active){background:#292929}@media (min-width:420px){nav a[data-v-7c5b105f]{margin:.5rem;padding:1rem}}section[data-v-a37ba0d0]{margin:0 auto;max-width:740px;padding:2rem 2.5rem}ul[data-v-59795e29]{list-style:none;margin:0;padding:0}li[data-v-59795e29]{border:1px solid;border-radius:4px;box-sizing:border-box;text-align:center;margin:12px 4px;padding:0 16px;width:100%}h2[data-v-59795e29]{border:0;margin-bottom:0;padding:0}@media (min-width:720px){ul[data-v-59795e29]{display:flex}}div[data-v-43263439]{margin:.5rem 0}input[data-v-43263439],textarea[data-v-43263439]{outline:none;padding:.5rem 1rem;width:100%;font-size:100%;font-family:inherit;box-sizing:border-box;border-radius:6px;border:1px solid #aaa}input[data-v-43263439]:focus,textarea[data-v-43263439]:focus{border-color:#1bb89b}input.error[data-v-43263439],textarea.error[data-v-43263439]{border-color:red}textarea[data-v-43263439]{height:200px;resize:vertical}.link-buttons[data-v-fe445868]{margin:0 auto 1.8rem;padding:0;list-style:none;display:flex;justify-content:center}.link-buttons a[data-v-fe445868]{display:block;min-width:64px;padding:12px;margin:0 4px;border-radius:8px;box-sizing:border-box;transition-property:transform,box-shadow;transition-duration:.2s;background:#eee;box-shadow:0 3px #d0d0d0;border-bottom:2px solid #d0d0d0}.link-buttons a[data-v-fe445868]:hover{transform:translateY(3px);box-shadow:none!important}.link-buttons a img[data-v-fe445868]{display:block;margin:auto;width:auto}.link-buttons a[data-social=twitter][data-v-fe445868]{background:#1da1f2;box-shadow:0 3px #2f81be;border-bottom:2px solid #2f81be}.link-buttons a[data-social=twitter][data-v-fe445868]:hover{transform:translateY(3px);box-shadow:none!important}.link-buttons a[data-social=github][data-v-fe445868]{background:#333;box-shadow:0 3px #000;border-bottom:2px solid #000}.link-buttons a[data-social=github][data-v-fe445868]:hover{transform:translateY(3px);box-shadow:none!important}.link-buttons a[data-social=youtube][data-v-fe445868]{background:red;box-shadow:0 3px #900;border-bottom:2px solid #900}.link-buttons a[data-social=youtube][data-v-fe445868]:hover{transform:translateY(3px);box-shadow:none!important}footer[data-v-fe445868]{border-top:1px solid #eaecef;color:#2c3e50;padding:2.5rem;text-align:center}.is-dark footer[data-v-fe445868]{border-color:#444;color:#eaeaea}.home .footer{padding:0}.social[data-v-4bc0a2be]{display:flex;align-items:center;justify-content:flex-end}.is-dark .social[data-v-4bc0a2be] .social-share .social-share-btn{color:#8c8c8c}.social[data-v-4bc0a2be] .social-share .social-share-btn:hover{color:#1bb89b}.social[data-v-4bc0a2be] .social-share .social-share-btn{width:2.5rem;height:2.5rem;font-size:1.5rem}.social[data-v-4bc0a2be] .social-share .social-share-btn>span,section[data-v-568d8f4c]{display:flex;align-items:center;justify-content:center}section[data-v-568d8f4c]{background-image:url(/assets/home-bg.jpg);background-color:#1596f2;background-size:cover;background-attachment:fixed;transition:background .3s;height:100vh;max-height:900px;min-height:500px;box-sizing:border-box;flex-direction:column;position:relative}h1[data-v-568d8f4c]{font-weight:400}button[data-v-568d8f4c]{background:none;border:0;display:block;cursor:pointer;position:relative}button span[data-v-568d8f4c]{display:block;color:#fff;font-size:1.5rem;text-align:center;text-shadow:0 1px 2px #000}button span[data-v-568d8f4c]:first-child{width:150px;height:150px}button span:first-child img[data-v-568d8f4c]{width:100%;height:100%}h1[data-v-568d8f4c]{padding:1rem 2rem;margin:0;color:#fff;text-align:center;text-shadow:0 1px 2px #000;max-width:600px;font-size:3.5rem}.indicator[data-v-568d8f4c]{border:2px solid #fff;border-radius:24px;width:24px;height:36px;position:absolute;bottom:12px}.indicator[data-v-568d8f4c]:before{content:"";position:absolute;width:4px;height:6px;background:#fff;border-radius:2px;top:10%;left:calc(50% - 2px);animation:scroll-down-568d8f4c 1.5s infinite}@media (max-width:640px){h1[data-v-568d8f4c]{font-size:2rem}}@keyframes scroll-down-568d8f4c{0%{opacity:.2;transform:translateY(0)}to{opacity:1;transform:translateY(8px)}}div[data-v-e7a7a3f0]{width:180px;height:200px;flex-shrink:0;overflow:hidden;border-radius:50%}div>iframe[data-v-e7a7a3f0]{border:0;width:180px;height:300px}div[data-v-e7a7a3f0],img[data-v-e7a7a3f0]{margin-right:2rem}.right div[data-v-e7a7a3f0],.right img[data-v-e7a7a3f0]{margin-right:0;margin-left:2rem}@media (max-width:640px){div[data-v-e7a7a3f0],img[data-v-e7a7a3f0]{margin:0!important}}ul[data-v-65ae56a6]{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,1fr);gap:2rem}li[data-v-65ae56a6]{background:rgba(0,0,0,.05);border-radius:1rem;padding:3rem;position:relative}li[data-v-65ae56a6]:before{content:"\201C";display:block;font-family:serif;font-size:16rem;opacity:.1;position:absolute;top:-6rem;left:.5rem}li .content[data-v-65ae56a6]{font-style:italic;margin-bottom:2rem}li figure[data-v-65ae56a6]{margin:0;display:flex;align-items:center}li figure img[data-v-65ae56a6]{border-radius:50%}li figcaption[data-v-65ae56a6]{margin-left:2rem}li figcaption .author[data-v-65ae56a6]{font-size:1.2rem;font-weight:700}.is-dark li[data-v-65ae56a6]{background:#292929}@media (max-width:959px){ul[data-v-65ae56a6]{grid-template-columns:none}}@media (max-width:419px){li[data-v-65ae56a6]{padding:2rem}}section[data-v-06508d2a]{padding:8rem 4rem}section>div[data-v-06508d2a]{align-items:center;display:flex;justify-content:center;margin:auto;max-width:1024px}section article>h2[data-v-06508d2a]{border:0;margin-top:0;font-size:2.5rem}section article>p[data-v-06508d2a]{text-align:justify;max-width:640px}section article>footer[data-v-06508d2a]{text-align:right}section article>footer>a[data-v-06508d2a]{display:inline-block;font-size:1rem;padding:.4rem 1.5rem}section article>footer>a[data-v-06508d2a]:not(:first-child){margin-left:8%}section.right>div>[data-v-06508d2a]:first-child{order:1}section.right article>footer[data-v-06508d2a]{text-align:left}section.right article>footer>a[data-v-06508d2a]:not(:first-child){margin-right:8%}section.center footer[data-v-06508d2a],section.center h2[data-v-06508d2a]{text-align:center}section.is-dark[data-v-06508d2a]{background:rgba(0,0,0,.05)}@media (max-width:640px){section[data-v-06508d2a]{padding:4rem 2rem}section>div[data-v-06508d2a]{flex-direction:column}section>div article>footer[data-v-06508d2a],section>div article>h2[data-v-06508d2a]{text-align:center}section.right>div [data-v-06508d2a]:first-child{order:unset}section.right article>footer[data-v-06508d2a],section.right article>h2[data-v-06508d2a]{text-align:center}}ul[data-v-145d0661]{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin:0 0 1rem;padding:0}li[data-v-145d0661]{background:#fff;border-radius:.75rem;box-shadow:0 .2rem 1rem rgba(0,0,0,.1);overflow:hidden}li:hover img[data-v-145d0661]{transform:scale(1.4)}.is-dark li[data-v-145d0661]{background:#292929}span[data-v-145d0661]{display:block;overflow:hidden}span[data-v-145d0661]:last-child{color:#2c3e50;padding:.5rem 1rem;text-align:center}.is-dark span[data-v-145d0661]:last-child{color:#eaeaea}img[data-v-145d0661]{display:block;transform:scale(1.35);transition:transform .3s ease-out}@media (max-width:959px){ul[data-v-145d0661]{grid-template-columns:repeat(2,1fr)}}@media (max-width:719px){ul[data-v-145d0661]{grid-template-columns:none}}.badge[data-v-15b7b770]{display:inline-block;font-size:14px;height:18px;line-height:18px;border-radius:3px;padding:0 6px;color:#fff}.badge.green[data-v-15b7b770],.badge.tip[data-v-15b7b770],.badge[data-v-15b7b770]{background-color:#42b983}.badge.error[data-v-15b7b770]{background-color:#da5961}.badge.warn[data-v-15b7b770],.badge.warning[data-v-15b7b770],.badge.yellow[data-v-15b7b770]{background-color:#e7c000}.badge+.badge[data-v-15b7b770]{margin-left:5px}.theme-code-block[data-v-759a7d02]{display:none}.theme-code-block__active[data-v-759a7d02]{display:block}.theme-code-block>pre[data-v-759a7d02]{background-color:orange}.theme-code-group__nav[data-v-deefee04]{margin-bottom:-35px;background-color:#282c34;padding-bottom:22px;border-top-left-radius:6px;border-top-right-radius:6px;padding-left:10px;padding-top:10px}.theme-code-group__ul[data-v-deefee04]{margin:auto 0;padding-left:0;display:inline-flex;list-style:none}.theme-code-group__nav-tab[data-v-deefee04]{border:0;padding:5px;cursor:pointer;background-color:transparent;font-size:.85em;line-height:1.4;color:hsla(0,0%,100%,.9);font-weight:600}.theme-code-group__nav-tab-active[data-v-deefee04]{border-bottom:1px solid #42b983}.pre-blank[data-v-deefee04]{color:#42b983} \ No newline at end of file diff --git a/assets/js/105.fd77a680.js b/assets/js/100.fab645ae.js similarity index 77% rename from assets/js/105.fd77a680.js rename to assets/js/100.fab645ae.js index 2de28839..a19687eb 100644 --- a/assets/js/105.fd77a680.js +++ b/assets/js/100.fab645ae.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[105],{592:function(t,n,s){"use strict";s.r(n);var e=s(16),o=Object(e.a)({},(function(){return(0,this._self._c)("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}})}),[],!1,null,null,null);n.default=o.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[100],{587:function(t,n,s){"use strict";s.r(n);var e=s(16),o=Object(e.a)({},(function(){return(0,this._self._c)("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}})}),[],!1,null,null,null);n.default=o.exports}}]); \ No newline at end of file diff --git a/assets/js/100.fad3d438.js b/assets/js/103.b0aa644b.js similarity index 77% rename from assets/js/100.fad3d438.js rename to assets/js/103.b0aa644b.js index fef3c3c3..72e6d342 100644 --- a/assets/js/100.fad3d438.js +++ b/assets/js/103.b0aa644b.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[100],{588:function(t,n,s){"use strict";s.r(n);var e=s(16),o=Object(e.a)({},(function(){return(0,this._self._c)("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}})}),[],!1,null,null,null);n.default=o.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[103],{593:function(t,n,s){"use strict";s.r(n);var e=s(16),o=Object(e.a)({},(function(){return(0,this._self._c)("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}})}),[],!1,null,null,null);n.default=o.exports}}]); \ No newline at end of file diff --git a/assets/js/103.18bfa0cf.js b/assets/js/104.ff9b5a11.js similarity index 77% rename from assets/js/103.18bfa0cf.js rename to assets/js/104.ff9b5a11.js index 0f85ff10..cda8170c 100644 --- a/assets/js/103.18bfa0cf.js +++ b/assets/js/104.ff9b5a11.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[103],{591:function(t,n,s){"use strict";s.r(n);var e=s(16),o=Object(e.a)({},(function(){return(0,this._self._c)("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}})}),[],!1,null,null,null);n.default=o.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[104],{592:function(t,n,s){"use strict";s.r(n);var e=s(16),o=Object(e.a)({},(function(){return(0,this._self._c)("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}})}),[],!1,null,null,null);n.default=o.exports}}]); \ No newline at end of file diff --git a/assets/js/104.1e1f4aec.js b/assets/js/105.220f2e88.js similarity index 77% rename from assets/js/104.1e1f4aec.js rename to assets/js/105.220f2e88.js index 557b8d9b..a25bfc20 100644 --- a/assets/js/104.1e1f4aec.js +++ b/assets/js/105.220f2e88.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[104],{593:function(t,n,s){"use strict";s.r(n);var e=s(16),o=Object(e.a)({},(function(){return(0,this._self._c)("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}})}),[],!1,null,null,null);n.default=o.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[105],{591:function(t,n,s){"use strict";s.r(n);var e=s(16),o=Object(e.a)({},(function(){return(0,this._self._c)("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}})}),[],!1,null,null,null);n.default=o.exports}}]); \ No newline at end of file diff --git a/assets/js/106.454b0815.js b/assets/js/106.454b0815.js new file mode 100644 index 00000000..3c4becea --- /dev/null +++ b/assets/js/106.454b0815.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[106],{594:function(t,n,s){"use strict";s.r(n);var e=s(16),o=Object(e.a)({},(function(){return(0,this._self._c)("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}})}),[],!1,null,null,null);n.default=o.exports}}]); \ No newline at end of file diff --git a/assets/js/106.8d0b7790.js b/assets/js/106.8d0b7790.js deleted file mode 100644 index e78eb6e4..00000000 --- a/assets/js/106.8d0b7790.js +++ /dev/null @@ -1 +0,0 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[106],{595:function(t,n,s){"use strict";s.r(n);var e=s(16),o=Object(e.a)({},(function(){return(0,this._self._c)("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}})}),[],!1,null,null,null);n.default=o.exports}}]); \ No newline at end of file diff --git a/assets/js/107.77286cf6.js b/assets/js/107.77286cf6.js deleted file mode 100644 index 11d14ec1..00000000 --- a/assets/js/107.77286cf6.js +++ /dev/null @@ -1 +0,0 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[107],{594:function(t,n,s){"use strict";s.r(n);var e=s(16),o=Object(e.a)({},(function(){return(0,this._self._c)("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}})}),[],!1,null,null,null);n.default=o.exports}}]); \ No newline at end of file diff --git a/assets/js/107.93e91930.js b/assets/js/107.93e91930.js new file mode 100644 index 00000000..23b67f09 --- /dev/null +++ b/assets/js/107.93e91930.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[107],{595:function(t,n,s){"use strict";s.r(n);var e=s(16),o=Object(e.a)({},(function(){return(0,this._self._c)("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}})}),[],!1,null,null,null);n.default=o.exports}}]); \ No newline at end of file diff --git a/assets/js/108.985aa9d5.js b/assets/js/108.985aa9d5.js new file mode 100644 index 00000000..07a63ce1 --- /dev/null +++ b/assets/js/108.985aa9d5.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[108],{599:function(t,n,s){"use strict";s.r(n);var e=s(16),o=Object(e.a)({},(function(){return(0,this._self._c)("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}})}),[],!1,null,null,null);n.default=o.exports}}]); \ No newline at end of file diff --git a/assets/js/108.cb4ff78d.js b/assets/js/108.cb4ff78d.js deleted file mode 100644 index bdf835fc..00000000 --- a/assets/js/108.cb4ff78d.js +++ /dev/null @@ -1 +0,0 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[108],{600:function(t,n,s){"use strict";s.r(n);var e=s(16),o=Object(e.a)({},(function(){return(0,this._self._c)("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}})}),[],!1,null,null,null);n.default=o.exports}}]); \ No newline at end of file diff --git a/assets/js/111.74d4d875.js b/assets/js/111.74d4d875.js deleted file mode 100644 index e01635e9..00000000 --- a/assets/js/111.74d4d875.js +++ /dev/null @@ -1 +0,0 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[111],{598:function(t,n,s){"use strict";s.r(n);var e=s(16),o=Object(e.a)({},(function(){return(0,this._self._c)("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}})}),[],!1,null,null,null);n.default=o.exports}}]); \ No newline at end of file diff --git a/assets/js/111.d214e230.js b/assets/js/111.d214e230.js new file mode 100644 index 00000000..f408c432 --- /dev/null +++ b/assets/js/111.d214e230.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[111],{600:function(t,n,s){"use strict";s.r(n);var e=s(16),o=Object(e.a)({},(function(){return(0,this._self._c)("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}})}),[],!1,null,null,null);n.default=o.exports}}]); \ No newline at end of file diff --git a/assets/js/112.3f432110.js b/assets/js/112.3f432110.js deleted file mode 100644 index 67a6f10d..00000000 --- a/assets/js/112.3f432110.js +++ /dev/null @@ -1 +0,0 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[112],{599:function(t,n,s){"use strict";s.r(n);var e=s(16),o=Object(e.a)({},(function(){return(0,this._self._c)("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}})}),[],!1,null,null,null);n.default=o.exports}}]); \ No newline at end of file diff --git a/assets/js/112.a736d129.js b/assets/js/112.a736d129.js new file mode 100644 index 00000000..ed74534b --- /dev/null +++ b/assets/js/112.a736d129.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[112],{598:function(t,n,s){"use strict";s.r(n);var e=s(16),o=Object(e.a)({},(function(){return(0,this._self._c)("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}})}),[],!1,null,null,null);n.default=o.exports}}]); \ No newline at end of file diff --git a/assets/js/114.2a298a5e.js b/assets/js/114.2a298a5e.js deleted file mode 100644 index e2689605..00000000 --- a/assets/js/114.2a298a5e.js +++ /dev/null @@ -1 +0,0 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[114],{603:function(t,n,s){"use strict";s.r(n);var e=s(16),o=Object(e.a)({},(function(){return(0,this._self._c)("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}})}),[],!1,null,null,null);n.default=o.exports}}]); \ No newline at end of file diff --git a/assets/js/114.4bdf5515.js b/assets/js/114.4bdf5515.js new file mode 100644 index 00000000..88b02814 --- /dev/null +++ b/assets/js/114.4bdf5515.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[114],{602:function(t,n,s){"use strict";s.r(n);var e=s(16),o=Object(e.a)({},(function(){return(0,this._self._c)("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}})}),[],!1,null,null,null);n.default=o.exports}}]); \ No newline at end of file diff --git a/assets/js/115.075f1829.js b/assets/js/115.075f1829.js deleted file mode 100644 index 115e5ef3..00000000 --- a/assets/js/115.075f1829.js +++ /dev/null @@ -1 +0,0 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[115],{602:function(t,n,s){"use strict";s.r(n);var e=s(16),o=Object(e.a)({},(function(){return(0,this._self._c)("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}})}),[],!1,null,null,null);n.default=o.exports}}]); \ No newline at end of file diff --git a/assets/js/115.d6c3541a.js b/assets/js/115.d6c3541a.js new file mode 100644 index 00000000..5b436dc5 --- /dev/null +++ b/assets/js/115.d6c3541a.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[115],{603:function(t,n,s){"use strict";s.r(n);var e=s(16),o=Object(e.a)({},(function(){return(0,this._self._c)("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}})}),[],!1,null,null,null);n.default=o.exports}}]); \ No newline at end of file diff --git a/assets/js/12.20d800b8.js b/assets/js/12.79bdb649.js similarity index 94% rename from assets/js/12.20d800b8.js rename to assets/js/12.79bdb649.js index c85bfd8b..1cfbd0c3 100644 --- a/assets/js/12.20d800b8.js +++ b/assets/js/12.79bdb649.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[12],{401:function(e,t,a){e.exports=a.p+"assets/img/ad-networks.647b5d83.png"},402:function(e,t,a){e.exports=a.p+"assets/img/ad-formats-admob.4883adfe.png"},403:function(e,t,a){e.exports=a.p+"assets/img/ad-formats-adsense.457df8d7.png"},404:function(e,t,a){e.exports=a.p+"assets/img/my-ad-formats.1b93ee12.png"},544:function(e,t,a){"use strict";a.r(t);var o=a(16),s=Object(o.a)({},(function(){var e=this,t=e._self._c;return t("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[t("h1",{attrs:{id:"about-the-ads-and-how-i-implement-them"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#about-the-ads-and-how-i-implement-them"}},[e._v("#")]),e._v(" About the ads and how I implement them")]),e._v(" "),t("m-blog-meta"),e._v(" "),t("p",[t("img",{attrs:{src:"https://images.unsplash.com/photo-1546142711-1e28c0540deb?auto=format&fit=crop&w=740&q=80",alt:"Ad promo"}})]),e._v(" "),t("p",[t("em",[e._v("Cover image by Fredrick Suwandi via "),t("a",{attrs:{href:"https://unsplash.com/photos/csXTAyTiESo",target:"_blank",rel:"noopener noreferrer"}},[e._v("Unsplash"),t("OutboundLink")],1)])]),e._v(" "),t("p",[e._v("Ads, the thing we all hate as when we are trying to enjoy something, they appear and kill the whole experience. Yes, I said \"we\" because I myself also hate it, but let's be honest and admit the fact that they generate incomes and one can hardly fight against this temptation, or even go too far as abusing it to earn as much as possible when this power is given and may be used at one's will. Admittedly, I'm that type of guy. Or if you are one of the nice people in my audience, you may consider me having some morals left for not flooding your screen with ads.")]),e._v(" "),t("p",[e._v("Sounds more like a confession than a blog so far, eh? Let's put that aside because, in this blog, I would like to share my experience with the Ads implementation in the different versions of my "),t("RouterLink",{attrs:{to:"/win7simu/about.html"}},[e._v("Win7 Simu")]),e._v(".")],1),e._v(" "),t("h2",{attrs:{id:"choosing-the-ad-network"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#choosing-the-ad-network"}},[e._v("#")]),e._v(" Choosing the Ad Network")]),e._v(" "),t("p",[t("img",{attrs:{src:a(401),alt:"Ad Networks - AdMob, AppLovin, Adsense"}})]),e._v(" "),t("p",[e._v("Probably the least thing that bothered me when I came up with the idea to implement ads in my simulator. Despite a vast range of ad networks available, I just went straight for "),t("a",{attrs:{href:"https://admob.google.com/home/",target:"_blank",rel:"noopener noreferrer"}},[e._v("AdMob"),t("OutboundLink")],1),e._v(" due to its dominating presence all around the world. Indeed it's dominating for various reasons. From the registration to implementation, it was incredibly easy that I hardly found any time struggling with it. The documentation is well structured and provides all the instructions I would ever need. It even offered the mediation feature which combines the AdMob network with other third-party ad networks I registered, and picks the highest paid ad among these networks and display to the users, my revenue is then further boosted (well, not so much as you're imagining).")]),e._v(" "),t("p",[e._v("So yea, AdMob had been my partner for more than a year, until a couple of months ago... an "),t("strong",[e._v("ad serving limit")]),e._v(" was put down on my account. This would not be surprising as I had faced this issue twice before, each time only lasted for around 2 weeks to 1 month, but this time, it has been 4 months, without any notifications or simply a freaking reason. I mean, literally, every time an ad serving limit was placed and lifted, I do not have any idea what was the reason. And this time it was over my patience limit and I decided to switch to a new partner for real. After several searches and comparisons, I decided to pick "),t("a",{attrs:{href:"https://www.applovin.com/",target:"_blank",rel:"noopener noreferrer"}},[e._v("AppLovin"),t("OutboundLink")],1),e._v(" due to its ease of registration and a similar implementation method to AdMob. I'll just wait and see how it performs from here on.")]),e._v(" "),t("p",[e._v("For this website, I again went straight for "),t("a",{attrs:{href:"https://www.google.com/adsense/start/",target:"_blank",rel:"noopener noreferrer"}},[e._v("Adsense"),t("OutboundLink")],1),e._v(", which is more or less a blood-related brother of AdMob. It has the same pros and is much simpler to register compared to other available vendors on the market due to the fact that page views/number of visitors per month are not considered but only your content that matters, as registration criteria. But hopefully, it won't end up the same way as AdMob.")]),e._v(" "),t("p",[e._v("Aside from these choices of mine, there are many more if you search them up, but of course, each one requires a different method for registration and the complexity depends on your region/location, and obviously your content as well. It's also important to note the revenue yielded from each is also varied.")]),e._v(" "),t("h2",{attrs:{id:"picking-the-ad-format"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#picking-the-ad-format"}},[e._v("#")]),e._v(" Picking the Ad Format")]),e._v(" "),t("h3",{attrs:{id:"mobile-app"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#mobile-app"}},[e._v("#")]),e._v(" Mobile App")]),e._v(" "),t("p",[e._v("Each ad network offers a different set of ad formats that you can implement. But in general, the most basic ones are "),t("strong",[e._v("Banner")]),e._v(", "),t("strong",[e._v("Interstitial")]),e._v(" and "),t("strong",[e._v("Rewarded")]),e._v(". Other formats just get their behaviors altered out of these base formats. Just understanding these 3 is already sufficient to pick the ones suitable for your app.")]),e._v(" "),t("p",[t("img",{attrs:{src:a(402),alt:"AdMob Ad Formats"}})]),e._v(" "),t("p",[e._v("To pick the ad format for your own, it's obviously also important to know which one provides more revenue, hence for your reference, it is: "),t("strong",[e._v("Rewarded > Interstitial > Banner")]),e._v(". Rewarded ads bring the most revenue out of these, as when a user opt-in to watch an ad in exchange for something in-app, it is usually a 30-second or longer video ad. While Interstitial ads are a bit less in terms of revenue, they are still much more compared to Banners, but they also come with the paid price of user experience and are much of a means for abusing or suffocating the user with ads.")]),e._v(" "),t("p",[e._v("For my "),t("strong",[e._v("Win7 Simu")]),e._v(", I picked Banner and Interstitial as these two are more suitable with my app's tech and easier to implement.")]),e._v(" "),t("h3",{attrs:{id:"website"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#website"}},[e._v("#")]),e._v(" Website")]),e._v(" "),t("p",[e._v("For this website and the web version of "),t("strong",[e._v("Win7 Simu")]),e._v(", so far I have only considered and implemented "),t("strong",[e._v("Adsense")]),e._v(", therefore I'm only aware of the below ad formats from Adsense.")]),e._v(" "),t("p",[t("img",{attrs:{src:a(403),alt:"Adsense Ad Formats"}})]),e._v(" "),t("p",[e._v("However, out of these 4, I only needed to use "),t("strong",[e._v("Display Ad")]),e._v(", which is also the format recommended by Google. The Display ad offers a responsive size that works anywhere you might cram it to, but of course the space should not be too small, otherwise there will be no ad available for serving. It's also possible to let Adsense setup the ads for you without any manual work by enabling the "),t("strong",[e._v("Auto Ads")]),e._v(", but personally, I prefer doing things by my own for which I will have full controls.")]),e._v(" "),t("a-google-ad"),e._v(" "),t("h2",{attrs:{id:"implementing-ads"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#implementing-ads"}},[e._v("#")]),e._v(" Implementing ads")]),e._v(" "),t("p",[e._v("In this section, I'm not going into so much detail as to how to implement the ads in coding or something like how to write a framework component for placing Ads (there are already plenty of such tutorials and guides which are far more helpful than I can explain), but rather how the ads are being implemented in my products, the "),t("strong",[e._v("Win7 Simu")]),e._v(" app and "),t("strong",[e._v("this website")]),e._v(", and potentially any "),t("RouterLink",{attrs:{to:"/brick1100/about.html"}},[e._v("future product")]),e._v(" I may release.")],1),e._v(" "),t("h3",{attrs:{id:"win7-simu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#win7-simu"}},[e._v("#")]),e._v(" Win7 Simu")]),e._v(" "),t("p",[e._v("So as mentioned above, due to the nature of my app, I picked Banner and Interstitial as my ad formats to implement.")]),e._v(" "),t("p",[t("img",{attrs:{src:a(404),alt:"Win7 Simu's ad formats"}})]),e._v(" "),t("p",[e._v("The banner ad was placed at the top of the screen, with a refresh rate set to auto - typically a new ad is served after around 25 to 30 seconds. This one earned me a few cents everyday and I would say that's a fairly good amount to be happy about. However, considered that it occupied quite some space at the top which can prevent the user from enjoying an OS in fullscreen and poorly affect the experience, I decided to make a sacrifice by removing it from the app. Therefore, from "),t("RouterLink",{attrs:{to:"/win7simu/changelog.html#2-16-0"}},[e._v("v2.16.0")]),e._v(" onwards, the banner ads are gone and you may enjoy the app to your fullest.")],1),e._v(" "),t("p",[e._v("The interstitial ad is still kept as a motivation for me to constantly maintain and work on the project, and also bring you more cool updates. And I didn't forget to carefully consider the frequency and placement for this type of ad so that you won't be interrupted so much and get annoyed. But of course, no matter what I try, I fully understand that there are always people who prefer criticism and will never be happy with such effort. I sure hope if you are not one of these people, please understand and keep supporting me.")]),e._v(" "),t("h3",{attrs:{id:"this-website"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#this-website"}},[e._v("#")]),e._v(" This website")]),e._v(" "),t("p",[e._v("You're probably seeing a few ads already in this blog post, and you can trust me when I say this is as many as I wanted to implement, not more. I used the responsive display ads by Adsense and tried to place the ads in the least intrusive way that hopefully blend with your reading experience. One last useful hint for those who also want to implement Adsense in their Vuepress blogs just like mine, you can refer to my site's source code which I made public "),t("a",{attrs:{href:"https://github.com/Visnalize/visnalize.github.io/tree/dev",target:"_blank",rel:"noopener noreferrer"}},[e._v("on Github"),t("OutboundLink")],1),e._v(".")]),e._v(" "),t("p",[e._v("And this would be all I wanted to share in this blog, hope you had a good time reading it and somehow got some useful pieces of info with you as well.")]),e._v(" "),t("m-blog-tag-list",{attrs:{tags:e.$page.frontmatter.tag,showIcon:""}})],1)}),[],!1,null,null,null);t.default=s.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[12],{400:function(e,t,a){e.exports=a.p+"assets/img/ad-networks.647b5d83.png"},401:function(e,t,a){e.exports=a.p+"assets/img/ad-formats-admob.4883adfe.png"},402:function(e,t,a){e.exports=a.p+"assets/img/ad-formats-adsense.457df8d7.png"},403:function(e,t,a){e.exports=a.p+"assets/img/my-ad-formats.1b93ee12.png"},543:function(e,t,a){"use strict";a.r(t);var o=a(16),s=Object(o.a)({},(function(){var e=this,t=e._self._c;return t("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[t("h1",{attrs:{id:"about-the-ads-and-how-i-implement-them"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#about-the-ads-and-how-i-implement-them"}},[e._v("#")]),e._v(" About the ads and how I implement them")]),e._v(" "),t("m-blog-meta"),e._v(" "),t("p",[t("img",{attrs:{src:"https://images.unsplash.com/photo-1546142711-1e28c0540deb?auto=format&fit=crop&w=740&q=80",alt:"Ad promo"}})]),e._v(" "),t("p",[t("em",[e._v("Cover image by Fredrick Suwandi via "),t("a",{attrs:{href:"https://unsplash.com/photos/csXTAyTiESo",target:"_blank",rel:"noopener noreferrer"}},[e._v("Unsplash"),t("OutboundLink")],1)])]),e._v(" "),t("p",[e._v("Ads, the thing we all hate as when we are trying to enjoy something, they appear and kill the whole experience. Yes, I said \"we\" because I myself also hate it, but let's be honest and admit the fact that they generate incomes and one can hardly fight against this temptation, or even go too far as abusing it to earn as much as possible when this power is given and may be used at one's will. Admittedly, I'm that type of guy. Or if you are one of the nice people in my audience, you may consider me having some morals left for not flooding your screen with ads.")]),e._v(" "),t("p",[e._v("Sounds more like a confession than a blog so far, eh? Let's put that aside because, in this blog, I would like to share my experience with the Ads implementation in the different versions of my "),t("RouterLink",{attrs:{to:"/win7simu/about.html"}},[e._v("Win7 Simu")]),e._v(".")],1),e._v(" "),t("h2",{attrs:{id:"choosing-the-ad-network"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#choosing-the-ad-network"}},[e._v("#")]),e._v(" Choosing the Ad Network")]),e._v(" "),t("p",[t("img",{attrs:{src:a(400),alt:"Ad Networks - AdMob, AppLovin, Adsense"}})]),e._v(" "),t("p",[e._v("Probably the least thing that bothered me when I came up with the idea to implement ads in my simulator. Despite a vast range of ad networks available, I just went straight for "),t("a",{attrs:{href:"https://admob.google.com/home/",target:"_blank",rel:"noopener noreferrer"}},[e._v("AdMob"),t("OutboundLink")],1),e._v(" due to its dominating presence all around the world. Indeed it's dominating for various reasons. From the registration to implementation, it was incredibly easy that I hardly found any time struggling with it. The documentation is well structured and provides all the instructions I would ever need. It even offered the mediation feature which combines the AdMob network with other third-party ad networks I registered, and picks the highest paid ad among these networks and display to the users, my revenue is then further boosted (well, not so much as you're imagining).")]),e._v(" "),t("p",[e._v("So yea, AdMob had been my partner for more than a year, until a couple of months ago... an "),t("strong",[e._v("ad serving limit")]),e._v(" was put down on my account. This would not be surprising as I had faced this issue twice before, each time only lasted for around 2 weeks to 1 month, but this time, it has been 4 months, without any notifications or simply a freaking reason. I mean, literally, every time an ad serving limit was placed and lifted, I do not have any idea what was the reason. And this time it was over my patience limit and I decided to switch to a new partner for real. After several searches and comparisons, I decided to pick "),t("a",{attrs:{href:"https://www.applovin.com/",target:"_blank",rel:"noopener noreferrer"}},[e._v("AppLovin"),t("OutboundLink")],1),e._v(" due to its ease of registration and a similar implementation method to AdMob. I'll just wait and see how it performs from here on.")]),e._v(" "),t("p",[e._v("For this website, I again went straight for "),t("a",{attrs:{href:"https://www.google.com/adsense/start/",target:"_blank",rel:"noopener noreferrer"}},[e._v("Adsense"),t("OutboundLink")],1),e._v(", which is more or less a blood-related brother of AdMob. It has the same pros and is much simpler to register compared to other available vendors on the market due to the fact that page views/number of visitors per month are not considered but only your content that matters, as registration criteria. But hopefully, it won't end up the same way as AdMob.")]),e._v(" "),t("p",[e._v("Aside from these choices of mine, there are many more if you search them up, but of course, each one requires a different method for registration and the complexity depends on your region/location, and obviously your content as well. It's also important to note the revenue yielded from each is also varied.")]),e._v(" "),t("h2",{attrs:{id:"picking-the-ad-format"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#picking-the-ad-format"}},[e._v("#")]),e._v(" Picking the Ad Format")]),e._v(" "),t("h3",{attrs:{id:"mobile-app"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#mobile-app"}},[e._v("#")]),e._v(" Mobile App")]),e._v(" "),t("p",[e._v("Each ad network offers a different set of ad formats that you can implement. But in general, the most basic ones are "),t("strong",[e._v("Banner")]),e._v(", "),t("strong",[e._v("Interstitial")]),e._v(" and "),t("strong",[e._v("Rewarded")]),e._v(". Other formats just get their behaviors altered out of these base formats. Just understanding these 3 is already sufficient to pick the ones suitable for your app.")]),e._v(" "),t("p",[t("img",{attrs:{src:a(401),alt:"AdMob Ad Formats"}})]),e._v(" "),t("p",[e._v("To pick the ad format for your own, it's obviously also important to know which one provides more revenue, hence for your reference, it is: "),t("strong",[e._v("Rewarded > Interstitial > Banner")]),e._v(". Rewarded ads bring the most revenue out of these, as when a user opt-in to watch an ad in exchange for something in-app, it is usually a 30-second or longer video ad. While Interstitial ads are a bit less in terms of revenue, they are still much more compared to Banners, but they also come with the paid price of user experience and are much of a means for abusing or suffocating the user with ads.")]),e._v(" "),t("p",[e._v("For my "),t("strong",[e._v("Win7 Simu")]),e._v(", I picked Banner and Interstitial as these two are more suitable with my app's tech and easier to implement.")]),e._v(" "),t("h3",{attrs:{id:"website"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#website"}},[e._v("#")]),e._v(" Website")]),e._v(" "),t("p",[e._v("For this website and the web version of "),t("strong",[e._v("Win7 Simu")]),e._v(", so far I have only considered and implemented "),t("strong",[e._v("Adsense")]),e._v(", therefore I'm only aware of the below ad formats from Adsense.")]),e._v(" "),t("p",[t("img",{attrs:{src:a(402),alt:"Adsense Ad Formats"}})]),e._v(" "),t("p",[e._v("However, out of these 4, I only needed to use "),t("strong",[e._v("Display Ad")]),e._v(", which is also the format recommended by Google. The Display ad offers a responsive size that works anywhere you might cram it to, but of course the space should not be too small, otherwise there will be no ad available for serving. It's also possible to let Adsense setup the ads for you without any manual work by enabling the "),t("strong",[e._v("Auto Ads")]),e._v(", but personally, I prefer doing things by my own for which I will have full controls.")]),e._v(" "),t("a-google-ad"),e._v(" "),t("h2",{attrs:{id:"implementing-ads"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#implementing-ads"}},[e._v("#")]),e._v(" Implementing ads")]),e._v(" "),t("p",[e._v("In this section, I'm not going into so much detail as to how to implement the ads in coding or something like how to write a framework component for placing Ads (there are already plenty of such tutorials and guides which are far more helpful than I can explain), but rather how the ads are being implemented in my products, the "),t("strong",[e._v("Win7 Simu")]),e._v(" app and "),t("strong",[e._v("this website")]),e._v(", and potentially any "),t("RouterLink",{attrs:{to:"/brick1100/about.html"}},[e._v("future product")]),e._v(" I may release.")],1),e._v(" "),t("h3",{attrs:{id:"win7-simu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#win7-simu"}},[e._v("#")]),e._v(" Win7 Simu")]),e._v(" "),t("p",[e._v("So as mentioned above, due to the nature of my app, I picked Banner and Interstitial as my ad formats to implement.")]),e._v(" "),t("p",[t("img",{attrs:{src:a(403),alt:"Win7 Simu's ad formats"}})]),e._v(" "),t("p",[e._v("The banner ad was placed at the top of the screen, with a refresh rate set to auto - typically a new ad is served after around 25 to 30 seconds. This one earned me a few cents everyday and I would say that's a fairly good amount to be happy about. However, considered that it occupied quite some space at the top which can prevent the user from enjoying an OS in fullscreen and poorly affect the experience, I decided to make a sacrifice by removing it from the app. Therefore, from "),t("RouterLink",{attrs:{to:"/win7simu/changelog.html#2-16-0"}},[e._v("v2.16.0")]),e._v(" onwards, the banner ads are gone and you may enjoy the app to your fullest.")],1),e._v(" "),t("p",[e._v("The interstitial ad is still kept as a motivation for me to constantly maintain and work on the project, and also bring you more cool updates. And I didn't forget to carefully consider the frequency and placement for this type of ad so that you won't be interrupted so much and get annoyed. But of course, no matter what I try, I fully understand that there are always people who prefer criticism and will never be happy with such effort. I sure hope if you are not one of these people, please understand and keep supporting me.")]),e._v(" "),t("h3",{attrs:{id:"this-website"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#this-website"}},[e._v("#")]),e._v(" This website")]),e._v(" "),t("p",[e._v("You're probably seeing a few ads already in this blog post, and you can trust me when I say this is as many as I wanted to implement, not more. I used the responsive display ads by Adsense and tried to place the ads in the least intrusive way that hopefully blend with your reading experience. One last useful hint for those who also want to implement Adsense in their Vuepress blogs just like mine, you can refer to my site's source code which I made public "),t("a",{attrs:{href:"https://github.com/Visnalize/visnalize.github.io/tree/dev",target:"_blank",rel:"noopener noreferrer"}},[e._v("on Github"),t("OutboundLink")],1),e._v(".")]),e._v(" "),t("p",[e._v("And this would be all I wanted to share in this blog, hope you had a good time reading it and somehow got some useful pieces of info with you as well.")]),e._v(" "),t("m-blog-tag-list",{attrs:{tags:e.$page.frontmatter.tag,showIcon:""}})],1)}),[],!1,null,null,null);t.default=s.exports}}]); \ No newline at end of file diff --git a/assets/js/13.b0a26325.js b/assets/js/13.c76b4d0e.js similarity index 98% rename from assets/js/13.b0a26325.js rename to assets/js/13.c76b4d0e.js index b13aaad1..4c5a616f 100644 --- a/assets/js/13.b0a26325.js +++ b/assets/js/13.c76b4d0e.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[13],{407:function(e,t,a){e.exports=a.p+"assets/img/roms.a020f50d.jpg"},408:function(e,t,a){e.exports=a.p+"assets/img/gamesdb.3f817468.jpg"},409:function(e,t,a){e.exports=a.p+"assets/img/insert-game-data.1bcf0446.jpg"},410:function(e,t,a){e.exports=a.p+"assets/img/insert-game-data2.ae992983.jpg"},549:function(e,t,a){"use strict";a.r(t);var o=a(16),r=Object(o.a)({},(function(){var e=this,t=e._self._c;return t("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[t("h1",{attrs:{id:"how-to-add-more-games-to-game-stick-lite-4k"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#how-to-add-more-games-to-game-stick-lite-4k"}},[e._v("#")]),e._v(" How to add more games to Game Stick Lite 4K")]),e._v(" "),t("m-blog-meta"),e._v(" "),t("p",[t("img",{attrs:{src:"/assets/covers/game-stick-4k-lite.jpg",alt:"Game Stick Lite 4K"}})]),e._v(" "),t("p",[e._v("Recently, I have had a chance to get my hands on a Game Stick Lite 4K, a USB stick-like device with two controllers and a bunch of pre-installed games that you can play on your TV. It is a fantastic option for those who want to play their childhood games on a big screen without owning a fancy console or a computer, as it is very affordable (typically around $20 - $40) and easy to set up. Though there are a lot of games pre-installed, some of your childhood favorites might be missing or are not available in your language. In this post, I will show you how to add more games to the Game Stick Lite 4K to enjoy more of your childhood games.")]),e._v(" "),t("h2",{attrs:{id:"prerequisites"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#prerequisites"}},[e._v("#")]),e._v(" Prerequisites")]),e._v(" "),t("ul",[t("li",[e._v("A Game Stick Lite 4K (apparently)")]),e._v(" "),t("li",[e._v("A computer or laptop with internet connection")]),e._v(" "),t("li",[e._v("A MicroSD card reader (even your smartphone can be used as a card reader)")])]),e._v(" "),t("h2",{attrs:{id:"step-by-step-guide"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#step-by-step-guide"}},[e._v("#")]),e._v(" Step-by-step guide")]),e._v(" "),t("ul",[t("li",[t("p",[e._v("Have the game ROMs you want to play ready (you can find these easily by searching on the internet). Optionally, download a cover image for each game. The cover image should be in the "),t("code",[e._v(".png")]),e._v(" format and have the same name as the game ROM file. The cover image may then be displayed when you select the game to play.")]),e._v(" "),t("p",[t("img",{attrs:{src:a(407),alt:"Game ROMs and cover images"}})])]),e._v(" "),t("li",[t("p",[e._v("Remove the MicroSD card from the game stick and insert it into your computer or laptop using a MicroSD card reader.")])]),e._v(" "),t("li",[t("p",[e._v("At the root of the SD card, you will see a "),t("code",[e._v("game")]),e._v(" folder, this is where all the games are stored. Games are grouped by the console they belong to. For instance, all the NES games are stored in the "),t("code",[e._v("fc")]),e._v(" folder, all the GameboyColor games are stored in the "),t("code",[e._v("gbc")]),e._v(" folder, Atari games in the "),t("code",[e._v("atari")]),e._v(" folder, and so on.")])]),e._v(" "),t("li",[t("p",[e._v("Copy your game ROMs (and their cover images) to the respective folders. Note that the ROM format should match with what is already available in the folder.")])]),e._v(" "),t("li",[t("p",[e._v("Install "),t("a",{attrs:{href:"https://sqlitebrowser.org/",target:"_blank",rel:"noopener noreferrer"}},[e._v("DB4S"),t("OutboundLink")],1),e._v(" (SQLite Database Browser) on your computer or laptop.")])]),e._v(" "),t("li",[t("p",[e._v("Back to the root of the SD card, open the "),t("code",[e._v("games.db")]),e._v(" file with DB4S (you might need to copy the file to your computer first if you are using a smartphone as a card reader).")])]),e._v(" "),t("li",[t("p",[e._v("Here, a list of tables in the game database will be displayed, you only need to care about the tables "),t("code",[e._v("tbl_en")]),e._v(" and "),t("code",[e._v("tbl_game")]),e._v(" where you will modify to add your games.")]),e._v(" "),t("p",[t("img",{attrs:{src:a(408),alt:"Open games.db file using DB4S"}})])]),e._v(" "),t("li",[t("p",[e._v('Click on the "Browse Data" tab and select the '),t("code",[e._v("tbl_en")]),e._v(' table from the dropdown. Choose "Insert a new record" and add your game titles. Make sure the game titles match the names of the ROM files you added earlier.')]),e._v(" "),t("p",[t("img",{attrs:{src:a(409),alt:"Browse Data tab"}})])]),e._v(" "),t("li",[t("p",[e._v("Then select the "),t("code",[e._v("tbl_game")]),e._v(" table from the dropdown. Start adding your game data here following the existing format and structure. Also make sure the game titles match the names of the ROM files you added earlier.")]),e._v(" "),t("p",[t("img",{attrs:{src:a(410),alt:"Insert game data"}})])])]),e._v(" "),t("div",{staticClass:"custom-block warning"},[t("p",{staticClass:"custom-block-title"},[e._v("Warning")]),e._v(" "),t("p",[e._v("Be very careful when modifying the game database. Any mistake will cause the game stick to not work properly. Always make a backup of the "),t("code",[e._v("games.db")]),e._v(" file before making any changes.")])]),e._v(" "),t("ul",[t("li",[e._v("Save your changes (and replace the "),t("code",[e._v("games.db")]),e._v(" file on the SD card if you copied it to your computer earlier).")]),e._v(" "),t("li",[e._v("Safely remove the MicroSD card from your computer or laptop and insert it back into the game stick.")]),e._v(" "),t("li",[e._v("Turn on the game stick and enjoy your games!")])]),e._v(" "),t("m-blog-tag-list",{attrs:{tags:e.$page.frontmatter.tag,showIcon:""}})],1)}),[],!1,null,null,null);t.default=r.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[13],{407:function(e,t,a){e.exports=a.p+"assets/img/roms.a020f50d.jpg"},408:function(e,t,a){e.exports=a.p+"assets/img/gamesdb.3f817468.jpg"},409:function(e,t,a){e.exports=a.p+"assets/img/insert-game-data.1bcf0446.jpg"},410:function(e,t,a){e.exports=a.p+"assets/img/insert-game-data2.ae992983.jpg"},548:function(e,t,a){"use strict";a.r(t);var o=a(16),r=Object(o.a)({},(function(){var e=this,t=e._self._c;return t("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[t("h1",{attrs:{id:"how-to-add-more-games-to-game-stick-lite-4k"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#how-to-add-more-games-to-game-stick-lite-4k"}},[e._v("#")]),e._v(" How to add more games to Game Stick Lite 4K")]),e._v(" "),t("m-blog-meta"),e._v(" "),t("p",[t("img",{attrs:{src:"/assets/covers/game-stick-4k-lite.jpg",alt:"Game Stick Lite 4K"}})]),e._v(" "),t("p",[e._v("Recently, I have had a chance to get my hands on a Game Stick Lite 4K, a USB stick-like device with two controllers and a bunch of pre-installed games that you can play on your TV. It is a fantastic option for those who want to play their childhood games on a big screen without owning a fancy console or a computer, as it is very affordable (typically around $20 - $40) and easy to set up. Though there are a lot of games pre-installed, some of your childhood favorites might be missing or are not available in your language. In this post, I will show you how to add more games to the Game Stick Lite 4K to enjoy more of your childhood games.")]),e._v(" "),t("h2",{attrs:{id:"prerequisites"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#prerequisites"}},[e._v("#")]),e._v(" Prerequisites")]),e._v(" "),t("ul",[t("li",[e._v("A Game Stick Lite 4K (apparently)")]),e._v(" "),t("li",[e._v("A computer or laptop with internet connection")]),e._v(" "),t("li",[e._v("A MicroSD card reader (even your smartphone can be used as a card reader)")])]),e._v(" "),t("h2",{attrs:{id:"step-by-step-guide"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#step-by-step-guide"}},[e._v("#")]),e._v(" Step-by-step guide")]),e._v(" "),t("ul",[t("li",[t("p",[e._v("Have the game ROMs you want to play ready (you can find these easily by searching on the internet). Optionally, download a cover image for each game. The cover image should be in the "),t("code",[e._v(".png")]),e._v(" format and have the same name as the game ROM file. The cover image may then be displayed when you select the game to play.")]),e._v(" "),t("p",[t("img",{attrs:{src:a(407),alt:"Game ROMs and cover images"}})])]),e._v(" "),t("li",[t("p",[e._v("Remove the MicroSD card from the game stick and insert it into your computer or laptop using a MicroSD card reader.")])]),e._v(" "),t("li",[t("p",[e._v("At the root of the SD card, you will see a "),t("code",[e._v("game")]),e._v(" folder, this is where all the games are stored. Games are grouped by the console they belong to. For instance, all the NES games are stored in the "),t("code",[e._v("fc")]),e._v(" folder, all the GameboyColor games are stored in the "),t("code",[e._v("gbc")]),e._v(" folder, Atari games in the "),t("code",[e._v("atari")]),e._v(" folder, and so on.")])]),e._v(" "),t("li",[t("p",[e._v("Copy your game ROMs (and their cover images) to the respective folders. Note that the ROM format should match with what is already available in the folder.")])]),e._v(" "),t("li",[t("p",[e._v("Install "),t("a",{attrs:{href:"https://sqlitebrowser.org/",target:"_blank",rel:"noopener noreferrer"}},[e._v("DB4S"),t("OutboundLink")],1),e._v(" (SQLite Database Browser) on your computer or laptop.")])]),e._v(" "),t("li",[t("p",[e._v("Back to the root of the SD card, open the "),t("code",[e._v("games.db")]),e._v(" file with DB4S (you might need to copy the file to your computer first if you are using a smartphone as a card reader).")])]),e._v(" "),t("li",[t("p",[e._v("Here, a list of tables in the game database will be displayed, you only need to care about the tables "),t("code",[e._v("tbl_en")]),e._v(" and "),t("code",[e._v("tbl_game")]),e._v(" where you will modify to add your games.")]),e._v(" "),t("p",[t("img",{attrs:{src:a(408),alt:"Open games.db file using DB4S"}})])]),e._v(" "),t("li",[t("p",[e._v('Click on the "Browse Data" tab and select the '),t("code",[e._v("tbl_en")]),e._v(' table from the dropdown. Choose "Insert a new record" and add your game titles. Make sure the game titles match the names of the ROM files you added earlier.')]),e._v(" "),t("p",[t("img",{attrs:{src:a(409),alt:"Browse Data tab"}})])]),e._v(" "),t("li",[t("p",[e._v("Then select the "),t("code",[e._v("tbl_game")]),e._v(" table from the dropdown. Start adding your game data here following the existing format and structure. Also make sure the game titles match the names of the ROM files you added earlier.")]),e._v(" "),t("p",[t("img",{attrs:{src:a(410),alt:"Insert game data"}})])])]),e._v(" "),t("div",{staticClass:"custom-block warning"},[t("p",{staticClass:"custom-block-title"},[e._v("Warning")]),e._v(" "),t("p",[e._v("Be very careful when modifying the game database. Any mistake will cause the game stick to not work properly. Always make a backup of the "),t("code",[e._v("games.db")]),e._v(" file before making any changes.")])]),e._v(" "),t("ul",[t("li",[e._v("Save your changes (and replace the "),t("code",[e._v("games.db")]),e._v(" file on the SD card if you copied it to your computer earlier).")]),e._v(" "),t("li",[e._v("Safely remove the MicroSD card from your computer or laptop and insert it back into the game stick.")]),e._v(" "),t("li",[e._v("Turn on the game stick and enjoy your games!")])]),e._v(" "),t("m-blog-tag-list",{attrs:{tags:e.$page.frontmatter.tag,showIcon:""}})],1)}),[],!1,null,null,null);t.default=r.exports}}]); \ No newline at end of file diff --git a/assets/js/15.3acc1bfa.js b/assets/js/15.2971e545.js similarity index 97% rename from assets/js/15.3acc1bfa.js rename to assets/js/15.2971e545.js index f0d13dfc..a99e081c 100644 --- a/assets/js/15.3acc1bfa.js +++ b/assets/js/15.2971e545.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[15],{446:function(t,s,n){t.exports=n.p+"assets/img/guide1.1c974537.png"},447:function(t,s,n){t.exports=n.p+"assets/img/guide2.9ec5c57e.png"},448:function(t,s,n){t.exports=n.p+"assets/img/guide3.9f0beb50.png"},449:function(t,s,n){t.exports=n.p+"assets/img/guide4.40876874.png"},605:function(t,s,n){"use strict";n.r(s);var e=n(16),a=Object(e.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"in-depth-guide"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#in-depth-guide"}},[t._v("#")]),t._v(" In-depth guide")]),t._v(" "),s("m-social-links"),t._v(" "),s("p",[t._v("This page aims to walk you through "),s("strong",[t._v("Theme Studio")]),t._v(" in an in-depth manner, everything you need to know to craft your own themes for Win7 Simu. As a prerequisite, it is required that you have some ground knowledge of "),s("strong",[t._v("HTML")]),t._v(" and "),s("strong",[t._v("CSS")]),t._v(" to be able to follow along easier, otherwise, here are some good free resources to learn:")]),t._v(" "),s("ul",[s("li",[t._v("MDN ("),s("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Learn/HTML",target:"_blank",rel:"noopener noreferrer"}},[t._v("HTML"),s("OutboundLink")],1),t._v(" - "),s("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Learn/CSS",target:"_blank",rel:"noopener noreferrer"}},[t._v("CSS"),s("OutboundLink")],1),t._v(")")]),t._v(" "),s("li",[t._v("w3schools ("),s("a",{attrs:{href:"https://www.w3schools.com/html/default.asp",target:"_blank",rel:"noopener noreferrer"}},[t._v("HTML"),s("OutboundLink")],1),t._v(" - "),s("a",{attrs:{href:"https://www.w3schools.com/css/default.asp",target:"_blank",rel:"noopener noreferrer"}},[t._v("CSS"),s("OutboundLink")],1),t._v(")")]),t._v(" "),s("li",[t._v("Sololearn ("),s("a",{attrs:{href:"https://www.sololearn.com/learn/courses/html-introduction",target:"_blank",rel:"noopener noreferrer"}},[t._v("HTML"),s("OutboundLink")],1),t._v(" - "),s("a",{attrs:{href:"https://www.sololearn.com/learn/courses/css-introduction",target:"_blank",rel:"noopener noreferrer"}},[t._v("CSS"),s("OutboundLink")],1),t._v(")")])]),t._v(" "),s("h2",{attrs:{id:"step-by-step"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#step-by-step"}},[t._v("#")]),t._v(" Step-by-step")]),t._v(" "),s("h3",{attrs:{id:"writing-your-first-theme"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#writing-your-first-theme"}},[t._v("#")]),t._v(" Writing your first theme")]),t._v(" "),s("ul",[s("li",[t._v('From the main window, choose "Start a new project". A blank Theme Studio editor opens up.')]),t._v(" "),s("li",[t._v('Let\'s say I want to make a theme that only changes the appearance of the buttons, I will select the "Button" element.')]),t._v(" "),s("li",[t._v("In the Source code component, enter:")])]),t._v(" "),s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".winui-button")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("background")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" none"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("border")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 1px solid #000"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("border-radius")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("box-shadow")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" none"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("padding")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 6px 12px"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".winui-button:not(:disabled):hover")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("background")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" #000"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("border-color")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" #000"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("color")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" #fff"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".winui-button.default")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("background")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" none"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("border")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 1px solid #0d6efd"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("box-shadow")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" none"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("color")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" #0d6efd"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".winui-button.default:hover")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("background")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" #0d6efd"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("border-color")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" #0d6efd"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("ul",[s("li",[t._v("The button's CSS snippet above will take effect immediately in the Preview area and you should be able to see a new appearance of the buttons:")])]),t._v(" "),s("p",[s("img",{attrs:{src:n(446),alt:"Guide - Write CSS"}})]),t._v(" "),s("ul",[s("li",[t._v('To temporarily experience the theme in action, click the "Apply" button. You should see the new appearance of the buttons everywhere, but note that this will only last for the current login session, if you logout or restart the simulator, the changes will be gone.')]),t._v(" "),s("li",[t._v('Once happy with it, you can save the theme by clicking the "Save" button. From the save popup, enter a desired Name, for the thumbnail (this is optional), there are 2 options available:\n'),s("ul",[s("li",[t._v("Take a screenshot - this will quickly capture a screenshot of your current screen.")]),t._v(" "),s("li",[t._v("Load from URL - this will load the image from the input URL.")])])])]),t._v(" "),s("p",[s("img",{attrs:{src:n(447),alt:"Guide - Save theme"}})]),t._v(" "),s("ul",[s("li",[t._v('Clicking "Save" again will save the theme locally on your device.')])]),t._v(" "),s("p",[t._v('After your theme is saved, you can find it under the "My Creations" tab of Theme Studio\'s explorer, from there, you may either "Load" it to resume editing, "Apply" to use it, or "Publish" it to the community.')]),t._v(" "),s("p",[s("img",{attrs:{src:n(448),alt:"Guide - Theme actions"}})]),t._v(" "),s("h3",{attrs:{id:"using-themes"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#using-themes"}},[t._v("#")]),t._v(" Using themes")]),t._v(" "),s("ul",[s("li",[t._v('To use your created theme, right-click on it (hold your finger), and select "Apply" from the menu. You should now see the buttons\' appearance changed to the selected theme.')]),t._v(" "),s("li",[t._v("This change will last for as long as you decide to switch to another theme.")]),t._v(" "),s("li",[t._v('If you open up "Personalize", you will also notice that there is a new section for the selected theme as "Installed Theme", allowing you to switch between this and the native themes.')])]),t._v(" "),s("p",[s("img",{attrs:{src:n(449),alt:"Guide - Installed theme"}})]),t._v(" "),s("ul",[s("li",[t._v("This also applies to any public themes and templates that you use from Theme Studio.")])]),t._v(" "),s("h3",{attrs:{id:"publishing-your-theme"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#publishing-your-theme"}},[t._v("#")]),t._v(" Publishing your theme")]),t._v(" "),s("div",{staticClass:"custom-block warning"},[s("p",{staticClass:"custom-block-title"},[t._v("Note")]),t._v(" "),s("p",[t._v("This feature is only available with user accounts. Therefore, make sure you are logged-in in order to see it.")])]),t._v(" "),s("ul",[s("li",[t._v('If you want to share your theme with the community, you can publish it also by right-clicking on the theme (hold your finger), and selecting "Publish" from the menu. The theme will then be published under the "Public Gallery" tab.')]),t._v(" "),s("li",[t._v("As your theme is now publicly available, everyone has access to it. They can either load its source code to view and modify, or use it to apply to their Win7 Simu.")]),t._v(" "),s("li",[t._v("Likewise, you can also view, modify, or use any of the public themes.")]),t._v(" "),s("li",[t._v('If you wish to remove your theme from the public, simply select "Delete" also from the right-click menu, your theme will be then removed from the Public Gallery. However, keep in mind that anyone who has already loaded your theme onto their device will still keep a copy of it.')])]),t._v(" "),s("a-google-ad"),t._v(" "),s("h2",{attrs:{id:"common-selectors"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#common-selectors"}},[t._v("#")]),t._v(" Common selectors")]),t._v(" "),s("p",[t._v("The CSS snippet below includes some common selectors for certain elements that you may use to craft your theme:")]),t._v(" "),s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/********** Button **********/")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".winui-button")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* A normal button */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".winui-button.default")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* A default button */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".winui-button:disabled")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* A disabled button */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/********** Checkbox **********/")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v('input[type="checkbox"] + label')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* A normal checkbox */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v('input[type="checkbox"]:disabled + label')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* A disabled checkbox */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/********** Context Menu **********/")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".winui-menu")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The container of a context menu */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v('.winui-menu > [role="menuitem"] > a,\n.winui-menu > [role="menuitem"] > button,\n.winui-menu > [role="menuitem"] > label,\n.winui-menu > [role="menuitem"][aria-haspopup="true"]')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The various child elements of a menu */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/********** Desktop **********/")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v("#windows")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* Change the background */")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--bg")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token url"}},[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("url")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string url"}},[t._v('""')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token important"}},[t._v("!important")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v('[data-icon="computer"]')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* Change the computer icon */")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--icon")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token url"}},[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("url")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string url"}},[t._v('""')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token important"}},[t._v("!important")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/********** Dropdown **********/")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".winui-dropdown")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* A normal dropdown */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".winui-dropdown:focus")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* A focused dropdown */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/********** Menu Bar **********/")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".winui-menubar")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The container of a menu bar */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v('.winui-menubar > [role="menuitem"]')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* A child element of a menu bar */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v('.winui-menubar [role="menuitem"][aria-disabled]')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* A disabled child element */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/********** Radio **********/")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v('input[type="radio"] + label')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* A normal radio button */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v('input[type="radio"]:disabled + label')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* A disabled radio button */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/********** Slider **********/")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".winui-slider::-webkit-slider-runnable-track")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The slider track */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".winui-slider::-webkit-slider-thumb")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The slider thumb */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/********** Tabs **********/")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v('.winui-tabs [role="tablist"]')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The tab navigation menu */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".winui-tabs .winui-button")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The tab navigation menu's button */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v('.winui-tabs [role="tabpanel"]')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The tab panel */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/********** Taskbar **********/")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v("#taskbar")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The taskbar container */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v("#start-button")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The start button */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v("#taskbar-items")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The container of taskbar items */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v("#taskbar-items > .taskbar-item")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The individual taskbar items */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v("#taskbar-tray")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The taskbar tray */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/********** Text Box **********/")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".winui-textbox")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* A normal textbox */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v("textarea.winui-textbox")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* A multi-line textbox */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/********** Window **********/")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".window")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The main window container */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".titlebar")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The window's title bar */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v('.window .control[aria-label="minimize"]')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The window's minimize control */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v('.window .control[aria-label="maximize"]')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The window's maximize control */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v('.window .control[aria-label="close"]')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The window's close control */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".window .container")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The window's content area */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".window .statusbar")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The window's status bar */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h2",{attrs:{id:"background-and-icons"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#background-and-icons"}},[t._v("#")]),t._v(" Background and icons")]),t._v(" "),s("p",[t._v("To change the background and the various icons using Theme Studio, you must comply with the following rules:")]),t._v(" "),s("ul",[s("li",[t._v("Use "),s("code",[t._v("--bg")]),t._v(" and "),s("code",[t._v("--icon")]),t._v(" "),s("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties",target:"_blank",rel:"noopener noreferrer"}},[t._v("variables"),s("OutboundLink")],1),t._v(" for the background and icons respectively.")]),t._v(" "),s("li",[t._v("Append "),s("code",[t._v("!important")]),t._v(" after each rule for the change to take effect.")]),t._v(" "),s("li",[t._v("Target the corresponding "),s("a",{attrs:{href:"#program-ids"}},[t._v("program ID")]),t._v(" with "),s("code",[t._v('[data-icon=""]')]),t._v(" to change its icon.")])]),t._v(" "),s("p",[t._v("Example:")]),t._v(" "),s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[s("span",{pre:!0,attrs:{class:"token selector"}},[t._v("#windows")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* Change the desktop background to Windows XP Azul */")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--bg")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token url"}},[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("url")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string url"}},[t._v('"https://i.redd.it/0ohv3srxzb631.jpg"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token important"}},[t._v("!important")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v('[data-icon="themestudio"]')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* Change the icon of Theme Studio */")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--icon")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token url"}},[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("url")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string url"}},[t._v('"https://cdn-icons-png.flaticon.com/256/5447/5447297.png"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token important"}},[t._v("!important")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h3",{attrs:{id:"program-ids"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#program-ids"}},[t._v("#")]),t._v(" Program IDs")]),t._v(" "),s("div",{staticClass:"custom-block warning"},[s("p",{staticClass:"custom-block-title"},[t._v("Note")]),t._v(" "),s("p",[t._v("This list is incomplete and subject to change (more to be added) in the future updates.")])]),t._v(" "),s("ul",[s("li",[s("code",[t._v("computer")])]),t._v(" "),s("li",[s("code",[t._v("bin")])]),t._v(" "),s("li",[s("code",[t._v("about")])]),t._v(" "),s("li",[s("code",[t._v("calc")])]),t._v(" "),s("li",[s("code",[t._v("chrome")])]),t._v(" "),s("li",[s("code",[t._v("cmd")])]),t._v(" "),s("li",[s("code",[t._v("games")])]),t._v(" "),s("li",[s("code",[t._v("ie")])]),t._v(" "),s("li",[s("code",[t._v("notepad")])]),t._v(" "),s("li",[s("code",[t._v("snipping")])]),t._v(" "),s("li",[s("code",[t._v("paint")])]),t._v(" "),s("li",[s("code",[t._v("player")])]),t._v(" "),s("li",[s("code",[t._v("sticky")])]),t._v(" "),s("li",[s("code",[t._v("camera")])]),t._v(" "),s("li",[s("code",[t._v("recorder")])]),t._v(" "),s("li",[s("code",[t._v("wordpad")])]),t._v(" "),s("li",[s("code",[t._v("run")])]),t._v(" "),s("li",[s("code",[t._v("magnifier")])]),t._v(" "),s("li",[s("code",[t._v("themestudio")])]),t._v(" "),s("li",[s("code",[t._v("installer")])]),t._v(" "),s("li",[s("code",[t._v("bsod")])])])],1)}),[],!1,null,null,null);s.default=a.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[15],{452:function(t,s,n){t.exports=n.p+"assets/img/guide1.1c974537.png"},453:function(t,s,n){t.exports=n.p+"assets/img/guide2.9ec5c57e.png"},454:function(t,s,n){t.exports=n.p+"assets/img/guide3.9f0beb50.png"},455:function(t,s,n){t.exports=n.p+"assets/img/guide4.40876874.png"},606:function(t,s,n){"use strict";n.r(s);var e=n(16),a=Object(e.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"in-depth-guide"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#in-depth-guide"}},[t._v("#")]),t._v(" In-depth guide")]),t._v(" "),s("m-social-links"),t._v(" "),s("p",[t._v("This page aims to walk you through "),s("strong",[t._v("Theme Studio")]),t._v(" in an in-depth manner, everything you need to know to craft your own themes for Win7 Simu. As a prerequisite, it is required that you have some ground knowledge of "),s("strong",[t._v("HTML")]),t._v(" and "),s("strong",[t._v("CSS")]),t._v(" to be able to follow along easier, otherwise, here are some good free resources to learn:")]),t._v(" "),s("ul",[s("li",[t._v("MDN ("),s("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Learn/HTML",target:"_blank",rel:"noopener noreferrer"}},[t._v("HTML"),s("OutboundLink")],1),t._v(" - "),s("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Learn/CSS",target:"_blank",rel:"noopener noreferrer"}},[t._v("CSS"),s("OutboundLink")],1),t._v(")")]),t._v(" "),s("li",[t._v("w3schools ("),s("a",{attrs:{href:"https://www.w3schools.com/html/default.asp",target:"_blank",rel:"noopener noreferrer"}},[t._v("HTML"),s("OutboundLink")],1),t._v(" - "),s("a",{attrs:{href:"https://www.w3schools.com/css/default.asp",target:"_blank",rel:"noopener noreferrer"}},[t._v("CSS"),s("OutboundLink")],1),t._v(")")]),t._v(" "),s("li",[t._v("Sololearn ("),s("a",{attrs:{href:"https://www.sololearn.com/learn/courses/html-introduction",target:"_blank",rel:"noopener noreferrer"}},[t._v("HTML"),s("OutboundLink")],1),t._v(" - "),s("a",{attrs:{href:"https://www.sololearn.com/learn/courses/css-introduction",target:"_blank",rel:"noopener noreferrer"}},[t._v("CSS"),s("OutboundLink")],1),t._v(")")])]),t._v(" "),s("h2",{attrs:{id:"step-by-step"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#step-by-step"}},[t._v("#")]),t._v(" Step-by-step")]),t._v(" "),s("h3",{attrs:{id:"writing-your-first-theme"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#writing-your-first-theme"}},[t._v("#")]),t._v(" Writing your first theme")]),t._v(" "),s("ul",[s("li",[t._v('From the main window, choose "Start a new project". A blank Theme Studio editor opens up.')]),t._v(" "),s("li",[t._v('Let\'s say I want to make a theme that only changes the appearance of the buttons, I will select the "Button" element.')]),t._v(" "),s("li",[t._v("In the Source code component, enter:")])]),t._v(" "),s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".winui-button")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("background")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" none"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("border")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 1px solid #000"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("border-radius")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 0"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("box-shadow")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" none"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("padding")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 6px 12px"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".winui-button:not(:disabled):hover")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("background")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" #000"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("border-color")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" #000"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("color")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" #fff"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".winui-button.default")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("background")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" none"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("border")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 1px solid #0d6efd"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("box-shadow")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" none"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("color")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" #0d6efd"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".winui-button.default:hover")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("background")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" #0d6efd"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("border-color")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" #0d6efd"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("ul",[s("li",[t._v("The button's CSS snippet above will take effect immediately in the Preview area and you should be able to see a new appearance of the buttons:")])]),t._v(" "),s("p",[s("img",{attrs:{src:n(452),alt:"Guide - Write CSS"}})]),t._v(" "),s("ul",[s("li",[t._v('To temporarily experience the theme in action, click the "Apply" button. You should see the new appearance of the buttons everywhere, but note that this will only last for the current login session, if you logout or restart the simulator, the changes will be gone.')]),t._v(" "),s("li",[t._v('Once happy with it, you can save the theme by clicking the "Save" button. From the save popup, enter a desired Name, for the thumbnail (this is optional), there are 2 options available:\n'),s("ul",[s("li",[t._v("Take a screenshot - this will quickly capture a screenshot of your current screen.")]),t._v(" "),s("li",[t._v("Load from URL - this will load the image from the input URL.")])])])]),t._v(" "),s("p",[s("img",{attrs:{src:n(453),alt:"Guide - Save theme"}})]),t._v(" "),s("ul",[s("li",[t._v('Clicking "Save" again will save the theme locally on your device.')])]),t._v(" "),s("p",[t._v('After your theme is saved, you can find it under the "My Creations" tab of Theme Studio\'s explorer, from there, you may either "Load" it to resume editing, "Apply" to use it, or "Publish" it to the community.')]),t._v(" "),s("p",[s("img",{attrs:{src:n(454),alt:"Guide - Theme actions"}})]),t._v(" "),s("h3",{attrs:{id:"using-themes"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#using-themes"}},[t._v("#")]),t._v(" Using themes")]),t._v(" "),s("ul",[s("li",[t._v('To use your created theme, right-click on it (hold your finger), and select "Apply" from the menu. You should now see the buttons\' appearance changed to the selected theme.')]),t._v(" "),s("li",[t._v("This change will last for as long as you decide to switch to another theme.")]),t._v(" "),s("li",[t._v('If you open up "Personalize", you will also notice that there is a new section for the selected theme as "Installed Theme", allowing you to switch between this and the native themes.')])]),t._v(" "),s("p",[s("img",{attrs:{src:n(455),alt:"Guide - Installed theme"}})]),t._v(" "),s("ul",[s("li",[t._v("This also applies to any public themes and templates that you use from Theme Studio.")])]),t._v(" "),s("h3",{attrs:{id:"publishing-your-theme"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#publishing-your-theme"}},[t._v("#")]),t._v(" Publishing your theme")]),t._v(" "),s("div",{staticClass:"custom-block warning"},[s("p",{staticClass:"custom-block-title"},[t._v("Note")]),t._v(" "),s("p",[t._v("This feature is only available with user accounts. Therefore, make sure you are logged-in in order to see it.")])]),t._v(" "),s("ul",[s("li",[t._v('If you want to share your theme with the community, you can publish it also by right-clicking on the theme (hold your finger), and selecting "Publish" from the menu. The theme will then be published under the "Public Gallery" tab.')]),t._v(" "),s("li",[t._v("As your theme is now publicly available, everyone has access to it. They can either load its source code to view and modify, or use it to apply to their Win7 Simu.")]),t._v(" "),s("li",[t._v("Likewise, you can also view, modify, or use any of the public themes.")]),t._v(" "),s("li",[t._v('If you wish to remove your theme from the public, simply select "Delete" also from the right-click menu, your theme will be then removed from the Public Gallery. However, keep in mind that anyone who has already loaded your theme onto their device will still keep a copy of it.')])]),t._v(" "),s("a-google-ad"),t._v(" "),s("h2",{attrs:{id:"common-selectors"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#common-selectors"}},[t._v("#")]),t._v(" Common selectors")]),t._v(" "),s("p",[t._v("The CSS snippet below includes some common selectors for certain elements that you may use to craft your theme:")]),t._v(" "),s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/********** Button **********/")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".winui-button")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* A normal button */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".winui-button.default")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* A default button */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".winui-button:disabled")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* A disabled button */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/********** Checkbox **********/")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v('input[type="checkbox"] + label')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* A normal checkbox */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v('input[type="checkbox"]:disabled + label')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* A disabled checkbox */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/********** Context Menu **********/")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".winui-menu")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The container of a context menu */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v('.winui-menu > [role="menuitem"] > a,\n.winui-menu > [role="menuitem"] > button,\n.winui-menu > [role="menuitem"] > label,\n.winui-menu > [role="menuitem"][aria-haspopup="true"]')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The various child elements of a menu */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/********** Desktop **********/")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v("#windows")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* Change the background */")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--bg")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token url"}},[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("url")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string url"}},[t._v('""')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token important"}},[t._v("!important")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v('[data-icon="computer"]')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* Change the computer icon */")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--icon")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token url"}},[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("url")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string url"}},[t._v('""')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token important"}},[t._v("!important")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/********** Dropdown **********/")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".winui-dropdown")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* A normal dropdown */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".winui-dropdown:focus")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* A focused dropdown */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/********** Menu Bar **********/")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".winui-menubar")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The container of a menu bar */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v('.winui-menubar > [role="menuitem"]')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* A child element of a menu bar */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v('.winui-menubar [role="menuitem"][aria-disabled]')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* A disabled child element */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/********** Radio **********/")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v('input[type="radio"] + label')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* A normal radio button */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v('input[type="radio"]:disabled + label')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* A disabled radio button */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/********** Slider **********/")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".winui-slider::-webkit-slider-runnable-track")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The slider track */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".winui-slider::-webkit-slider-thumb")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The slider thumb */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/********** Tabs **********/")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v('.winui-tabs [role="tablist"]')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The tab navigation menu */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".winui-tabs .winui-button")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The tab navigation menu's button */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v('.winui-tabs [role="tabpanel"]')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The tab panel */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/********** Taskbar **********/")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v("#taskbar")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The taskbar container */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v("#start-button")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The start button */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v("#taskbar-items")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The container of taskbar items */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v("#taskbar-items > .taskbar-item")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The individual taskbar items */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v("#taskbar-tray")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The taskbar tray */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/********** Text Box **********/")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".winui-textbox")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* A normal textbox */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v("textarea.winui-textbox")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* A multi-line textbox */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/********** Window **********/")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".window")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The main window container */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".titlebar")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The window's title bar */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v('.window .control[aria-label="minimize"]')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The window's minimize control */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v('.window .control[aria-label="maximize"]')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The window's maximize control */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v('.window .control[aria-label="close"]')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The window's close control */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".window .container")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The window's content area */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".window .statusbar")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* The window's status bar */")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h2",{attrs:{id:"background-and-icons"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#background-and-icons"}},[t._v("#")]),t._v(" Background and icons")]),t._v(" "),s("p",[t._v("To change the background and the various icons using Theme Studio, you must comply with the following rules:")]),t._v(" "),s("ul",[s("li",[t._v("Use "),s("code",[t._v("--bg")]),t._v(" and "),s("code",[t._v("--icon")]),t._v(" "),s("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties",target:"_blank",rel:"noopener noreferrer"}},[t._v("variables"),s("OutboundLink")],1),t._v(" for the background and icons respectively.")]),t._v(" "),s("li",[t._v("Append "),s("code",[t._v("!important")]),t._v(" after each rule for the change to take effect.")]),t._v(" "),s("li",[t._v("Target the corresponding "),s("a",{attrs:{href:"#program-ids"}},[t._v("program ID")]),t._v(" with "),s("code",[t._v('[data-icon=""]')]),t._v(" to change its icon.")])]),t._v(" "),s("p",[t._v("Example:")]),t._v(" "),s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[s("span",{pre:!0,attrs:{class:"token selector"}},[t._v("#windows")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* Change the desktop background to Windows XP Azul */")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--bg")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token url"}},[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("url")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string url"}},[t._v('"https://i.redd.it/0ohv3srxzb631.jpg"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token important"}},[t._v("!important")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v('[data-icon="themestudio"]')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* Change the icon of Theme Studio */")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("--icon")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token url"}},[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("url")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string url"}},[t._v('"https://cdn-icons-png.flaticon.com/256/5447/5447297.png"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token important"}},[t._v("!important")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h3",{attrs:{id:"program-ids"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#program-ids"}},[t._v("#")]),t._v(" Program IDs")]),t._v(" "),s("div",{staticClass:"custom-block warning"},[s("p",{staticClass:"custom-block-title"},[t._v("Note")]),t._v(" "),s("p",[t._v("This list is incomplete and subject to change (more to be added) in the future updates.")])]),t._v(" "),s("ul",[s("li",[s("code",[t._v("computer")])]),t._v(" "),s("li",[s("code",[t._v("bin")])]),t._v(" "),s("li",[s("code",[t._v("about")])]),t._v(" "),s("li",[s("code",[t._v("calc")])]),t._v(" "),s("li",[s("code",[t._v("chrome")])]),t._v(" "),s("li",[s("code",[t._v("cmd")])]),t._v(" "),s("li",[s("code",[t._v("games")])]),t._v(" "),s("li",[s("code",[t._v("ie")])]),t._v(" "),s("li",[s("code",[t._v("notepad")])]),t._v(" "),s("li",[s("code",[t._v("snipping")])]),t._v(" "),s("li",[s("code",[t._v("paint")])]),t._v(" "),s("li",[s("code",[t._v("player")])]),t._v(" "),s("li",[s("code",[t._v("sticky")])]),t._v(" "),s("li",[s("code",[t._v("camera")])]),t._v(" "),s("li",[s("code",[t._v("recorder")])]),t._v(" "),s("li",[s("code",[t._v("wordpad")])]),t._v(" "),s("li",[s("code",[t._v("run")])]),t._v(" "),s("li",[s("code",[t._v("magnifier")])]),t._v(" "),s("li",[s("code",[t._v("themestudio")])]),t._v(" "),s("li",[s("code",[t._v("installer")])]),t._v(" "),s("li",[s("code",[t._v("bsod")])])])],1)}),[],!1,null,null,null);s.default=a.exports}}]); \ No newline at end of file diff --git a/assets/js/21.0f0bc01f.js b/assets/js/21.6fa9f738.js similarity index 98% rename from assets/js/21.0f0bc01f.js rename to assets/js/21.6fa9f738.js index baa34121..63724d7f 100644 --- a/assets/js/21.0f0bc01f.js +++ b/assets/js/21.6fa9f738.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[21],{435:function(t,e,r){t.exports=r.p+"assets/img/countries.2365af34.png"},436:function(t,e,r){t.exports=r.p+"assets/img/os.0c06c5c2.png"},437:function(t,e,r){t.exports=r.p+"assets/img/device-categories.73347f28.png"},561:function(t,e,r){"use strict";r.r(e);var a=r(16),s=Object(a.a)({},(function(){var t=this,e=t._self._c;return e("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[e("h1",{attrs:{id:"win7-simu-year-in-review-2022"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#win7-simu-year-in-review-2022"}},[t._v("#")]),t._v(" Win7 Simu year in review - 2022")]),t._v(" "),e("m-blog-meta"),t._v(" "),e("p",[e("img",{attrs:{src:"https://images.unsplash.com/photo-1651377731759-fe736975a6e9?auto=format&fit=crop&w=740&q=80",alt:"Ho Chi Minh new year firework"}})]),t._v(" "),e("p",[e("em",[t._v("Cover image by Tron Le via "),e("a",{attrs:{href:"https://unsplash.com/photos/sjlU-PBXFHg",target:"_blank",rel:"noopener noreferrer"}},[t._v("Unsplash"),e("OutboundLink")],1)])]),t._v(" "),e("p",[t._v("Another year passed by, how was it for you? Hope you had a wonderful year. For Win7 Simu, 2022 was amazing. For a hobby project that was started out just "),e("RouterLink",{attrs:{to:"/blog/building-win7-simu.html"}},[t._v("for fun and learning")]),t._v(", it definitely has been growing surprisingly thanks to "),e("s",[t._v("my effort")]),t._v(" the love and support from you all. So in this post, let us have a look back at some amazing numbers that Win7 Simu achieved in 2022.")],1),t._v(" "),e("h2",{attrs:{id:"the-amazing-numbers"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#the-amazing-numbers"}},[t._v("#")]),t._v(" The amazing numbers")]),t._v(" "),e("ul",[e("li",[e("strong",[t._v("4.3M")]),t._v(" users downloaded the app from "),e("a",{attrs:{href:"https://play.google.com/store/apps/details?id=com.visnalize.win7simu",target:"_blank",rel:"noopener noreferrer"}},[t._v("Google Play"),e("OutboundLink")],1)]),t._v(" "),e("li",[e("strong",[t._v("30K")]),t._v(" users downloaded the app from "),e("a",{attrs:{href:"https://appgallery.huawei.com/app/C106588347",target:"_blank",rel:"noopener noreferrer"}},[t._v("Huawei AppGallery"),e("OutboundLink")],1)]),t._v(" "),e("li",[e("strong",[t._v("29K")]),t._v(" users gave an average rating of "),e("strong",[t._v("4.1/5")])]),t._v(" "),e("li",[e("strong",[t._v("15K")]),t._v(" users left a review")]),t._v(" "),e("li",[e("strong",[t._v("500K")]),t._v(" accounts created in the app")]),t._v(" "),e("li",[e("strong",[t._v("13")]),t._v(" version updates were released")]),t._v(" "),e("li",[e("strong",[t._v("50")]),t._v(" contributors helped out with the translations on "),e("a",{attrs:{href:"https://crowdin.com/project/win7simu",target:"_blank",rel:"noopener noreferrer"}},[t._v("Crowdin"),e("OutboundLink")],1)])]),t._v(" "),e("h2",{attrs:{id:"other-interesting-statistics"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#other-interesting-statistics"}},[t._v("#")]),t._v(" Other interesting statistics")]),t._v(" "),e("h3",{attrs:{id:"countries-overview"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#countries-overview"}},[t._v("#")]),t._v(" Countries overview")]),t._v(" "),e("p",[e("img",{attrs:{src:r(435),alt:"top countries"}})]),t._v(" "),e("h3",{attrs:{id:"devices-overview"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#devices-overview"}},[t._v("#")]),t._v(" Devices overview")]),t._v(" "),e("table",[e("thead",[e("tr",[e("th",[t._v("Operating systems")]),t._v(" "),e("th",{staticStyle:{"text-align":"center"}},[t._v("Device categories")])])]),t._v(" "),e("tbody",[e("tr",[e("td",[e("img",{attrs:{src:r(436),alt:"operating systems"}})]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[e("img",{attrs:{src:r(437),alt:"device categories"}})])])])]),t._v(" "),e("h2",{attrs:{id:"looking-out-to-2023"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#looking-out-to-2023"}},[t._v("#")]),t._v(" Looking out to 2023")]),t._v(" "),e("p",[t._v("I hope Win7 Simu has been doing a good job in contributing to a wonderful year for you. Please keep supporting it and continue to look forward to more updates rolling out, with more stunning features and stability. Wishing all the best to you and your family. Happy New year! 🎉")]),t._v(" "),e("m-blog-tag-list",{attrs:{tags:t.$page.frontmatter.tag,showIcon:""}})],1)}),[],!1,null,null,null);e.default=s.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[21],{435:function(t,e,r){t.exports=r.p+"assets/img/countries.2365af34.png"},436:function(t,e,r){t.exports=r.p+"assets/img/os.0c06c5c2.png"},437:function(t,e,r){t.exports=r.p+"assets/img/device-categories.73347f28.png"},562:function(t,e,r){"use strict";r.r(e);var a=r(16),s=Object(a.a)({},(function(){var t=this,e=t._self._c;return e("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[e("h1",{attrs:{id:"win7-simu-year-in-review-2022"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#win7-simu-year-in-review-2022"}},[t._v("#")]),t._v(" Win7 Simu year in review - 2022")]),t._v(" "),e("m-blog-meta"),t._v(" "),e("p",[e("img",{attrs:{src:"https://images.unsplash.com/photo-1651377731759-fe736975a6e9?auto=format&fit=crop&w=740&q=80",alt:"Ho Chi Minh new year firework"}})]),t._v(" "),e("p",[e("em",[t._v("Cover image by Tron Le via "),e("a",{attrs:{href:"https://unsplash.com/photos/sjlU-PBXFHg",target:"_blank",rel:"noopener noreferrer"}},[t._v("Unsplash"),e("OutboundLink")],1)])]),t._v(" "),e("p",[t._v("Another year passed by, how was it for you? Hope you had a wonderful year. For Win7 Simu, 2022 was amazing. For a hobby project that was started out just "),e("RouterLink",{attrs:{to:"/blog/building-win7-simu.html"}},[t._v("for fun and learning")]),t._v(", it definitely has been growing surprisingly thanks to "),e("s",[t._v("my effort")]),t._v(" the love and support from you all. So in this post, let us have a look back at some amazing numbers that Win7 Simu achieved in 2022.")],1),t._v(" "),e("h2",{attrs:{id:"the-amazing-numbers"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#the-amazing-numbers"}},[t._v("#")]),t._v(" The amazing numbers")]),t._v(" "),e("ul",[e("li",[e("strong",[t._v("4.3M")]),t._v(" users downloaded the app from "),e("a",{attrs:{href:"https://play.google.com/store/apps/details?id=com.visnalize.win7simu",target:"_blank",rel:"noopener noreferrer"}},[t._v("Google Play"),e("OutboundLink")],1)]),t._v(" "),e("li",[e("strong",[t._v("30K")]),t._v(" users downloaded the app from "),e("a",{attrs:{href:"https://appgallery.huawei.com/app/C106588347",target:"_blank",rel:"noopener noreferrer"}},[t._v("Huawei AppGallery"),e("OutboundLink")],1)]),t._v(" "),e("li",[e("strong",[t._v("29K")]),t._v(" users gave an average rating of "),e("strong",[t._v("4.1/5")])]),t._v(" "),e("li",[e("strong",[t._v("15K")]),t._v(" users left a review")]),t._v(" "),e("li",[e("strong",[t._v("500K")]),t._v(" accounts created in the app")]),t._v(" "),e("li",[e("strong",[t._v("13")]),t._v(" version updates were released")]),t._v(" "),e("li",[e("strong",[t._v("50")]),t._v(" contributors helped out with the translations on "),e("a",{attrs:{href:"https://crowdin.com/project/win7simu",target:"_blank",rel:"noopener noreferrer"}},[t._v("Crowdin"),e("OutboundLink")],1)])]),t._v(" "),e("h2",{attrs:{id:"other-interesting-statistics"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#other-interesting-statistics"}},[t._v("#")]),t._v(" Other interesting statistics")]),t._v(" "),e("h3",{attrs:{id:"countries-overview"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#countries-overview"}},[t._v("#")]),t._v(" Countries overview")]),t._v(" "),e("p",[e("img",{attrs:{src:r(435),alt:"top countries"}})]),t._v(" "),e("h3",{attrs:{id:"devices-overview"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#devices-overview"}},[t._v("#")]),t._v(" Devices overview")]),t._v(" "),e("table",[e("thead",[e("tr",[e("th",[t._v("Operating systems")]),t._v(" "),e("th",{staticStyle:{"text-align":"center"}},[t._v("Device categories")])])]),t._v(" "),e("tbody",[e("tr",[e("td",[e("img",{attrs:{src:r(436),alt:"operating systems"}})]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[e("img",{attrs:{src:r(437),alt:"device categories"}})])])])]),t._v(" "),e("h2",{attrs:{id:"looking-out-to-2023"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#looking-out-to-2023"}},[t._v("#")]),t._v(" Looking out to 2023")]),t._v(" "),e("p",[t._v("I hope Win7 Simu has been doing a good job in contributing to a wonderful year for you. Please keep supporting it and continue to look forward to more updates rolling out, with more stunning features and stability. Wishing all the best to you and your family. Happy New year! 🎉")]),t._v(" "),e("m-blog-tag-list",{attrs:{tags:t.$page.frontmatter.tag,showIcon:""}})],1)}),[],!1,null,null,null);e.default=s.exports}}]); \ No newline at end of file diff --git a/assets/js/45.df633d2f.js b/assets/js/45.da7c53f6.js similarity index 83% rename from assets/js/45.df633d2f.js rename to assets/js/45.da7c53f6.js index ce4daabc..d4abff47 100644 --- a/assets/js/45.df633d2f.js +++ b/assets/js/45.da7c53f6.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[45],{364:function(e,t,r){},478:function(e,t,r){"use strict";r(364)},531:function(e,t,r){"use strict";r.r(t);r(61);var n={data:()=>({errors:[]}),methods:{send({target:e}){let{subject:t,content:r}=e;if(this.errors=[],!t.value)return this.errors.push("subject");if(!r.value)return this.errors.push("content");t=encodeURIComponent(t.value),r=encodeURIComponent(r.value);const n=document.createElement("a");n.href=`mailto:hey@visnalize.com?subject=${t}&body=${r}`,n.target="_blank",n.click(),this.errors=[]}}},s=(r(478),r(16)),o=Object(s.a)(n,(function(){var e=this,t=e._self._c;return t("form",{on:{submit:function(t){return t.preventDefault(),e.send.apply(null,arguments)}}},[t("div",[t("input",{class:{error:e.errors.includes("subject")},attrs:{type:"text",name:"subject",placeholder:"Subject",required:""}})]),e._v(" "),t("div",[t("textarea",{class:{error:e.errors.includes("content")},attrs:{name:"content",placeholder:"Content",required:""}})]),e._v(" "),t("div",[t("a-button",{attrs:{type:"submit"}},[e._v("Send")])],1)])}),[],!1,null,"43263439",null);t.default=o.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[45],{365:function(e,t,r){},479:function(e,t,r){"use strict";r(365)},532:function(e,t,r){"use strict";r.r(t);r(61);var n={data:()=>({errors:[]}),methods:{send({target:e}){let{subject:t,content:r}=e;if(this.errors=[],!t.value)return this.errors.push("subject");if(!r.value)return this.errors.push("content");t=encodeURIComponent(t.value),r=encodeURIComponent(r.value);const n=document.createElement("a");n.href=`mailto:hey@visnalize.com?subject=${t}&body=${r}`,n.target="_blank",n.click(),this.errors=[]}}},s=(r(479),r(16)),o=Object(s.a)(n,(function(){var e=this,t=e._self._c;return t("form",{on:{submit:function(t){return t.preventDefault(),e.send.apply(null,arguments)}}},[t("div",[t("input",{class:{error:e.errors.includes("subject")},attrs:{type:"text",name:"subject",placeholder:"Subject",required:""}})]),e._v(" "),t("div",[t("textarea",{class:{error:e.errors.includes("content")},attrs:{name:"content",placeholder:"Content",required:""}})]),e._v(" "),t("div",[t("a-button",{attrs:{type:"submit"}},[e._v("Send")])],1)])}),[],!1,null,"43263439",null);t.default=o.exports}}]); \ No newline at end of file diff --git a/assets/js/46.fc8c3f9e.js b/assets/js/46.4b1b4570.js similarity index 72% rename from assets/js/46.fc8c3f9e.js rename to assets/js/46.4b1b4570.js index bab27cfa..a6364879 100644 --- a/assets/js/46.fc8c3f9e.js +++ b/assets/js/46.4b1b4570.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[46],{365:function(t,e,r){},479:function(t,e,r){"use strict";r(365)},532:function(t,e,r){"use strict";r.r(e);var i={computed:{features:()=>[{title:"Learn & Play",text:"A simple code playground for you to learn CSS"},{title:"Publish & Share",text:"Take pride in your creativity and share with others"},{title:"Admire & Enjoy",text:"Enjoy the creative crafts made by others"}]}},n=(r(479),r(16)),o=Object(n.a)(i,(function(){var t=this,e=t._self._c;return e("ul",t._l(t.features,(function(r){return e("li",{key:r.title},[e("h2",[t._v(t._s(r.title))]),t._v(" "),e("p",[t._v(t._s(r.text))])])})),0)}),[],!1,null,"59795e29",null);e.default=o.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[46],{364:function(t,e,r){},478:function(t,e,r){"use strict";r(364)},531:function(t,e,r){"use strict";r.r(e);var i={computed:{features:()=>[{title:"Learn & Play",text:"A simple code playground for you to learn CSS"},{title:"Publish & Share",text:"Take pride in your creativity and share with others"},{title:"Admire & Enjoy",text:"Enjoy the creative crafts made by others"}]}},n=(r(478),r(16)),o=Object(n.a)(i,(function(){var t=this,e=t._self._c;return e("ul",t._l(t.features,(function(r){return e("li",{key:r.title},[e("h2",[t._v(t._s(r.title))]),t._v(" "),e("p",[t._v(t._s(r.text))])])})),0)}),[],!1,null,"59795e29",null);e.default=o.exports}}]); \ No newline at end of file diff --git a/assets/js/49.1ae20ab5.js b/assets/js/49.ad2ccbb1.js similarity index 99% rename from assets/js/49.1ae20ab5.js rename to assets/js/49.ad2ccbb1.js index 7c684d11..020d6945 100644 --- a/assets/js/49.1ae20ab5.js +++ b/assets/js/49.ad2ccbb1.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[49],{405:function(e,t,a){e.exports=a.p+"assets/img/win7-simu-dau.3e6d196c.png"},406:function(e,t,a){e.exports=a.p+"assets/img/homepage-dau.e246c522.png"},548:function(e,t,a){"use strict";a.r(t);var o=a(16),i=Object(o.a)({},(function(){var e=this,t=e._self._c;return t("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[t("h1",{attrs:{id:"turning-my-side-project-into-a-side-hustle"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#turning-my-side-project-into-a-side-hustle"}},[e._v("#")]),e._v(" Turning my side project into a side hustle")]),e._v(" "),t("m-blog-meta"),e._v(" "),t("p",[t("img",{attrs:{src:"https://media.istockphoto.com/id/1349329446/photo/dollars-cash-money-and-paper-note-with-text-written-extra-income-concept-of-financial.jpg?s=1024x1024&w=is&k=20&c=RXsEpU41u0Yke-ol53PoirkXHTOliHGfvijnYipidtQ=",alt:"Side hustle cash"}})]),e._v(" "),t("p",[e._v("Today is November 11, 2023, it has been a year since I wrote my previous blog post "),t("RouterLink",{attrs:{to:"/blog/building-win7-simu.html"}},[e._v("sharing how I built Win7 Simu")]),e._v(" to celebrate a milestone of 5M Google Play downloads. We are now at "),t("strong",[e._v("10M downloads")]),e._v(" and again, to celebrate this milestone, I decided to sit down and write another blog post to share about how this "),t("s",[e._v("silly")]),e._v(" side project has turned into a side hustle and has been generating a decent amount of recurring revenue for me since. Yes, we are talking about "),t("em",[e._v("money")]),e._v(" here, a sensitive topic, but somehow I feel that it may be interesting, with some of the learnings that I have had along the way may be useful to you. However, bear in mind that what you are about to read is "),t("strong",[e._v("subjective")]),e._v(" and based on my own experience, so you are welcome to read with a grain of salt.")],1),e._v(" "),t("h2",{attrs:{id:"the-beginning"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#the-beginning"}},[e._v("#")]),e._v(" The beginning")]),e._v(" "),t("h3",{attrs:{id:"the-idea-that-started-it-all"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#the-idea-that-started-it-all"}},[e._v("#")]),e._v(" The idea that started it all")]),e._v(" "),t("p",[e._v("I highly recommend reading "),t("RouterLink",{attrs:{to:"/blog/building-win7-simu.html"}},[e._v("my previous post")]),e._v(" first if you haven't to get to know more about this silly project and how it started, but if you don't want to, here is a brief summary:")],1),e._v(" "),t("p",[e._v("I had an idea of cloning Windows 7 UI to the web way back in mid-2019, to learn about front-end development. It was merely a code playground for me to learn and experiment and was rewritten a couple of times. The last rewrite attempt was in early 2020 using certain "),t("RouterLink",{attrs:{to:"/blog/building-win7-simu.html#the-tech-stack"}},[e._v("popular web techs")]),e._v(" at that time, and I decided to publish it to Google Play as an Android app. It somehow got popular and has received a lot of downloads and positive feedback. Since then, I have been pushing it further by rolling out new features and updates regularly.")],1),e._v(" "),t("p",[e._v("Till now, the app has had a total of "),t("strong",[e._v("10M downloads")]),e._v(" and approximately "),t("strong",[e._v("50K daily active users")]),e._v(", which can be easily considered a success for a side project. But do you know what makes it appear even more successful to me? It's the fact that it also generates some recurring revenue, monthly, stably, and kind of passively.")]),e._v(" "),t("p",[t("img",{attrs:{src:a(405),alt:"Win7 Simu's daily active users stats"}})]),e._v(" "),t("a-google-ad"),e._v(" "),t("h3",{attrs:{id:"building-the-surroundings"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#building-the-surroundings"}},[e._v("#")]),e._v(" Building the surroundings")]),e._v(" "),t("p",[e._v("After recognizing its potential, I decided to invest more time and effort into the project. With Win7 Simu at the center, I started to build the surroundings, things that I believe would help me grow this project into a brand and eventually turn it into a side hustle. Below are a couple of things that I have done so far.")]),e._v(" "),t("p",[t("strong",[e._v("Homepage + Blog")]),e._v(" ("),t("em",[t("strong",[e._v("visnalize.com")])]),e._v(") - this idea came to me as Google Play required me to provide a privacy policy URL for the app when I tried publishing it to their store. I decided to build a simple homepage for it with little to no content at the beginning, but it has been growing since then, from an average of barely 300 to more than 1000 daily active users. The homepage is now the place where I share more about my projects, the stories behind and some of the learnings I have had along the way.")]),e._v(" "),t("p",[t("img",{attrs:{src:a(406),alt:"Homepage daily active users stats"}})]),e._v(" "),t("p",[t("em",[e._v("Homepage daily active users growth over time")])]),e._v(" "),t("p",[t("a",{attrs:{href:"https://www.youtube.com/@visnalize",target:"_blank",rel:"noopener noreferrer"}},[t("strong",[e._v("YouTube channel")]),t("OutboundLink")],1),e._v(" - this idea, again, came to me only as Google Play required me to provide a YouTube trailer video for the app. Although I have had this channel for a while, I didn't really use it until then. After the trailer video for Win7 Simu, I started to upload more videos, still mostly revolving around the app, but also some other kinds of content that I think would be interesting to the viewers, but none of them has been seen as successful as the Win7 Simu-related ones. Since the beginning, the channel has been growing steadily, currently with more than 7200 subscribers and 100K+ monthly views. If you are interested, here is a video sharing more in-depth about the channel's growth:")]),e._v(" "),t("p"),t("div",{staticClass:"embed-responsive embed-responsive-16by9"},[t("iframe",{staticClass:"embed-responsive-item youtube-player",attrs:{type:"text/html",width:"640",height:"390",src:"https://www.youtube.com/embed/s6LfrKvq8n4",frameborder:"0",webkitallowfullscreen:"",mozallowfullscreen:"",allowfullscreen:""}})]),t("p"),e._v(" "),t("p",[t("strong",[e._v("Social networks")]),e._v(" ("),t("a",{attrs:{href:"https://github.com/visnalize",target:"_blank",rel:"noopener noreferrer"}},[e._v("Github"),t("OutboundLink")],1),e._v(", "),t("a",{attrs:{href:"https://twitter.com/visnalize",target:"_blank",rel:"noopener noreferrer"}},[e._v("Twitter"),t("OutboundLink")],1),e._v(", "),t("a",{attrs:{href:"https://www.facebook.com/visnalize",target:"_blank",rel:"noopener noreferrer"}},[e._v("Facebook"),t("OutboundLink")],1),e._v(") - at some point after growing the homepage and the YouTube channel to a certain extent, I decided to expand to other social networks to gain more exposure and reach more people. Although the growth has been slow and the results are gloomy looking, I believe it is still worth the effort as it is not too time-consuming and the potential is still there.")]),e._v(" "),t("h2",{attrs:{id:"a-diverse-revenue-model"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#a-diverse-revenue-model"}},[e._v("#")]),e._v(" A diverse revenue model")]),e._v(" "),t("p",[e._v("Let's get to the main topic of this post, the revenue model. I have been trying out different ways to monetize the project, and here are some of them.")]),e._v(" "),t("h3",{attrs:{id:"ads"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ads"}},[e._v("#")]),e._v(" Ads")]),e._v(" "),t("blockquote",[t("p",[t("em",[e._v("Recommended read: "),t("RouterLink",{attrs:{to:"/blog/about-the-ads.html"}},[e._v("About the ads and how I implement them")])],1)])]),e._v(" "),t("p",[e._v("Due to the nature of the project, I thought that ads would be the most suitable way to monetize it. For the app version of Win7 Simu, I started out with "),t("strong",[e._v("Google Admob")]),e._v(", which appears to be the most popular ad network for mobile apps, however, due to certain issues with the network, I switched to "),t("strong",[e._v("Applovin")]),e._v(", which has been working well so far. For its web version, I have been using "),t("strong",[e._v("Google Adsense")]),e._v(" and it has been working well so far. Although at the beginning, I also had some problems setting it up due to the fact that Adsense is not designed and supported for web apps, but I managed to find a way around it by getting this homepage approved first, then I can serve ads on the web app as well, thanks to it being hosted on a subdomain of this homepage.")]),e._v(" "),t("p",[e._v("Some time later, I tried out the mediation feature of Applovin, which allows me to serve ads from whichever ad network that offers the highest eCPM (effective cost per mille) rate. Since using mediation, I have been seeing a significant boost in revenue by partnering with several external ad networks such as "),t("strong",[e._v("VDO.AI")]),e._v(", "),t("strong",[e._v("Appbroda")]),e._v(", and even "),t("strong",[e._v("Admob")]),e._v(", which I was unable to use their service as the primary platform. And until now, ads have been the main source of revenue for this project.")]),e._v(" "),t("p",[e._v("Aside from the mobile and web versions of Win7 Simu, I have also been serving ads on the homepage and turning on monetization for the YouTube channel. Although the revenue from these sources is not much, it is still a great addition to the overall revenue.")]),e._v(" "),t("h3",{attrs:{id:"subscriptions"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#subscriptions"}},[e._v("#")]),e._v(" Subscriptions")]),e._v(" "),t("p",[e._v("After seeing the positive revenue outputs from ads, and having received much feedback from users, I added a subscription feature to Win7 Simu's app version using "),t("strong",[e._v("Google Play Billing")]),e._v(" to allow users to experience the app without interruption by removing ads. The subscription is simple, having only 2 options available: monthly and yearly, with affordable prices. I honestly never expected it to be well-received, but it turned out to be working well, with a decent amount of subscribers and recurring revenue so far.")]),e._v(" "),t("p",[e._v("Likewise, I also added a subscription feature to the web version of Win7 Simu via "),t("strong",[e._v("Patreon")]),e._v(", which is a popular platform for creators to get paid by their fans/users. Despite the outlook not looking as positive as the app version, I still learned something there, and the experience can be useful for future projects.")]),e._v(" "),t("h3",{attrs:{id:"partnerships"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#partnerships"}},[e._v("#")]),e._v(" Partnerships")]),e._v(" "),t("p",[e._v("The last revenue source that I have had my hands on is new and unique in its own way (or rather unpopular in my opinion). It is a partnership with "),t("strong",[e._v("Gamezop")]),e._v(', a gaming platform that any websites/web apps can integrate to bring casual games for their users. The so-called "integration" is rather simple in my case, all I needed to do was just add a banner/icon in my app that leads to the Gamezop platform where my users can play a wide range of casual games. Half of the ad revenue generated from the platform would then be shared with me. The shared revenue is nowhere near the amount that I get from the main revenue source, but it still has been decently and consistently contributing to the overall revenue.')]),e._v(" "),t("a-google-ad"),e._v(" "),t("h2",{attrs:{id:"disclosing-the-numbers"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#disclosing-the-numbers"}},[e._v("#")]),e._v(" Disclosing the numbers")]),e._v(" "),t("p",[e._v('"I don\'t give a sh*t about your story, just show me the numbers" - if that is what you are thinking, then I will cut to the chase and show you the numbers. Below is a list of the MRR (monthly recurring revenue) breakdown for all of the revenue sources that I have mentioned above from the latest month (October 2023).')]),e._v(" "),t("ul",[t("li",[e._v("Ads:\n"),t("ul",[t("li",[e._v("Applovin: "),t("strong",[e._v("~400$")])]),e._v(" "),t("li",[e._v("Admob: "),t("strong",[e._v("~300$")])]),e._v(" "),t("li",[e._v("VDO: "),t("strong",[e._v("~60$")])]),e._v(" "),t("li",[e._v("Appbroda: "),t("strong",[e._v("~40$")])]),e._v(" "),t("li",[e._v("Adsense: "),t("strong",[e._v("~300$")])])])]),e._v(" "),t("li",[e._v("Subscriptions:\n"),t("ul",[t("li",[e._v("In-app purchase: "),t("strong",[e._v("~200$")])]),e._v(" "),t("li",[e._v("Patreon: "),t("strong",[e._v("1.67$")])])])]),e._v(" "),t("li",[e._v("Partnership (Gamezop): "),t("strong",[e._v("~20$")])])]),e._v(" "),t("p",[e._v("In total, after subtracting all the costs and expenses, the MRR is around "),t("strong",[e._v("1000$")]),e._v(".")]),e._v(" "),t("h2",{attrs:{id:"final-thoughts"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#final-thoughts"}},[e._v("#")]),e._v(" Final thoughts")]),e._v(" "),t("p",[e._v("So how do you feel about that number? Is it a lot? Is it just a little? The answer likely depends on from which part of the world you are looking at it, but for me, it is a lot, especially for something that I started out as a side project for learning. With that said, it is still unlikely that I will receive this exact amount every month, there might be ups and downs, there might be happy days when I receive more, and there might be a chance I lose it all like waking up from a sweet dream, but I am still happy with what I have achieved so far.")]),e._v(" "),t("p",[e._v("A few key takeaways that you may find useful from my story:")]),e._v(" "),t("ul",[t("li",[e._v("I was lucky to be able to turn my learning process into a side project, and eventually a side hustle.")]),e._v(" "),t("li",[e._v("I diversified the revenue sources to minimize the risk of losing it all and to maximize the potential of earning more.")]),e._v(" "),t("li",[e._v("I kept grinding and pushing it further, even when I didn't feel like it, and it paid off.")]),e._v(" "),t("li",[e._v("I was, I am, and I will still learning, and applying what I learned to make good use of every opportunity.")])]),e._v(" "),t("p",[e._v("And as I said at the beginning of this post, this is a very subjective story, what worked out for me may not work out for you, and even this little success might not repeat itself for my other projects. But I hope through this post, you have learned something new and useful, and I wish you all the best with your projects.")]),e._v(" "),t("m-blog-tag-list",{attrs:{tags:e.$page.frontmatter.tag,showIcon:""}})],1)}),[],!1,null,null,null);t.default=i.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[49],{405:function(e,t,a){e.exports=a.p+"assets/img/win7-simu-dau.3e6d196c.png"},406:function(e,t,a){e.exports=a.p+"assets/img/homepage-dau.e246c522.png"},547:function(e,t,a){"use strict";a.r(t);var o=a(16),i=Object(o.a)({},(function(){var e=this,t=e._self._c;return t("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[t("h1",{attrs:{id:"turning-my-side-project-into-a-side-hustle"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#turning-my-side-project-into-a-side-hustle"}},[e._v("#")]),e._v(" Turning my side project into a side hustle")]),e._v(" "),t("m-blog-meta"),e._v(" "),t("p",[t("img",{attrs:{src:"https://media.istockphoto.com/id/1349329446/photo/dollars-cash-money-and-paper-note-with-text-written-extra-income-concept-of-financial.jpg?s=1024x1024&w=is&k=20&c=RXsEpU41u0Yke-ol53PoirkXHTOliHGfvijnYipidtQ=",alt:"Side hustle cash"}})]),e._v(" "),t("p",[e._v("Today is November 11, 2023, it has been a year since I wrote my previous blog post "),t("RouterLink",{attrs:{to:"/blog/building-win7-simu.html"}},[e._v("sharing how I built Win7 Simu")]),e._v(" to celebrate a milestone of 5M Google Play downloads. We are now at "),t("strong",[e._v("10M downloads")]),e._v(" and again, to celebrate this milestone, I decided to sit down and write another blog post to share about how this "),t("s",[e._v("silly")]),e._v(" side project has turned into a side hustle and has been generating a decent amount of recurring revenue for me since. Yes, we are talking about "),t("em",[e._v("money")]),e._v(" here, a sensitive topic, but somehow I feel that it may be interesting, with some of the learnings that I have had along the way may be useful to you. However, bear in mind that what you are about to read is "),t("strong",[e._v("subjective")]),e._v(" and based on my own experience, so you are welcome to read with a grain of salt.")],1),e._v(" "),t("h2",{attrs:{id:"the-beginning"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#the-beginning"}},[e._v("#")]),e._v(" The beginning")]),e._v(" "),t("h3",{attrs:{id:"the-idea-that-started-it-all"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#the-idea-that-started-it-all"}},[e._v("#")]),e._v(" The idea that started it all")]),e._v(" "),t("p",[e._v("I highly recommend reading "),t("RouterLink",{attrs:{to:"/blog/building-win7-simu.html"}},[e._v("my previous post")]),e._v(" first if you haven't to get to know more about this silly project and how it started, but if you don't want to, here is a brief summary:")],1),e._v(" "),t("p",[e._v("I had an idea of cloning Windows 7 UI to the web way back in mid-2019, to learn about front-end development. It was merely a code playground for me to learn and experiment and was rewritten a couple of times. The last rewrite attempt was in early 2020 using certain "),t("RouterLink",{attrs:{to:"/blog/building-win7-simu.html#the-tech-stack"}},[e._v("popular web techs")]),e._v(" at that time, and I decided to publish it to Google Play as an Android app. It somehow got popular and has received a lot of downloads and positive feedback. Since then, I have been pushing it further by rolling out new features and updates regularly.")],1),e._v(" "),t("p",[e._v("Till now, the app has had a total of "),t("strong",[e._v("10M downloads")]),e._v(" and approximately "),t("strong",[e._v("50K daily active users")]),e._v(", which can be easily considered a success for a side project. But do you know what makes it appear even more successful to me? It's the fact that it also generates some recurring revenue, monthly, stably, and kind of passively.")]),e._v(" "),t("p",[t("img",{attrs:{src:a(405),alt:"Win7 Simu's daily active users stats"}})]),e._v(" "),t("a-google-ad"),e._v(" "),t("h3",{attrs:{id:"building-the-surroundings"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#building-the-surroundings"}},[e._v("#")]),e._v(" Building the surroundings")]),e._v(" "),t("p",[e._v("After recognizing its potential, I decided to invest more time and effort into the project. With Win7 Simu at the center, I started to build the surroundings, things that I believe would help me grow this project into a brand and eventually turn it into a side hustle. Below are a couple of things that I have done so far.")]),e._v(" "),t("p",[t("strong",[e._v("Homepage + Blog")]),e._v(" ("),t("em",[t("strong",[e._v("visnalize.com")])]),e._v(") - this idea came to me as Google Play required me to provide a privacy policy URL for the app when I tried publishing it to their store. I decided to build a simple homepage for it with little to no content at the beginning, but it has been growing since then, from an average of barely 300 to more than 1000 daily active users. The homepage is now the place where I share more about my projects, the stories behind and some of the learnings I have had along the way.")]),e._v(" "),t("p",[t("img",{attrs:{src:a(406),alt:"Homepage daily active users stats"}})]),e._v(" "),t("p",[t("em",[e._v("Homepage daily active users growth over time")])]),e._v(" "),t("p",[t("a",{attrs:{href:"https://www.youtube.com/@visnalize",target:"_blank",rel:"noopener noreferrer"}},[t("strong",[e._v("YouTube channel")]),t("OutboundLink")],1),e._v(" - this idea, again, came to me only as Google Play required me to provide a YouTube trailer video for the app. Although I have had this channel for a while, I didn't really use it until then. After the trailer video for Win7 Simu, I started to upload more videos, still mostly revolving around the app, but also some other kinds of content that I think would be interesting to the viewers, but none of them has been seen as successful as the Win7 Simu-related ones. Since the beginning, the channel has been growing steadily, currently with more than 7200 subscribers and 100K+ monthly views. If you are interested, here is a video sharing more in-depth about the channel's growth:")]),e._v(" "),t("p"),t("div",{staticClass:"embed-responsive embed-responsive-16by9"},[t("iframe",{staticClass:"embed-responsive-item youtube-player",attrs:{type:"text/html",width:"640",height:"390",src:"https://www.youtube.com/embed/s6LfrKvq8n4",frameborder:"0",webkitallowfullscreen:"",mozallowfullscreen:"",allowfullscreen:""}})]),t("p"),e._v(" "),t("p",[t("strong",[e._v("Social networks")]),e._v(" ("),t("a",{attrs:{href:"https://github.com/visnalize",target:"_blank",rel:"noopener noreferrer"}},[e._v("Github"),t("OutboundLink")],1),e._v(", "),t("a",{attrs:{href:"https://twitter.com/visnalize",target:"_blank",rel:"noopener noreferrer"}},[e._v("Twitter"),t("OutboundLink")],1),e._v(", "),t("a",{attrs:{href:"https://www.facebook.com/visnalize",target:"_blank",rel:"noopener noreferrer"}},[e._v("Facebook"),t("OutboundLink")],1),e._v(") - at some point after growing the homepage and the YouTube channel to a certain extent, I decided to expand to other social networks to gain more exposure and reach more people. Although the growth has been slow and the results are gloomy looking, I believe it is still worth the effort as it is not too time-consuming and the potential is still there.")]),e._v(" "),t("h2",{attrs:{id:"a-diverse-revenue-model"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#a-diverse-revenue-model"}},[e._v("#")]),e._v(" A diverse revenue model")]),e._v(" "),t("p",[e._v("Let's get to the main topic of this post, the revenue model. I have been trying out different ways to monetize the project, and here are some of them.")]),e._v(" "),t("h3",{attrs:{id:"ads"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ads"}},[e._v("#")]),e._v(" Ads")]),e._v(" "),t("blockquote",[t("p",[t("em",[e._v("Recommended read: "),t("RouterLink",{attrs:{to:"/blog/about-the-ads.html"}},[e._v("About the ads and how I implement them")])],1)])]),e._v(" "),t("p",[e._v("Due to the nature of the project, I thought that ads would be the most suitable way to monetize it. For the app version of Win7 Simu, I started out with "),t("strong",[e._v("Google Admob")]),e._v(", which appears to be the most popular ad network for mobile apps, however, due to certain issues with the network, I switched to "),t("strong",[e._v("Applovin")]),e._v(", which has been working well so far. For its web version, I have been using "),t("strong",[e._v("Google Adsense")]),e._v(" and it has been working well so far. Although at the beginning, I also had some problems setting it up due to the fact that Adsense is not designed and supported for web apps, but I managed to find a way around it by getting this homepage approved first, then I can serve ads on the web app as well, thanks to it being hosted on a subdomain of this homepage.")]),e._v(" "),t("p",[e._v("Some time later, I tried out the mediation feature of Applovin, which allows me to serve ads from whichever ad network that offers the highest eCPM (effective cost per mille) rate. Since using mediation, I have been seeing a significant boost in revenue by partnering with several external ad networks such as "),t("strong",[e._v("VDO.AI")]),e._v(", "),t("strong",[e._v("Appbroda")]),e._v(", and even "),t("strong",[e._v("Admob")]),e._v(", which I was unable to use their service as the primary platform. And until now, ads have been the main source of revenue for this project.")]),e._v(" "),t("p",[e._v("Aside from the mobile and web versions of Win7 Simu, I have also been serving ads on the homepage and turning on monetization for the YouTube channel. Although the revenue from these sources is not much, it is still a great addition to the overall revenue.")]),e._v(" "),t("h3",{attrs:{id:"subscriptions"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#subscriptions"}},[e._v("#")]),e._v(" Subscriptions")]),e._v(" "),t("p",[e._v("After seeing the positive revenue outputs from ads, and having received much feedback from users, I added a subscription feature to Win7 Simu's app version using "),t("strong",[e._v("Google Play Billing")]),e._v(" to allow users to experience the app without interruption by removing ads. The subscription is simple, having only 2 options available: monthly and yearly, with affordable prices. I honestly never expected it to be well-received, but it turned out to be working well, with a decent amount of subscribers and recurring revenue so far.")]),e._v(" "),t("p",[e._v("Likewise, I also added a subscription feature to the web version of Win7 Simu via "),t("strong",[e._v("Patreon")]),e._v(", which is a popular platform for creators to get paid by their fans/users. Despite the outlook not looking as positive as the app version, I still learned something there, and the experience can be useful for future projects.")]),e._v(" "),t("h3",{attrs:{id:"partnerships"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#partnerships"}},[e._v("#")]),e._v(" Partnerships")]),e._v(" "),t("p",[e._v("The last revenue source that I have had my hands on is new and unique in its own way (or rather unpopular in my opinion). It is a partnership with "),t("strong",[e._v("Gamezop")]),e._v(', a gaming platform that any websites/web apps can integrate to bring casual games for their users. The so-called "integration" is rather simple in my case, all I needed to do was just add a banner/icon in my app that leads to the Gamezop platform where my users can play a wide range of casual games. Half of the ad revenue generated from the platform would then be shared with me. The shared revenue is nowhere near the amount that I get from the main revenue source, but it still has been decently and consistently contributing to the overall revenue.')]),e._v(" "),t("a-google-ad"),e._v(" "),t("h2",{attrs:{id:"disclosing-the-numbers"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#disclosing-the-numbers"}},[e._v("#")]),e._v(" Disclosing the numbers")]),e._v(" "),t("p",[e._v('"I don\'t give a sh*t about your story, just show me the numbers" - if that is what you are thinking, then I will cut to the chase and show you the numbers. Below is a list of the MRR (monthly recurring revenue) breakdown for all of the revenue sources that I have mentioned above from the latest month (October 2023).')]),e._v(" "),t("ul",[t("li",[e._v("Ads:\n"),t("ul",[t("li",[e._v("Applovin: "),t("strong",[e._v("~400$")])]),e._v(" "),t("li",[e._v("Admob: "),t("strong",[e._v("~300$")])]),e._v(" "),t("li",[e._v("VDO: "),t("strong",[e._v("~60$")])]),e._v(" "),t("li",[e._v("Appbroda: "),t("strong",[e._v("~40$")])]),e._v(" "),t("li",[e._v("Adsense: "),t("strong",[e._v("~300$")])])])]),e._v(" "),t("li",[e._v("Subscriptions:\n"),t("ul",[t("li",[e._v("In-app purchase: "),t("strong",[e._v("~200$")])]),e._v(" "),t("li",[e._v("Patreon: "),t("strong",[e._v("1.67$")])])])]),e._v(" "),t("li",[e._v("Partnership (Gamezop): "),t("strong",[e._v("~20$")])])]),e._v(" "),t("p",[e._v("In total, after subtracting all the costs and expenses, the MRR is around "),t("strong",[e._v("1000$")]),e._v(".")]),e._v(" "),t("h2",{attrs:{id:"final-thoughts"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#final-thoughts"}},[e._v("#")]),e._v(" Final thoughts")]),e._v(" "),t("p",[e._v("So how do you feel about that number? Is it a lot? Is it just a little? The answer likely depends on from which part of the world you are looking at it, but for me, it is a lot, especially for something that I started out as a side project for learning. With that said, it is still unlikely that I will receive this exact amount every month, there might be ups and downs, there might be happy days when I receive more, and there might be a chance I lose it all like waking up from a sweet dream, but I am still happy with what I have achieved so far.")]),e._v(" "),t("p",[e._v("A few key takeaways that you may find useful from my story:")]),e._v(" "),t("ul",[t("li",[e._v("I was lucky to be able to turn my learning process into a side project, and eventually a side hustle.")]),e._v(" "),t("li",[e._v("I diversified the revenue sources to minimize the risk of losing it all and to maximize the potential of earning more.")]),e._v(" "),t("li",[e._v("I kept grinding and pushing it further, even when I didn't feel like it, and it paid off.")]),e._v(" "),t("li",[e._v("I was, I am, and I will still learning, and applying what I learned to make good use of every opportunity.")])]),e._v(" "),t("p",[e._v("And as I said at the beginning of this post, this is a very subjective story, what worked out for me may not work out for you, and even this little success might not repeat itself for my other projects. But I hope through this post, you have learned something new and useful, and I wish you all the best with your projects.")]),e._v(" "),t("m-blog-tag-list",{attrs:{tags:e.$page.frontmatter.tag,showIcon:""}})],1)}),[],!1,null,null,null);t.default=i.exports}}]); \ No newline at end of file diff --git a/assets/js/5.bf3a2c98.js b/assets/js/5.2f43a5f8.js similarity index 99% rename from assets/js/5.bf3a2c98.js rename to assets/js/5.2f43a5f8.js index b714a29a..163d880e 100644 --- a/assets/js/5.bf3a2c98.js +++ b/assets/js/5.2f43a5f8.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[5],{438:function(t,a,s){t.exports=s.p+"assets/img/snake-intro.eb93ba77.png"},439:function(t,a,s){t.exports=s.p+"assets/img/snake-gameplay.17189f88.png"},440:function(t,a,s){t.exports=s.p+"assets/img/brick-intro.9af9d339.png"},441:function(t,a,s){t.exports=s.p+"assets/img/brick-gameplay.e2169365.png"},442:function(t,a,s){t.exports=s.p+"assets/img/dino-intro.0794c934.png"},443:function(t,a,s){t.exports=s.p+"assets/img/dino-gameplay.12ab28dc.png"},444:function(t,a,s){t.exports=s.p+"assets/img/monogram-intro.835a6b4b.png"},445:function(t,a,s){t.exports=s.p+"assets/img/monogram-gameplay.bcc4ca97.png"},568:function(t,a,s){"use strict";s.r(a);var e=s(16),r=Object(e.a)({},(function(){var t=this,a=t._self._c;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h1",{attrs:{id:"brick-1100-games"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#brick-1100-games"}},[t._v("#")]),t._v(" Brick 1100 Games")]),t._v(" "),a("m-social-links"),t._v(" "),a("h2",{attrs:{id:"snake"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#snake"}},[t._v("#")]),t._v(" Snake")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("Splash screen")]),t._v(" "),a("th",[t._v("Gameplay")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[a("img",{attrs:{src:s(438),alt:"Snake intro"}})]),t._v(" "),a("td",[a("img",{attrs:{src:s(439),alt:"Snake gameplay"}})])])])]),t._v(" "),a("div",{staticClass:"custom-block tip"},[a("p",{staticClass:"custom-block-title"},[t._v("Goal")]),t._v(" "),a("p",[t._v("Make the snake grow longer by directing it to the food. The longer the snake gets, the more points you score.")])]),t._v(" "),a("div",{staticClass:"custom-block warning"},[a("p",{staticClass:"custom-block-title"},[t._v("Controls")]),t._v(" "),a("ul",[a("li",[a("a-key",{attrs:{s:"navi"}}),t._v(" / "),a("a-key",{attrs:{s:"clear"}}),t._v(" - pause game\n")],1),t._v(" "),a("li",[a("a-key",{attrs:{s:"down"}}),t._v(" - move clockwise\n")],1),t._v(" "),a("li",[a("a-key",{attrs:{s:"up"}}),t._v(" - move counter-clockwise\n")],1),t._v(" "),a("li",[a("a-key",{attrs:{s:"2"}}),t._v(" - move up\n")],1),t._v(" "),a("li",[a("a-key",{attrs:{s:"8"}}),t._v(" - move down\n")],1),t._v(" "),a("li",[a("a-key",{attrs:{s:"4"}}),t._v(" - move left\n")],1),t._v(" "),a("li",[a("a-key",{attrs:{s:"6"}}),t._v(" - move right\n")],1)])]),t._v(" "),a("h2",{attrs:{id:"brick-breaker"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#brick-breaker"}},[t._v("#")]),t._v(" Brick Breaker")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("Splash screen")]),t._v(" "),a("th",[t._v("Gameplay")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[a("img",{attrs:{src:s(440),alt:"Brick breaker intro"}})]),t._v(" "),a("td",[a("img",{attrs:{src:s(441),alt:"Brick breaker gameplay"}})])])])]),t._v(" "),a("div",{staticClass:"custom-block tip"},[a("p",{staticClass:"custom-block-title"},[t._v("Goal")]),t._v(" "),a("p",[t._v("Clear the screen by breaking all the bricks with the ball to advance to the next level.")])]),t._v(" "),a("div",{staticClass:"custom-block warning"},[a("p",{staticClass:"custom-block-title"},[t._v("Controls")]),t._v(" "),a("ul",[a("li",[a("a-key",{attrs:{s:"navi"}}),t._v(" / "),a("a-key",{attrs:{s:"clear"}}),t._v(" - pause game\n")],1),t._v(" "),a("li",[a("a-key",{attrs:{s:"up"}}),t._v(" / "),a("a-key",{attrs:{s:"1"}}),t._v(" / "),a("a-key",{attrs:{s:"4"}}),t._v(" / "),a("a-key",{attrs:{s:"7"}}),t._v(" - move paddle left\n")],1),t._v(" "),a("li",[a("a-key",{attrs:{s:"down"}}),t._v(" / "),a("a-key",{attrs:{s:"3"}}),t._v(" / "),a("a-key",{attrs:{s:"6"}}),t._v(" / "),a("a-key",{attrs:{s:"9"}}),t._v(" - move paddle right\n")],1)])]),t._v(" "),a("h2",{attrs:{id:"chrome-dino"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#chrome-dino"}},[t._v("#")]),t._v(" Chrome Dino")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("Splash screen")]),t._v(" "),a("th",[t._v("Gameplay")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[a("img",{attrs:{src:s(442),alt:"Chrome Dino intro"}})]),t._v(" "),a("td",[a("img",{attrs:{src:s(443),alt:"Chrome Dino gameplay"}})])])])]),t._v(" "),a("div",{staticClass:"custom-block tip"},[a("p",{staticClass:"custom-block-title"},[t._v("Goal")]),t._v(" "),a("p",[t._v("Control the T-Rex to overcome obstacles. The longer you survive, the higher your score.")])]),t._v(" "),a("div",{staticClass:"custom-block warning"},[a("p",{staticClass:"custom-block-title"},[t._v("Controls")]),t._v(" "),a("ul",[a("li",[a("a-key",{attrs:{s:"clear"}}),t._v(" - pause game\n")],1),t._v(" "),a("li",[a("a-key",{attrs:{s:"up"}}),t._v(" / "),a("a-key",{attrs:{s:"2"}}),t._v(" - jump\n")],1),t._v(" "),a("li",[a("a-key",{attrs:{s:"down"}}),t._v(" / "),a("a-key",{attrs:{s:"8"}}),t._v(" - duck\n")],1)])]),t._v(" "),a("h2",{attrs:{id:"monogram"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#monogram"}},[t._v("#")]),t._v(" Monogram")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("Splash screen")]),t._v(" "),a("th",[t._v("Gameplay")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[a("img",{attrs:{src:s(444),alt:"Monogram intro"}})]),t._v(" "),a("td",[a("img",{attrs:{src:s(445),alt:"Monogram gameplay"}})])])])]),t._v(" "),a("div",{staticClass:"custom-block tip"},[a("p",{staticClass:"custom-block-title"},[t._v("Goal")]),t._v(" "),a("p",[t._v("Leave blank or fill the grid cells until a pixel image appears to advance to the next level.")])]),t._v(" "),a("div",{staticClass:"custom-block warning"},[a("p",{staticClass:"custom-block-title"},[t._v("Controls")]),t._v(" "),a("ul",[a("li",[a("a-key",{attrs:{s:"clear"}}),t._v(" - pause game\n")],1),t._v(" "),a("li",[a("a-key",{attrs:{s:"2"}}),t._v(" - move the cursor up\n")],1),t._v(" "),a("li",[a("a-key",{attrs:{s:"8"}}),t._v(" - move the cursor down\n")],1),t._v(" "),a("li",[a("a-key",{attrs:{s:"4"}}),t._v(" - move the cursor left\n")],1),t._v(" "),a("li",[a("a-key",{attrs:{s:"6"}}),t._v(" - move the cursor right\n")],1),t._v(" "),a("li",[a("a-key",{attrs:{s:"up"}}),t._v(" - move the cursor to the previous cell\n")],1),t._v(" "),a("li",[a("a-key",{attrs:{s:"down"}}),t._v(" - move the cursor to the next cell\n")],1),t._v(" "),a("li",[a("a-key",{attrs:{s:"navi"}}),t._v(" / "),a("a-key",{attrs:{s:"5"}}),t._v(" - toggle cell fill\n")],1),t._v(" "),a("li",[a("a-key",{attrs:{s:"aste"}}),t._v(" - toggle cell hints (shows the number of filled cells in the row/column)\n")],1),t._v(" "),a("li",[a("a-key",{attrs:{s:"0"}}),t._v(" - reset the grid\n")],1)])])],1)}),[],!1,null,null,null);a.default=r.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[5],{438:function(t,a,s){t.exports=s.p+"assets/img/snake-intro.eb93ba77.png"},439:function(t,a,s){t.exports=s.p+"assets/img/snake-gameplay.17189f88.png"},440:function(t,a,s){t.exports=s.p+"assets/img/brick-intro.9af9d339.png"},441:function(t,a,s){t.exports=s.p+"assets/img/brick-gameplay.e2169365.png"},442:function(t,a,s){t.exports=s.p+"assets/img/dino-intro.0794c934.png"},443:function(t,a,s){t.exports=s.p+"assets/img/dino-gameplay.12ab28dc.png"},444:function(t,a,s){t.exports=s.p+"assets/img/monogram-intro.835a6b4b.png"},445:function(t,a,s){t.exports=s.p+"assets/img/monogram-gameplay.bcc4ca97.png"},567:function(t,a,s){"use strict";s.r(a);var e=s(16),r=Object(e.a)({},(function(){var t=this,a=t._self._c;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h1",{attrs:{id:"brick-1100-games"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#brick-1100-games"}},[t._v("#")]),t._v(" Brick 1100 Games")]),t._v(" "),a("m-social-links"),t._v(" "),a("h2",{attrs:{id:"snake"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#snake"}},[t._v("#")]),t._v(" Snake")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("Splash screen")]),t._v(" "),a("th",[t._v("Gameplay")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[a("img",{attrs:{src:s(438),alt:"Snake intro"}})]),t._v(" "),a("td",[a("img",{attrs:{src:s(439),alt:"Snake gameplay"}})])])])]),t._v(" "),a("div",{staticClass:"custom-block tip"},[a("p",{staticClass:"custom-block-title"},[t._v("Goal")]),t._v(" "),a("p",[t._v("Make the snake grow longer by directing it to the food. The longer the snake gets, the more points you score.")])]),t._v(" "),a("div",{staticClass:"custom-block warning"},[a("p",{staticClass:"custom-block-title"},[t._v("Controls")]),t._v(" "),a("ul",[a("li",[a("a-key",{attrs:{s:"navi"}}),t._v(" / "),a("a-key",{attrs:{s:"clear"}}),t._v(" - pause game\n")],1),t._v(" "),a("li",[a("a-key",{attrs:{s:"down"}}),t._v(" - move clockwise\n")],1),t._v(" "),a("li",[a("a-key",{attrs:{s:"up"}}),t._v(" - move counter-clockwise\n")],1),t._v(" "),a("li",[a("a-key",{attrs:{s:"2"}}),t._v(" - move up\n")],1),t._v(" "),a("li",[a("a-key",{attrs:{s:"8"}}),t._v(" - move down\n")],1),t._v(" "),a("li",[a("a-key",{attrs:{s:"4"}}),t._v(" - move left\n")],1),t._v(" "),a("li",[a("a-key",{attrs:{s:"6"}}),t._v(" - move right\n")],1)])]),t._v(" "),a("h2",{attrs:{id:"brick-breaker"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#brick-breaker"}},[t._v("#")]),t._v(" Brick Breaker")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("Splash screen")]),t._v(" "),a("th",[t._v("Gameplay")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[a("img",{attrs:{src:s(440),alt:"Brick breaker intro"}})]),t._v(" "),a("td",[a("img",{attrs:{src:s(441),alt:"Brick breaker gameplay"}})])])])]),t._v(" "),a("div",{staticClass:"custom-block tip"},[a("p",{staticClass:"custom-block-title"},[t._v("Goal")]),t._v(" "),a("p",[t._v("Clear the screen by breaking all the bricks with the ball to advance to the next level.")])]),t._v(" "),a("div",{staticClass:"custom-block warning"},[a("p",{staticClass:"custom-block-title"},[t._v("Controls")]),t._v(" "),a("ul",[a("li",[a("a-key",{attrs:{s:"navi"}}),t._v(" / "),a("a-key",{attrs:{s:"clear"}}),t._v(" - pause game\n")],1),t._v(" "),a("li",[a("a-key",{attrs:{s:"up"}}),t._v(" / "),a("a-key",{attrs:{s:"1"}}),t._v(" / "),a("a-key",{attrs:{s:"4"}}),t._v(" / "),a("a-key",{attrs:{s:"7"}}),t._v(" - move paddle left\n")],1),t._v(" "),a("li",[a("a-key",{attrs:{s:"down"}}),t._v(" / "),a("a-key",{attrs:{s:"3"}}),t._v(" / "),a("a-key",{attrs:{s:"6"}}),t._v(" / "),a("a-key",{attrs:{s:"9"}}),t._v(" - move paddle right\n")],1)])]),t._v(" "),a("h2",{attrs:{id:"chrome-dino"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#chrome-dino"}},[t._v("#")]),t._v(" Chrome Dino")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("Splash screen")]),t._v(" "),a("th",[t._v("Gameplay")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[a("img",{attrs:{src:s(442),alt:"Chrome Dino intro"}})]),t._v(" "),a("td",[a("img",{attrs:{src:s(443),alt:"Chrome Dino gameplay"}})])])])]),t._v(" "),a("div",{staticClass:"custom-block tip"},[a("p",{staticClass:"custom-block-title"},[t._v("Goal")]),t._v(" "),a("p",[t._v("Control the T-Rex to overcome obstacles. The longer you survive, the higher your score.")])]),t._v(" "),a("div",{staticClass:"custom-block warning"},[a("p",{staticClass:"custom-block-title"},[t._v("Controls")]),t._v(" "),a("ul",[a("li",[a("a-key",{attrs:{s:"clear"}}),t._v(" - pause game\n")],1),t._v(" "),a("li",[a("a-key",{attrs:{s:"up"}}),t._v(" / "),a("a-key",{attrs:{s:"2"}}),t._v(" - jump\n")],1),t._v(" "),a("li",[a("a-key",{attrs:{s:"down"}}),t._v(" / "),a("a-key",{attrs:{s:"8"}}),t._v(" - duck\n")],1)])]),t._v(" "),a("h2",{attrs:{id:"monogram"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#monogram"}},[t._v("#")]),t._v(" Monogram")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("Splash screen")]),t._v(" "),a("th",[t._v("Gameplay")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[a("img",{attrs:{src:s(444),alt:"Monogram intro"}})]),t._v(" "),a("td",[a("img",{attrs:{src:s(445),alt:"Monogram gameplay"}})])])])]),t._v(" "),a("div",{staticClass:"custom-block tip"},[a("p",{staticClass:"custom-block-title"},[t._v("Goal")]),t._v(" "),a("p",[t._v("Leave blank or fill the grid cells until a pixel image appears to advance to the next level.")])]),t._v(" "),a("div",{staticClass:"custom-block warning"},[a("p",{staticClass:"custom-block-title"},[t._v("Controls")]),t._v(" "),a("ul",[a("li",[a("a-key",{attrs:{s:"clear"}}),t._v(" - pause game\n")],1),t._v(" "),a("li",[a("a-key",{attrs:{s:"2"}}),t._v(" - move the cursor up\n")],1),t._v(" "),a("li",[a("a-key",{attrs:{s:"8"}}),t._v(" - move the cursor down\n")],1),t._v(" "),a("li",[a("a-key",{attrs:{s:"4"}}),t._v(" - move the cursor left\n")],1),t._v(" "),a("li",[a("a-key",{attrs:{s:"6"}}),t._v(" - move the cursor right\n")],1),t._v(" "),a("li",[a("a-key",{attrs:{s:"up"}}),t._v(" - move the cursor to the previous cell\n")],1),t._v(" "),a("li",[a("a-key",{attrs:{s:"down"}}),t._v(" - move the cursor to the next cell\n")],1),t._v(" "),a("li",[a("a-key",{attrs:{s:"navi"}}),t._v(" / "),a("a-key",{attrs:{s:"5"}}),t._v(" - toggle cell fill\n")],1),t._v(" "),a("li",[a("a-key",{attrs:{s:"aste"}}),t._v(" - toggle cell hints (shows the number of filled cells in the row/column)\n")],1),t._v(" "),a("li",[a("a-key",{attrs:{s:"0"}}),t._v(" - reset the grid\n")],1)])])],1)}),[],!1,null,null,null);a.default=r.exports}}]); \ No newline at end of file diff --git a/assets/js/50.39e56b63.js b/assets/js/50.3c423ef8.js similarity index 99% rename from assets/js/50.39e56b63.js rename to assets/js/50.3c423ef8.js index d3b4ff78..fe19536a 100644 --- a/assets/js/50.39e56b63.js +++ b/assets/js/50.3c423ef8.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[50],{427:function(t,s,a){t.exports=a.p+"assets/img/custom-cursor.4b9dc1b2.gif"},428:function(t,s,a){t.exports=a.p+"assets/img/dummy-element.9776e72d.png"},557:function(t,s,a){"use strict";a.r(s);var n=a(16),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"implementing-custom-cursors-in-win7-simu"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#implementing-custom-cursors-in-win7-simu"}},[t._v("#")]),t._v(" Implementing custom cursors in Win7 Simu")]),t._v(" "),s("m-blog-meta"),t._v(" "),s("p",[s("img",{attrs:{src:"/assets/covers/win7-simu-custom-cursors.jpg",alt:"Win7 Simu mouse settings"}})]),t._v(" "),s("p",[s("em",[t._v("The mouse settings window captured with the simulated "),s("RouterLink",{attrs:{to:"/win7simu/simulated/snipping.html"}},[t._v("Snipping Tool")]),t._v(" in Win7 Simu")],1)]),t._v(" "),s("p",[t._v("We are back with another technical post on Win7 Simu! This time, let's dive into how the custom cursors are implemented in a web project like "),s("RouterLink",{attrs:{to:"/win7simu/about.html"}},[t._v("Win7 Simu")]),t._v(", the challenges faced, and some caveats to keep in mind. Hopefully, this post will also be useful for those working on a custom cursor implementation in their web projects. Let's get started!")],1),t._v(" "),s("h2",{attrs:{id:"the-idea"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#the-idea"}},[t._v("#")]),t._v(" The idea")]),t._v(" "),s("p",[t._v("As a simulator, Win7 Simu aims to provide an experience as close to the actual Windows 7 as possible. This includes the mouse settings, which allows users to customize the cursor in the "),s("RouterLink",{attrs:{to:"/win7simu/simulated/cpanel.html"}},[t._v("Control Panel")]),t._v(". However, due to the limitations of web techs, and the fact that Win7 Simu also runs on mobile devices, the implementation of custom cursors requires some creativity and compromises to achieve a shared experience across all platforms.")],1),t._v(" "),s("p",[t._v("At a high level, the idea to implement the custom cursor for Win7 Simu as a web project involves the following considerations:")]),t._v(" "),s("ul",[s("li",[t._v("The availability of the cursor images: the cursor requires instant switching between different images upon user interaction with the elements on the page. This means all the cursor images need to be preloaded and ready to be used at any time.")]),t._v(" "),s("li",[t._v("A dummy presentation of the custom cursor: the actual mouse cursor is hidden and the cursor images are rendered on a dummy element that follows the actual mouse cursor/touch position on the screen. This ensures the custom cursor's behavior is consistent across different platforms and avoid the unnecessity of handling the implementation deviations.")]),t._v(" "),s("li",[t._v("Keeping track of the custom cursor: the cursor state needs to be tracked and updated based on the user interaction with the elements on the page. This is done from the code logic and has to be efficient to avoid any performance issues.")])]),t._v(" "),s("p",[s("img",{attrs:{src:a(427),alt:"Custom cursor in Win7 Simu"}})]),t._v(" "),s("p",[s("em",[t._v("How a custom cursor currently looks like in "),s("a",{attrs:{href:"https://win7simu.visnalize.com/",target:"_blank",rel:"noopener noreferrer"}},[t._v("Win7 Simu"),s("OutboundLink")],1)])]),t._v(" "),s("h2",{attrs:{id:"the-implementation"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#the-implementation"}},[t._v("#")]),t._v(" The implementation")]),t._v(" "),s("p",[t._v("If Win7 Simu were not also developed for mobile devices, the custom cursor implementation would be as simple as 1 single line of CSS to apply a custom cursor image on the actual mouse cursor:")]),t._v(" "),s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[s("span",{pre:!0,attrs:{class:"token selector"}},[t._v("#root")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("cursor")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token url"}},[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("url")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string url"}},[t._v("'path-to-image.png'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" auto"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("However, on mobile touch devices, the mouse cursor is not available, hence the above CSS rule wouldn't serve any purpose. In addition, the CSS "),s("code",[t._v("cursor")]),t._v(" doesn't allow animated cursor images, which is also a blocker for replicating the Windows 7 cursor behavior. Therefore, a more complex approach is necessary to implement the custom cursors.")]),t._v(" "),s("a-google-ad"),t._v(" "),s("p",[t._v("As per the idea mentioned above, the custom cursor implementation can be broken down into the following parts:")]),t._v(" "),s("h3",{attrs:{id:"_1-preloading-the-cursor-images"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_1-preloading-the-cursor-images"}},[t._v("#")]),t._v(" 1. Preloading the cursor images")]),t._v(" "),s("p",[t._v("All the cursor images are preloaded and stored in memory prior to the user interaction. This is done by creating an "),s("code",[t._v("Image")]),t._v(" object for each cursor image and setting the "),s("code",[t._v("src")]),t._v(" attribute to the image URL. The "),s("code",[t._v("onload")]),t._v(" event is then used to track the completion of the image loading process. And the preload process is invoked at boot time of Win7 Simu.")]),t._v(" "),s("p",[t._v("The extracted code snippets are as follows:")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" getAssets "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// other assets...")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("assets"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("cursor"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("map")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("imageUrl")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" target "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("preload")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("imageUrl"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("$parent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("$refs"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("preload"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("append")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("target"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" Promise"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("all")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("getAssets"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("And the preload function:")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("preload")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("imageUrl")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Promise")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("resolve"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" reject")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" image "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Image")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n image"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("onerror "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" reject"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n image"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("onload "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" resolve"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n image"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("src "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" imageUrl"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h3",{attrs:{id:"_2-rendering-the-custom-cursor"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_2-rendering-the-custom-cursor"}},[t._v("#")]),t._v(" 2. Rendering the custom cursor")]),t._v(" "),s("p",[s("img",{attrs:{src:a(428),alt:"Custom cursor dummy element"}})]),t._v(" "),s("p",[t._v("The actual mouse cursor is hidden with the CSS rule: "),s("code",[t._v("cursor: none !important")]),t._v(", and instead a dummy element is used to render the custom cursor images. This dummy element is positioned "),s("code",[t._v("fixed")]),t._v(" on the screen and follows the actual mouse cursor/touch position using JS logic (more on that in the next part). The size of the dummy element is kept to a minimum (64x64 pixels) and just enough to fit in the cursor images, this ensures the simulator's performance is not heavily impacted by the custom cursor's movement and rendering.")]),t._v(" "),s("p",[t._v("It's also important to note that the dummy element is not supposed to be interactive and should not intefer with the user interaction on the page, hence the "),s("code",[t._v("pointer-events")]),t._v(" must be set to "),s("code",[t._v("none")]),t._v(" to achieve this. And the "),s("code",[t._v("z-index")]),t._v(" must be set to the highest possible value to ensure the custom cursor is not overlapped by other elements on the page.")]),t._v(" "),s("p",[t._v("The CSS rules for the dummy element are then:")]),t._v(" "),s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".cursor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("background-position")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" center"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("background-repeat")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" no-repeat"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("pointer-events")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" none"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("position")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" fixed"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("width")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 64px"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("height")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 64px"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("z-index")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 9999"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h3",{attrs:{id:"_3-tracking-the-cursor-state-and-position"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_3-tracking-the-cursor-state-and-position"}},[t._v("#")]),t._v(" 3. Tracking the cursor state and position")]),t._v(" "),s("p",[t._v("The dummy element also listens to the user interaction events and updates the cursor state and position accordingly. This is done by attaching event listeners to the "),s("code",[t._v("mousemove")]),t._v(", "),s("code",[t._v("touchmove")]),t._v(", and "),s("code",[t._v("touchend")]),t._v(" events on the root element of the Win7 Simu. The dummy cursor element is then positioned in response to the actual mouse cursor/touch position of the event. And the cursor state is updated based on the targeting element, which can be an editable element, a resizable element, a canvas, etc. The cursor state is then used to determine which cursor image to display on the dummy element.")]),t._v(" "),s("p",[t._v("The most crucial snippet of the logic to handle this is as follows:")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mounted")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("x "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("$el"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("clientWidth "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" window"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("outerWidth "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("y "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("$el"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("clientHeight "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" window"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("outerHeight "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("$root"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("$el"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("addEventListener")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"touchend"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("moveTouch"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("$root"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("$el"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("addEventListener")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"touchmove"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("moveTouch"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("$root"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("$el"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("addEventListener")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"mousemove"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("moveMouse"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("$root"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("$on")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("Event"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("ChangeCursor"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("cursorType")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("Cursor"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("Default"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" Cursor"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("Working"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" Cursor"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("Busy"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("includes")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("cursorType"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("activeCursor "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("cursorImage"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("cursorType"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("cachedCursor "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("cursorImage"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("cursorType"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("methods")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("moveTouch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" changedTouches"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" target "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("touch"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" changedTouches"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("x "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" touch"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("clientX "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("$el"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("clientWidth "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("y "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" touch"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("clientY "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("$el"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("clientHeight "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("moveGeneric")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("target"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("moveMouse")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("e")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("x "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" e"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("clientX "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("$el"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("clientWidth "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("y "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" e"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("clientY "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("$el"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("clientHeight "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("moveGeneric")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("e"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("target"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("moveGeneric")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("target")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// some other logic...")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" isTextInput "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" target"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tagName "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("===")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"INPUT"')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&&")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),t._v("target"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("type "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("||")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"text"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"password"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"search"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"tel"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"url"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("includes")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("target"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("type"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" isContentEditable "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" target"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("contentEditable "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("===")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"true"')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("||")]),t._v(" target"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("closest")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'[contenteditable=\"true\"]'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("isTextInput "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("||")]),t._v(" isContentEditable "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("||")]),t._v(" target"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tagName "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("===")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"TEXTAREA"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("activeCursor "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("cursorImage"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("Cursor"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("Typing"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("target"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("classList"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("contains")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"upper-canvas"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("activeCursor "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("cachedCursor"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// paint cursor")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("target"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("closest")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('".resizable"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&&")]),t._v(" target"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("classList"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("contains")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"handle"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" direction "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" target"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("className"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("split")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"-"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("activeCursor "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("cursorImage"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("DirectionMap"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("direction"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("activeCursor "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("cursorImage"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("Cursor"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("Default"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h2",{attrs:{id:"the-caveats"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#the-caveats"}},[t._v("#")]),t._v(" The caveats")]),t._v(" "),s("p",[t._v("With the implementation approach above, the custom cursor behavior has somewhat replicated closely the actual Windows 7 cursor. However, due to the limitations of web techs, and how sophisticated the simulator has evolved over time, there are some challenges and caveats that are tough, if not impossible, to overcome, and are worth mentioning:")]),t._v(" "),s("ul",[s("li",[s("strong",[t._v("Custom cursors are not performant")]),t._v(": using a dummy element to render the cursor images is resource-intensive, the browser has to repaint the element as it updates and moves across the screen. Additionally, as the dummy element is part of the DOM, any intensive operation on the page can impact the cursor rendering and make it appear laggy to the users.")]),t._v(" "),s("li",[s("strong",[t._v("Custom cursors don't work in iframes")]),t._v(": the dummy element is bound to the HTML document where it's created, and iframe content is an external document that the dummy element doesn't have access to. Therefore, as you move the actual mouse cursor onto an iframe, the custom cursor will stop and the actual mouse cursor will be visible instead.")]),t._v(" "),s("li",[s("strong",[t._v("Custom cursors don't work as expected on mobile devices")]),t._v(": from the code above, can can tell that the custom cursor follows the touch position, this means it will only react to your finger touch and is always visible under your finger. This is not an ideal behavior and somewhat beats the purpose of having a custom cursor. This is also something a lot of users have raised and reported as a bug (despite not being a bug) on Google Play and I'm still figuring out a way to address this.")])]),t._v(" "),s("m-blog-tag-list",{attrs:{tags:t.$page.frontmatter.tag,showIcon:""}})],1)}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[50],{431:function(t,s,a){t.exports=a.p+"assets/img/custom-cursor.4b9dc1b2.gif"},432:function(t,s,a){t.exports=a.p+"assets/img/dummy-element.9776e72d.png"},559:function(t,s,a){"use strict";a.r(s);var n=a(16),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"implementing-custom-cursors-in-win7-simu"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#implementing-custom-cursors-in-win7-simu"}},[t._v("#")]),t._v(" Implementing custom cursors in Win7 Simu")]),t._v(" "),s("m-blog-meta"),t._v(" "),s("p",[s("img",{attrs:{src:"/assets/covers/win7-simu-custom-cursors.jpg",alt:"Win7 Simu mouse settings"}})]),t._v(" "),s("p",[s("em",[t._v("The mouse settings window captured with the simulated "),s("RouterLink",{attrs:{to:"/win7simu/simulated/snipping.html"}},[t._v("Snipping Tool")]),t._v(" in Win7 Simu")],1)]),t._v(" "),s("p",[t._v("We are back with another technical post on Win7 Simu! This time, let's dive into how the custom cursors are implemented in a web project like "),s("RouterLink",{attrs:{to:"/win7simu/about.html"}},[t._v("Win7 Simu")]),t._v(", the challenges faced, and some caveats to keep in mind. Hopefully, this post will also be useful for those working on a custom cursor implementation in their web projects. Let's get started!")],1),t._v(" "),s("h2",{attrs:{id:"the-idea"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#the-idea"}},[t._v("#")]),t._v(" The idea")]),t._v(" "),s("p",[t._v("As a simulator, Win7 Simu aims to provide an experience as close to the actual Windows 7 as possible. This includes the mouse settings, which allows users to customize the cursor in the "),s("RouterLink",{attrs:{to:"/win7simu/simulated/cpanel.html"}},[t._v("Control Panel")]),t._v(". However, due to the limitations of web techs, and the fact that Win7 Simu also runs on mobile devices, the implementation of custom cursors requires some creativity and compromises to achieve a shared experience across all platforms.")],1),t._v(" "),s("p",[t._v("At a high level, the idea to implement the custom cursor for Win7 Simu as a web project involves the following considerations:")]),t._v(" "),s("ul",[s("li",[t._v("The availability of the cursor images: the cursor requires instant switching between different images upon user interaction with the elements on the page. This means all the cursor images need to be preloaded and ready to be used at any time.")]),t._v(" "),s("li",[t._v("A dummy presentation of the custom cursor: the actual mouse cursor is hidden and the cursor images are rendered on a dummy element that follows the actual mouse cursor/touch position on the screen. This ensures the custom cursor's behavior is consistent across different platforms and avoid the unnecessity of handling the implementation deviations.")]),t._v(" "),s("li",[t._v("Keeping track of the custom cursor: the cursor state needs to be tracked and updated based on the user interaction with the elements on the page. This is done from the code logic and has to be efficient to avoid any performance issues.")])]),t._v(" "),s("p",[s("img",{attrs:{src:a(431),alt:"Custom cursor in Win7 Simu"}})]),t._v(" "),s("p",[s("em",[t._v("How a custom cursor currently looks like in "),s("a",{attrs:{href:"https://win7simu.visnalize.com/",target:"_blank",rel:"noopener noreferrer"}},[t._v("Win7 Simu"),s("OutboundLink")],1)])]),t._v(" "),s("h2",{attrs:{id:"the-implementation"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#the-implementation"}},[t._v("#")]),t._v(" The implementation")]),t._v(" "),s("p",[t._v("If Win7 Simu were not also developed for mobile devices, the custom cursor implementation would be as simple as 1 single line of CSS to apply a custom cursor image on the actual mouse cursor:")]),t._v(" "),s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[s("span",{pre:!0,attrs:{class:"token selector"}},[t._v("#root")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("cursor")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token url"}},[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("url")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string url"}},[t._v("'path-to-image.png'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" auto"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("However, on mobile touch devices, the mouse cursor is not available, hence the above CSS rule wouldn't serve any purpose. In addition, the CSS "),s("code",[t._v("cursor")]),t._v(" doesn't allow animated cursor images, which is also a blocker for replicating the Windows 7 cursor behavior. Therefore, a more complex approach is necessary to implement the custom cursors.")]),t._v(" "),s("a-google-ad"),t._v(" "),s("p",[t._v("As per the idea mentioned above, the custom cursor implementation can be broken down into the following parts:")]),t._v(" "),s("h3",{attrs:{id:"_1-preloading-the-cursor-images"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_1-preloading-the-cursor-images"}},[t._v("#")]),t._v(" 1. Preloading the cursor images")]),t._v(" "),s("p",[t._v("All the cursor images are preloaded and stored in memory prior to the user interaction. This is done by creating an "),s("code",[t._v("Image")]),t._v(" object for each cursor image and setting the "),s("code",[t._v("src")]),t._v(" attribute to the image URL. The "),s("code",[t._v("onload")]),t._v(" event is then used to track the completion of the image loading process. And the preload process is invoked at boot time of Win7 Simu.")]),t._v(" "),s("p",[t._v("The extracted code snippets are as follows:")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" getAssets "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// other assets...")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("assets"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("cursor"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("map")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("imageUrl")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" target "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("preload")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("imageUrl"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("$parent"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("$refs"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("preload"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("append")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("target"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" Promise"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("all")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("getAssets"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("And the preload function:")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("preload")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("imageUrl")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Promise")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("resolve"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" reject")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" image "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Image")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n image"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("onerror "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" reject"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n image"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("onload "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" resolve"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n image"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("src "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" imageUrl"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h3",{attrs:{id:"_2-rendering-the-custom-cursor"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_2-rendering-the-custom-cursor"}},[t._v("#")]),t._v(" 2. Rendering the custom cursor")]),t._v(" "),s("p",[s("img",{attrs:{src:a(432),alt:"Custom cursor dummy element"}})]),t._v(" "),s("p",[t._v("The actual mouse cursor is hidden with the CSS rule: "),s("code",[t._v("cursor: none !important")]),t._v(", and instead a dummy element is used to render the custom cursor images. This dummy element is positioned "),s("code",[t._v("fixed")]),t._v(" on the screen and follows the actual mouse cursor/touch position using JS logic (more on that in the next part). The size of the dummy element is kept to a minimum (64x64 pixels) and just enough to fit in the cursor images, this ensures the simulator's performance is not heavily impacted by the custom cursor's movement and rendering.")]),t._v(" "),s("p",[t._v("It's also important to note that the dummy element is not supposed to be interactive and should not intefer with the user interaction on the page, hence the "),s("code",[t._v("pointer-events")]),t._v(" must be set to "),s("code",[t._v("none")]),t._v(" to achieve this. And the "),s("code",[t._v("z-index")]),t._v(" must be set to the highest possible value to ensure the custom cursor is not overlapped by other elements on the page.")]),t._v(" "),s("p",[t._v("The CSS rules for the dummy element are then:")]),t._v(" "),s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".cursor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("background-position")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" center"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("background-repeat")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" no-repeat"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("pointer-events")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" none"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("position")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" fixed"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("width")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 64px"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("height")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 64px"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("z-index")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 9999"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h3",{attrs:{id:"_3-tracking-the-cursor-state-and-position"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_3-tracking-the-cursor-state-and-position"}},[t._v("#")]),t._v(" 3. Tracking the cursor state and position")]),t._v(" "),s("p",[t._v("The dummy element also listens to the user interaction events and updates the cursor state and position accordingly. This is done by attaching event listeners to the "),s("code",[t._v("mousemove")]),t._v(", "),s("code",[t._v("touchmove")]),t._v(", and "),s("code",[t._v("touchend")]),t._v(" events on the root element of the Win7 Simu. The dummy cursor element is then positioned in response to the actual mouse cursor/touch position of the event. And the cursor state is updated based on the targeting element, which can be an editable element, a resizable element, a canvas, etc. The cursor state is then used to determine which cursor image to display on the dummy element.")]),t._v(" "),s("p",[t._v("The most crucial snippet of the logic to handle this is as follows:")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mounted")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("x "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("$el"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("clientWidth "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" window"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("outerWidth "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("y "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("$el"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("clientHeight "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" window"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("outerHeight "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("$root"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("$el"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("addEventListener")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"touchend"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("moveTouch"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("$root"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("$el"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("addEventListener")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"touchmove"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("moveTouch"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("$root"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("$el"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("addEventListener")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"mousemove"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("moveMouse"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("$root"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("$on")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("Event"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("ChangeCursor"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("cursorType")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("Cursor"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("Default"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" Cursor"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("Working"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" Cursor"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("Busy"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("includes")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("cursorType"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("activeCursor "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("cursorImage"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("cursorType"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("cachedCursor "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("cursorImage"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("cursorType"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("methods")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("moveTouch")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" changedTouches"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" target "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("touch"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" changedTouches"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("x "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" touch"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("clientX "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("$el"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("clientWidth "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("y "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" touch"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("clientY "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("$el"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("clientHeight "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("moveGeneric")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("target"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("moveMouse")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("e")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("x "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" e"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("clientX "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("$el"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("clientWidth "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("y "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" e"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("clientY "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("$el"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("clientHeight "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("moveGeneric")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("e"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("target"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("moveGeneric")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("target")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// some other logic...")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" isTextInput "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" target"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tagName "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("===")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"INPUT"')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&&")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),t._v("target"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("type "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("||")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"text"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"password"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"search"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"tel"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"url"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("includes")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("target"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("type"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" isContentEditable "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" target"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("contentEditable "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("===")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"true"')]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("||")]),t._v(" target"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("closest")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'[contenteditable=\"true\"]'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("isTextInput "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("||")]),t._v(" isContentEditable "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("||")]),t._v(" target"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tagName "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("===")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"TEXTAREA"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("activeCursor "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("cursorImage"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("Cursor"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("Typing"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("target"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("classList"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("contains")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"upper-canvas"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("activeCursor "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("cachedCursor"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// paint cursor")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("target"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("closest")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('".resizable"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&&")]),t._v(" target"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("classList"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("contains")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"handle"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" direction "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" target"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("className"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("split")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"-"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("activeCursor "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("cursorImage"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("DirectionMap"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("direction"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("activeCursor "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("cursorImage"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("Cursor"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("Default"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h2",{attrs:{id:"the-caveats"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#the-caveats"}},[t._v("#")]),t._v(" The caveats")]),t._v(" "),s("p",[t._v("With the implementation approach above, the custom cursor behavior has somewhat replicated closely the actual Windows 7 cursor. However, due to the limitations of web techs, and how sophisticated the simulator has evolved over time, there are some challenges and caveats that are tough, if not impossible, to overcome, and are worth mentioning:")]),t._v(" "),s("ul",[s("li",[s("strong",[t._v("Custom cursors are not performant")]),t._v(": using a dummy element to render the cursor images is resource-intensive, the browser has to repaint the element as it updates and moves across the screen. Additionally, as the dummy element is part of the DOM, any intensive operation on the page can impact the cursor rendering and make it appear laggy to the users.")]),t._v(" "),s("li",[s("strong",[t._v("Custom cursors don't work in iframes")]),t._v(": the dummy element is bound to the HTML document where it's created, and iframe content is an external document that the dummy element doesn't have access to. Therefore, as you move the actual mouse cursor onto an iframe, the custom cursor will stop and the actual mouse cursor will be visible instead.")]),t._v(" "),s("li",[s("strong",[t._v("Custom cursors don't work as expected on mobile devices")]),t._v(": from the code above, can can tell that the custom cursor follows the touch position, this means it will only react to your finger touch and is always visible under your finger. This is not an ideal behavior and somewhat beats the purpose of having a custom cursor. This is also something a lot of users have raised and reported as a bug (despite not being a bug) on Google Play and I'm still figuring out a way to address this.")])]),t._v(" "),s("m-blog-tag-list",{attrs:{tags:t.$page.frontmatter.tag,showIcon:""}})],1)}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file diff --git a/assets/js/51.37d59a59.js b/assets/js/51.94677b3e.js similarity index 96% rename from assets/js/51.37d59a59.js rename to assets/js/51.94677b3e.js index 78f12de9..7fd451b0 100644 --- a/assets/js/51.37d59a59.js +++ b/assets/js/51.94677b3e.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[51],{429:function(e,t,o){e.exports=o.p+"assets/img/win7-simu-computer.b9265f50.png"},430:function(e,t,o){e.exports=o.p+"assets/img/win7-simu-indexeddb.f8841da2.png"},558:function(e,t,o){"use strict";o.r(t);var i=o(16),a=Object(i.a)({},(function(){var e=this,t=e._self._c;return t("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[t("h1",{attrs:{id:"implementing-file-explorer-in-win7-simu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#implementing-file-explorer-in-win7-simu"}},[e._v("#")]),e._v(" Implementing File Explorer in Win7 Simu")]),e._v(" "),t("m-blog-meta"),e._v(" "),t("p",[t("img",{attrs:{src:"https://images.unsplash.com/photo-1544396821-4dd40b938ad3?auto=format&fit=crop&w=740&q=80",alt:"Files and folders"}})]),e._v(" "),t("p",[t("em",[e._v("Cover image by Viktor Talashuk via "),t("a",{attrs:{href:"https://unsplash.com/photos/05HLFQu8bFw",target:"_blank",rel:"noopener noreferrer"}},[e._v("Unsplash"),t("OutboundLink")],1)])]),e._v(" "),t("p",[t("strong",[e._v("File Explorer")]),e._v(" has always been one of the vital features in any operating system, as a Windows simulator, to no surprise that it's also among the most demanded features to be added in Win7 Simu. However, I have been procrastinating its implementation as, besides my skillset limitations, there are quite a lot of complexities and technical constraints involved. Now that I have finally been able to implement it properly, let's read through some technical decisions I made and how it deviates from the actual File Explorer of Windows.")]),e._v(" "),t("h2",{attrs:{id:"some-difficulties"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#some-difficulties"}},[e._v("#")]),e._v(" Some difficulties")]),e._v(" "),t("ul",[t("li",[t("em",[e._v("Self-skillset limitation")]),e._v(" - as this simulator has been a work of a one-man development team, sometimes it is tough when you get stuck and there is nobody to support, or at least just to talk it out")]),e._v(" "),t("li",[t("em",[e._v("Work-life balance disruption")]),e._v(" - as I have a family and a 9-to-5 job, trying to find a time slot in between for hobbyist projects is tough")]),e._v(" "),t("li",[t("em",[e._v("Disheartening moments")]),e._v(" - having to spend a long long time working on something out of your capability, and stay committed to it is also tough")]),e._v(" "),t("li",[t("em",[e._v("Too many unknowns")]),e._v(" - libraries, frameworks, techs, platforms, devices, or even just the languages you are not in control may slow you down, kill your time and still you couldn't figure out how to resolve the issue.")])]),e._v(" "),t("p",[e._v("Yes, those are, but not all the difficulties I have been dealing with when developing the File Explorer functionalities, or in general, this simulator. Just a little bit of a sharing before we get into the technical stuff, so you may know that there is no shortcut to achievements.")]),e._v(" "),t("p",[e._v("Despite only a few capabilities being rolled out for the File Explorer in "),t("RouterLink",{attrs:{to:"/win7simu/changelog.html#_3-0-0-may-20-2023"}},[e._v("v3.0.0")]),e._v(", it actually took me months to come up, put the stuff together, and do thorough testing before releasing to you. It was not easy, at all, with several late nights and weekends burned onto it, having to face constant challenges and struggling to break through my own limits. However, the hard work finally paid off, it has come to fruition 😌")],1),e._v(" "),t("h2",{attrs:{id:"implementing-the-file-explorer-functionalities"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#implementing-the-file-explorer-functionalities"}},[e._v("#")]),e._v(" Implementing the File Explorer functionalities")]),e._v(" "),t("p",[t("img",{attrs:{src:o(429),alt:"Win7 Simu File Explorer"}})]),e._v(" "),t("p",[e._v("In v3.0.0, the minimum viable version of File Explorer supports basic operations on files and folders such as creating, opening, editing, renaming, moving, copying, and pasting. And an integral part of this is the trash/delete mechanism which is also supported. As the simulator has to support both Web and Android platforms, there are some challenges to solve for each, and the implementation approach also differs. I will break down some key notes for each.")]),e._v(" "),t("a-google-ad"),e._v(" "),t("h3",{attrs:{id:"implementation-for-android"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#implementation-for-android"}},[e._v("#")]),e._v(" Implementation for Android")]),e._v(" "),t("p",[e._v("With Android already having its own file management system to help organize and manage data from memory cards, I only needed to leverage this capability and hook up to Win7 Simu. However, as easy as it may sound, for someone who has very little knowledge of any programming languages other than JavaScript, it was time-consuming to be able to write a simple piece of code that just works without many issues.")]),e._v(" "),t("p",[e._v("Anyway, the key thing I'm trying to get across here is that, as an operating system, Android has its own way of organizing files and folders, where there is no concept of disk drives or the like as in Windows. And to make it worse, even the different Android versions have a slight difference to handle this among themselves 🤦‍♂️ Therefore, to mimic the disk-drive-driven structure, I needed to build a tree hierarchy from the app directory (a user-friendly path is something like: "),t("code",[e._v("Android/data/win7simu.visnalize.com/files")]),e._v("), which does not require any permission to perform read/write operations on, in case you are doubtful to grant this app access to your data. To put it simply, the app directory acts as the File Explorer system root, with the path hierarchy as follows:")]),e._v(" "),t("div",{staticClass:"language- extra-class"},[t("pre",{pre:!0,attrs:{class:"language-text"}},[t("code",[e._v("Android/data/win7simu.visnalize.com/files\n└── computer/\n └── drive0/\n ├── Program Files/\n ├── Users/\n │ ├── Guest\n │ │ ├── AppData\n │ │ │ └── Roaming\n │ │ │ └── Visnalize\n │ │ │ └── Windows\n │ │ │ └── RecycleBin\n │ │ ├── Downloads\n │ │ ├── Music\n │ │ └── Videos\n │ └── \n │ ├── AppData\n │ ├── Desktop\n │ └── ...\n └── Windows/\n")])])]),t("p",[e._v("Moreover, there is a separate Android drive where you can access all the data available from the root of the memory card. However, due to the strict permission policies, an app is only allowed a certain level of access to the data outside of that app's directory, especially on later Android versions, so please do not expect the Win7 Simu's File Explorer to be as robust as the system default one. Ultimately, its sole purpose is not to be a complete functional emulator, but just to experience, to explore certain limited simulated features of Windows 7.")]),e._v(" "),t("h3",{attrs:{id:"implementation-for-web"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#implementation-for-web"}},[e._v("#")]),e._v(" Implementation for Web")]),e._v(" "),t("p",[e._v("For the Web, the approach was literally built from the ground up, with the IndexedDB API utilized as the source for storing the item paths and organizing them into a hierarchical tree. "),t("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API",target:"_blank",rel:"noopener noreferrer"}},[e._v("IndexedDB"),t("OutboundLink")],1),e._v(" is a powerful solution that allows storing large amounts of data with high-performance search capability based on indexed keys. If you're a curious person with some coding experience, you may check out the web version of Win7 Simu from the dev tools and you may see something like this:")]),e._v(" "),t("p",[t("img",{attrs:{src:o(430),alt:"Win7 Simu File Explorer structure in IndexedDB"}})]),e._v(" "),t("p",[e._v("That is how the File Explorer is structured under the hood from the IndexedDB view. Each file/folder's path corresponds to an index key, with the value containing the metadata and content of that item. For every operation performed against this structure, such as creating, modifying or deleting an item... a corresponding path or key reacts to it. The whole structure is then processed and displayed accordingly on the File Explorer interface.")]),e._v(" "),t("p",[e._v("And of course, be cautious not to mess with it, otherwise, you will lose all your data (hopefully not so important, but I guess who would put important stuff in a simulator, right?).")]),e._v(" "),t("h2",{attrs:{id:"so-what-s-next"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#so-what-s-next"}},[e._v("#")]),e._v(" So, what's next")]),e._v(" "),t("p",[e._v("As the released version of the File Explorer is roughly just a minimum viable version, there are still plenty of rooms for improvements and addon features, namely:")]),e._v(" "),t("ul",[t("li",[e._v("Support multiple item selection")]),e._v(" "),t("li",[e._v("Support quick navigation from the address bar")]),e._v(" "),t("li",[e._v("Support files/folders search")]),e._v(" "),t("li",[e._v("Support sorting items, various view modes (thumbnail, list, details)")]),e._v(" "),t("li",[e._v("Support storage allocation, add volumes, modify drive labels")])]),e._v(" "),t("p",[e._v("And many more that, depending on the number of demands and requests, I might get my hands onto them, some may get implemented very soon, late or will never get implemented at all.")]),e._v(" "),t("p",[e._v("If you enjoy my work and it has somehow helped you in any way, get in touch with me via my email, or simply leave a comment to let me know, that will definitely lift my spirit and encourage me, or even better, become a financial supporter (via "),t("a",{attrs:{href:"https://www.patreon.com/visnalize",target:"_blank",rel:"noopener noreferrer"}},[e._v("Patreon"),t("OutboundLink")],1),e._v(" or Play Store IAP) so I can constantly invest more time in it and roll out more cool features. Again, thank you for your support and stay tuned for more updates. ✌")]),e._v(" "),t("m-blog-tag-list",{attrs:{tags:e.$page.frontmatter.tag,showIcon:""}})],1)}),[],!1,null,null,null);t.default=a.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[51],{427:function(e,t,o){e.exports=o.p+"assets/img/win7-simu-computer.b9265f50.png"},428:function(e,t,o){e.exports=o.p+"assets/img/win7-simu-indexeddb.f8841da2.png"},557:function(e,t,o){"use strict";o.r(t);var i=o(16),a=Object(i.a)({},(function(){var e=this,t=e._self._c;return t("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[t("h1",{attrs:{id:"implementing-file-explorer-in-win7-simu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#implementing-file-explorer-in-win7-simu"}},[e._v("#")]),e._v(" Implementing File Explorer in Win7 Simu")]),e._v(" "),t("m-blog-meta"),e._v(" "),t("p",[t("img",{attrs:{src:"https://images.unsplash.com/photo-1544396821-4dd40b938ad3?auto=format&fit=crop&w=740&q=80",alt:"Files and folders"}})]),e._v(" "),t("p",[t("em",[e._v("Cover image by Viktor Talashuk via "),t("a",{attrs:{href:"https://unsplash.com/photos/05HLFQu8bFw",target:"_blank",rel:"noopener noreferrer"}},[e._v("Unsplash"),t("OutboundLink")],1)])]),e._v(" "),t("p",[t("strong",[e._v("File Explorer")]),e._v(" has always been one of the vital features in any operating system, as a Windows simulator, to no surprise that it's also among the most demanded features to be added in Win7 Simu. However, I have been procrastinating its implementation as, besides my skillset limitations, there are quite a lot of complexities and technical constraints involved. Now that I have finally been able to implement it properly, let's read through some technical decisions I made and how it deviates from the actual File Explorer of Windows.")]),e._v(" "),t("h2",{attrs:{id:"some-difficulties"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#some-difficulties"}},[e._v("#")]),e._v(" Some difficulties")]),e._v(" "),t("ul",[t("li",[t("em",[e._v("Self-skillset limitation")]),e._v(" - as this simulator has been a work of a one-man development team, sometimes it is tough when you get stuck and there is nobody to support, or at least just to talk it out")]),e._v(" "),t("li",[t("em",[e._v("Work-life balance disruption")]),e._v(" - as I have a family and a 9-to-5 job, trying to find a time slot in between for hobbyist projects is tough")]),e._v(" "),t("li",[t("em",[e._v("Disheartening moments")]),e._v(" - having to spend a long long time working on something out of your capability, and stay committed to it is also tough")]),e._v(" "),t("li",[t("em",[e._v("Too many unknowns")]),e._v(" - libraries, frameworks, techs, platforms, devices, or even just the languages you are not in control may slow you down, kill your time and still you couldn't figure out how to resolve the issue.")])]),e._v(" "),t("p",[e._v("Yes, those are, but not all the difficulties I have been dealing with when developing the File Explorer functionalities, or in general, this simulator. Just a little bit of a sharing before we get into the technical stuff, so you may know that there is no shortcut to achievements.")]),e._v(" "),t("p",[e._v("Despite only a few capabilities being rolled out for the File Explorer in "),t("RouterLink",{attrs:{to:"/win7simu/changelog.html#_3-0-0-may-20-2023"}},[e._v("v3.0.0")]),e._v(", it actually took me months to come up, put the stuff together, and do thorough testing before releasing to you. It was not easy, at all, with several late nights and weekends burned onto it, having to face constant challenges and struggling to break through my own limits. However, the hard work finally paid off, it has come to fruition 😌")],1),e._v(" "),t("h2",{attrs:{id:"implementing-the-file-explorer-functionalities"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#implementing-the-file-explorer-functionalities"}},[e._v("#")]),e._v(" Implementing the File Explorer functionalities")]),e._v(" "),t("p",[t("img",{attrs:{src:o(427),alt:"Win7 Simu File Explorer"}})]),e._v(" "),t("p",[e._v("In v3.0.0, the minimum viable version of File Explorer supports basic operations on files and folders such as creating, opening, editing, renaming, moving, copying, and pasting. And an integral part of this is the trash/delete mechanism which is also supported. As the simulator has to support both Web and Android platforms, there are some challenges to solve for each, and the implementation approach also differs. I will break down some key notes for each.")]),e._v(" "),t("a-google-ad"),e._v(" "),t("h3",{attrs:{id:"implementation-for-android"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#implementation-for-android"}},[e._v("#")]),e._v(" Implementation for Android")]),e._v(" "),t("p",[e._v("With Android already having its own file management system to help organize and manage data from memory cards, I only needed to leverage this capability and hook up to Win7 Simu. However, as easy as it may sound, for someone who has very little knowledge of any programming languages other than JavaScript, it was time-consuming to be able to write a simple piece of code that just works without many issues.")]),e._v(" "),t("p",[e._v("Anyway, the key thing I'm trying to get across here is that, as an operating system, Android has its own way of organizing files and folders, where there is no concept of disk drives or the like as in Windows. And to make it worse, even the different Android versions have a slight difference to handle this among themselves 🤦‍♂️ Therefore, to mimic the disk-drive-driven structure, I needed to build a tree hierarchy from the app directory (a user-friendly path is something like: "),t("code",[e._v("Android/data/win7simu.visnalize.com/files")]),e._v("), which does not require any permission to perform read/write operations on, in case you are doubtful to grant this app access to your data. To put it simply, the app directory acts as the File Explorer system root, with the path hierarchy as follows:")]),e._v(" "),t("div",{staticClass:"language- extra-class"},[t("pre",{pre:!0,attrs:{class:"language-text"}},[t("code",[e._v("Android/data/win7simu.visnalize.com/files\n└── computer/\n └── drive0/\n ├── Program Files/\n ├── Users/\n │ ├── Guest\n │ │ ├── AppData\n │ │ │ └── Roaming\n │ │ │ └── Visnalize\n │ │ │ └── Windows\n │ │ │ └── RecycleBin\n │ │ ├── Downloads\n │ │ ├── Music\n │ │ └── Videos\n │ └── \n │ ├── AppData\n │ ├── Desktop\n │ └── ...\n └── Windows/\n")])])]),t("p",[e._v("Moreover, there is a separate Android drive where you can access all the data available from the root of the memory card. However, due to the strict permission policies, an app is only allowed a certain level of access to the data outside of that app's directory, especially on later Android versions, so please do not expect the Win7 Simu's File Explorer to be as robust as the system default one. Ultimately, its sole purpose is not to be a complete functional emulator, but just to experience, to explore certain limited simulated features of Windows 7.")]),e._v(" "),t("h3",{attrs:{id:"implementation-for-web"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#implementation-for-web"}},[e._v("#")]),e._v(" Implementation for Web")]),e._v(" "),t("p",[e._v("For the Web, the approach was literally built from the ground up, with the IndexedDB API utilized as the source for storing the item paths and organizing them into a hierarchical tree. "),t("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API",target:"_blank",rel:"noopener noreferrer"}},[e._v("IndexedDB"),t("OutboundLink")],1),e._v(" is a powerful solution that allows storing large amounts of data with high-performance search capability based on indexed keys. If you're a curious person with some coding experience, you may check out the web version of Win7 Simu from the dev tools and you may see something like this:")]),e._v(" "),t("p",[t("img",{attrs:{src:o(428),alt:"Win7 Simu File Explorer structure in IndexedDB"}})]),e._v(" "),t("p",[e._v("That is how the File Explorer is structured under the hood from the IndexedDB view. Each file/folder's path corresponds to an index key, with the value containing the metadata and content of that item. For every operation performed against this structure, such as creating, modifying or deleting an item... a corresponding path or key reacts to it. The whole structure is then processed and displayed accordingly on the File Explorer interface.")]),e._v(" "),t("p",[e._v("And of course, be cautious not to mess with it, otherwise, you will lose all your data (hopefully not so important, but I guess who would put important stuff in a simulator, right?).")]),e._v(" "),t("h2",{attrs:{id:"so-what-s-next"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#so-what-s-next"}},[e._v("#")]),e._v(" So, what's next")]),e._v(" "),t("p",[e._v("As the released version of the File Explorer is roughly just a minimum viable version, there are still plenty of rooms for improvements and addon features, namely:")]),e._v(" "),t("ul",[t("li",[e._v("Support multiple item selection")]),e._v(" "),t("li",[e._v("Support quick navigation from the address bar")]),e._v(" "),t("li",[e._v("Support files/folders search")]),e._v(" "),t("li",[e._v("Support sorting items, various view modes (thumbnail, list, details)")]),e._v(" "),t("li",[e._v("Support storage allocation, add volumes, modify drive labels")])]),e._v(" "),t("p",[e._v("And many more that, depending on the number of demands and requests, I might get my hands onto them, some may get implemented very soon, late or will never get implemented at all.")]),e._v(" "),t("p",[e._v("If you enjoy my work and it has somehow helped you in any way, get in touch with me via my email, or simply leave a comment to let me know, that will definitely lift my spirit and encourage me, or even better, become a financial supporter (via "),t("a",{attrs:{href:"https://www.patreon.com/visnalize",target:"_blank",rel:"noopener noreferrer"}},[e._v("Patreon"),t("OutboundLink")],1),e._v(" or Play Store IAP) so I can constantly invest more time in it and roll out more cool features. Again, thank you for your support and stay tuned for more updates. ✌")]),e._v(" "),t("m-blog-tag-list",{attrs:{tags:e.$page.frontmatter.tag,showIcon:""}})],1)}),[],!1,null,null,null);t.default=a.exports}}]); \ No newline at end of file diff --git a/assets/js/52.84ead46b.js b/assets/js/52.c9250fe7.js similarity index 92% rename from assets/js/52.84ead46b.js rename to assets/js/52.c9250fe7.js index b0cc583b..e21a1bd0 100644 --- a/assets/js/52.84ead46b.js +++ b/assets/js/52.c9250fe7.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[52],{431:function(e,t,s){e.exports=s.p+"assets/img/safari-share.cb037921.png"},432:function(e,t,s){e.exports=s.p+"assets/img/add-to-home-screen.5611989b.png"},559:function(e,t,s){"use strict";s.r(t);var a=s(16),i=Object(a.a)({},(function(){var e=this,t=e._self._c;return t("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[t("h1",{attrs:{id:"win7-simu-versus-mobile-devices"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#win7-simu-versus-mobile-devices"}},[e._v("#")]),e._v(" Win7 Simu versus mobile devices")]),e._v(" "),t("m-blog-meta"),e._v(" "),t("p",[t("img",{attrs:{src:"https://images.unsplash.com/photo-1616353071855-2c045c4458ae?auto=format&fit=crop&w=740&q=80",alt:"Apple devices"}})]),e._v(" "),t("p",[t("em",[e._v("Cover image by Brandon Romanchuk via "),t("a",{attrs:{href:"https://unsplash.com/photos/VXcJYnVjev8",target:"_blank",rel:"noopener noreferrer"}},[e._v("Unsplash"),t("OutboundLink")],1)])]),e._v(" "),t("p",[e._v("Recently, I have received some feedback about making Win7 Simu easily accessible on mobile devices for those who do not own an Android device and cannot grab the installer from the Google Play Store (primarily iOS users). Therefore, in this post, I'm gonna show you how you can install the web version of Win7 Simu on your mobile device and access it just like a native mobile app!")]),e._v(" "),t("div",{staticClass:"custom-block tip"},[t("p",{staticClass:"custom-block-title"},[e._v("Note")]),e._v(" "),t("p",[e._v("This guide primarily aims at iOS users, however, Android and other mobile OSes in general might be able to achieve the same result with a similar method.")])]),e._v(" "),t("h2",{attrs:{id:"step-by-step-guide"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#step-by-step-guide"}},[e._v("#")]),e._v(" Step-by-step guide")]),e._v(" "),t("h3",{attrs:{id:"_1-open-win7-simu-with-safari"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#_1-open-win7-simu-with-safari"}},[e._v("#")]),e._v(" 1. Open Win7 Simu with Safari")]),e._v(" "),t("p",[e._v("Safari is the default browser on iOS devices and the only browser that enables what we're trying to achieve. So, open up your Safari and navigate to the "),t("a",{attrs:{href:"https://win7simu.visnalize.com/",target:"_blank",rel:"noopener noreferrer"}},[e._v("Win7 Simu website"),t("OutboundLink")],1),e._v(".")]),e._v(" "),t("p",[e._v("Click on the Share icon as shown in the screenshot below.")]),e._v(" "),t("p",[t("img",{attrs:{src:s(431),alt:"Safari share icon"}})]),e._v(" "),t("h3",{attrs:{id:"_2-add-to-home-screen"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#_2-add-to-home-screen"}},[e._v("#")]),e._v(" 2. Add to Home Screen")]),e._v(" "),t("p",[e._v('From the popup, scroll down until you see the "Add to Home Screen" option as shown in the screenshot below and tap it. Optionally, customize the name of the app by editing the text in the field provided.')]),e._v(" "),t("p",[t("img",{attrs:{src:s(432),alt:"Add to home screen"}})]),e._v(" "),t("h3",{attrs:{id:"_3-enjoy"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#_3-enjoy"}},[e._v("#")]),e._v(" 3. Enjoy")]),e._v(" "),t("p",[e._v("Once that's done, you will see the Win7 Simu icon show up on your home screen. And that's it! You've successfully installed Win7 Simu from Safari. Now you can enjoy the app-like experience without the need to download it from the App Store.")]),e._v(" "),t("h2",{attrs:{id:"some-notes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#some-notes"}},[e._v("#")]),e._v(" Some notes")]),e._v(" "),t("p",[e._v("Despite the app-like experience, please keep in mind that it is just a website by nature, and therefore still has certain limitations as listed "),t("RouterLink",{attrs:{to:"/win7simu/about.html#web-version"}},[e._v("here")]),e._v(". However, the situation might change in the near future as the technology that empowers this capability receives more robust support from mobile vendors. So stay tuned and keep supporting me, either in spirit or "),t("a",{attrs:{href:"https://www.patreon.com/visnalize",target:"_blank",rel:"noopener noreferrer"}},[e._v("financial"),t("OutboundLink")],1),e._v(" 🤩")],1),e._v(" "),t("m-blog-tag-list",{attrs:{tags:e.$page.frontmatter.tag,showIcon:""}})],1)}),[],!1,null,null,null);t.default=i.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[52],{429:function(e,t,s){e.exports=s.p+"assets/img/safari-share.cb037921.png"},430:function(e,t,s){e.exports=s.p+"assets/img/add-to-home-screen.5611989b.png"},558:function(e,t,s){"use strict";s.r(t);var a=s(16),i=Object(a.a)({},(function(){var e=this,t=e._self._c;return t("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[t("h1",{attrs:{id:"win7-simu-versus-mobile-devices"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#win7-simu-versus-mobile-devices"}},[e._v("#")]),e._v(" Win7 Simu versus mobile devices")]),e._v(" "),t("m-blog-meta"),e._v(" "),t("p",[t("img",{attrs:{src:"https://images.unsplash.com/photo-1616353071855-2c045c4458ae?auto=format&fit=crop&w=740&q=80",alt:"Apple devices"}})]),e._v(" "),t("p",[t("em",[e._v("Cover image by Brandon Romanchuk via "),t("a",{attrs:{href:"https://unsplash.com/photos/VXcJYnVjev8",target:"_blank",rel:"noopener noreferrer"}},[e._v("Unsplash"),t("OutboundLink")],1)])]),e._v(" "),t("p",[e._v("Recently, I have received some feedback about making Win7 Simu easily accessible on mobile devices for those who do not own an Android device and cannot grab the installer from the Google Play Store (primarily iOS users). Therefore, in this post, I'm gonna show you how you can install the web version of Win7 Simu on your mobile device and access it just like a native mobile app!")]),e._v(" "),t("div",{staticClass:"custom-block tip"},[t("p",{staticClass:"custom-block-title"},[e._v("Note")]),e._v(" "),t("p",[e._v("This guide primarily aims at iOS users, however, Android and other mobile OSes in general might be able to achieve the same result with a similar method.")])]),e._v(" "),t("h2",{attrs:{id:"step-by-step-guide"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#step-by-step-guide"}},[e._v("#")]),e._v(" Step-by-step guide")]),e._v(" "),t("h3",{attrs:{id:"_1-open-win7-simu-with-safari"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#_1-open-win7-simu-with-safari"}},[e._v("#")]),e._v(" 1. Open Win7 Simu with Safari")]),e._v(" "),t("p",[e._v("Safari is the default browser on iOS devices and the only browser that enables what we're trying to achieve. So, open up your Safari and navigate to the "),t("a",{attrs:{href:"https://win7simu.visnalize.com/",target:"_blank",rel:"noopener noreferrer"}},[e._v("Win7 Simu website"),t("OutboundLink")],1),e._v(".")]),e._v(" "),t("p",[e._v("Click on the Share icon as shown in the screenshot below.")]),e._v(" "),t("p",[t("img",{attrs:{src:s(429),alt:"Safari share icon"}})]),e._v(" "),t("h3",{attrs:{id:"_2-add-to-home-screen"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#_2-add-to-home-screen"}},[e._v("#")]),e._v(" 2. Add to Home Screen")]),e._v(" "),t("p",[e._v('From the popup, scroll down until you see the "Add to Home Screen" option as shown in the screenshot below and tap it. Optionally, customize the name of the app by editing the text in the field provided.')]),e._v(" "),t("p",[t("img",{attrs:{src:s(430),alt:"Add to home screen"}})]),e._v(" "),t("h3",{attrs:{id:"_3-enjoy"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#_3-enjoy"}},[e._v("#")]),e._v(" 3. Enjoy")]),e._v(" "),t("p",[e._v("Once that's done, you will see the Win7 Simu icon show up on your home screen. And that's it! You've successfully installed Win7 Simu from Safari. Now you can enjoy the app-like experience without the need to download it from the App Store.")]),e._v(" "),t("h2",{attrs:{id:"some-notes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#some-notes"}},[e._v("#")]),e._v(" Some notes")]),e._v(" "),t("p",[e._v("Despite the app-like experience, please keep in mind that it is just a website by nature, and therefore still has certain limitations as listed "),t("RouterLink",{attrs:{to:"/win7simu/about.html#web-version"}},[e._v("here")]),e._v(". However, the situation might change in the near future as the technology that empowers this capability receives more robust support from mobile vendors. So stay tuned and keep supporting me, either in spirit or "),t("a",{attrs:{href:"https://www.patreon.com/visnalize",target:"_blank",rel:"noopener noreferrer"}},[e._v("financial"),t("OutboundLink")],1),e._v(" 🤩")],1),e._v(" "),t("m-blog-tag-list",{attrs:{tags:e.$page.frontmatter.tag,showIcon:""}})],1)}),[],!1,null,null,null);t.default=i.exports}}]); \ No newline at end of file diff --git a/assets/js/54.5b7ef391.js b/assets/js/54.fd9023e1.js similarity index 98% rename from assets/js/54.5b7ef391.js rename to assets/js/54.fd9023e1.js index b5e6dce4..824c5921 100644 --- a/assets/js/54.5b7ef391.js +++ b/assets/js/54.fd9023e1.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[54],{400:function(e,t,a){e.exports=a.p+"assets/img/vuepress.35aa8722.png"},543:function(e,t,a){"use strict";a.r(t);var s=a(16),o=Object(s.a)({},(function(){var e=this,t=e._self._c;return t("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[t("h1",{attrs:{id:"how-i-built-visnalize-com"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#how-i-built-visnalize-com"}},[e._v("#")]),e._v(" How I built visnalize.com")]),e._v(" "),t("m-blog-meta"),e._v(" "),t("p",[t("img",{attrs:{src:"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?auto=format&fit=crop&w=740&q=80",alt:"Code website"}})]),e._v(" "),t("p",[t("em",[e._v("Cover image by Ilya Pavlov via "),t("a",{attrs:{href:"https://unsplash.com/photos/OqtafYT5kTw",target:"_blank",rel:"noopener noreferrer"}},[e._v("Unsplash"),t("OutboundLink")],1)])]),e._v(" "),t("p",[e._v("So, after a year or so (since I released the "),t("RouterLink",{attrs:{to:"/win7simu/about.html"}},[e._v("Win7 Simu")]),e._v(" app), I decided to build a website for my own brand. The goal is to have a home for all of the information, my work, and probably, more of the useless stuff that I want to share. And in this post, I'm documenting some of the progress of how I made this website.")],1),e._v(" "),t("div",{staticClass:"custom-block warning"},[t("p",{staticClass:"custom-block-title"},[e._v("Warning")]),e._v(" "),t("p",[e._v("This is gonna be a technical blog post. Skip now, before getting dragged into the boredom. You have been warned.")])]),e._v(" "),t("h2",{attrs:{id:"the-focus"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#the-focus"}},[e._v("#")]),e._v(" The focus")]),e._v(" "),t("ul",[t("li",[e._v("A simple and minimal website")]),e._v(" "),t("li",[e._v("Only little effort and time shall be spent")]),e._v(" "),t("li",[e._v("More time to write and share")])]),e._v(" "),t("p",[e._v("In other words, I wanted to build a simple, fast but writing-focused website. With these criteria, I discovered "),t("a",{attrs:{href:"https://vuepress.vuejs.org/",target:"_blank",rel:"noopener noreferrer"}},[e._v("VuePress"),t("OutboundLink")],1),e._v(" as the most suitable option (for someone who was also familiar with "),t("a",{attrs:{href:"https://vuejs.org/",target:"_blank",rel:"noopener noreferrer"}},[e._v("Vue"),t("OutboundLink")],1),e._v(").")]),e._v(" "),t("p",[t("strong",[e._v("VuePress")]),e._v(" is a static site generator (a tool that generates HTML websites from raw data and a set of predefined templates) powered by "),t("strong",[e._v("Vue")]),e._v(", meaning with only a few setup and configuration steps, we would have a full-fledged website available in just a little time. Sounds convenient right? Let's see if it really is in the next sections.")]),e._v(" "),t("h2",{attrs:{id:"the-making"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#the-making"}},[e._v("#")]),e._v(" The making")]),e._v(" "),t("h3",{attrs:{id:"setup"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#setup"}},[e._v("#")]),e._v(" Setup")]),e._v(" "),t("p",[e._v("Before everything else, I needed an editor to code, and my favorite option was the "),t("a",{attrs:{href:"https://code.visualstudio.com/",target:"_blank",rel:"noopener noreferrer"}},[e._v("Visual Studio Code"),t("OutboundLink")],1),e._v(" for its intuitive interface, powerful features, and a huge number of plugins backed by the community.")]),e._v(" "),t("p",[t("img",{attrs:{src:"https://code.visualstudio.com/opengraphimg/opengraph-home.png",alt:"vscode"}})]),e._v(" "),t("p",[e._v("It also comes with a built-in terminal to conveniently run commands directly in the tool itself. So from there, all I needed was to run the following command to initiate a VuePress project:")]),e._v(" "),t("div",{staticClass:"language-sh extra-class"},[t("pre",{pre:!0,attrs:{class:"language-sh"}},[t("code",[e._v("npx create-vuepress-site "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("[")]),e._v("projectName"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("]")]),e._v("\n")])])]),t("p",[e._v("Following the execution, I was prompted to input some metadata for my site such as the project name, description, maintainer info... all of which I skipped for later by hitting Enter. Upon completing, a new folder "),t("code",[e._v("docs")]),e._v(" appeared under the current location which contains a bare minimum structure of the site.")]),e._v(" "),t("p",[e._v("Next, I installed the dependencies from the "),t("code",[e._v("package.json")]),e._v(" and started a local server by running these commands:")]),e._v(" "),t("div",{staticClass:"language-sh extra-class"},[t("pre",{pre:!0,attrs:{class:"language-sh"}},[t("code",[t("span",{pre:!0,attrs:{class:"token builtin class-name"}},[e._v("cd")]),e._v(" docs\n"),t("span",{pre:!0,attrs:{class:"token function"}},[e._v("npm")]),e._v(" "),t("span",{pre:!0,attrs:{class:"token function"}},[e._v("install")]),e._v("\n"),t("span",{pre:!0,attrs:{class:"token function"}},[e._v("npm")]),e._v(" run dev\n")])])]),t("p",[e._v("After a while, I realized that the terminal was still executing the commands (my poor old laptop...), so I decided to go and get myself a drink (just water, gotta stay hydrated)...")]),e._v(" "),t("p",[e._v("After another while, the installation was completed and the terminal prompted that a local server is up and running at "),t("code",[e._v("http://localhost:8080/")]),e._v(", opening it in the browser:")]),e._v(" "),t("p",[t("img",{attrs:{src:a(400),alt:"vuepress"}})]),e._v(" "),t("p",[e._v("What an eye candy! That looked neat and flawless. Without so much effort and time, I got a site ready with some expensive features available already:")]),e._v(" "),t("ul",[t("li",[e._v("A standout homepage")]),e._v(" "),t("li",[e._v("A basic site routing")]),e._v(" "),t("li",[e._v("A functional search bar")]),e._v(" "),t("li",[e._v("A meticulous navigation mechanism")]),e._v(" "),t("li",[e._v("And fully responsive on mobile")])]),e._v(" "),t("p",[e._v("All of which could take me months, if not years to implement, but still wouldn't look half-decent. Not to mention some other super useful utilities that enhanced the writing and reading experience on both ends.")]),e._v(" "),t("a-google-ad"),e._v(" "),t("h3",{attrs:{id:"customizing"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#customizing"}},[e._v("#")]),e._v(" Customizing")]),e._v(" "),t("p",[e._v("Having the site ready, the next step was to make it my own. The site's control panel and utilities are conveniently wrapped inside the "),t("code",[e._v(".vuepress")]),e._v(" folder, with custom components and styles in their respective folders and a "),t("code",[e._v("config.js")]),e._v(" file as the central configuration for the entire site.")]),e._v(" "),t("p",[e._v("The "),t("code",[e._v("config.js")]),e._v(" contains some basic configuration options and those of the default theme (all available options are thoroughly documented in the "),t("a",{attrs:{href:"https://vuepress.vuejs.org/theme/default-theme-config.html#homepage",target:"_blank",rel:"noopener noreferrer"}},[e._v("official VuePress docs"),t("OutboundLink")],1),e._v("). I started to play around with the options, starting with the site's title and description, then the navigation (menu) links and the sidebar. I tried modifying them to see how they work. For every change in the "),t("code",[e._v("config.js")]),e._v(" to take effect, I needed to stop the server (press "),t("code",[e._v("Ctrl + C")]),e._v(" in the terminal) and run the command "),t("code",[e._v("npm run dev")]),e._v(" to rebuild the project. And magically, the changes are reflected in the structure of the site and pages just as defined in the configuration.")]),e._v(" "),t("p",[e._v("I started to streamline the site here and there, by uploading some images and icons for it, creating some custom components for reusable purposes, and adding some extra styles to make the site look a bit more unique but without overdoing it. And finally, for the main reason why this site should exist in the first place, I didn't forget to write some pages for the information I wanted to share, additionally with a blogging space to share my journey as you are reading.")]),e._v(" "),t("h2",{attrs:{id:"the-deployment"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#the-deployment"}},[e._v("#")]),e._v(" The deployment")]),e._v(" "),t("p",[e._v("Once happy with everything, the last step was build the complete project into a static HTML site. For this, I ran the command:")]),e._v(" "),t("div",{staticClass:"language-sh extra-class"},[t("pre",{pre:!0,attrs:{class:"language-sh"}},[t("code",[t("span",{pre:!0,attrs:{class:"token function"}},[e._v("npm")]),e._v(" run build\n")])])]),t("p",[e._v("VuePress then tried to transform everything into HTML files and output them in the "),t("code",[e._v("dist")]),e._v(" folder under "),t("code",[e._v(".vuepress")]),e._v(". The "),t("code",[e._v("dist")]),e._v(" folder could then be deployed to a host and ready to serve the readers.")]),e._v(" "),t("p",[e._v("For the hosting, I used "),t("a",{attrs:{href:"https://pages.github.com/",target:"_blank",rel:"noopener noreferrer"}},[e._v("Github Pages"),t("OutboundLink")],1),e._v(", an excellent and extremely fast hosting service for static sites such as mine. The first thing I needed is a repository to store all the files in my "),t("code",[e._v("dist")]),e._v(" folder, so I created one at "),t("a",{attrs:{href:"https://github.com/Visnalize/visnalize.github.io",target:"_blank",rel:"noopener noreferrer"}},[e._v("this location"),t("OutboundLink")],1),e._v(". I uploaded the files to this repository and enabled Github Pages for it (all the steps are documented carefully in "),t("a",{attrs:{href:"https://guides.github.com/features/pages/",target:"_blank",rel:"noopener noreferrer"}},[e._v("Github's official site"),t("OutboundLink")],1),e._v(").")]),e._v(" "),t("h2",{attrs:{id:"epilogue"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#epilogue"}},[e._v("#")]),e._v(" Epilogue")]),e._v(" "),t("p",[e._v("To sum up, all the steps I did to get this site up and running:")]),e._v(" "),t("ul",[t("li",[t("p",[e._v("Download and install "),t("a",{attrs:{href:"https://code.visualstudio.com/",target:"_blank",rel:"noopener noreferrer"}},[e._v("Visual Studio Code"),t("OutboundLink")],1)])]),e._v(" "),t("li",[t("p",[e._v("Install "),t("a",{attrs:{href:"https://vuepress.vuejs.org",target:"_blank",rel:"noopener noreferrer"}},[e._v("VuePress"),t("OutboundLink")],1),e._v(" and initiate a project with the following commands:")]),e._v(" "),t("div",{staticClass:"language-sh extra-class"},[t("pre",{pre:!0,attrs:{class:"language-sh"}},[t("code",[e._v("npx create-vuepress-site "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("[")]),e._v("projectName"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("]")]),e._v("\n"),t("span",{pre:!0,attrs:{class:"token builtin class-name"}},[e._v("cd")]),e._v(" docs\n"),t("span",{pre:!0,attrs:{class:"token function"}},[e._v("npm")]),e._v(" "),t("span",{pre:!0,attrs:{class:"token function"}},[e._v("install")]),e._v("\n"),t("span",{pre:!0,attrs:{class:"token function"}},[e._v("npm")]),e._v(" run dev\n")])])])]),e._v(" "),t("li",[t("p",[e._v("Customize the project with available configuration options as documented in "),t("a",{attrs:{href:"https://vuepress.vuejs.org/theme/default-theme-config.html#homepage",target:"_blank",rel:"noopener noreferrer"}},[e._v("VuePress docs"),t("OutboundLink")],1),e._v(".")])]),e._v(" "),t("li",[t("p",[e._v("Build the source code into static HTML with the command:")]),e._v(" "),t("div",{staticClass:"language-sh extra-class"},[t("pre",{pre:!0,attrs:{class:"language-sh"}},[t("code",[t("span",{pre:!0,attrs:{class:"token function"}},[e._v("npm")]),e._v(" run build\n")])])])]),e._v(" "),t("li",[t("p",[e._v("Finally, deploy the site to a host using "),t("a",{attrs:{href:"https://pages.github.com",target:"_blank",rel:"noopener noreferrer"}},[e._v("Github Pages"),t("OutboundLink")],1)])])]),e._v(" "),t("p",[e._v("The source code I made public in "),t("a",{attrs:{href:"https://github.com/Visnalize/visnalize.github.io/tree/dev",target:"_blank",rel:"noopener noreferrer"}},[e._v("this branch"),t("OutboundLink")],1),e._v(" of the repository, you can explore or dissect however you like.")]),e._v(" "),t("m-blog-tag-list",{attrs:{tags:e.$page.frontmatter.tag,showIcon:""}})],1)}),[],!1,null,null,null);t.default=o.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[54],{404:function(e,t,a){e.exports=a.p+"assets/img/vuepress.35aa8722.png"},544:function(e,t,a){"use strict";a.r(t);var s=a(16),o=Object(s.a)({},(function(){var e=this,t=e._self._c;return t("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[t("h1",{attrs:{id:"how-i-built-visnalize-com"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#how-i-built-visnalize-com"}},[e._v("#")]),e._v(" How I built visnalize.com")]),e._v(" "),t("m-blog-meta"),e._v(" "),t("p",[t("img",{attrs:{src:"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?auto=format&fit=crop&w=740&q=80",alt:"Code website"}})]),e._v(" "),t("p",[t("em",[e._v("Cover image by Ilya Pavlov via "),t("a",{attrs:{href:"https://unsplash.com/photos/OqtafYT5kTw",target:"_blank",rel:"noopener noreferrer"}},[e._v("Unsplash"),t("OutboundLink")],1)])]),e._v(" "),t("p",[e._v("So, after a year or so (since I released the "),t("RouterLink",{attrs:{to:"/win7simu/about.html"}},[e._v("Win7 Simu")]),e._v(" app), I decided to build a website for my own brand. The goal is to have a home for all of the information, my work, and probably, more of the useless stuff that I want to share. And in this post, I'm documenting some of the progress of how I made this website.")],1),e._v(" "),t("div",{staticClass:"custom-block warning"},[t("p",{staticClass:"custom-block-title"},[e._v("Warning")]),e._v(" "),t("p",[e._v("This is gonna be a technical blog post. Skip now, before getting dragged into the boredom. You have been warned.")])]),e._v(" "),t("h2",{attrs:{id:"the-focus"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#the-focus"}},[e._v("#")]),e._v(" The focus")]),e._v(" "),t("ul",[t("li",[e._v("A simple and minimal website")]),e._v(" "),t("li",[e._v("Only little effort and time shall be spent")]),e._v(" "),t("li",[e._v("More time to write and share")])]),e._v(" "),t("p",[e._v("In other words, I wanted to build a simple, fast but writing-focused website. With these criteria, I discovered "),t("a",{attrs:{href:"https://vuepress.vuejs.org/",target:"_blank",rel:"noopener noreferrer"}},[e._v("VuePress"),t("OutboundLink")],1),e._v(" as the most suitable option (for someone who was also familiar with "),t("a",{attrs:{href:"https://vuejs.org/",target:"_blank",rel:"noopener noreferrer"}},[e._v("Vue"),t("OutboundLink")],1),e._v(").")]),e._v(" "),t("p",[t("strong",[e._v("VuePress")]),e._v(" is a static site generator (a tool that generates HTML websites from raw data and a set of predefined templates) powered by "),t("strong",[e._v("Vue")]),e._v(", meaning with only a few setup and configuration steps, we would have a full-fledged website available in just a little time. Sounds convenient right? Let's see if it really is in the next sections.")]),e._v(" "),t("h2",{attrs:{id:"the-making"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#the-making"}},[e._v("#")]),e._v(" The making")]),e._v(" "),t("h3",{attrs:{id:"setup"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#setup"}},[e._v("#")]),e._v(" Setup")]),e._v(" "),t("p",[e._v("Before everything else, I needed an editor to code, and my favorite option was the "),t("a",{attrs:{href:"https://code.visualstudio.com/",target:"_blank",rel:"noopener noreferrer"}},[e._v("Visual Studio Code"),t("OutboundLink")],1),e._v(" for its intuitive interface, powerful features, and a huge number of plugins backed by the community.")]),e._v(" "),t("p",[t("img",{attrs:{src:"https://code.visualstudio.com/opengraphimg/opengraph-home.png",alt:"vscode"}})]),e._v(" "),t("p",[e._v("It also comes with a built-in terminal to conveniently run commands directly in the tool itself. So from there, all I needed was to run the following command to initiate a VuePress project:")]),e._v(" "),t("div",{staticClass:"language-sh extra-class"},[t("pre",{pre:!0,attrs:{class:"language-sh"}},[t("code",[e._v("npx create-vuepress-site "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("[")]),e._v("projectName"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("]")]),e._v("\n")])])]),t("p",[e._v("Following the execution, I was prompted to input some metadata for my site such as the project name, description, maintainer info... all of which I skipped for later by hitting Enter. Upon completing, a new folder "),t("code",[e._v("docs")]),e._v(" appeared under the current location which contains a bare minimum structure of the site.")]),e._v(" "),t("p",[e._v("Next, I installed the dependencies from the "),t("code",[e._v("package.json")]),e._v(" and started a local server by running these commands:")]),e._v(" "),t("div",{staticClass:"language-sh extra-class"},[t("pre",{pre:!0,attrs:{class:"language-sh"}},[t("code",[t("span",{pre:!0,attrs:{class:"token builtin class-name"}},[e._v("cd")]),e._v(" docs\n"),t("span",{pre:!0,attrs:{class:"token function"}},[e._v("npm")]),e._v(" "),t("span",{pre:!0,attrs:{class:"token function"}},[e._v("install")]),e._v("\n"),t("span",{pre:!0,attrs:{class:"token function"}},[e._v("npm")]),e._v(" run dev\n")])])]),t("p",[e._v("After a while, I realized that the terminal was still executing the commands (my poor old laptop...), so I decided to go and get myself a drink (just water, gotta stay hydrated)...")]),e._v(" "),t("p",[e._v("After another while, the installation was completed and the terminal prompted that a local server is up and running at "),t("code",[e._v("http://localhost:8080/")]),e._v(", opening it in the browser:")]),e._v(" "),t("p",[t("img",{attrs:{src:a(404),alt:"vuepress"}})]),e._v(" "),t("p",[e._v("What an eye candy! That looked neat and flawless. Without so much effort and time, I got a site ready with some expensive features available already:")]),e._v(" "),t("ul",[t("li",[e._v("A standout homepage")]),e._v(" "),t("li",[e._v("A basic site routing")]),e._v(" "),t("li",[e._v("A functional search bar")]),e._v(" "),t("li",[e._v("A meticulous navigation mechanism")]),e._v(" "),t("li",[e._v("And fully responsive on mobile")])]),e._v(" "),t("p",[e._v("All of which could take me months, if not years to implement, but still wouldn't look half-decent. Not to mention some other super useful utilities that enhanced the writing and reading experience on both ends.")]),e._v(" "),t("a-google-ad"),e._v(" "),t("h3",{attrs:{id:"customizing"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#customizing"}},[e._v("#")]),e._v(" Customizing")]),e._v(" "),t("p",[e._v("Having the site ready, the next step was to make it my own. The site's control panel and utilities are conveniently wrapped inside the "),t("code",[e._v(".vuepress")]),e._v(" folder, with custom components and styles in their respective folders and a "),t("code",[e._v("config.js")]),e._v(" file as the central configuration for the entire site.")]),e._v(" "),t("p",[e._v("The "),t("code",[e._v("config.js")]),e._v(" contains some basic configuration options and those of the default theme (all available options are thoroughly documented in the "),t("a",{attrs:{href:"https://vuepress.vuejs.org/theme/default-theme-config.html#homepage",target:"_blank",rel:"noopener noreferrer"}},[e._v("official VuePress docs"),t("OutboundLink")],1),e._v("). I started to play around with the options, starting with the site's title and description, then the navigation (menu) links and the sidebar. I tried modifying them to see how they work. For every change in the "),t("code",[e._v("config.js")]),e._v(" to take effect, I needed to stop the server (press "),t("code",[e._v("Ctrl + C")]),e._v(" in the terminal) and run the command "),t("code",[e._v("npm run dev")]),e._v(" to rebuild the project. And magically, the changes are reflected in the structure of the site and pages just as defined in the configuration.")]),e._v(" "),t("p",[e._v("I started to streamline the site here and there, by uploading some images and icons for it, creating some custom components for reusable purposes, and adding some extra styles to make the site look a bit more unique but without overdoing it. And finally, for the main reason why this site should exist in the first place, I didn't forget to write some pages for the information I wanted to share, additionally with a blogging space to share my journey as you are reading.")]),e._v(" "),t("h2",{attrs:{id:"the-deployment"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#the-deployment"}},[e._v("#")]),e._v(" The deployment")]),e._v(" "),t("p",[e._v("Once happy with everything, the last step was build the complete project into a static HTML site. For this, I ran the command:")]),e._v(" "),t("div",{staticClass:"language-sh extra-class"},[t("pre",{pre:!0,attrs:{class:"language-sh"}},[t("code",[t("span",{pre:!0,attrs:{class:"token function"}},[e._v("npm")]),e._v(" run build\n")])])]),t("p",[e._v("VuePress then tried to transform everything into HTML files and output them in the "),t("code",[e._v("dist")]),e._v(" folder under "),t("code",[e._v(".vuepress")]),e._v(". The "),t("code",[e._v("dist")]),e._v(" folder could then be deployed to a host and ready to serve the readers.")]),e._v(" "),t("p",[e._v("For the hosting, I used "),t("a",{attrs:{href:"https://pages.github.com/",target:"_blank",rel:"noopener noreferrer"}},[e._v("Github Pages"),t("OutboundLink")],1),e._v(", an excellent and extremely fast hosting service for static sites such as mine. The first thing I needed is a repository to store all the files in my "),t("code",[e._v("dist")]),e._v(" folder, so I created one at "),t("a",{attrs:{href:"https://github.com/Visnalize/visnalize.github.io",target:"_blank",rel:"noopener noreferrer"}},[e._v("this location"),t("OutboundLink")],1),e._v(". I uploaded the files to this repository and enabled Github Pages for it (all the steps are documented carefully in "),t("a",{attrs:{href:"https://guides.github.com/features/pages/",target:"_blank",rel:"noopener noreferrer"}},[e._v("Github's official site"),t("OutboundLink")],1),e._v(").")]),e._v(" "),t("h2",{attrs:{id:"epilogue"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#epilogue"}},[e._v("#")]),e._v(" Epilogue")]),e._v(" "),t("p",[e._v("To sum up, all the steps I did to get this site up and running:")]),e._v(" "),t("ul",[t("li",[t("p",[e._v("Download and install "),t("a",{attrs:{href:"https://code.visualstudio.com/",target:"_blank",rel:"noopener noreferrer"}},[e._v("Visual Studio Code"),t("OutboundLink")],1)])]),e._v(" "),t("li",[t("p",[e._v("Install "),t("a",{attrs:{href:"https://vuepress.vuejs.org",target:"_blank",rel:"noopener noreferrer"}},[e._v("VuePress"),t("OutboundLink")],1),e._v(" and initiate a project with the following commands:")]),e._v(" "),t("div",{staticClass:"language-sh extra-class"},[t("pre",{pre:!0,attrs:{class:"language-sh"}},[t("code",[e._v("npx create-vuepress-site "),t("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("[")]),e._v("projectName"),t("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("]")]),e._v("\n"),t("span",{pre:!0,attrs:{class:"token builtin class-name"}},[e._v("cd")]),e._v(" docs\n"),t("span",{pre:!0,attrs:{class:"token function"}},[e._v("npm")]),e._v(" "),t("span",{pre:!0,attrs:{class:"token function"}},[e._v("install")]),e._v("\n"),t("span",{pre:!0,attrs:{class:"token function"}},[e._v("npm")]),e._v(" run dev\n")])])])]),e._v(" "),t("li",[t("p",[e._v("Customize the project with available configuration options as documented in "),t("a",{attrs:{href:"https://vuepress.vuejs.org/theme/default-theme-config.html#homepage",target:"_blank",rel:"noopener noreferrer"}},[e._v("VuePress docs"),t("OutboundLink")],1),e._v(".")])]),e._v(" "),t("li",[t("p",[e._v("Build the source code into static HTML with the command:")]),e._v(" "),t("div",{staticClass:"language-sh extra-class"},[t("pre",{pre:!0,attrs:{class:"language-sh"}},[t("code",[t("span",{pre:!0,attrs:{class:"token function"}},[e._v("npm")]),e._v(" run build\n")])])])]),e._v(" "),t("li",[t("p",[e._v("Finally, deploy the site to a host using "),t("a",{attrs:{href:"https://pages.github.com",target:"_blank",rel:"noopener noreferrer"}},[e._v("Github Pages"),t("OutboundLink")],1)])])]),e._v(" "),t("p",[e._v("The source code I made public in "),t("a",{attrs:{href:"https://github.com/Visnalize/visnalize.github.io/tree/dev",target:"_blank",rel:"noopener noreferrer"}},[e._v("this branch"),t("OutboundLink")],1),e._v(" of the repository, you can explore or dissect however you like.")]),e._v(" "),t("m-blog-tag-list",{attrs:{tags:e.$page.frontmatter.tag,showIcon:""}})],1)}),[],!1,null,null,null);t.default=o.exports}}]); \ No newline at end of file diff --git a/assets/js/6.ac9260b1.js b/assets/js/6.0d62b8cf.js similarity index 80% rename from assets/js/6.ac9260b1.js rename to assets/js/6.0d62b8cf.js index 18444740..58170d64 100644 --- a/assets/js/6.ac9260b1.js +++ b/assets/js/6.0d62b8cf.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[6],{450:function(e,t,s){e.exports=s.p+"assets/img/themestudio-editor.a388d954.png"},451:function(e,t,s){e.exports=s.p+"assets/img/themestudio-explorer.8ddbe036.png"},452:function(e,t,s){e.exports=s.p+"assets/img/getstarted.a0f02f51.png"},453:function(e,t,s){e.exports=s.p+"assets/img/getstarted1.edf5c7b0.png"},454:function(e,t,s){e.exports=s.p+"assets/img/getstarted2.bbedd785.png"},455:function(e,t,s){e.exports=s.p+"assets/img/getstarted3.eb3df6cb.png"},606:function(e,t,s){"use strict";s.r(t);var a=s(16),r=Object(a.a)({},(function(){var e=this,t=e._self._c;return t("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[t("h1",{attrs:{id:"getting-started"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#getting-started"}},[e._v("#")]),e._v(" Getting started")]),e._v(" "),t("m-social-links"),e._v(" "),t("h2",{attrs:{id:"user-interface"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#user-interface"}},[e._v("#")]),e._v(" User interface")]),e._v(" "),t("h3",{attrs:{id:"theme-editor"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#theme-editor"}},[e._v("#")]),e._v(" Theme Editor")]),e._v(" "),t("p",[t("img",{attrs:{src:s(450),alt:"Theme Studio's editor interface"}})]),e._v(" "),t("p",[e._v("The Theme Studio's editor interface is designed to be simple and easy to use, with only 3 components:")]),e._v(" "),t("ul",[t("li",[e._v("Elements navigation - the navigation panel of elements with built-in previews for a quick glimpse of the styling changes.")]),e._v(" "),t("li",[e._v("Source code editor - the main editor that allows you to style the elements using CSS.")]),e._v(" "),t("li",[e._v("Preview area - how the elements look after applying your styling changes.")])]),e._v(" "),t("div",{staticClass:"custom-block tip"},[t("p",{staticClass:"custom-block-title"},[e._v("Miscellaneous element")]),e._v(" "),t("p",[e._v('The "Misc." element is a special element that doesn\'t have the Preview area. It is intended to support any other elements that are not shown on the Elements navigation, therefore you can use it to write any miscellaneous CSS here.')])]),e._v(" "),t("h3",{attrs:{id:"themes-explorer"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#themes-explorer"}},[e._v("#")]),e._v(" Themes Explorer")]),e._v(" "),t("p",[t("img",{attrs:{src:s(451),alt:"Theme Studio's explorer interface"}})]),e._v(" "),t("p",[e._v("The Theme Studio's themes explorer consists of 3 tabs:")]),e._v(" "),t("ul",[t("li",[e._v("My Creations - where you can find your saved projects/themes on your device.")]),e._v(" "),t("li",[e._v("Public Gallery - where you can find all sorts of themes published by the community, you can also load their source code to your editor or apply to your Win7 Simu.")]),e._v(" "),t("li",[e._v("Templates - some available templates as base themes that you may select and get started easily.")])]),e._v(" "),t("h2",{attrs:{id:"quick-start"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#quick-start"}},[e._v("#")]),e._v(" Quick start")]),e._v(" "),t("p",[e._v("The quickest and easiest way to get started is to load the source code from an existing template:")]),e._v(" "),t("ol",[t("li",[e._v('From the main window, choose "Load an existing project"')])]),e._v(" "),t("p",[t("img",{attrs:{src:s(452),alt:"Getting started"}})]),e._v(" "),t("ol",{attrs:{start:"2"}},[t("li",[e._v('Switch to the "Templates" tab, select a template by right-clicking (hold your finger) on it and choose "Load".')])]),e._v(" "),t("p",[t("img",{attrs:{src:s(453),alt:"Getting started - Select template"}})]),e._v(" "),t("ol",{attrs:{start:"3"}},[t("li",[e._v("You should now be able to see the source code of your selected template, then you can start making changes using the editor to craft your own theme.")])]),e._v(" "),t("p",[t("img",{attrs:{src:s(454),alt:"Getting started - Edit template's source code"}})]),e._v(" "),t("ol",{attrs:{start:"4"}},[t("li",[e._v("Finally, you can save your project as a theme by entering the required information in the save popup. You can then resume editing from the current progress, or apply the theme to your Win7 Simu.")])]),e._v(" "),t("p",[t("img",{attrs:{src:s(455),alt:"Getting started - Save theme"}})])],1)}),[],!1,null,null,null);t.default=r.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[6],{446:function(e,t,s){e.exports=s.p+"assets/img/themestudio-editor.a388d954.png"},447:function(e,t,s){e.exports=s.p+"assets/img/themestudio-explorer.8ddbe036.png"},448:function(e,t,s){e.exports=s.p+"assets/img/getstarted.a0f02f51.png"},449:function(e,t,s){e.exports=s.p+"assets/img/getstarted1.edf5c7b0.png"},450:function(e,t,s){e.exports=s.p+"assets/img/getstarted2.bbedd785.png"},451:function(e,t,s){e.exports=s.p+"assets/img/getstarted3.eb3df6cb.png"},605:function(e,t,s){"use strict";s.r(t);var a=s(16),r=Object(a.a)({},(function(){var e=this,t=e._self._c;return t("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[t("h1",{attrs:{id:"getting-started"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#getting-started"}},[e._v("#")]),e._v(" Getting started")]),e._v(" "),t("m-social-links"),e._v(" "),t("h2",{attrs:{id:"user-interface"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#user-interface"}},[e._v("#")]),e._v(" User interface")]),e._v(" "),t("h3",{attrs:{id:"theme-editor"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#theme-editor"}},[e._v("#")]),e._v(" Theme Editor")]),e._v(" "),t("p",[t("img",{attrs:{src:s(446),alt:"Theme Studio's editor interface"}})]),e._v(" "),t("p",[e._v("The Theme Studio's editor interface is designed to be simple and easy to use, with only 3 components:")]),e._v(" "),t("ul",[t("li",[e._v("Elements navigation - the navigation panel of elements with built-in previews for a quick glimpse of the styling changes.")]),e._v(" "),t("li",[e._v("Source code editor - the main editor that allows you to style the elements using CSS.")]),e._v(" "),t("li",[e._v("Preview area - how the elements look after applying your styling changes.")])]),e._v(" "),t("div",{staticClass:"custom-block tip"},[t("p",{staticClass:"custom-block-title"},[e._v("Miscellaneous element")]),e._v(" "),t("p",[e._v('The "Misc." element is a special element that doesn\'t have the Preview area. It is intended to support any other elements that are not shown on the Elements navigation, therefore you can use it to write any miscellaneous CSS here.')])]),e._v(" "),t("h3",{attrs:{id:"themes-explorer"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#themes-explorer"}},[e._v("#")]),e._v(" Themes Explorer")]),e._v(" "),t("p",[t("img",{attrs:{src:s(447),alt:"Theme Studio's explorer interface"}})]),e._v(" "),t("p",[e._v("The Theme Studio's themes explorer consists of 3 tabs:")]),e._v(" "),t("ul",[t("li",[e._v("My Creations - where you can find your saved projects/themes on your device.")]),e._v(" "),t("li",[e._v("Public Gallery - where you can find all sorts of themes published by the community, you can also load their source code to your editor or apply to your Win7 Simu.")]),e._v(" "),t("li",[e._v("Templates - some available templates as base themes that you may select and get started easily.")])]),e._v(" "),t("h2",{attrs:{id:"quick-start"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#quick-start"}},[e._v("#")]),e._v(" Quick start")]),e._v(" "),t("p",[e._v("The quickest and easiest way to get started is to load the source code from an existing template:")]),e._v(" "),t("ol",[t("li",[e._v('From the main window, choose "Load an existing project"')])]),e._v(" "),t("p",[t("img",{attrs:{src:s(448),alt:"Getting started"}})]),e._v(" "),t("ol",{attrs:{start:"2"}},[t("li",[e._v('Switch to the "Templates" tab, select a template by right-clicking (hold your finger) on it and choose "Load".')])]),e._v(" "),t("p",[t("img",{attrs:{src:s(449),alt:"Getting started - Select template"}})]),e._v(" "),t("ol",{attrs:{start:"3"}},[t("li",[e._v("You should now be able to see the source code of your selected template, then you can start making changes using the editor to craft your own theme.")])]),e._v(" "),t("p",[t("img",{attrs:{src:s(450),alt:"Getting started - Edit template's source code"}})]),e._v(" "),t("ol",{attrs:{start:"4"}},[t("li",[e._v("Finally, you can save your project as a theme by entering the required information in the save popup. You can then resume editing from the current progress, or apply the theme to your Win7 Simu.")])]),e._v(" "),t("p",[t("img",{attrs:{src:s(451),alt:"Getting started - Save theme"}})])],1)}),[],!1,null,null,null);t.default=r.exports}}]); \ No newline at end of file diff --git a/assets/js/70.7afd7c41.js b/assets/js/70.288fb841.js similarity index 99% rename from assets/js/70.7afd7c41.js rename to assets/js/70.288fb841.js index 956a34da..32803615 100644 --- a/assets/js/70.7afd7c41.js +++ b/assets/js/70.288fb841.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[70],{547:function(t,a,s){"use strict";s.r(a);var e=s(16),n=Object(e.a)({},(function(){var t=this,a=t._self._c;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h1",{attrs:{id:"turning-my-codepen-into-an-actual-app"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#turning-my-codepen-into-an-actual-app"}},[t._v("#")]),t._v(" Turning my CodePen into an actual app")]),t._v(" "),a("m-blog-meta"),t._v(" "),a("p",[a("img",{attrs:{src:"/assets/covers/from-codepen-to-app.png",alt:"Brick 1100 play store screenshot"}})]),t._v(" "),a("div",{staticClass:"custom-block tip"},[a("p",{staticClass:"custom-block-title"},[t._v("What is CodePen?")]),t._v(" "),a("p",[t._v("For those who don't know, "),a("a",{attrs:{href:"https://codepen.io/",target:"_blank",rel:"noopener noreferrer"}},[t._v("CodePen"),a("OutboundLink")],1),t._v(' is an online community for testing and showcasing user-created code snippets (mostly from HTML, CSS and JavaScript). It functions as an online code editor and open-source learning environment, where developers can create code snippets, called "pens," and test them.')])]),t._v(" "),a("p",[t._v("Some time ago, I created a codepen that replicated the look of an old phone titled "),a("a",{attrs:{href:"https://codepen.io/khangnd/pen/abmWpaY",target:"_blank",rel:"noopener noreferrer"}},[a("strong",[t._v("Nokia 1100")]),a("OutboundLink")],1),t._v(".")]),t._v(" "),a("p",[t._v("Turned out people found it interesting somehow as the pen was seen receiving a few interactions. Years later, after gaining more skills, and more experience, I came back to this idea to actually complete it. From a mere silly codepen that was barely functional, it has become a full-fledged app (though still in beta) and made its way to "),a("a",{attrs:{href:"https://play.google.com/store/apps/details?id=com.visnalize.brick1100",target:"_blank",rel:"noopener noreferrer"}},[a("strong",[t._v("Google Play")]),a("OutboundLink")],1),t._v(". In this article, I'm happy to share the progress, how and what I used to build it, and let's explore some cool and unique features I have brought out with this app.")]),t._v(" "),a("h2",{attrs:{id:"a-silly-idea-that-got-realized"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#a-silly-idea-that-got-realized"}},[t._v("#")]),t._v(" A silly idea that got realized")]),t._v(" "),a("p",[t._v('Software developers are those who tend to look for project ideas where we can challenge ourselves and put our knowledge and skills into practice. Just like the rest, when I first got myself into web dev, I had plentiful ideas of what I could build to learn coding more easily, enrich my portfolio with more useless projects, and dazzle the recruiters to land a fulfilling job. However, a little bit out of the ordinary person I am, I actually wanted to build something cool, something original that not many people had thought of and done, so I came up with the idea of replicating the look of an old phone (whoa, how innovative...) and simulate some of its functionalities (so original...). As a result, we have the "Nokia 1100" codepen above.')]),t._v(" "),a("p",[t._v("At that time, I stopped where I thought was sufficient for a silly idea as it was, even if I wanted to go further, my skills at that point wouldn't allow it, because I was still a NOOB! (though I still am). I just left it there and forgot about it. Sometime later, after having gained some experience working for companies and leveling up myself a bit, I revisited some past projects to see if I could advance any of them with my new abilities. The Nokia simulation was at the top of that list, considering how much traction it gained at the time (maybe not much for you, but that was a lot for a NOOB!). And here we are, a pet project that actually got finished and made it to the public.")]),t._v(" "),a("h2",{attrs:{id:"the-making-process"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#the-making-process"}},[t._v("#")]),t._v(" The making process")]),t._v(" "),a("p",[t._v("The idea initiated in codepen was made with pure HTML/CSS/JS as I had just started learning the fundamentals. However, this time, applying the wealth of front-end development knowledge I have earned over the years, I rebuilt the project from scratch, making good use of modern web technologies and frameworks to speed up the development, and ease the feature addition and maintenance process as it grows.")]),t._v(" "),a("p",[t._v("I started spending my free time outside of work hours and weekends to get into it. After about two weeks, I finally made it an MVP (minimum viable product) with most of the "),a("RouterLink",{attrs:{to:"/brick1100/changelog.html#_0-0-1-sep-26-2023"}},[t._v("core features covered")]),t._v(", sort of. So far, the most prominent stuff that I used to build it:")],1),t._v(" "),a("ul",[a("li",[a("strong",[t._v("Vue 2.7")]),t._v(" - the main framework that empowers its UI.")]),t._v(" "),a("li",[a("strong",[t._v("Pinia")]),t._v(" - the state management library to handle shared state across components.")]),t._v(" "),a("li",[a("strong",[t._v("Vue Router")]),t._v(" - the routing library to ease the navigation within the app.")]),t._v(" "),a("li",[a("strong",[t._v("Capacitor")]),t._v(" - the MVP that helps transition a traditional web app into a mobile app effortlessly.")]),t._v(" "),a("li",[t._v("And lastly, the most incredible database for managing user data - "),a("strong",[t._v("localStorage")]),t._v(" 😂")])]),t._v(" "),a("p",[t._v("There are a few other packages and libraries that enhance the developer experience and contribute to the feature feasibility, e.g several "),a("strong",[t._v("Capacitor plugins")]),t._v(" wiring up certain native mobile features for the app, "),a("strong",[t._v("dayjs")]),t._v(" providing out-of-the-box utils to work with date and time, or "),a("strong",[t._v("voca")]),t._v(" for handy string utils without the needs of reinventing the wheel.")]),t._v(" "),a("a-google-ad"),t._v(" "),a("h3",{attrs:{id:"breaking-down-the-components"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#breaking-down-the-components"}},[t._v("#")]),t._v(" Breaking down the components")]),t._v(" "),a("p",[t._v("At a high level, the app is composed of the following major building blocks:")]),t._v(" "),a("p",[a("img",{attrs:{src:"https://dev-to-uploads.s3.amazonaws.com/uploads/articles/65aigdwqjto881os3uax.png",alt:"Brick 1100 components"}})]),t._v(" "),a("ul",[a("li",[t._v("The container, which is just a freaking image, is layered below the other components. It also holds the responsibility of resizing the app to adapt to the device/browser window's size.")]),t._v(" "),a("li",[t._v("The screen plays a vital role in rendering what would be otherwise visible to the users.")]),t._v(" "),a("li",[t._v("The keypad/numpad is in charge of the interactivity of the whole app. The pattern here is that with the help of Pinia, the keypad/numpad would emit respective global events as the users interact with it and the other components then behave accordingly. It is easily the toughest part that I had to deal with as meticulously as possible, to capture the essence of a nostalgic feeling back when we all still used these pads to operate a phone.")])]),t._v(" "),a("p",[t._v("Here's an outlook on how the above design is implemented for your reference:")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("phone-container")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("phone-screen")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":state")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("menu-screen")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("title")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("Menu"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":index")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("index"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("menu-select")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("main"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":items")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("items"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":current")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("index"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("@[Event.Back]")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("handleMenuBack"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("@[Event.Select]")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("handleMenuSelect"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("@[Event.Change]")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("handleMenuChange"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("phone-keypad")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("phone-numpad")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),a("p",[t._v("A simplified snippet of the keypad/numpad implementation:")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// PhoneKeypad.vue")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("data")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("startTime")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("null")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("timer")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("null")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("isHolding")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("computed")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("mapStores")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("useKeypadStore"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("methods")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("clearTimer")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("clearTimeout")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("timer"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("timer "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("null")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("press")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("key")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("timer"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("clearTimer")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("keypadStore"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("press")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("key"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("startTime "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" Date"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("now")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("timer "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("setTimeout")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("hold")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("key"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token constant"}},[t._v("HOLD_TOLERANCE")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("release")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("key")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("clearTimer")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("Date"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("now")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("startTime "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token constant"}},[t._v("HOLD_TOLERANCE")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("||")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("isHolding"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("keypadStore"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("release")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("key"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("isHolding "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("hold")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("key")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("isHolding "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("keypadStore"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("hold")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("key"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// keypad.js")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" useKeypadStore "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineStore")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"keypad"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("state")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("key")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("null")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("event")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('""')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("_diff")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("actions")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("_set")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("event"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" key")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("key "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" key"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("event "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" event"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// workaround to observe the keypad interaction,")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// as the key before and after the interaction may be the same key.")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("_diff"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("++")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("press")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("value")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("_set")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("Gesture"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("Press"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" value"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("release")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("value")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("_set")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("Gesture"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("Release"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" value"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("hold")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("value")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("_set")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("Gesture"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("Hold"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" value"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("h3",{attrs:{id:"adding-some-twists"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#adding-some-twists"}},[t._v("#")]),t._v(" Adding some twists")]),t._v(" "),a("p",[t._v("While the project originally aimed to replicate the phone experience faithfully, it also presented an opportunity to add unique twists that, to me, might turn out to be the selling points for the app to be more useful: a collection holder of "),a("strong",[t._v("mini-games/apps")]),t._v(" where newbie devs can also "),a("strong",[t._v("learn")]),t._v(" coding by submitting to this collection.")]),t._v(" "),a("p",[t._v("Due to the simplistic nature of the app and its design, I have a strong belief that it can be perceived as a code playground where people can get their ideas implemented in the rawest form, text-based apps, or apps with pixelated, monotonic graphics. Let's take a look at the simple model below:")]),t._v(" "),a("p",[a("img",{attrs:{src:"https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cllsehc05yilq0orszfc.png",alt:"Bridge 1100 model"}})]),t._v(" "),a("p",[t._v("Brick 1100 was built in a way that we could easily extend its functionalities with external games/apps. These external games/apps can communicate with Brick 1100 itself back and forth via an interface called Bridge 1100, you can read more about that "),a("a",{attrs:{href:"https://github.com/Visnalize/bridge-1100",target:"_blank",rel:"noopener noreferrer"}},[t._v("in this Github repo"),a("OutboundLink")],1),t._v(".")]),t._v(" "),a("p",[t._v("It's nothing sort of any kind of innovation (as expected from a noob). Those external apps/games are just being gathered and pulled from "),a("a",{attrs:{href:"https://github.com/Visnalize/brick-1100-apps",target:"_blank",rel:"noopener noreferrer"}},[t._v("this Github repo"),a("OutboundLink")],1),t._v(". By the time of this article, you can see from that repo, there are only 2 apps available:")]),t._v(" "),a("ul",[a("li",[a("strong",[t._v("Pwd Generator")]),t._v(" - a simple password generator from a length input.")]),t._v(" "),a("li",[a("strong",[t._v("Randomizer")]),t._v(" - a simple randomizer app that outputs a random result each time depending on the selected mode.")])]),t._v(" "),a("p",[t._v("Both of them are super simple, plain text-based apps that can be completed in no time. However, they were developed using different web techs, with the first one using pure HTML/CSS/JS while the latter using the Mithril.js framework. This gives you the freedom of choice when it comes to the web tech that you want to learn by making and takes relatively little of your time and effort to complete an app idea.")]),t._v(" "),a("p",[t._v("How those apps show up in Brick 1100:")]),t._v(" "),a("p",[a("img",{attrs:{src:"https://dev-to-uploads.s3.amazonaws.com/uploads/articles/53cw2mjrfxzu6dpo0zwo.jpg",alt:"Brick 1100 online apps"}})]),t._v(" "),a("h2",{attrs:{id:"final-words"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#final-words"}},[t._v("#")]),t._v(" Final words")]),t._v(" "),a("p",[t._v("Despite how silly and ridiculously simple this project looks, I had a really great time building it and felt super proud to see a pet project that actually came to light and got installed on a few user devices. If it has somehow captured your interest and want to try it out, you can install it from "),a("a",{attrs:{href:"https://play.google.com/store/apps/details?id=com.visnalize.brick1100",target:"_blank",rel:"noopener noreferrer"}},[a("strong",[t._v("Google Play")]),a("OutboundLink")],1),t._v(". And feel free to join "),a("a",{attrs:{href:"https://discord.gg/6AQDnZa4Xm",target:"_blank",rel:"noopener noreferrer"}},[t._v("our Discord"),a("OutboundLink")],1),t._v(" to have some little chit-chat, or if you want to build something on it but getting stuck somewhere, I'm happy to help out there.")]),t._v(" "),a("p",[t._v("And now, if you will excuse me I have an app to develop, and some users to satisfy. Thank you for reading ✌")]),t._v(" "),a("m-blog-tag-list",{attrs:{tags:t.$page.frontmatter.tag,showIcon:""}})],1)}),[],!1,null,null,null);a.default=n.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[70],{549:function(t,a,s){"use strict";s.r(a);var e=s(16),n=Object(e.a)({},(function(){var t=this,a=t._self._c;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h1",{attrs:{id:"turning-my-codepen-into-an-actual-app"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#turning-my-codepen-into-an-actual-app"}},[t._v("#")]),t._v(" Turning my CodePen into an actual app")]),t._v(" "),a("m-blog-meta"),t._v(" "),a("p",[a("img",{attrs:{src:"/assets/covers/from-codepen-to-app.png",alt:"Brick 1100 play store screenshot"}})]),t._v(" "),a("div",{staticClass:"custom-block tip"},[a("p",{staticClass:"custom-block-title"},[t._v("What is CodePen?")]),t._v(" "),a("p",[t._v("For those who don't know, "),a("a",{attrs:{href:"https://codepen.io/",target:"_blank",rel:"noopener noreferrer"}},[t._v("CodePen"),a("OutboundLink")],1),t._v(' is an online community for testing and showcasing user-created code snippets (mostly from HTML, CSS and JavaScript). It functions as an online code editor and open-source learning environment, where developers can create code snippets, called "pens," and test them.')])]),t._v(" "),a("p",[t._v("Some time ago, I created a codepen that replicated the look of an old phone titled "),a("a",{attrs:{href:"https://codepen.io/khangnd/pen/abmWpaY",target:"_blank",rel:"noopener noreferrer"}},[a("strong",[t._v("Nokia 1100")]),a("OutboundLink")],1),t._v(".")]),t._v(" "),a("p",[t._v("Turned out people found it interesting somehow as the pen was seen receiving a few interactions. Years later, after gaining more skills, and more experience, I came back to this idea to actually complete it. From a mere silly codepen that was barely functional, it has become a full-fledged app (though still in beta) and made its way to "),a("a",{attrs:{href:"https://play.google.com/store/apps/details?id=com.visnalize.brick1100",target:"_blank",rel:"noopener noreferrer"}},[a("strong",[t._v("Google Play")]),a("OutboundLink")],1),t._v(". In this article, I'm happy to share the progress, how and what I used to build it, and let's explore some cool and unique features I have brought out with this app.")]),t._v(" "),a("h2",{attrs:{id:"a-silly-idea-that-got-realized"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#a-silly-idea-that-got-realized"}},[t._v("#")]),t._v(" A silly idea that got realized")]),t._v(" "),a("p",[t._v('Software developers are those who tend to look for project ideas where we can challenge ourselves and put our knowledge and skills into practice. Just like the rest, when I first got myself into web dev, I had plentiful ideas of what I could build to learn coding more easily, enrich my portfolio with more useless projects, and dazzle the recruiters to land a fulfilling job. However, a little bit out of the ordinary person I am, I actually wanted to build something cool, something original that not many people had thought of and done, so I came up with the idea of replicating the look of an old phone (whoa, how innovative...) and simulate some of its functionalities (so original...). As a result, we have the "Nokia 1100" codepen above.')]),t._v(" "),a("p",[t._v("At that time, I stopped where I thought was sufficient for a silly idea as it was, even if I wanted to go further, my skills at that point wouldn't allow it, because I was still a NOOB! (though I still am). I just left it there and forgot about it. Sometime later, after having gained some experience working for companies and leveling up myself a bit, I revisited some past projects to see if I could advance any of them with my new abilities. The Nokia simulation was at the top of that list, considering how much traction it gained at the time (maybe not much for you, but that was a lot for a NOOB!). And here we are, a pet project that actually got finished and made it to the public.")]),t._v(" "),a("h2",{attrs:{id:"the-making-process"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#the-making-process"}},[t._v("#")]),t._v(" The making process")]),t._v(" "),a("p",[t._v("The idea initiated in codepen was made with pure HTML/CSS/JS as I had just started learning the fundamentals. However, this time, applying the wealth of front-end development knowledge I have earned over the years, I rebuilt the project from scratch, making good use of modern web technologies and frameworks to speed up the development, and ease the feature addition and maintenance process as it grows.")]),t._v(" "),a("p",[t._v("I started spending my free time outside of work hours and weekends to get into it. After about two weeks, I finally made it an MVP (minimum viable product) with most of the "),a("RouterLink",{attrs:{to:"/brick1100/changelog.html#_0-0-1-sep-26-2023"}},[t._v("core features covered")]),t._v(", sort of. So far, the most prominent stuff that I used to build it:")],1),t._v(" "),a("ul",[a("li",[a("strong",[t._v("Vue 2.7")]),t._v(" - the main framework that empowers its UI.")]),t._v(" "),a("li",[a("strong",[t._v("Pinia")]),t._v(" - the state management library to handle shared state across components.")]),t._v(" "),a("li",[a("strong",[t._v("Vue Router")]),t._v(" - the routing library to ease the navigation within the app.")]),t._v(" "),a("li",[a("strong",[t._v("Capacitor")]),t._v(" - the MVP that helps transition a traditional web app into a mobile app effortlessly.")]),t._v(" "),a("li",[t._v("And lastly, the most incredible database for managing user data - "),a("strong",[t._v("localStorage")]),t._v(" 😂")])]),t._v(" "),a("p",[t._v("There are a few other packages and libraries that enhance the developer experience and contribute to the feature feasibility, e.g several "),a("strong",[t._v("Capacitor plugins")]),t._v(" wiring up certain native mobile features for the app, "),a("strong",[t._v("dayjs")]),t._v(" providing out-of-the-box utils to work with date and time, or "),a("strong",[t._v("voca")]),t._v(" for handy string utils without the needs of reinventing the wheel.")]),t._v(" "),a("a-google-ad"),t._v(" "),a("h3",{attrs:{id:"breaking-down-the-components"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#breaking-down-the-components"}},[t._v("#")]),t._v(" Breaking down the components")]),t._v(" "),a("p",[t._v("At a high level, the app is composed of the following major building blocks:")]),t._v(" "),a("p",[a("img",{attrs:{src:"https://dev-to-uploads.s3.amazonaws.com/uploads/articles/65aigdwqjto881os3uax.png",alt:"Brick 1100 components"}})]),t._v(" "),a("ul",[a("li",[t._v("The container, which is just a freaking image, is layered below the other components. It also holds the responsibility of resizing the app to adapt to the device/browser window's size.")]),t._v(" "),a("li",[t._v("The screen plays a vital role in rendering what would be otherwise visible to the users.")]),t._v(" "),a("li",[t._v("The keypad/numpad is in charge of the interactivity of the whole app. The pattern here is that with the help of Pinia, the keypad/numpad would emit respective global events as the users interact with it and the other components then behave accordingly. It is easily the toughest part that I had to deal with as meticulously as possible, to capture the essence of a nostalgic feeling back when we all still used these pads to operate a phone.")])]),t._v(" "),a("p",[t._v("Here's an outlook on how the above design is implemented for your reference:")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("phone-container")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("phone-screen")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":state")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("menu-screen")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("title")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("Menu"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":index")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("index"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("menu-select")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("main"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":items")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("items"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":current")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("index"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("@[Event.Back]")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("handleMenuBack"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("@[Event.Select]")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("handleMenuSelect"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("@[Event.Change]")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("handleMenuChange"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("phone-keypad")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("phone-numpad")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),a("p",[t._v("A simplified snippet of the keypad/numpad implementation:")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// PhoneKeypad.vue")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("data")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("startTime")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("null")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("timer")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("null")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("isHolding")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("computed")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("mapStores")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("useKeypadStore"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("methods")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("clearTimer")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("clearTimeout")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("timer"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("timer "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("null")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("press")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("key")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("timer"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("clearTimer")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("keypadStore"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("press")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("key"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("startTime "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" Date"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("now")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("timer "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("setTimeout")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("hold")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("key"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token constant"}},[t._v("HOLD_TOLERANCE")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("release")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("key")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("clearTimer")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("Date"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("now")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("startTime "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token constant"}},[t._v("HOLD_TOLERANCE")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("||")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("isHolding"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("keypadStore"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("release")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("key"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("isHolding "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("hold")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("key")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("isHolding "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("keypadStore"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("hold")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("key"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// keypad.js")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" useKeypadStore "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("defineStore")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"keypad"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("state")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("key")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("null")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("event")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('""')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("_diff")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("actions")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("_set")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("event"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" key")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("key "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" key"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("event "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" event"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// workaround to observe the keypad interaction,")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// as the key before and after the interaction may be the same key.")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("_diff"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("++")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("press")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("value")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("_set")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("Gesture"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("Press"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" value"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("release")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("value")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("_set")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("Gesture"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("Release"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" value"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("hold")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("value")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("_set")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("Gesture"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("Hold"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" value"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("h3",{attrs:{id:"adding-some-twists"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#adding-some-twists"}},[t._v("#")]),t._v(" Adding some twists")]),t._v(" "),a("p",[t._v("While the project originally aimed to replicate the phone experience faithfully, it also presented an opportunity to add unique twists that, to me, might turn out to be the selling points for the app to be more useful: a collection holder of "),a("strong",[t._v("mini-games/apps")]),t._v(" where newbie devs can also "),a("strong",[t._v("learn")]),t._v(" coding by submitting to this collection.")]),t._v(" "),a("p",[t._v("Due to the simplistic nature of the app and its design, I have a strong belief that it can be perceived as a code playground where people can get their ideas implemented in the rawest form, text-based apps, or apps with pixelated, monotonic graphics. Let's take a look at the simple model below:")]),t._v(" "),a("p",[a("img",{attrs:{src:"https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cllsehc05yilq0orszfc.png",alt:"Bridge 1100 model"}})]),t._v(" "),a("p",[t._v("Brick 1100 was built in a way that we could easily extend its functionalities with external games/apps. These external games/apps can communicate with Brick 1100 itself back and forth via an interface called Bridge 1100, you can read more about that "),a("a",{attrs:{href:"https://github.com/Visnalize/bridge-1100",target:"_blank",rel:"noopener noreferrer"}},[t._v("in this Github repo"),a("OutboundLink")],1),t._v(".")]),t._v(" "),a("p",[t._v("It's nothing sort of any kind of innovation (as expected from a noob). Those external apps/games are just being gathered and pulled from "),a("a",{attrs:{href:"https://github.com/Visnalize/brick-1100-apps",target:"_blank",rel:"noopener noreferrer"}},[t._v("this Github repo"),a("OutboundLink")],1),t._v(". By the time of this article, you can see from that repo, there are only 2 apps available:")]),t._v(" "),a("ul",[a("li",[a("strong",[t._v("Pwd Generator")]),t._v(" - a simple password generator from a length input.")]),t._v(" "),a("li",[a("strong",[t._v("Randomizer")]),t._v(" - a simple randomizer app that outputs a random result each time depending on the selected mode.")])]),t._v(" "),a("p",[t._v("Both of them are super simple, plain text-based apps that can be completed in no time. However, they were developed using different web techs, with the first one using pure HTML/CSS/JS while the latter using the Mithril.js framework. This gives you the freedom of choice when it comes to the web tech that you want to learn by making and takes relatively little of your time and effort to complete an app idea.")]),t._v(" "),a("p",[t._v("How those apps show up in Brick 1100:")]),t._v(" "),a("p",[a("img",{attrs:{src:"https://dev-to-uploads.s3.amazonaws.com/uploads/articles/53cw2mjrfxzu6dpo0zwo.jpg",alt:"Brick 1100 online apps"}})]),t._v(" "),a("h2",{attrs:{id:"final-words"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#final-words"}},[t._v("#")]),t._v(" Final words")]),t._v(" "),a("p",[t._v("Despite how silly and ridiculously simple this project looks, I had a really great time building it and felt super proud to see a pet project that actually came to light and got installed on a few user devices. If it has somehow captured your interest and want to try it out, you can install it from "),a("a",{attrs:{href:"https://play.google.com/store/apps/details?id=com.visnalize.brick1100",target:"_blank",rel:"noopener noreferrer"}},[a("strong",[t._v("Google Play")]),a("OutboundLink")],1),t._v(". And feel free to join "),a("a",{attrs:{href:"https://discord.gg/6AQDnZa4Xm",target:"_blank",rel:"noopener noreferrer"}},[t._v("our Discord"),a("OutboundLink")],1),t._v(" to have some little chit-chat, or if you want to build something on it but getting stuck somewhere, I'm happy to help out there.")]),t._v(" "),a("p",[t._v("And now, if you will excuse me I have an app to develop, and some users to satisfy. Thank you for reading ✌")]),t._v(" "),a("m-blog-tag-list",{attrs:{tags:t.$page.frontmatter.tag,showIcon:""}})],1)}),[],!1,null,null,null);a.default=n.exports}}]); \ No newline at end of file diff --git a/assets/js/73.9868248d.js b/assets/js/73.48b0f719.js similarity index 99% rename from assets/js/73.9868248d.js rename to assets/js/73.48b0f719.js index bfa9890a..340aae8d 100644 --- a/assets/js/73.9868248d.js +++ b/assets/js/73.48b0f719.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[73],{556:function(e,t,a){"use strict";a.r(t);var o=a(16),i=Object(o.a)({},(function(){var e=this,t=e._self._c;return t("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[t("h1",{attrs:{id:"why-you-should-have-a-side-hustle"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#why-you-should-have-a-side-hustle"}},[e._v("#")]),e._v(" Why you should have a side hustle")]),e._v(" "),t("m-blog-meta"),e._v(" "),t("p",[t("img",{attrs:{src:"/assets/covers/why-side-hustle.jpg",alt:"My hustling workspace"}})]),e._v(" "),t("p",[t("em",[e._v("My workspace before and after upgrading with the money earned from my side hustle")])]),e._v(" "),t("p",[e._v("It's been a while since the last time I wrote and published a blog post. Part of the reason is that I've been busy with a lot of things in life, trying to maintain a balance between my day job and the side hustle, while also spending time to take care of my family, the other part is that I couldn't find a good topic to write about. Today, I decided to bring up the topic of side hustle again, share with you some of my thoughts based on my own experience, and hopefully, you can find some motivation and helpful tips to start your own side hustle.")]),e._v(" "),t("h2",{attrs:{id:"what-is-a-side-hustle"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#what-is-a-side-hustle"}},[e._v("#")]),e._v(" What is a side hustle?")]),e._v(" "),t("blockquote",[t("p",[e._v("A piece of work or a job that you get paid for doing in addition to doing your main job - "),t("em",[t("a",{attrs:{href:"https://dictionary.cambridge.org/dictionary/english/side-hustle",target:"_blank",rel:"noopener noreferrer"}},[e._v("Cambridge Dictionary"),t("OutboundLink")],1)])])]),e._v(" "),t("p",[e._v('As a non-native English speaker, I didn\'t know what "side hustle" meant and had absolutely no idea what it was until I actually realized that I was already doing it. Apparently, "side hustle" is a slang for a way to make extra money outside of your day job. It can be a freelance gig, a YouTube channel, an online store, or any other form of work that you do in your free time, on weekends, or after work to earn extra income.')]),e._v(" "),t("p",[e._v("In my case, as soon as I started earning my first dollar from "),t("RouterLink",{attrs:{to:"/win7simu/about.html"}},[e._v("Win7 Simu")]),e._v(", it has become my side hustle. It's worth mentioning that I didn't start Win7 Simu with the intention of making money, but rather to learn new things and have fun. However, as the project grew, I realized that I could monetize it and turn it into a side hustle as a result. I wrote about this more in detail in my previous "),t("RouterLink",{attrs:{to:"/blog/building-win7-simu.html#how-it-all-started"}},[e._v("blog post")]),e._v(" if you're interested.")],1),e._v(" "),t("h2",{attrs:{id:"the-benefits"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#the-benefits"}},[e._v("#")]),e._v(" The benefits")]),e._v(" "),t("p",[e._v("Onto the main topic of this post, here are some reasons why you should consider having a side hustle for yourself:")]),e._v(" "),t("h3",{attrs:{id:"extra-income"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#extra-income"}},[e._v("#")]),e._v(" Extra income")]),e._v(" "),t("p",[t("img",{attrs:{src:"https://images.unsplash.com/photo-1553729459-efe14ef6055d?auto=format&fit=crop&w=740&q=80",alt:"Side hustle brings extra income"}})]),e._v(" "),t("p",[e._v("The first and most obvious benefit of having a side hustle is the extra income that it brings. The money you earn from your side hustle can be extremely helpful in many ways, such as paying off debts, saving for a rainy day, investing in your future, or simply improving your quality of life. An example from my own experience is that the money earned from Win7 Simu was used to upgrade my workspace, which in turn helped me to be more productive and motivated to continue and grow the project. In an even bigger picture, I have seen people getting over their financial struggles during the pandemic and layoffs thanks to their side hustles, some even turned them into full-time jobs and became successful entrepreneurs, with a diversity of "),t("a",{attrs:{href:"https://thunhap.online/",target:"_blank",rel:"noopener noreferrer"}},[e._v("products and services"),t("OutboundLink")],1),e._v(" that they offer.")]),e._v(" "),t("p",[e._v("However, when it comes to money, it's important to remember that a side hustle is not a get-rich-quick scheme. It requires time, effort, and patience to build and grow, and the income may not be stable or guaranteed. If you're willing to put in the work and stay committed, the rewards can be significant and life-changing.")]),e._v(" "),t("h3",{attrs:{id:"skill-development"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#skill-development"}},[e._v("#")]),e._v(" Skill development")]),e._v(" "),t("p",[e._v("Another benefit of having a side hustle is the opportunity to learn new skills and gain valuable experience. Whether you're building software, starting a blog, creating a YouTube channel, or running an online store, you'll have the chance to develop a wide range of skills, such as coding, marketing, sales, customer service, project management, and more. These skills can be useful not only in your side hustle but also in your day job and other areas of your life.")]),e._v(" "),t("p",[e._v("For example, I've learned a lot about web development ("),t("RouterLink",{attrs:{to:"/blog/building-win7-simu.html#the-goal"}},[e._v("specifically front-end")]),e._v(", my area of interest), SEO, marketing, analytics, and other business-related skills from building a side project just as simple as Win7 Simu, which has helped me to grow professionally and personally.")],1),e._v(" "),t("a-google-ad"),e._v(" "),t("h3",{attrs:{id:"networking"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#networking"}},[e._v("#")]),e._v(" Networking")]),e._v(" "),t("p",[e._v("Having a side hustle can also help you expand your network and connect with like-minded people. Whether you're collaborating with other creators, working with clients, or engaging with your audience, you'll have the opportunity to meet new people, build relationships, and learn from others. Networking can be extremely valuable in today's digital age, where opportunities are abundant and connections are key to success.")]),e._v(" "),t("p",[e._v("Through Win7 Simu, I've met amazing people, from fellow developers who shared their wealth of knowledge and experience, to potential partners and clients who expressed interest in working together. As an introvert, I found it challenging to network and build relationships, but having a side hustle has pushed me out of my comfort zone and helped me to connect with others in a meaningful way.")]),e._v(" "),t("h3",{attrs:{id:"job-security"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#job-security"}},[e._v("#")]),e._v(" Job security")]),e._v(" "),t("p",[e._v("In today's uncertain economy, having a side hustle can provide an additional layer of security and stability. If you lose your job, face a pay cut, or experience other financial setbacks, your side hustle can help you weather the storm and stay afloat. It can also give you the confidence and peace of mind to pursue your passions, take risks, and explore new opportunities without the fear of failure or financial ruin. As there's a saying that goes \"Don't put all your eggs in one basket\", having a side hustle can diversify your income streams and protect you from unexpected events.")]),e._v(" "),t("h2",{attrs:{id:"the-challenges"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#the-challenges"}},[e._v("#")]),e._v(" The challenges")]),e._v(" "),t("p",[e._v("While there are many benefits to having a side hustle, it's important to acknowledge that there are also challenges that come with it. Here are a few things to consider before starting a side hustle:")]),e._v(" "),t("h3",{attrs:{id:"time-commitment"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#time-commitment"}},[e._v("#")]),e._v(" Time commitment")]),e._v(" "),t("p",[t("img",{attrs:{src:"https://images.unsplash.com/photo-1489844981779-7f06e8e0fdbb?auto=format&fit=crop&w=740&q=80",alt:"Side hustle requires time commitment"}})]),e._v(" "),t("p",[e._v("The biggest challenge of having a side hustle is the time required to build and grow it. Balancing your day job, family, social life, and other responsibilities with your side hustle can be difficult and overwhelming. You may find yourself working long hours, sacrificing sleep, and missing out on important events in order to keep up with your side hustle.")]),e._v(" "),t("p",[e._v("I recall many late nights and weekends spent working on Win7 Simu, although there was no actual deadline or pressure to do so, there was a sense of urgency and responsibility to deliver a new feature, get a bug fixed, as a token of appreciation to the users who supported the project, either financially or just by providing helpful feedback. While enjoying it, I was certainly exhausted and burnt out at times, and had to remind myself to take breaks, rest, and recharge. Therefore, as a piece of advice, it's crucial to set boundaries, prioritize what matters most to you, and know when to take a break to avoid burnout and maintain a healthy work-life balance.")]),e._v(" "),t("h3",{attrs:{id:"discipline-and-motivation"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#discipline-and-motivation"}},[e._v("#")]),e._v(" Discipline and motivation")]),e._v(" "),t("p",[e._v("Another challenge of having a side hustle is staying disciplined and motivated to work on it consistently. On one hand, it's easy to procrastinate, or lose interest in your side hustle, especially when you're not seeing immediate results or facing setbacks. On the other hand, getting distracted from your day job and other responsibilities can also happen, and affect your career and social life, in the worst case scenario, it can lead to conflicts and negative consequences.")]),e._v(" "),t("p",[e._v("I have seen myself neglecting my day job a few times to focus on Win7 Simu and felt guilty about it, as I was not giving my best effort and attention to my employer, who paid me a salary and provided me with a stable job. It was a wake-up call for me to re-evaluate my priorities, set clear goals, and establish a routine that works for me. I've learned to be more disciplined, focused, and organized in managing my time and energy.")]),e._v(" "),t("h2",{attrs:{id:"conclusion"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#conclusion"}},[e._v("#")]),e._v(" Conclusion")]),e._v(" "),t("p",[e._v("Above are some of my thoughts and experiences on why you should have a side hustle, the benefits and challenges that come with it. I hope you find them helpful and inspiring, and that you're motivated to start your own side hustle, or continue working on it if you already have one. Remember that everyone's journey is unique, and there's no one-size-fits-all approach to having a side hustle. It's important to find what works best for you, stay true to yourself, and enjoy the process of learning, growing, and hustling. Good luck and have fun!")]),e._v(" "),t("m-blog-tag-list",{attrs:{tags:e.$page.frontmatter.tag,showIcon:""}})],1)}),[],!1,null,null,null);t.default=i.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[73],{555:function(e,t,a){"use strict";a.r(t);var o=a(16),i=Object(o.a)({},(function(){var e=this,t=e._self._c;return t("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[t("h1",{attrs:{id:"why-you-should-have-a-side-hustle"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#why-you-should-have-a-side-hustle"}},[e._v("#")]),e._v(" Why you should have a side hustle")]),e._v(" "),t("m-blog-meta"),e._v(" "),t("p",[t("img",{attrs:{src:"/assets/covers/why-side-hustle.jpg",alt:"My hustling workspace"}})]),e._v(" "),t("p",[t("em",[e._v("My workspace before and after upgrading with the money earned from my side hustle")])]),e._v(" "),t("p",[e._v("It's been a while since the last time I wrote and published a blog post. Part of the reason is that I've been busy with a lot of things in life, trying to maintain a balance between my day job and the side hustle, while also spending time to take care of my family, the other part is that I couldn't find a good topic to write about. Today, I decided to bring up the topic of side hustle again, share with you some of my thoughts based on my own experience, and hopefully, you can find some motivation and helpful tips to start your own side hustle.")]),e._v(" "),t("h2",{attrs:{id:"what-is-a-side-hustle"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#what-is-a-side-hustle"}},[e._v("#")]),e._v(" What is a side hustle?")]),e._v(" "),t("blockquote",[t("p",[e._v("A piece of work or a job that you get paid for doing in addition to doing your main job - "),t("em",[t("a",{attrs:{href:"https://dictionary.cambridge.org/dictionary/english/side-hustle",target:"_blank",rel:"noopener noreferrer"}},[e._v("Cambridge Dictionary"),t("OutboundLink")],1)])])]),e._v(" "),t("p",[e._v('As a non-native English speaker, I didn\'t know what "side hustle" meant and had absolutely no idea what it was until I actually realized that I was already doing it. Apparently, "side hustle" is a slang for a way to make extra money outside of your day job. It can be a freelance gig, a YouTube channel, an online store, or any other form of work that you do in your free time, on weekends, or after work to earn extra income.')]),e._v(" "),t("p",[e._v("In my case, as soon as I started earning my first dollar from "),t("RouterLink",{attrs:{to:"/win7simu/about.html"}},[e._v("Win7 Simu")]),e._v(", it has become my side hustle. It's worth mentioning that I didn't start Win7 Simu with the intention of making money, but rather to learn new things and have fun. However, as the project grew, I realized that I could monetize it and turn it into a side hustle as a result. I wrote about this more in detail in my previous "),t("RouterLink",{attrs:{to:"/blog/building-win7-simu.html#how-it-all-started"}},[e._v("blog post")]),e._v(" if you're interested.")],1),e._v(" "),t("h2",{attrs:{id:"the-benefits"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#the-benefits"}},[e._v("#")]),e._v(" The benefits")]),e._v(" "),t("p",[e._v("Onto the main topic of this post, here are some reasons why you should consider having a side hustle for yourself:")]),e._v(" "),t("h3",{attrs:{id:"extra-income"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#extra-income"}},[e._v("#")]),e._v(" Extra income")]),e._v(" "),t("p",[t("img",{attrs:{src:"https://images.unsplash.com/photo-1553729459-efe14ef6055d?auto=format&fit=crop&w=740&q=80",alt:"Side hustle brings extra income"}})]),e._v(" "),t("p",[e._v("The first and most obvious benefit of having a side hustle is the extra income that it brings. The money you earn from your side hustle can be extremely helpful in many ways, such as paying off debts, saving for a rainy day, investing in your future, or simply improving your quality of life. An example from my own experience is that the money earned from Win7 Simu was used to upgrade my workspace, which in turn helped me to be more productive and motivated to continue and grow the project. In an even bigger picture, I have seen people getting over their financial struggles during the pandemic and layoffs thanks to their side hustles, some even turned them into full-time jobs and became successful entrepreneurs, with a diversity of "),t("a",{attrs:{href:"https://thunhap.online/",target:"_blank",rel:"noopener noreferrer"}},[e._v("products and services"),t("OutboundLink")],1),e._v(" that they offer.")]),e._v(" "),t("p",[e._v("However, when it comes to money, it's important to remember that a side hustle is not a get-rich-quick scheme. It requires time, effort, and patience to build and grow, and the income may not be stable or guaranteed. If you're willing to put in the work and stay committed, the rewards can be significant and life-changing.")]),e._v(" "),t("h3",{attrs:{id:"skill-development"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#skill-development"}},[e._v("#")]),e._v(" Skill development")]),e._v(" "),t("p",[e._v("Another benefit of having a side hustle is the opportunity to learn new skills and gain valuable experience. Whether you're building software, starting a blog, creating a YouTube channel, or running an online store, you'll have the chance to develop a wide range of skills, such as coding, marketing, sales, customer service, project management, and more. These skills can be useful not only in your side hustle but also in your day job and other areas of your life.")]),e._v(" "),t("p",[e._v("For example, I've learned a lot about web development ("),t("RouterLink",{attrs:{to:"/blog/building-win7-simu.html#the-goal"}},[e._v("specifically front-end")]),e._v(", my area of interest), SEO, marketing, analytics, and other business-related skills from building a side project just as simple as Win7 Simu, which has helped me to grow professionally and personally.")],1),e._v(" "),t("a-google-ad"),e._v(" "),t("h3",{attrs:{id:"networking"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#networking"}},[e._v("#")]),e._v(" Networking")]),e._v(" "),t("p",[e._v("Having a side hustle can also help you expand your network and connect with like-minded people. Whether you're collaborating with other creators, working with clients, or engaging with your audience, you'll have the opportunity to meet new people, build relationships, and learn from others. Networking can be extremely valuable in today's digital age, where opportunities are abundant and connections are key to success.")]),e._v(" "),t("p",[e._v("Through Win7 Simu, I've met amazing people, from fellow developers who shared their wealth of knowledge and experience, to potential partners and clients who expressed interest in working together. As an introvert, I found it challenging to network and build relationships, but having a side hustle has pushed me out of my comfort zone and helped me to connect with others in a meaningful way.")]),e._v(" "),t("h3",{attrs:{id:"job-security"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#job-security"}},[e._v("#")]),e._v(" Job security")]),e._v(" "),t("p",[e._v("In today's uncertain economy, having a side hustle can provide an additional layer of security and stability. If you lose your job, face a pay cut, or experience other financial setbacks, your side hustle can help you weather the storm and stay afloat. It can also give you the confidence and peace of mind to pursue your passions, take risks, and explore new opportunities without the fear of failure or financial ruin. As there's a saying that goes \"Don't put all your eggs in one basket\", having a side hustle can diversify your income streams and protect you from unexpected events.")]),e._v(" "),t("h2",{attrs:{id:"the-challenges"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#the-challenges"}},[e._v("#")]),e._v(" The challenges")]),e._v(" "),t("p",[e._v("While there are many benefits to having a side hustle, it's important to acknowledge that there are also challenges that come with it. Here are a few things to consider before starting a side hustle:")]),e._v(" "),t("h3",{attrs:{id:"time-commitment"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#time-commitment"}},[e._v("#")]),e._v(" Time commitment")]),e._v(" "),t("p",[t("img",{attrs:{src:"https://images.unsplash.com/photo-1489844981779-7f06e8e0fdbb?auto=format&fit=crop&w=740&q=80",alt:"Side hustle requires time commitment"}})]),e._v(" "),t("p",[e._v("The biggest challenge of having a side hustle is the time required to build and grow it. Balancing your day job, family, social life, and other responsibilities with your side hustle can be difficult and overwhelming. You may find yourself working long hours, sacrificing sleep, and missing out on important events in order to keep up with your side hustle.")]),e._v(" "),t("p",[e._v("I recall many late nights and weekends spent working on Win7 Simu, although there was no actual deadline or pressure to do so, there was a sense of urgency and responsibility to deliver a new feature, get a bug fixed, as a token of appreciation to the users who supported the project, either financially or just by providing helpful feedback. While enjoying it, I was certainly exhausted and burnt out at times, and had to remind myself to take breaks, rest, and recharge. Therefore, as a piece of advice, it's crucial to set boundaries, prioritize what matters most to you, and know when to take a break to avoid burnout and maintain a healthy work-life balance.")]),e._v(" "),t("h3",{attrs:{id:"discipline-and-motivation"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#discipline-and-motivation"}},[e._v("#")]),e._v(" Discipline and motivation")]),e._v(" "),t("p",[e._v("Another challenge of having a side hustle is staying disciplined and motivated to work on it consistently. On one hand, it's easy to procrastinate, or lose interest in your side hustle, especially when you're not seeing immediate results or facing setbacks. On the other hand, getting distracted from your day job and other responsibilities can also happen, and affect your career and social life, in the worst case scenario, it can lead to conflicts and negative consequences.")]),e._v(" "),t("p",[e._v("I have seen myself neglecting my day job a few times to focus on Win7 Simu and felt guilty about it, as I was not giving my best effort and attention to my employer, who paid me a salary and provided me with a stable job. It was a wake-up call for me to re-evaluate my priorities, set clear goals, and establish a routine that works for me. I've learned to be more disciplined, focused, and organized in managing my time and energy.")]),e._v(" "),t("h2",{attrs:{id:"conclusion"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#conclusion"}},[e._v("#")]),e._v(" Conclusion")]),e._v(" "),t("p",[e._v("Above are some of my thoughts and experiences on why you should have a side hustle, the benefits and challenges that come with it. I hope you find them helpful and inspiring, and that you're motivated to start your own side hustle, or continue working on it if you already have one. Remember that everyone's journey is unique, and there's no one-size-fits-all approach to having a side hustle. It's important to find what works best for you, stay true to yourself, and enjoy the process of learning, growing, and hustling. Good luck and have fun!")]),e._v(" "),t("m-blog-tag-list",{attrs:{tags:e.$page.frontmatter.tag,showIcon:""}})],1)}),[],!1,null,null,null);t.default=i.exports}}]); \ No newline at end of file diff --git a/assets/js/74.6145a6cb.js b/assets/js/74.af1bf425.js similarity index 99% rename from assets/js/74.6145a6cb.js rename to assets/js/74.af1bf425.js index d2fb565a..b8dd435f 100644 --- a/assets/js/74.6145a6cb.js +++ b/assets/js/74.af1bf425.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[74],{555:function(t,e,o){"use strict";o.r(e);var a=o(16),s=Object(a.a)({},(function(){var t=this,e=t._self._c;return e("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[e("h1",{attrs:{id:"windows-7-icon-viewer-downloader"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#windows-7-icon-viewer-downloader"}},[t._v("#")]),t._v(" Windows 7 icon Viewer/Downloader")]),t._v(" "),e("m-blog-meta"),t._v(" "),e("p",[e("img",{attrs:{src:"/assets/covers/win7-icons-viewer-downloader.jpg",alt:"win7-icons screenshot"}})]),t._v(" "),e("p",[e("a",{attrs:{href:"https://win7icons.visnalize.com/",target:"_blank",rel:"noopener noreferrer"}},[t._v("Win7 Icons"),e("OutboundLink")],1),t._v(" is simple tool to view and/or download the Windows 7 icon collection.")]),t._v(" "),e("h2",{attrs:{id:"how-to-use"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#how-to-use"}},[t._v("#")]),t._v(" How to use")]),t._v(" "),e("p",[t._v("Its usage is pretty straightforward:")]),t._v(" "),e("ul",[e("li",[t._v("Visit "),e("a",{attrs:{href:"https://win7icons.visnalize.com",target:"_blank",rel:"noopener noreferrer"}},[t._v("https://win7icons.visnalize.com"),e("OutboundLink")],1),t._v(", you will see just a single window showing a list of icons.")]),t._v(" "),e("li",[t._v("Icons are grouped into categories, to view icons from each category, select one from the dropdown.")]),t._v(" "),e("li",[t._v('To download a single icon, select one and click the "Download" button.')]),t._v(" "),e("li",[t._v('The "Download All" button will navigate you to another page that compresses all the icons from all categories into a '),e("code",[t._v("zip")]),t._v(" file and download it to your device.")])]),t._v(" "),e("div",{staticClass:"custom-block tip"},[e("p",{staticClass:"custom-block-title"},[t._v("Tip")]),t._v(" "),e("p",[t._v("The downloaded icons are in "),e("code",[t._v(".ico")]),t._v(" format, to convert them into other formats for your convenience, you may use "),e("a",{attrs:{href:"https://www.aconvert.com/image/",target:"_blank",rel:"noopener noreferrer"}},[t._v("this free online tool"),e("OutboundLink")],1),t._v(".")])]),t._v(" "),e("h2",{attrs:{id:"technical-stuff"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#technical-stuff"}},[t._v("#")]),t._v(" Technical stuff")]),t._v(" "),e("p",[t._v("Building this tool was fairly prompt, it only took me roughly half a day to complete, as you can see that it just does one small, simple task. If you are interested, the source code is made public and accessible on "),e("a",{attrs:{href:"https://github.com/Visnalize/win7-icons",target:"_blank",rel:"noopener noreferrer"}},[t._v("Github"),e("OutboundLink")],1),t._v(".")]),t._v(" "),e("h3",{attrs:{id:"github-as-a-cms"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#github-as-a-cms"}},[t._v("#")]),t._v(" Github as a CMS")]),t._v(" "),e("div",{staticClass:"custom-block tip"},[e("p",{staticClass:"custom-block-title"},[t._v("What's CMS?")]),t._v(" "),e("p",[t._v("Content Management System (CMS for short) is a computer software used to manage the creation and modification of digital content.\n— "),e("em",[t._v("Wikipedia")])])]),t._v(" "),e("p",[t._v("Such a fancy word to use 😂 but that's how I perceive, the approach I used here is to have the icon collection hosted on "),e("strong",[t._v("Github")]),t._v(". Being a hosting service and version control system itself, we developers can do all sorts of things like creating and modifying the content we upload there, and it also supports the API for us to programmatically achieve those tasks.")]),t._v(" "),e("p",[t._v('Therefore, I picked Github rather than some "overkill" solutions for this simple tool. The categories you see from the dropdown are just in accordance with the folder structure as you can see '),e("a",{attrs:{href:"https://github.com/Visnalize/resources/tree/main/icons/win7",target:"_blank",rel:"noopener noreferrer"}},[t._v("here"),e("OutboundLink")],1),t._v(", and the icons shown in the tool are also pulled from there. The real magic here is that if I add a missing icon or remove any duplicated ones, the changes are automatically reflected onto the tool.")]),t._v(" "),e("h3",{attrs:{id:"the-familiar-front-end-stack"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#the-familiar-front-end-stack"}},[t._v("#")]),t._v(" The familiar front-end stack")]),t._v(" "),e("p",[t._v("To build the face of the tool, I used "),e("a",{attrs:{href:"https://v2.vuejs.org",target:"_blank",rel:"noopener noreferrer"}},[t._v("Vue2"),e("OutboundLink")],1),t._v(", the same tech that powers most of my work. To mimic the UI design of Windows 7, I used an open-source CSS framework called "),e("a",{attrs:{href:"https://khang-nd.github.io/7.css",target:"_blank",rel:"noopener noreferrer"}},[t._v("7.css"),e("OutboundLink")],1),t._v(". And the Github API fetching was done thanks to this "),e("a",{attrs:{href:"https://github.com/octokit/rest.js/",target:"_blank",rel:"noopener noreferrer"}},[t._v("octokit"),e("OutboundLink")],1),t._v(" library. The building steps are as simple as counting:")]),t._v(" "),e("ol",[e("li",[t._v("Create a Vue2 app from a boilerplate:")])]),t._v(" "),e("div",{staticClass:"language-sh extra-class"},[e("pre",{pre:!0,attrs:{class:"language-sh"}},[e("code",[e("span",{pre:!0,attrs:{class:"token function"}},[t._v("npm")]),t._v(" create vue@2\n")])])]),e("ol",{attrs:{start:"2"}},[e("li",[t._v("Install the package dependencies")])]),t._v(" "),e("div",{staticClass:"language-sh extra-class"},[e("pre",{pre:!0,attrs:{class:"language-sh"}},[e("code",[e("span",{pre:!0,attrs:{class:"token function"}},[t._v("yarn")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("install")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("yarn")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("7")]),t._v(".css @octokit/rest\n")])])]),e("ol",{attrs:{start:"3"}},[e("li",[t._v("Lastly, build the components (literally all of the logic is handled in "),e("a",{attrs:{href:"https://github.com/Visnalize/win7-icons/blob/main/src/components/IconBrowser.vue",target:"_blank",rel:"noopener noreferrer"}},[t._v("this component"),e("OutboundLink")],1),t._v(")")])]),t._v(" "),e("p",[t._v("Though I also had some compatibility issues between the "),e("strong",[t._v("octokit")]),t._v(" library and "),e("a",{attrs:{href:"https://vitejs.dev",target:"_blank",rel:"noopener noreferrer"}},[t._v("Vite"),e("OutboundLink")],1),t._v(" (a JS bundling tool) and managed to get it resolved, it would be too much of hassle to share about. If you happen to have a similar problem, refer to this "),e("a",{attrs:{href:"https://stackoverflow.com/a/73095593/3916702",target:"_blank",rel:"noopener noreferrer"}},[t._v("Stackoverflow thread"),e("OutboundLink")],1),t._v(".")]),t._v(" "),e("p",[t._v('In summary, the "so-called" tech stack is:')]),t._v(" "),e("ul",[e("li",[t._v("Github as a back-end/CMS (laugh the hell out of it 😂)")]),t._v(" "),e("li",[t._v("Vue2 + 7.css + octokit for front-end")]),t._v(" "),e("li",[t._v("Vite as the JS bundler.")]),t._v(" "),e("li",[t._v("The site is hosted using Github Pages.")])]),t._v(" "),e("m-blog-tag-list",{attrs:{tags:t.$page.frontmatter.tag,showIcon:""}})],1)}),[],!1,null,null,null);e.default=s.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[74],{556:function(t,e,o){"use strict";o.r(e);var a=o(16),s=Object(a.a)({},(function(){var t=this,e=t._self._c;return e("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[e("h1",{attrs:{id:"windows-7-icon-viewer-downloader"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#windows-7-icon-viewer-downloader"}},[t._v("#")]),t._v(" Windows 7 icon Viewer/Downloader")]),t._v(" "),e("m-blog-meta"),t._v(" "),e("p",[e("img",{attrs:{src:"/assets/covers/win7-icons-viewer-downloader.jpg",alt:"win7-icons screenshot"}})]),t._v(" "),e("p",[e("a",{attrs:{href:"https://win7icons.visnalize.com/",target:"_blank",rel:"noopener noreferrer"}},[t._v("Win7 Icons"),e("OutboundLink")],1),t._v(" is simple tool to view and/or download the Windows 7 icon collection.")]),t._v(" "),e("h2",{attrs:{id:"how-to-use"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#how-to-use"}},[t._v("#")]),t._v(" How to use")]),t._v(" "),e("p",[t._v("Its usage is pretty straightforward:")]),t._v(" "),e("ul",[e("li",[t._v("Visit "),e("a",{attrs:{href:"https://win7icons.visnalize.com",target:"_blank",rel:"noopener noreferrer"}},[t._v("https://win7icons.visnalize.com"),e("OutboundLink")],1),t._v(", you will see just a single window showing a list of icons.")]),t._v(" "),e("li",[t._v("Icons are grouped into categories, to view icons from each category, select one from the dropdown.")]),t._v(" "),e("li",[t._v('To download a single icon, select one and click the "Download" button.')]),t._v(" "),e("li",[t._v('The "Download All" button will navigate you to another page that compresses all the icons from all categories into a '),e("code",[t._v("zip")]),t._v(" file and download it to your device.")])]),t._v(" "),e("div",{staticClass:"custom-block tip"},[e("p",{staticClass:"custom-block-title"},[t._v("Tip")]),t._v(" "),e("p",[t._v("The downloaded icons are in "),e("code",[t._v(".ico")]),t._v(" format, to convert them into other formats for your convenience, you may use "),e("a",{attrs:{href:"https://www.aconvert.com/image/",target:"_blank",rel:"noopener noreferrer"}},[t._v("this free online tool"),e("OutboundLink")],1),t._v(".")])]),t._v(" "),e("h2",{attrs:{id:"technical-stuff"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#technical-stuff"}},[t._v("#")]),t._v(" Technical stuff")]),t._v(" "),e("p",[t._v("Building this tool was fairly prompt, it only took me roughly half a day to complete, as you can see that it just does one small, simple task. If you are interested, the source code is made public and accessible on "),e("a",{attrs:{href:"https://github.com/Visnalize/win7-icons",target:"_blank",rel:"noopener noreferrer"}},[t._v("Github"),e("OutboundLink")],1),t._v(".")]),t._v(" "),e("h3",{attrs:{id:"github-as-a-cms"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#github-as-a-cms"}},[t._v("#")]),t._v(" Github as a CMS")]),t._v(" "),e("div",{staticClass:"custom-block tip"},[e("p",{staticClass:"custom-block-title"},[t._v("What's CMS?")]),t._v(" "),e("p",[t._v("Content Management System (CMS for short) is a computer software used to manage the creation and modification of digital content.\n— "),e("em",[t._v("Wikipedia")])])]),t._v(" "),e("p",[t._v("Such a fancy word to use 😂 but that's how I perceive, the approach I used here is to have the icon collection hosted on "),e("strong",[t._v("Github")]),t._v(". Being a hosting service and version control system itself, we developers can do all sorts of things like creating and modifying the content we upload there, and it also supports the API for us to programmatically achieve those tasks.")]),t._v(" "),e("p",[t._v('Therefore, I picked Github rather than some "overkill" solutions for this simple tool. The categories you see from the dropdown are just in accordance with the folder structure as you can see '),e("a",{attrs:{href:"https://github.com/Visnalize/resources/tree/main/icons/win7",target:"_blank",rel:"noopener noreferrer"}},[t._v("here"),e("OutboundLink")],1),t._v(", and the icons shown in the tool are also pulled from there. The real magic here is that if I add a missing icon or remove any duplicated ones, the changes are automatically reflected onto the tool.")]),t._v(" "),e("h3",{attrs:{id:"the-familiar-front-end-stack"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#the-familiar-front-end-stack"}},[t._v("#")]),t._v(" The familiar front-end stack")]),t._v(" "),e("p",[t._v("To build the face of the tool, I used "),e("a",{attrs:{href:"https://v2.vuejs.org",target:"_blank",rel:"noopener noreferrer"}},[t._v("Vue2"),e("OutboundLink")],1),t._v(", the same tech that powers most of my work. To mimic the UI design of Windows 7, I used an open-source CSS framework called "),e("a",{attrs:{href:"https://khang-nd.github.io/7.css",target:"_blank",rel:"noopener noreferrer"}},[t._v("7.css"),e("OutboundLink")],1),t._v(". And the Github API fetching was done thanks to this "),e("a",{attrs:{href:"https://github.com/octokit/rest.js/",target:"_blank",rel:"noopener noreferrer"}},[t._v("octokit"),e("OutboundLink")],1),t._v(" library. The building steps are as simple as counting:")]),t._v(" "),e("ol",[e("li",[t._v("Create a Vue2 app from a boilerplate:")])]),t._v(" "),e("div",{staticClass:"language-sh extra-class"},[e("pre",{pre:!0,attrs:{class:"language-sh"}},[e("code",[e("span",{pre:!0,attrs:{class:"token function"}},[t._v("npm")]),t._v(" create vue@2\n")])])]),e("ol",{attrs:{start:"2"}},[e("li",[t._v("Install the package dependencies")])]),t._v(" "),e("div",{staticClass:"language-sh extra-class"},[e("pre",{pre:!0,attrs:{class:"language-sh"}},[e("code",[e("span",{pre:!0,attrs:{class:"token function"}},[t._v("yarn")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("install")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("yarn")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("7")]),t._v(".css @octokit/rest\n")])])]),e("ol",{attrs:{start:"3"}},[e("li",[t._v("Lastly, build the components (literally all of the logic is handled in "),e("a",{attrs:{href:"https://github.com/Visnalize/win7-icons/blob/main/src/components/IconBrowser.vue",target:"_blank",rel:"noopener noreferrer"}},[t._v("this component"),e("OutboundLink")],1),t._v(")")])]),t._v(" "),e("p",[t._v("Though I also had some compatibility issues between the "),e("strong",[t._v("octokit")]),t._v(" library and "),e("a",{attrs:{href:"https://vitejs.dev",target:"_blank",rel:"noopener noreferrer"}},[t._v("Vite"),e("OutboundLink")],1),t._v(" (a JS bundling tool) and managed to get it resolved, it would be too much of hassle to share about. If you happen to have a similar problem, refer to this "),e("a",{attrs:{href:"https://stackoverflow.com/a/73095593/3916702",target:"_blank",rel:"noopener noreferrer"}},[t._v("Stackoverflow thread"),e("OutboundLink")],1),t._v(".")]),t._v(" "),e("p",[t._v('In summary, the "so-called" tech stack is:')]),t._v(" "),e("ul",[e("li",[t._v("Github as a back-end/CMS (laugh the hell out of it 😂)")]),t._v(" "),e("li",[t._v("Vue2 + 7.css + octokit for front-end")]),t._v(" "),e("li",[t._v("Vite as the JS bundler.")]),t._v(" "),e("li",[t._v("The site is hosted using Github Pages.")])]),t._v(" "),e("m-blog-tag-list",{attrs:{tags:t.$page.frontmatter.tag,showIcon:""}})],1)}),[],!1,null,null,null);e.default=s.exports}}]); \ No newline at end of file diff --git a/assets/js/75.9441afcc.js b/assets/js/75.13aca74c.js similarity index 99% rename from assets/js/75.9441afcc.js rename to assets/js/75.13aca74c.js index da2790e6..87ca7c8f 100644 --- a/assets/js/75.9441afcc.js +++ b/assets/js/75.13aca74c.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[75],{562:function(e,t,o){"use strict";o.r(t);var n=o(16),s=Object(n.a)({},(function(){var e=this,t=e._self._c;return t("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[t("h1",{attrs:{id:"introducing-win7-ui"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#introducing-win7-ui"}},[e._v("#")]),e._v(" Introducing Win7 UI")]),e._v(" "),t("m-blog-meta"),e._v(" "),t("p",[t("img",{attrs:{src:"/assets/covers/win7-ui-hero.jpg",alt:"Win7 UI screenshot"}})]),e._v(" "),t("p",[e._v("In this post, let's talk about some more boring technical stuff as I bring in the spotlight an open-source project that I have recently finished: "),t("a",{attrs:{href:"https://win7ui.visnalize.com/",target:"_blank",rel:"noopener noreferrer"}},[e._v("Win7 UI"),t("OutboundLink")],1),e._v(".")]),e._v(" "),t("h2",{attrs:{id:"the-introduction"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#the-introduction"}},[e._v("#")]),e._v(" The introduction")]),e._v(" "),t("p",[t("strong",[e._v("Win7 UI")]),e._v(" is the component library that powers "),t("RouterLink",{attrs:{to:"/win7simu/about.html"}},[e._v("Win7 Simu")]),e._v(". It is built on top of "),t("a",{attrs:{href:"https://khang-nd.github.io/7.css/",target:"_blank",rel:"noopener noreferrer"}},[e._v("7.css"),t("OutboundLink")],1),e._v(", a CSS-only framework that brings back the nostalgic design of Windows 7 to the web, and "),t("a",{attrs:{href:"https://v2.vuejs.org/",target:"_blank",rel:"noopener noreferrer"}},[e._v("Vue 2"),t("OutboundLink")],1),e._v(", the familiar yet powerful JS framework that has been fueling several of my projects. Win7 UI is designed with simplicity and extensibility in mind:")],1),e._v(" "),t("ul",[t("li",[e._v("Just a few setup steps and all the components are ready to use in your Vue project.")]),e._v(" "),t("li",[e._v("Component usage is kept as simple as possible, with only essential props and events, and inheriting the default behavior of HTML elements whereas applicable.")]),e._v(" "),t("li",[e._v("All components are prefixed with "),t("code",[e._v("winui-")]),e._v(" to be easily distinguished and identified throughout your codebase.")]),e._v(" "),t("li",[e._v("Styling customization is made easy with each component having its own CSS class to be overridden.")]),e._v(" "),t("li",[e._v("A full-on documentation with examples and code snippets provided for each component is meticulously crafted to help you get started quickly.")])]),e._v(" "),t("p",[e._v("Check out the "),t("a",{attrs:{href:"https://win7ui.visnalize.com/guide/#installation",target:"_blank",rel:"noopener noreferrer"}},[e._v("installation guide"),t("OutboundLink")],1),e._v(" to get started with the component library.")]),e._v(" "),t("h2",{attrs:{id:"technical-stuff-in-depth"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#technical-stuff-in-depth"}},[e._v("#")]),e._v(" Technical stuff in-depth")]),e._v(" "),t("div",{staticClass:"custom-block tip"},[t("p",{staticClass:"custom-block-title"},[e._v("Tip")]),e._v(" "),t("p",[e._v("The project is "),t("strong",[e._v("open-source")]),e._v(", you can check out the "),t("a",{attrs:{href:"https://github.com/visnalize/win7-ui",target:"_blank",rel:"noopener noreferrer"}},[e._v("source code"),t("OutboundLink")],1),e._v(" to see the entire project structure.")])]),e._v(" "),t("p",[e._v("To put it simply, the project is structured as follows:")]),e._v(" "),t("div",{staticClass:"language- extra-class"},[t("div",{staticClass:"highlight-lines"},[t("br"),t("div",{staticClass:"highlighted"},[e._v(" ")]),t("br"),t("br"),t("br"),t("br"),t("br"),t("br"),t("div",{staticClass:"highlighted"},[e._v(" ")]),t("br"),t("br"),t("br"),t("br"),t("br"),t("br")]),t("pre",{pre:!0,attrs:{class:"language-text"}},[t("code",[e._v("win7-ui\n├── docs/\n│ ├── src/\n│ │ ├── .vuepress/\n│ │ ├── components/\n│ │ ├── index.md\n| | └── ...\n│ └── package.json\n├── src/\n│ ├── components/\n│ ├── index.js\n│ └── ...\n├── package.json\n└── ...\n")])])]),t("p",[e._v("The project comprises of two main parts: the component library (the "),t("strong",[t("code",[e._v("src")])]),e._v(" folder) and the documentation site (the "),t("strong",[t("code",[e._v("docs")])]),e._v(" folder).")]),e._v(" "),t("a-google-ad"),e._v(" "),t("h3",{attrs:{id:"the-component-library"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#the-component-library"}},[e._v("#")]),e._v(" The component library")]),e._v(" "),t("p",[e._v("The component library is built to support Vue 2 projects (mainly due to the fact Vue 2 is Win7 Simu's "),t("RouterLink",{attrs:{to:"/blog/building-win7-simu.html#the-tech-stack"}},[e._v("framework of choice")]),e._v(" 😜) with "),t("a",{attrs:{href:"https://vitejs.dev/",target:"_blank",rel:"noopener noreferrer"}},[e._v("Vite"),t("OutboundLink")],1),e._v(" as the build tool/bundler.")],1),e._v(" "),t("p",[e._v("The "),t("code",[e._v("src")]),e._v(" folder where the component library resides is rather straightforward, with the "),t("code",[e._v("components")]),e._v(" folder containing all the components and the "),t("code",[e._v("index.js")]),e._v(" file exporting all the components as a plugin. The "),t("code",[e._v("index.js")]),e._v(" file is also where the components are registered globally, so you can use them anywhere in your Vue project without having to import them.")]),e._v(" "),t("p",[e._v("Each component is a single-file component that adds some extra styles and behaviors on top of the base HTML element and styling provided by the "),t("a",{attrs:{href:"https://khang-nd.github.io/7.css/",target:"_blank",rel:"noopener noreferrer"}},[e._v("7.css"),t("OutboundLink")],1),e._v(" framework. For example, the "),t("code",[e._v("")]),e._v(" component is just a "),t("code",[e._v("
',trigger:"hover focus",offset:0},yi=[],bi=function(){function t(e,n){var i=this;qe()(this,t),Ne()(this,"_events",[]),Ne()(this,"_setTooltipNodeEvent",(function(t,e,n,o){var r=t.relatedreference||t.toElement||t.relatedTarget;return!!i._tooltipNode.contains(r)&&(i._tooltipNode.addEventListener(t.type,(function n(r){var a=r.relatedreference||r.toElement||r.relatedTarget;i._tooltipNode.removeEventListener(t.type,n),e.contains(a)||i._scheduleHide(e,o.delay,o,r)})),!0)})),n=gi(gi({},vi),n),e.jquery&&(e=e[0]),this.show=this.show.bind(this),this.hide=this.hide.bind(this),this.reference=e,this.options=n,this._isOpen=!1,this._init()}return De()(t,[{key:"show",value:function(){this._show(this.reference,this.options)}},{key:"hide",value:function(){this._hide()}},{key:"dispose",value:function(){this._dispose()}},{key:"toggle",value:function(){return this._isOpen?this.hide():this.show()}},{key:"setClasses",value:function(t){this._classes=t}},{key:"setContent",value:function(t){this.options.title=t,this._tooltipNode&&this._setContent(t,this.options)}},{key:"setOptions",value:function(t){var e=!1,n=t&&t.classes||Oi.options.defaultClass;Zn()(this._classes,n)||(this.setClasses(n),e=!0),t=Si(t);var i=!1,o=!1;for(var r in this.options.offset===t.offset&&this.options.placement===t.placement||(i=!0),(this.options.template!==t.template||this.options.trigger!==t.trigger||this.options.container!==t.container||e)&&(o=!0),t)this.options[r]=t[r];if(this._tooltipNode)if(o){var a=this._isOpen;this.dispose(),this._init(),a&&this.show()}else i&&this.popperInstance.update()}},{key:"_init",value:function(){var t="string"==typeof this.options.trigger?this.options.trigger.split(" "):[];this._isDisposed=!1,this._enableDocumentTouch=-1===t.indexOf("manual"),t=t.filter((function(t){return-1!==["click","hover","focus"].indexOf(t)})),this._setEventListeners(this.reference,t,this.options),this.$_originalTitle=this.reference.getAttribute("title"),this.reference.removeAttribute("title"),this.reference.setAttribute("data-original-title",this.$_originalTitle)}},{key:"_create",value:function(t,e){var n=this,i=window.document.createElement("div");i.innerHTML=e.trim();var o=i.childNodes[0];return o.id=this.options.ariaId||"tooltip_".concat(Math.random().toString(36).substr(2,10)),o.setAttribute("aria-hidden","true"),this.options.autoHide&&-1!==this.options.trigger.indexOf("hover")&&(o.addEventListener("mouseenter",(function(e){return n._scheduleHide(t,n.options.delay,n.options,e)})),o.addEventListener("click",(function(e){return n._scheduleHide(t,n.options.delay,n.options,e)}))),o}},{key:"_setContent",value:function(t,e){var n=this;this.asyncContent=!1,this._applyContent(t,e).then((function(){n.popperInstance&&n.popperInstance.update()}))}},{key:"_applyContent",value:function(t,e){var n=this;return new Promise((function(i,o){var r=e.html,a=n._tooltipNode;if(a){var s=a.querySelector(n.options.innerSelector);if(1===t.nodeType){if(r){for(;s.firstChild;)s.removeChild(s.firstChild);s.appendChild(t)}}else{if("function"==typeof t){var l=t();return void(l&&"function"==typeof l.then?(n.asyncContent=!0,e.loadingClass&&pi(a,e.loadingClass),e.loadingContent&&n._applyContent(e.loadingContent,e),l.then((function(t){return e.loadingClass&&mi(a,e.loadingClass),n._applyContent(t,e)})).then(i).catch(o)):n._applyContent(l,e).then(i).catch(o))}r?s.innerHTML=t:s.innerText=t}i()}}))}},{key:"_show",value:function(t,e){if(e&&"string"==typeof e.container&&!document.querySelector(e.container))return;clearTimeout(this._disposeTimer),delete(e=Object.assign({},e)).offset;var n=!0;this._tooltipNode&&(pi(this._tooltipNode,this._classes),n=!1);var i=this._ensureShown(t,e);return n&&this._tooltipNode&&pi(this._tooltipNode,this._classes),pi(t,["v-tooltip-open"]),i}},{key:"_ensureShown",value:function(t,e){var n=this;if(this._isOpen)return this;if(this._isOpen=!0,yi.push(this),this._tooltipNode)return this._tooltipNode.style.display="",this._tooltipNode.setAttribute("aria-hidden","false"),this.popperInstance.enableEventListeners(),this.popperInstance.update(),this.asyncContent&&this._setContent(e.title,e),this;var i=t.getAttribute("title")||e.title;if(!i)return this;var o=this._create(t,e.template);this._tooltipNode=o,t.setAttribute("aria-describedby",o.id);var r=this._findContainer(e.container,t);this._append(o,r);var a=gi(gi({},e.popperOptions),{},{placement:e.placement});return a.modifiers=gi(gi({},a.modifiers),{},{arrow:{element:this.options.arrowSelector}}),e.boundariesElement&&(a.modifiers.preventOverflow={boundariesElement:e.boundariesElement}),this.popperInstance=new Qn(t,o,a),this._setContent(i,e),requestAnimationFrame((function(){!n._isDisposed&&n.popperInstance?(n.popperInstance.update(),requestAnimationFrame((function(){n._isDisposed?n.dispose():n._isOpen&&o.setAttribute("aria-hidden","false")}))):n.dispose()})),this}},{key:"_noLongerOpen",value:function(){var t=yi.indexOf(this);-1!==t&&yi.splice(t,1)}},{key:"_hide",value:function(){var t=this;if(!this._isOpen)return this;this._isOpen=!1,this._noLongerOpen(),this._tooltipNode.style.display="none",this._tooltipNode.setAttribute("aria-hidden","true"),this.popperInstance&&this.popperInstance.disableEventListeners(),clearTimeout(this._disposeTimer);var e=Oi.options.disposeTimeout;return null!==e&&(this._disposeTimer=setTimeout((function(){t._tooltipNode&&(t._tooltipNode.removeEventListener("mouseenter",t.hide),t._tooltipNode.removeEventListener("click",t.hide),t._removeTooltipNode())}),e)),mi(this.reference,["v-tooltip-open"]),this}},{key:"_removeTooltipNode",value:function(){if(this._tooltipNode){var t=this._tooltipNode.parentNode;t&&(t.removeChild(this._tooltipNode),this.reference.removeAttribute("aria-describedby")),this._tooltipNode=null}}},{key:"_dispose",value:function(){var t=this;return this._isDisposed=!0,this.reference.removeAttribute("data-original-title"),this.$_originalTitle&&this.reference.setAttribute("title",this.$_originalTitle),this._events.forEach((function(e){var n=e.func,i=e.event;t.reference.removeEventListener(i,n)})),this._events=[],this._tooltipNode?(this._hide(),this._tooltipNode.removeEventListener("mouseenter",this.hide),this._tooltipNode.removeEventListener("click",this.hide),this.popperInstance.destroy(),this.popperInstance.options.removeOnDestroy||this._removeTooltipNode()):this._noLongerOpen(),this}},{key:"_findContainer",value:function(t,e){return"string"==typeof t?t=window.document.querySelector(t):!1===t&&(t=e.parentNode),t}},{key:"_append",value:function(t,e){e.appendChild(t)}},{key:"_setEventListeners",value:function(t,e,n){var i=this,o=[],r=[];e.forEach((function(t){switch(t){case"hover":o.push("mouseenter"),r.push("mouseleave"),i.options.hideOnTargetClick&&r.push("click");break;case"focus":o.push("focus"),r.push("blur"),i.options.hideOnTargetClick&&r.push("click");break;case"click":o.push("click"),r.push("click")}})),o.forEach((function(e){var o=function(e){!0!==i._isOpen&&(e.usedByTooltip=!0,i._scheduleShow(t,n.delay,n,e))};i._events.push({event:e,func:o}),t.addEventListener(e,o)})),r.forEach((function(e){var o=function(e){!0!==e.usedByTooltip&&i._scheduleHide(t,n.delay,n,e)};i._events.push({event:e,func:o}),t.addEventListener(e,o)}))}},{key:"_onDocumentTouch",value:function(t){this._enableDocumentTouch&&this._scheduleHide(this.reference,this.options.delay,this.options,t)}},{key:"_scheduleShow",value:function(t,e,n){var i=this,o=e&&e.show||e||0;clearTimeout(this._scheduleTimer),this._scheduleTimer=window.setTimeout((function(){return i._show(t,n)}),o)}},{key:"_scheduleHide",value:function(t,e,n,i){var o=this,r=e&&e.hide||e||0;clearTimeout(this._scheduleTimer),this._scheduleTimer=window.setTimeout((function(){if(!1!==o._isOpen&&o._tooltipNode.ownerDocument.body.contains(o._tooltipNode)){if("mouseleave"===i.type)if(o._setTooltipNodeEvent(i,t,e,n))return;o._hide(t,n)}}),r)}}]),t}();function wi(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(t);e&&(i=i.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,i)}return n}function _i(t){for(var e=1;e
',defaultArrowSelector:".tooltip-arrow, .tooltip__arrow",defaultInnerSelector:".tooltip-inner, .tooltip__inner",defaultDelay:0,defaultTrigger:"hover focus",defaultOffset:0,defaultContainer:"body",defaultBoundariesElement:void 0,defaultPopperOptions:{},defaultLoadingClass:"tooltip-loading",defaultLoadingContent:"...",autoHide:!0,defaultHideOnTargetClick:!0,disposeTimeout:5e3,popover:{defaultPlacement:"bottom",defaultClass:"vue-popover-theme",defaultBaseClass:"tooltip popover",defaultWrapperClass:"wrapper",defaultInnerClass:"tooltip-inner popover-inner",defaultArrowClass:"tooltip-arrow popover-arrow",defaultOpenClass:"open",defaultDelay:0,defaultTrigger:"click",defaultOffset:0,defaultContainer:"body",defaultBoundariesElement:void 0,defaultPopperOptions:{},defaultAutoHide:!0,defaultHandleResize:!0}};function Si(t){var e={placement:void 0!==t.placement?t.placement:Oi.options.defaultPlacement,delay:void 0!==t.delay?t.delay:Oi.options.defaultDelay,html:void 0!==t.html?t.html:Oi.options.defaultHtml,template:void 0!==t.template?t.template:Oi.options.defaultTemplate,arrowSelector:void 0!==t.arrowSelector?t.arrowSelector:Oi.options.defaultArrowSelector,innerSelector:void 0!==t.innerSelector?t.innerSelector:Oi.options.defaultInnerSelector,trigger:void 0!==t.trigger?t.trigger:Oi.options.defaultTrigger,offset:void 0!==t.offset?t.offset:Oi.options.defaultOffset,container:void 0!==t.container?t.container:Oi.options.defaultContainer,boundariesElement:void 0!==t.boundariesElement?t.boundariesElement:Oi.options.defaultBoundariesElement,autoHide:void 0!==t.autoHide?t.autoHide:Oi.options.autoHide,hideOnTargetClick:void 0!==t.hideOnTargetClick?t.hideOnTargetClick:Oi.options.defaultHideOnTargetClick,loadingClass:void 0!==t.loadingClass?t.loadingClass:Oi.options.defaultLoadingClass,loadingContent:void 0!==t.loadingContent?t.loadingContent:Oi.options.defaultLoadingContent,popperOptions:_i({},void 0!==t.popperOptions?t.popperOptions:Oi.options.defaultPopperOptions)};if(e.offset){var n=Ie()(e.offset),i=e.offset;("number"===n||"string"===n&&-1===i.indexOf(","))&&(i="0, ".concat(i)),e.popperOptions.modifiers||(e.popperOptions.modifiers={}),e.popperOptions.modifiers.offset={offset:i}}return e.trigger&&-1!==e.trigger.indexOf("click")&&(e.hideOnTargetClick=!1),e}function Pi(t,e){for(var n=t.placement,i=0;i2&&void 0!==arguments[2]?arguments[2]:{},i=Ti(e),o=void 0!==e.classes?e.classes:Oi.options.defaultClass,r=_i({title:i},Si(_i(_i({},"object"===Ie()(e)?e:{}),{},{placement:Pi(e,n)}))),a=t._tooltip=new bi(t,r);a.setClasses(o),a._vueEl=t;var s=void 0!==e.targetClasses?e.targetClasses:Oi.options.defaultTargetClass;return t._tooltipTargetClasses=s,pi(t,s),a}(t,n,o),void 0!==n.show&&n.show!==t._tooltipOldShow&&(t._tooltipOldShow=n.show,n.show?i.show():i.hide())):zi(t)}var Oi={options:Ci,bind:Ei,update:Ei,unbind:function(t){zi(t)}};function Ai(t){t.addEventListener("click",Mi),t.addEventListener("touchstart",ji,!!di&&{passive:!0})}function $i(t){t.removeEventListener("click",Mi),t.removeEventListener("touchstart",ji),t.removeEventListener("touchend",Bi),t.removeEventListener("touchcancel",Li)}function Mi(t){var e=t.currentTarget;t.closePopover=!e.$_vclosepopover_touch,t.closeAllPopover=e.$_closePopoverModifiers&&!!e.$_closePopoverModifiers.all}function ji(t){if(1===t.changedTouches.length){var e=t.currentTarget;e.$_vclosepopover_touch=!0;var n=t.changedTouches[0];e.$_vclosepopover_touchPoint=n,e.addEventListener("touchend",Bi),e.addEventListener("touchcancel",Li)}}function Bi(t){var e=t.currentTarget;if(e.$_vclosepopover_touch=!1,1===t.changedTouches.length){var n=t.changedTouches[0],i=e.$_vclosepopover_touchPoint;t.closePopover=Math.abs(n.screenY-i.screenY)<20&&Math.abs(n.screenX-i.screenX)<20,t.closeAllPopover=e.$_closePopoverModifiers&&!!e.$_closePopoverModifiers.all}}function Li(t){t.currentTarget.$_vclosepopover_touch=!1}var Ii={bind:function(t,e){var n=e.value,i=e.modifiers;t.$_closePopoverModifiers=i,(void 0===n||n)&&Ai(t)},update:function(t,e){var n=e.value,i=e.oldValue,o=e.modifiers;t.$_closePopoverModifiers=o,n!==i&&(void 0===n||n?Ai(t):$i(t))},unbind:function(t){$i(t)}};function Wi(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(t);e&&(i=i.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,i)}return n}function Ni(t){for(var e=1;e0&&void 0!==arguments[0]?arguments[0]:{},n=e.event;e.skipDelay;var i=e.force,o=void 0!==i&&i;!o&&this.disabled||(this.$_scheduleShow(n),this.$emit("show")),this.$emit("update:open",!0),this.$_beingShowed=!0,requestAnimationFrame((function(){t.$_beingShowed=!1}))},hide:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},e=t.event;t.skipDelay,this.$_scheduleHide(e),this.$emit("hide"),this.$emit("update:open",!1)},dispose:function(){if(this.$_isDisposed=!0,this.$_removeEventListeners(),this.hide({skipDelay:!0}),this.popperInstance&&(this.popperInstance.destroy(),!this.popperInstance.options.removeOnDestroy)){var t=this.$refs.popover;t.parentNode&&t.parentNode.removeChild(t)}this.$_mounted=!1,this.popperInstance=null,this.isOpen=!1,this.$emit("dispose")},$_init:function(){-1===this.trigger.indexOf("manual")&&this.$_addEventListeners()},$_show:function(){var t=this,e=this.$refs.trigger,n=this.$refs.popover;if(clearTimeout(this.$_disposeTimer),!this.isOpen){if(this.popperInstance&&(this.isOpen=!0,this.popperInstance.enableEventListeners(),this.popperInstance.scheduleUpdate()),!this.$_mounted){var i=this.$_findContainer(this.container,e);if(!i)return void console.warn("No container for popover",this);i.appendChild(n),this.$_mounted=!0,this.isOpen=!1,this.popperInstance&&requestAnimationFrame((function(){t.hidden||(t.isOpen=!0)}))}if(!this.popperInstance){var o=Ni(Ni({},this.popperOptions),{},{placement:this.placement});if(o.modifiers=Ni(Ni({},o.modifiers),{},{arrow:Ni(Ni({},o.modifiers&&o.modifiers.arrow),{},{element:this.$refs.arrow})}),this.offset){var r=this.$_getOffset();o.modifiers.offset=Ni(Ni({},o.modifiers&&o.modifiers.offset),{},{offset:r})}this.boundariesElement&&(o.modifiers.preventOverflow=Ni(Ni({},o.modifiers&&o.modifiers.preventOverflow),{},{boundariesElement:this.boundariesElement})),this.popperInstance=new Qn(e,n,o),requestAnimationFrame((function(){if(t.hidden)return t.hidden=!1,void t.$_hide();!t.$_isDisposed&&t.popperInstance?(t.popperInstance.scheduleUpdate(),requestAnimationFrame((function(){if(t.hidden)return t.hidden=!1,void t.$_hide();t.$_isDisposed?t.dispose():t.isOpen=!0}))):t.dispose()}))}var a=this.openGroup;if(a)for(var s,l=0;l1&&void 0!==arguments[1]&&arguments[1];if(clearTimeout(this.$_scheduleTimer),t)this.$_show();else{var e=parseInt(this.delay&&this.delay.show||this.delay||0);this.$_scheduleTimer=setTimeout(this.$_show.bind(this),e)}},$_scheduleHide:function(){var t=this,e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null,n=arguments.length>1&&void 0!==arguments[1]&&arguments[1];if(clearTimeout(this.$_scheduleTimer),n)this.$_hide();else{var i=parseInt(this.delay&&this.delay.hide||this.delay||0);this.$_scheduleTimer=setTimeout((function(){if(t.isOpen){if(e&&"mouseleave"===e.type)if(t.$_setTooltipNodeEvent(e))return;t.$_hide()}}),i)}},$_setTooltipNodeEvent:function(t){var e=this,n=this.$refs.trigger,i=this.$refs.popover,o=t.relatedreference||t.toElement||t.relatedTarget;return!!i.contains(o)&&(i.addEventListener(t.type,(function o(r){var a=r.relatedreference||r.toElement||r.relatedTarget;i.removeEventListener(t.type,o),n.contains(a)||e.hide({event:r})})),!0)},$_removeEventListeners:function(){var t=this.$refs.trigger;this.$_events.forEach((function(e){var n=e.func,i=e.event;t.removeEventListener(i,n)})),this.$_events=[]},$_updatePopper:function(t){this.popperInstance&&(t(),this.isOpen&&this.popperInstance.scheduleUpdate())},$_restartPopper:function(){if(this.popperInstance){var t=this.isOpen;this.dispose(),this.$_isDisposed=!1,this.$_init(),t&&this.show({skipDelay:!0,force:!0})}},$_handleGlobalClose:function(t){var e=this,n=arguments.length>1&&void 0!==arguments[1]&&arguments[1];this.$_beingShowed||(this.hide({event:t}),t.closePopover?this.$emit("close-directive"):this.$emit("auto-hide"),n&&(this.$_preventOpen=!0,setTimeout((function(){e.$_preventOpen=!1}),300)))},$_handleResize:function(){this.isOpen&&this.popperInstance&&(this.popperInstance.scheduleUpdate(),this.$emit("resize"))}}};function Vi(t){for(var e=arguments.length>1&&void 0!==arguments[1]&&arguments[1],n=function(n){var i=Ri[n];if(i.$refs.popover){var o=i.$refs.popover.contains(t.target);requestAnimationFrame((function(){(t.closeAllPopover||t.closePopover&&o||i.autoHide&&!o)&&i.$_handleGlobalClose(t,e)}))}},i=0;i1&&void 0!==arguments[1]?arguments[1]:{};if(!t.installed){t.installed=!0;var i={};li()(i,Ci,n),Ji.options=i,Oi.options=i,e.directive("tooltip",Oi),e.directive("close-popover",Ii),e.component("VPopover",Ki)}},get enabled(){return ki.enabled},set enabled(t){ki.enabled=t}},Qi=null;"undefined"!=typeof window?Qi=window.Vue:"undefined"!=typeof global&&(Qi=global.Vue),Qi&&Qi.use(Ji);var Xi=Ji;n(276);i.a.component("ABackToTop",()=>n.e(60).then(n.bind(null,507))),i.a.component("AButton",()=>Promise.all([n.e(0),n.e(25)]).then(n.bind(null,508))),i.a.component("AChangelog",()=>n.e(61).then(n.bind(null,509))),i.a.component("ACommentCount",()=>Promise.all([n.e(0),n.e(26)]).then(n.bind(null,510))),i.a.component("AControl",()=>Promise.all([n.e(0),n.e(27)]).then(n.bind(null,511))),i.a.component("ACreated",()=>Promise.all([n.e(0),n.e(28)]).then(n.bind(null,512))),i.a.component("ADeeplink",()=>n.e(62).then(n.bind(null,513))),i.a.component("AGoogleAd",()=>Promise.all([n.e(0),n.e(29)]).then(n.bind(null,514))),i.a.component("AIcon",()=>Promise.all([n.e(0),n.e(30)]).then(n.bind(null,515))),i.a.component("AKey",()=>n.e(63).then(n.bind(null,516))),i.a.component("ANotation",()=>Promise.all([n.e(0),n.e(31)]).then(n.bind(null,517))),i.a.component("ARedirect",()=>n.e(64).then(n.bind(null,518))),i.a.component("ASponsorAd",()=>Promise.all([n.e(0),n.e(32)]).then(n.bind(null,519))),i.a.component("ATextToSpeech",()=>n.e(65).then(n.bind(null,520))),i.a.component("AThemeToggle",()=>n.e(66).then(n.bind(null,521))),i.a.component("AUpdated",()=>Promise.all([n.e(0),n.e(33)]).then(n.bind(null,522))),i.a.component("GSiteNotice",()=>Promise.all([n.e(0),n.e(56),n.e(34)]).then(n.bind(null,523))),i.a.component("GSiteSettings",()=>Promise.all([n.e(0),n.e(3),n.e(35)]).then(n.bind(null,524))),i.a.component("MAccessLinks",()=>Promise.all([n.e(0),n.e(40)]).then(n.bind(null,525))),i.a.component("MBlogLinks",()=>Promise.all([n.e(0),n.e(41)]).then(n.bind(null,526))),i.a.component("MBlogMeta",()=>Promise.all([n.e(0),n.e(42)]).then(n.bind(null,527))),i.a.component("MBlogTagList",()=>Promise.all([n.e(0),n.e(16)]).then(n.bind(null,528))),i.a.component("MBlogTagNav",()=>Promise.all([n.e(0),n.e(43)]).then(n.bind(null,529))),i.a.component("MComments",()=>Promise.all([n.e(0),n.e(44)]).then(n.bind(null,530))),i.a.component("MEmailSender",()=>Promise.all([n.e(0),n.e(45)]).then(n.bind(null,531))),i.a.component("MFeatures",()=>Promise.all([n.e(0),n.e(46)]).then(n.bind(null,532))),i.a.component("MFooter",()=>Promise.all([n.e(0),n.e(7)]).then(n.bind(null,533))),i.a.component("MSocialLinks",()=>Promise.all([n.e(0),n.e(47)]).then(n.bind(null,534))),i.a.component("Home-Hero",()=>Promise.all([n.e(0),n.e(10)]).then(n.bind(null,499))),i.a.component("Home-Preview",()=>Promise.all([n.e(0),n.e(36)]).then(n.bind(null,535))),i.a.component("Home-Reviews",()=>Promise.all([n.e(0),n.e(37)]).then(n.bind(null,536))),i.a.component("Home-Section",()=>Promise.all([n.e(0),n.e(38)]).then(n.bind(null,537))),i.a.component("Home-Videos",()=>Promise.all([n.e(0),n.e(39)]).then(n.bind(null,538))),i.a.component("Badge",()=>Promise.all([n.e(0),n.e(22)]).then(n.bind(null,608))),i.a.component("CodeBlock",()=>Promise.all([n.e(0),n.e(23)]).then(n.bind(null,539))),i.a.component("CodeGroup",()=>Promise.all([n.e(0),n.e(24)]).then(n.bind(null,540)));n(277),n(278);function Zi(t){const e=document.documentElement.getBoundingClientRect(),n=t.getBoundingClientRect();return{x:n.left-e.left,y:n.top-e.top}}var to={tag:{technical:{key:"technical",scope:"tag",path:"/blog/tag/technical/",pageKeys:["v-01aa2ce2","v-2fec31fc","v-ff74563c","v-4b7e6c3c","v-1131db82","v-3fb87dbc","v-4182c7bc","v-bfc8be7c","v-72bfdbc2"]},tips:{key:"tips",scope:"tag",path:"/blog/tag/tips/",pageKeys:["v-79f79f20","v-ac7b70bc","v-469b7b80","v-4b7e6c3c","v-fbbdb2e0","v-26dc8250","v-44a529fc","v-301172dc"]},sharing:{key:"sharing",scope:"tag",path:"/blog/tag/sharing/",pageKeys:["v-79f79f20","v-2fec31fc","v-667fa73c","v-ff74563c","v-ac7b70bc","v-fbbdb2e0","v-d08e737c","v-26dc8250","v-3fb87dbc","v-4182c7bc","v-bfc8be7c"]},"win7-simu":{key:"win7-simu",scope:"tag",path:"/blog/tag/win7-simu/",pageKeys:["v-2fec31fc","v-ac7b70bc","v-4b7e6c3c","v-fbbdb2e0","v-194e1218","v-3fb87dbc","v-4182c7bc","v-44a529fc","v-bfc8be7c","v-3424310c","v-301172dc"]},random:{key:"random",scope:"tag",path:"/blog/tag/random/",pageKeys:["v-667fa73c","v-469b7b80"]},"brick-1100":{key:"brick-1100",scope:"tag",path:"/blog/tag/brick-1100/",pageKeys:["v-ff74563c","v-194e1218"]},life:{key:"life",scope:"tag",path:"/blog/tag/life/",pageKeys:["v-d08e737c"]},review:{key:"review",scope:"tag",path:"/blog/tag/review/",pageKeys:["v-194e1218","v-3424310c"]},tools:{key:"tools",scope:"tag",path:"/blog/tag/tools/",pageKeys:["v-1131db82","v-72bfdbc2"]},"guest-post":{key:"guest-post",scope:"tag",path:"/blog/tag/guest-post/",pageKeys:["v-bfc8be7c"]}}};class eo{constructor(t,e){this._metaMap=Object.assign({},t),Object.keys(this._metaMap).forEach(t=>{const{pageKeys:n}=this._metaMap[t];this._metaMap[t].pages=n.map(t=>function(t,e){for(let n=0;n{const{pages:n,path:i}=this._metaMap[e];t.push({name:e,pages:n,path:i})}),t}getItemByName(t){return this._metaMap[t]}}var no={tag:(t,e)=>{const i=n(279);return i(t.frontmatter.date)-i(e.frontmatter.date)>0?-1:1}},io={tag:function(t,e,n){const i=e;return["tag","tags"].some(e=>{const n=t.frontmatter[e];return Array.isArray(n)?n.some(t=>t==i):n==i})}},oo=[{pid:"tag",id:"technical",filter:io.tag,sorter:no.tag,pages:[{path:"/blog/tag/technical/",interval:[0,9]}],prevText:"Prev",nextText:"Next"},{pid:"tag",id:"tips",filter:io.tag,sorter:no.tag,pages:[{path:"/blog/tag/tips/",interval:[0,8]}],prevText:"Prev",nextText:"Next"},{pid:"tag",id:"sharing",filter:io.tag,sorter:no.tag,pages:[{path:"/blog/tag/sharing/",interval:[0,9]},{path:"/blog/tag/sharing/page/2/",interval:[10,11]}],prevText:"Prev",nextText:"Next"},{pid:"tag",id:"win7-simu",filter:io.tag,sorter:no.tag,pages:[{path:"/blog/tag/win7-simu/",interval:[0,9]},{path:"/blog/tag/win7-simu/page/2/",interval:[10,11]}],prevText:"Prev",nextText:"Next"},{pid:"tag",id:"random",filter:io.tag,sorter:no.tag,pages:[{path:"/blog/tag/random/",interval:[0,2]}],prevText:"Prev",nextText:"Next"},{pid:"tag",id:"brick-1100",filter:io.tag,sorter:no.tag,pages:[{path:"/blog/tag/brick-1100/",interval:[0,2]}],prevText:"Prev",nextText:"Next"},{pid:"tag",id:"life",filter:io.tag,sorter:no.tag,pages:[{path:"/blog/tag/life/",interval:[0,1]}],prevText:"Prev",nextText:"Next"},{pid:"tag",id:"review",filter:io.tag,sorter:no.tag,pages:[{path:"/blog/tag/review/",interval:[0,2]}],prevText:"Prev",nextText:"Next"},{pid:"tag",id:"tools",filter:io.tag,sorter:no.tag,pages:[{path:"/blog/tag/tools/",interval:[0,2]}],prevText:"Prev",nextText:"Next"},{pid:"tag",id:"guest-post",filter:io.tag,sorter:no.tag,pages:[{path:"/blog/tag/guest-post/",interval:[0,1]}],prevText:"Prev",nextText:"Next"}],ro=n(125);const ao=n.n(ro)()("plugin-blog:pagination");class so{constructor(t,e,n){ao("pagination",t);const{pages:i,prevText:o,nextText:r}=t,{path:a}=n;this._prevText=o,this._nextText=r;for(let t=0,e=i.length;tt.filter(e,t.id,t.pid)).sort(t.sorter)}setIndexPage(t){this._indexPage=t}get length(){return this._paginationPages.length}get pages(){const[t,e]=this._currentPage.interval;return this._matchedPages.slice(t,e+1)}get hasPrev(){return 0!==this.paginationIndex}get prevLink(){return this.hasPrev?this.paginationIndex-1==0&&this._indexPage?this._indexPage:this._paginationPages[this.paginationIndex-1].path:null}get hasNext(){return this.paginationIndex!==this.length-1}get nextLink(){return this.hasNext?this._paginationPages[this.paginationIndex+1].path:null}get prevText(){return this._prevText}get nextText(){return this._nextText}getSpecificPageLink(t){return this._paginationPages[t].path}}const lo=new class{constructor(t){this.paginations=t}get pages(){return i.a.$vuepress.$get("siteData").pages}getPagination(t,e,n){ao("id",e),ao("pid",t);const i=this.paginations.filter(n=>n.id===e&&n.pid===t)[0];return new so(i,this.pages,n)}}(oo);var co={comment:{enabled:!1,service:""},email:{enabled:!1},feed:{rss:!0,atom:!0,json:!0}},uo={created(){void 0!==this.$ssrContext&&(this.$ssrContext.userHeadTags+=``)},methods:{computeURL(){return"https://visnalize.com"+this.$page.path}}},po=Object($e.a)(uo,(function(){return(0,this._self._c)("div")}),[],!1,null,null,null).exports,mo=n(107),ho=n.n(mo);i.a.component("TextToSpeech",()=>n.e(59).then(n.bind(null,609)));var fo=[({Vue:t,options:e,router:n,siteData:i})=>{t.use(Xi)},{},({Vue:t})=>{t.mixin({computed:{$dataBlock(){return this.$options.__data__block__}}})},{},{},({Vue:t,router:e})=>{e.options.scrollBehavior=(e,n,i)=>{if(i)return window.scrollTo({top:i.y,behavior:"smooth"});if(e.hash){if(t.$vuepress.$get("disableScrollBehavior"))return!1;const n=document.querySelector(e.hash);return!!n&&window.scrollTo({top:Zi(n).y,behavior:"smooth"})}return window.scrollTo({top:0,behavior:"smooth"})}},({Vue:t})=>{const e=Object.keys(to).map(t=>{const e=to[t],n="$"+t;return{[n](){const{pages:t}=this.$site;return new eo(e,t)},["$current"+(t.charAt(0).toUpperCase()+t.slice(1))](){const t=this.$route.meta.id;return this[n].getItemByName(t)}}}).reduce((t,e)=>(Object.assign(t,e),t),{});e.$frontmatterKey=function(){const t=this["$"+this.$route.meta.id];return t||null},t.mixin({computed:e})},({Vue:t})=>{t.mixin({computed:{$pagination(){return this.$route.meta.pid&&this.$route.meta.id?this.$getPagination(this.$route.meta.pid,this.$route.meta.id):null}},methods:{$getPagination(t,e){return e=e||t,lo.getPagination(t,e,this.$route)}}})},({Vue:t})=>{const e={$service:()=>co};t.mixin({computed:e})},({Vue:t,options:e})=>{t.component("Canonical",po)},ho.a,({Vue:t})=>{const e=JSON.parse('{"shortname":"visnalize"}'),i=e.name||"Disqus",o=()=>n.e(58).then(n.bind(null,541));delete e.name,t.component(i,{functional:!0,render(t,{parent:n,props:i}){let r;if(r="en-US"===n.$lang?"en":n.$lang.replace(/\-/,"_"),n._isMounted)return t(o,{props:Object.assign({language:r},e,i)});n.$once("hook:mounted",()=>{n.$forceUpdate()})}})},{}],go=["GSiteSettings","GSiteNotice","Canonical"];class vo extends class{constructor(){this.store=new i.a({data:{state:{}}})}$get(t){return this.store.state[t]}$set(t,e){i.a.set(this.store.state,t,e)}$emit(...t){this.store.$emit(...t)}$on(...t){this.store.$on(...t)}}{}Object.assign(vo.prototype,{getPageAsyncComponent:le,getLayoutAsyncComponent:ce,getAsyncComponent:ue,getVueComponent:pe});var yo={install(t){const e=new vo;t.$vuepress=e,t.prototype.$vuepress=e}};function bo(t,e){const n=e.toLowerCase();return t.options.routes.some(t=>t.path.toLowerCase()===n)}var wo={props:{pageKey:String,slotKey:{type:String,default:"default"}},render(t){const e=this.pageKey||this.$parent.$page.key;return de("pageKey",e),i.a.component(e)||i.a.component(e,le(e)),i.a.component(e)?t(e):t("")}},_o={functional:!0,props:{slotKey:String,required:!0},render:(t,{props:e,slots:n})=>t("div",{class:["content__"+e.slotKey]},n()[e.slotKey])},ko={computed:{openInNewWindowTitle(){return this.$themeLocaleConfig.openNewWindowText||"(opens new window)"}}},xo=(n(310),n(311),Object($e.a)(ko,(function(){var t=this._self._c;return t("span",[t("svg",{staticClass:"icon outbound",attrs:{xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",focusable:"false",x:"0px",y:"0px",viewBox:"0 0 100 100",width:"15",height:"15"}},[t("path",{attrs:{fill:"currentColor",d:"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"}}),this._v(" "),t("polygon",{attrs:{fill:"currentColor",points:"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"}})]),this._v(" "),t("span",{staticClass:"sr-only"},[this._v(this._s(this.openInNewWindowTitle))])])}),[],!1,null,null,null).exports),Co={functional:!0,render(t,{parent:e,children:n}){if(e._isMounted)return n;e.$once("hook:mounted",()=>{e.$forceUpdate()})}};i.a.config.productionTip=!1,i.a.use(Ht),i.a.use(yo),i.a.mixin(function(t,e,n=i.a){!function(t){t.locales&&Object.keys(t.locales).forEach(e=>{t.locales[e].path=e});Object.freeze(t)}(e),n.$vuepress.$set("siteData",e);const o=new(t(n.$vuepress.$get("siteData"))),r=Object.getOwnPropertyDescriptors(Object.getPrototypeOf(o)),a={};return Object.keys(r).reduce((t,e)=>(e.startsWith("$")&&(t[e]=r[e].get),t),a),{computed:a}}(t=>class{setPage(t){this.__page=t}get $site(){return t}get $themeConfig(){return this.$site.themeConfig}get $frontmatter(){return this.$page.frontmatter}get $localeConfig(){const{locales:t={}}=this.$site;let e,n;for(const i in t)"/"===i?n=t[i]:0===this.$page.path.indexOf(i)&&(e=t[i]);return e||n||{}}get $siteTitle(){return this.$localeConfig.title||this.$site.title||""}get $canonicalUrl(){const{canonicalUrl:t}=this.$page.frontmatter;return"string"==typeof t&&t}get $title(){const t=this.$page,{metaTitle:e}=this.$page.frontmatter;if("string"==typeof e)return e;const n=this.$siteTitle,i=t.frontmatter.home?null:t.frontmatter.title||t.title;return n?i?i+" | "+n:n:i||"VuePress"}get $description(){const t=function(t){if(t){const e=t.filter(t=>"description"===t.name)[0];if(e)return e.content}}(this.$page.frontmatter.meta);return t||(this.$page.frontmatter.description||this.$localeConfig.description||this.$site.description||"")}get $lang(){return this.$page.frontmatter.lang||this.$localeConfig.lang||"en-US"}get $localePath(){return this.$localeConfig.path||"/"}get $themeLocaleConfig(){return(this.$site.themeConfig.locales||{})[this.$localePath]||{}}get $page(){return this.__page?this.__page:function(t,e){for(let n=0;nn||(t.hash?!i.a.$vuepress.$get("disableScrollBehavior")&&{selector:decodeURIComponent(t.hash)}:{x:0,y:0})});!function(t){t.beforeEach((e,n,i)=>{if(bo(t,e.path))i();else if(/(\/|\.html)$/.test(e.path))if(/\/$/.test(e.path)){const n=e.path.replace(/\/$/,"")+".html";bo(t,n)?i(n):i()}else i();else{const n=e.path+"/",o=e.path+".html";bo(t,o)?i(o):bo(t,n)?i(n):i()}})}(n);const o={};try{await Promise.all(fo.filter(t=>"function"==typeof t).map(e=>e({Vue:i.a,options:o,router:n,siteData:Be,isServer:t})))}catch(t){console.error(t)}return{app:new i.a(Object.assign(o,{router:n,render:t=>t("div",{attrs:{id:"app"}},[t("RouterView",{ref:"layout"}),t("div",{class:"global-ui"},go.map(e=>t(e)))])})),router:n}}(!1).then(({app:t,router:e})=>{e.onReady(()=>{t.$mount("#app")})})}]); \ No newline at end of file + */function o(t,e){for(var n in e)t[n]=e[n];return t}var r=/[!'()*]/g,a=function(t){return"%"+t.charCodeAt(0).toString(16)},s=/%2C/g,l=function(t){return encodeURIComponent(t).replace(r,a).replace(s,",")};function c(t){try{return decodeURIComponent(t)}catch(t){0}return t}var u=function(t){return null==t||"object"==typeof t?t:String(t)};function p(t){var e={};return(t=t.trim().replace(/^(\?|#|&)/,""))?(t.split("&").forEach((function(t){var n=t.replace(/\+/g," ").split("="),i=c(n.shift()),o=n.length>0?c(n.join("=")):null;void 0===e[i]?e[i]=o:Array.isArray(e[i])?e[i].push(o):e[i]=[e[i],o]})),e):e}function m(t){var e=t?Object.keys(t).map((function(e){var n=t[e];if(void 0===n)return"";if(null===n)return l(e);if(Array.isArray(n)){var i=[];return n.forEach((function(t){void 0!==t&&(null===t?i.push(l(e)):i.push(l(e)+"="+l(t)))})),i.join("&")}return l(e)+"="+l(n)})).filter((function(t){return t.length>0})).join("&"):null;return e?"?"+e:""}var d=/\/?$/;function h(t,e,n,i){var o=i&&i.options.stringifyQuery,r=e.query||{};try{r=f(r)}catch(t){}var a={name:e.name||t&&t.name,meta:t&&t.meta||{},path:e.path||"/",hash:e.hash||"",query:r,params:e.params||{},fullPath:y(e,o),matched:t?v(t):[]};return n&&(a.redirectedFrom=y(n,o)),Object.freeze(a)}function f(t){if(Array.isArray(t))return t.map(f);if(t&&"object"==typeof t){var e={};for(var n in t)e[n]=f(t[n]);return e}return t}var g=h(null,{path:"/"});function v(t){for(var e=[];t;)e.unshift(t),t=t.parent;return e}function y(t,e){var n=t.path,i=t.query;void 0===i&&(i={});var o=t.hash;return void 0===o&&(o=""),(n||"/")+(e||m)(i)+o}function b(t,e,n){return e===g?t===e:!!e&&(t.path&&e.path?t.path.replace(d,"")===e.path.replace(d,"")&&(n||t.hash===e.hash&&w(t.query,e.query)):!(!t.name||!e.name)&&(t.name===e.name&&(n||t.hash===e.hash&&w(t.query,e.query)&&w(t.params,e.params))))}function w(t,e){if(void 0===t&&(t={}),void 0===e&&(e={}),!t||!e)return t===e;var n=Object.keys(t).sort(),i=Object.keys(e).sort();return n.length===i.length&&n.every((function(n,o){var r=t[n];if(i[o]!==n)return!1;var a=e[n];return null==r||null==a?r===a:"object"==typeof r&&"object"==typeof a?w(r,a):String(r)===String(a)}))}function _(t){for(var e=0;e=0&&(e=t.slice(i),t=t.slice(0,i));var o=t.indexOf("?");return o>=0&&(n=t.slice(o+1),t=t.slice(0,o)),{path:t,query:n,hash:e}}(r.path||""),m=e&&e.path||"/",d=c.path?C(c.path,m,n||r.append):m,h=function(t,e,n){void 0===e&&(e={});var i,o=n||p;try{i=o(t||"")}catch(t){i={}}for(var r in e){var a=e[r];i[r]=Array.isArray(a)?a.map(u):u(a)}return i}(c.query,r.query,i&&i.options.parseQuery),f=r.hash||c.hash;return f&&"#"!==f.charAt(0)&&(f="#"+f),{_normalized:!0,path:d,query:h,hash:f}}var V,H=function(){},G={name:"RouterLink",props:{to:{type:[String,Object],required:!0},tag:{type:String,default:"a"},custom:Boolean,exact:Boolean,exactPath:Boolean,append:Boolean,replace:Boolean,activeClass:String,exactActiveClass:String,ariaCurrentValue:{type:String,default:"page"},event:{type:[String,Array],default:"click"}},render:function(t){var e=this,n=this.$router,i=this.$route,r=n.resolve(this.to,i,this.append),a=r.location,s=r.route,l=r.href,c={},u=n.options.linkActiveClass,p=n.options.linkExactActiveClass,m=null==u?"router-link-active":u,f=null==p?"router-link-exact-active":p,g=null==this.activeClass?m:this.activeClass,v=null==this.exactActiveClass?f:this.exactActiveClass,y=s.redirectedFrom?h(null,F(s.redirectedFrom),null,n):s;c[v]=b(i,y,this.exactPath),c[g]=this.exact||this.exactPath?c[v]:function(t,e){return 0===t.path.replace(d,"/").indexOf(e.path.replace(d,"/"))&&(!e.hash||t.hash===e.hash)&&function(t,e){for(var n in e)if(!(n in t))return!1;return!0}(t.query,e.query)}(i,y);var w=c[v]?this.ariaCurrentValue:null,_=function(t){Y(t)&&(e.replace?n.replace(a,H):n.push(a,H))},k={click:Y};Array.isArray(this.event)?this.event.forEach((function(t){k[t]=_})):k[this.event]=_;var x={class:c},C=!this.$scopedSlots.$hasNormal&&this.$scopedSlots.default&&this.$scopedSlots.default({href:l,route:s,navigate:_,isActive:c[g],isExactActive:c[v]});if(C){if(1===C.length)return C[0];if(C.length>1||!C.length)return 0===C.length?t():t("span",{},C)}if("a"===this.tag)x.on=k,x.attrs={href:l,"aria-current":w};else{var S=function t(e){var n;if(e)for(var i=0;i-1&&(s.params[m]=n.params[m]);return s.path=D(u.path,s.params),l(u,s,a)}if(s.path){s.params={};for(var d=0;d-1}function St(t,e){return Ct(t)&&t._isRouter&&(null==e||t.type===e)}function Pt(t,e,n){var i=function(o){o>=t.length?n():t[o]?e(t[o],(function(){i(o+1)})):i(o+1)};i(0)}function Tt(t){return function(e,n,i){var o=!1,r=0,a=null;zt(t,(function(t,e,n,s){if("function"==typeof t&&void 0===t.cid){o=!0,r++;var l,c=At((function(e){var o;((o=e).__esModule||Ot&&"Module"===o[Symbol.toStringTag])&&(e=e.default),t.resolved="function"==typeof e?e:V.extend(e),n.components[s]=e,--r<=0&&i()})),u=At((function(t){var e="Failed to resolve async component "+s+": "+t;a||(a=Ct(t)?t:new Error(e),i(a))}));try{l=t(c,u)}catch(t){u(t)}if(l)if("function"==typeof l.then)l.then(c,u);else{var p=l.component;p&&"function"==typeof p.then&&p.then(c,u)}}})),o||i()}}function zt(t,e){return Et(t.map((function(t){return Object.keys(t.components).map((function(n){return e(t.components[n],t.instances[n],t,n)}))})))}function Et(t){return Array.prototype.concat.apply([],t)}var Ot="function"==typeof Symbol&&"symbol"==typeof Symbol.toStringTag;function At(t){var e=!1;return function(){for(var n=[],i=arguments.length;i--;)n[i]=arguments[i];if(!e)return e=!0,t.apply(this,n)}}var $t=function(t,e){this.router=t,this.base=function(t){if(!t)if(K){var e=document.querySelector("base");t=(t=e&&e.getAttribute("href")||"/").replace(/^https?:\/\/[^\/]+/,"")}else t="/";"/"!==t.charAt(0)&&(t="/"+t);return t.replace(/\/$/,"")}(e),this.current=g,this.pending=null,this.ready=!1,this.readyCbs=[],this.readyErrorCbs=[],this.errorCbs=[],this.listeners=[]};function Mt(t,e,n,i){var o=zt(t,(function(t,i,o,r){var a=function(t,e){"function"!=typeof t&&(t=V.extend(t));return t.options[e]}(t,e);if(a)return Array.isArray(a)?a.map((function(t){return n(t,i,o,r)})):n(a,i,o,r)}));return Et(i?o.reverse():o)}function jt(t,e){if(e)return function(){return t.apply(e,arguments)}}$t.prototype.listen=function(t){this.cb=t},$t.prototype.onReady=function(t,e){this.ready?t():(this.readyCbs.push(t),e&&this.readyErrorCbs.push(e))},$t.prototype.onError=function(t){this.errorCbs.push(t)},$t.prototype.transitionTo=function(t,e,n){var i,o=this;try{i=this.router.match(t,this.current)}catch(t){throw this.errorCbs.forEach((function(e){e(t)})),t}var r=this.current;this.confirmTransition(i,(function(){o.updateRoute(i),e&&e(i),o.ensureURL(),o.router.afterHooks.forEach((function(t){t&&t(i,r)})),o.ready||(o.ready=!0,o.readyCbs.forEach((function(t){t(i)})))}),(function(t){n&&n(t),t&&!o.ready&&(St(t,bt.redirected)&&r===g||(o.ready=!0,o.readyErrorCbs.forEach((function(e){e(t)}))))}))},$t.prototype.confirmTransition=function(t,e,n){var i=this,o=this.current;this.pending=t;var r,a,s=function(t){!St(t)&&Ct(t)&&(i.errorCbs.length?i.errorCbs.forEach((function(e){e(t)})):console.error(t)),n&&n(t)},l=t.matched.length-1,c=o.matched.length-1;if(b(t,o)&&l===c&&t.matched[l]===o.matched[c])return this.ensureURL(),t.hash&&st(this.router,o,t,!1),s(((a=kt(r=o,t,bt.duplicated,'Avoided redundant navigation to current location: "'+r.fullPath+'".')).name="NavigationDuplicated",a));var u=function(t,e){var n,i=Math.max(t.length,e.length);for(n=0;n0)){var e=this.router,n=e.options.scrollBehavior,i=gt&&n;i&&this.listeners.push(at());var o=function(){var n=t.current,o=Lt(t.base);t.current===g&&o===t._startLocation||t.transitionTo(o,(function(t){i&&st(e,t,n,!0)}))};window.addEventListener("popstate",o),this.listeners.push((function(){window.removeEventListener("popstate",o)}))}},e.prototype.go=function(t){window.history.go(t)},e.prototype.push=function(t,e,n){var i=this,o=this.current;this.transitionTo(t,(function(t){vt(S(i.base+t.fullPath)),st(i.router,t,o,!1),e&&e(t)}),n)},e.prototype.replace=function(t,e,n){var i=this,o=this.current;this.transitionTo(t,(function(t){yt(S(i.base+t.fullPath)),st(i.router,t,o,!1),e&&e(t)}),n)},e.prototype.ensureURL=function(t){if(Lt(this.base)!==this.current.fullPath){var e=S(this.base+this.current.fullPath);t?vt(e):yt(e)}},e.prototype.getCurrentLocation=function(){return Lt(this.base)},e}($t);function Lt(t){var e=window.location.pathname,n=e.toLowerCase(),i=t.toLowerCase();return!t||n!==i&&0!==n.indexOf(S(i+"/"))||(e=e.slice(t.length)),(e||"/")+window.location.search+window.location.hash}var It=function(t){function e(e,n,i){t.call(this,e,n),i&&function(t){var e=Lt(t);if(!/^\/#/.test(e))return window.location.replace(S(t+"/#"+e)),!0}(this.base)||Wt()}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.setupListeners=function(){var t=this;if(!(this.listeners.length>0)){var e=this.router.options.scrollBehavior,n=gt&&e;n&&this.listeners.push(at());var i=function(){var e=t.current;Wt()&&t.transitionTo(Nt(),(function(i){n&&st(t.router,i,e,!0),gt||Rt(i.fullPath)}))},o=gt?"popstate":"hashchange";window.addEventListener(o,i),this.listeners.push((function(){window.removeEventListener(o,i)}))}},e.prototype.push=function(t,e,n){var i=this,o=this.current;this.transitionTo(t,(function(t){qt(t.fullPath),st(i.router,t,o,!1),e&&e(t)}),n)},e.prototype.replace=function(t,e,n){var i=this,o=this.current;this.transitionTo(t,(function(t){Rt(t.fullPath),st(i.router,t,o,!1),e&&e(t)}),n)},e.prototype.go=function(t){window.history.go(t)},e.prototype.ensureURL=function(t){var e=this.current.fullPath;Nt()!==e&&(t?qt(e):Rt(e))},e.prototype.getCurrentLocation=function(){return Nt()},e}($t);function Wt(){var t=Nt();return"/"===t.charAt(0)||(Rt("/"+t),!1)}function Nt(){var t=window.location.href,e=t.indexOf("#");return e<0?"":t=t.slice(e+1)}function Ut(t){var e=window.location.href,n=e.indexOf("#");return(n>=0?e.slice(0,n):e)+"#"+t}function qt(t){gt?vt(Ut(t)):window.location.hash=t}function Rt(t){gt?yt(Ut(t)):window.location.replace(Ut(t))}var Dt=function(t){function e(e,n){t.call(this,e,n),this.stack=[],this.index=-1}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.push=function(t,e,n){var i=this;this.transitionTo(t,(function(t){i.stack=i.stack.slice(0,i.index+1).concat(t),i.index++,e&&e(t)}),n)},e.prototype.replace=function(t,e,n){var i=this;this.transitionTo(t,(function(t){i.stack=i.stack.slice(0,i.index).concat(t),e&&e(t)}),n)},e.prototype.go=function(t){var e=this,n=this.index+t;if(!(n<0||n>=this.stack.length)){var i=this.stack[n];this.confirmTransition(i,(function(){var t=e.current;e.index=n,e.updateRoute(i),e.router.afterHooks.forEach((function(e){e&&e(i,t)}))}),(function(t){St(t,bt.duplicated)&&(e.index=n)}))}},e.prototype.getCurrentLocation=function(){var t=this.stack[this.stack.length-1];return t?t.fullPath:"/"},e.prototype.ensureURL=function(){},e}($t),Ft=function(t){void 0===t&&(t={}),this.app=null,this.apps=[],this.options=t,this.beforeHooks=[],this.resolveHooks=[],this.afterHooks=[],this.matcher=X(t.routes||[],this);var e=t.mode||"hash";switch(this.fallback="history"===e&&!gt&&!1!==t.fallback,this.fallback&&(e="hash"),K||(e="abstract"),this.mode=e,e){case"history":this.history=new Bt(this,t.base);break;case"hash":this.history=new It(this,t.base,this.fallback);break;case"abstract":this.history=new Dt(this,t.base);break;default:0}},Vt={currentRoute:{configurable:!0}};Ft.prototype.match=function(t,e,n){return this.matcher.match(t,e,n)},Vt.currentRoute.get=function(){return this.history&&this.history.current},Ft.prototype.init=function(t){var e=this;if(this.apps.push(t),t.$once("hook:destroyed",(function(){var n=e.apps.indexOf(t);n>-1&&e.apps.splice(n,1),e.app===t&&(e.app=e.apps[0]||null),e.app||e.history.teardown()})),!this.app){this.app=t;var n=this.history;if(n instanceof Bt||n instanceof It){var i=function(t){n.setupListeners(),function(t){var i=n.current,o=e.options.scrollBehavior;gt&&o&&"fullPath"in t&&st(e,t,i,!1)}(t)};n.transitionTo(n.getCurrentLocation(),i,i)}n.listen((function(t){e.apps.forEach((function(e){e._route=t}))}))}},Ft.prototype.beforeEach=function(t){return Gt(this.beforeHooks,t)},Ft.prototype.beforeResolve=function(t){return Gt(this.resolveHooks,t)},Ft.prototype.afterEach=function(t){return Gt(this.afterHooks,t)},Ft.prototype.onReady=function(t,e){this.history.onReady(t,e)},Ft.prototype.onError=function(t){this.history.onError(t)},Ft.prototype.push=function(t,e,n){var i=this;if(!e&&!n&&"undefined"!=typeof Promise)return new Promise((function(e,n){i.history.push(t,e,n)}));this.history.push(t,e,n)},Ft.prototype.replace=function(t,e,n){var i=this;if(!e&&!n&&"undefined"!=typeof Promise)return new Promise((function(e,n){i.history.replace(t,e,n)}));this.history.replace(t,e,n)},Ft.prototype.go=function(t){this.history.go(t)},Ft.prototype.back=function(){this.go(-1)},Ft.prototype.forward=function(){this.go(1)},Ft.prototype.getMatchedComponents=function(t){var e=t?t.matched?t:this.resolve(t).route:this.currentRoute;return e?[].concat.apply([],e.matched.map((function(t){return Object.keys(t.components).map((function(e){return t.components[e]}))}))):[]},Ft.prototype.resolve=function(t,e,n){var i=F(t,e=e||this.history.current,n,this),o=this.match(i,e),r=o.redirectedFrom||o.fullPath;return{location:i,route:o,href:function(t,e,n){var i="hash"===n?"#"+e:e;return t?S(t+"/"+i):i}(this.history.base,r,this.mode),normalizedTo:i,resolved:o}},Ft.prototype.getRoutes=function(){return this.matcher.getRoutes()},Ft.prototype.addRoute=function(t,e){this.matcher.addRoute(t,e),this.history.current!==g&&this.history.transitionTo(this.history.getCurrentLocation())},Ft.prototype.addRoutes=function(t){this.matcher.addRoutes(t),this.history.current!==g&&this.history.transitionTo(this.history.getCurrentLocation())},Object.defineProperties(Ft.prototype,Vt);var Ht=Ft;function Gt(t,e){return t.push(e),function(){var n=t.indexOf(e);n>-1&&t.splice(n,1)}}Ft.install=function t(e){if(!t.installed||V!==e){t.installed=!0,V=e;var n=function(t){return void 0!==t},i=function(t,e){var i=t.$options._parentVnode;n(i)&&n(i=i.data)&&n(i=i.registerRouteInstance)&&i(t,e)};e.mixin({beforeCreate:function(){n(this.$options.router)?(this._routerRoot=this,this._router=this.$options.router,this._router.init(this),e.util.defineReactive(this,"_route",this._router.history.current)):this._routerRoot=this.$parent&&this.$parent._routerRoot||this,i(this,this)},destroyed:function(){i(this)}}),Object.defineProperty(e.prototype,"$router",{get:function(){return this._routerRoot._router}}),Object.defineProperty(e.prototype,"$route",{get:function(){return this._routerRoot._route}}),e.component("RouterView",k),e.component("RouterLink",G);var o=e.config.optionMergeStrategies;o.beforeRouteEnter=o.beforeRouteLeave=o.beforeRouteUpdate=o.created}},Ft.version="3.6.5",Ft.isNavigationFailure=St,Ft.NavigationFailureType=bt,Ft.START_LOCATION=g,K&&window.Vue&&window.Vue.use(Ft);n(63);n(61),n(62);var Yt={NotFound:()=>n.e(57).then(n.bind(null,500)),Layout:()=>Promise.all([n.e(0),n.e(1)]).then(n.bind(null,317)),BlogList:()=>Promise.all([n.e(0),n.e(1),n.e(17)]).then(n.bind(null,501)),BlogPost:()=>Promise.all([n.e(0),n.e(1),n.e(8)]).then(n.bind(null,502)),FeatureList:()=>Promise.all([n.e(0),n.e(1),n.e(11)]).then(n.bind(null,503)),FeaturePage:()=>Promise.all([n.e(0),n.e(1),n.e(9)]).then(n.bind(null,504)),Visnalize:()=>Promise.all([n.e(0),n.e(1),n.e(48)]).then(n.bind(null,318)),WithComments:()=>Promise.all([n.e(0),n.e(1),n.e(18)]).then(n.bind(null,505)),WithSideAds:()=>Promise.all([n.e(0),n.e(1),n.e(19)]).then(n.bind(null,506))},Kt={"v-7cbecfe2":()=>n.e(67).then(n.bind(null,542)),"v-79f79f20":()=>n.e(12).then(n.bind(null,543)),"v-01aa2ce2":()=>n.e(54).then(n.bind(null,544)),"v-2fec31fc":()=>n.e(68).then(n.bind(null,545)),"v-667fa73c":()=>n.e(69).then(n.bind(null,546)),"v-ac7b70bc":()=>n.e(49).then(n.bind(null,547)),"v-469b7b80":()=>n.e(13).then(n.bind(null,548)),"v-ff74563c":()=>n.e(70).then(n.bind(null,549)),"v-4b7e6c3c":()=>n.e(14).then(n.bind(null,550)),"v-17861269":()=>n.e(71).then(n.bind(null,551)),"v-fbbdb2e0":()=>n.e(72).then(n.bind(null,552)),"v-d08e737c":()=>Promise.all([n.e(0),n.e(4)]).then(n.bind(null,553)),"v-194e1218":()=>n.e(20).then(n.bind(null,554)),"v-26dc8250":()=>n.e(73).then(n.bind(null,555)),"v-1131db82":()=>n.e(74).then(n.bind(null,556)),"v-4182c7bc":()=>n.e(51).then(n.bind(null,557)),"v-44a529fc":()=>n.e(52).then(n.bind(null,558)),"v-3fb87dbc":()=>n.e(50).then(n.bind(null,559)),"v-bfc8be7c":()=>n.e(53).then(n.bind(null,560)),"v-72bfdbc2":()=>n.e(75).then(n.bind(null,561)),"v-3424310c":()=>n.e(21).then(n.bind(null,562)),"v-301172dc":()=>n.e(76).then(n.bind(null,563)),"v-6796123c":()=>n.e(77).then(n.bind(null,564)),"v-3692f0a2":()=>n.e(78).then(n.bind(null,565)),"v-84d6517c":()=>n.e(79).then(n.bind(null,566)),"v-7716093c":()=>n.e(5).then(n.bind(null,567)),"v-16be053c":()=>n.e(80).then(n.bind(null,568)),"v-6444650a":()=>n.e(81).then(n.bind(null,569)),"v-2af59a42":()=>n.e(82).then(n.bind(null,570)),"v-6cc96c82":()=>n.e(83).then(n.bind(null,571)),"v-98844e8a":()=>n.e(84).then(n.bind(null,572)),"v-08727ec0":()=>n.e(85).then(n.bind(null,573)),"v-ba31739c":()=>n.e(86).then(n.bind(null,574)),"v-8cd4b9a4":()=>n.e(87).then(n.bind(null,575)),"v-e8bf05a2":()=>n.e(88).then(n.bind(null,576)),"v-738e1022":()=>n.e(89).then(n.bind(null,577)),"v-0d73ba82":()=>n.e(91).then(n.bind(null,578)),"v-530b246c":()=>n.e(90).then(n.bind(null,579)),"v-7c23e4bc":()=>n.e(92).then(n.bind(null,580)),"v-3dbeba22":()=>n.e(93).then(n.bind(null,581)),"v-33b74904":()=>n.e(94).then(n.bind(null,582)),"v-1f96767c":()=>n.e(95).then(n.bind(null,583)),"v-6baf4482":()=>n.e(96).then(n.bind(null,584)),"v-10412362":()=>n.e(98).then(n.bind(null,585)),"v-2ddd3eac":()=>n.e(97).then(n.bind(null,586)),"v-aa648488":()=>n.e(100).then(n.bind(null,587)),"v-1e6132e6":()=>n.e(99).then(n.bind(null,588)),"v-ff06623c":()=>n.e(101).then(n.bind(null,589)),"v-856c7aa8":()=>n.e(102).then(n.bind(null,590)),"v-6078d960":()=>n.e(105).then(n.bind(null,591)),"v-605a7f7c":()=>n.e(104).then(n.bind(null,592)),"v-7d425f36":()=>n.e(103).then(n.bind(null,593)),"v-6e4fcf02":()=>n.e(106).then(n.bind(null,594)),"v-9c0e9874":()=>n.e(107).then(n.bind(null,595)),"v-50afd23c":()=>n.e(109).then(n.bind(null,596)),"v-190bf8bc":()=>n.e(110).then(n.bind(null,597)),"v-496f6bc2":()=>n.e(112).then(n.bind(null,598)),"v-482face2":()=>n.e(108).then(n.bind(null,599)),"v-6a81288c":()=>n.e(111).then(n.bind(null,600)),"v-9c5b69dc":()=>n.e(113).then(n.bind(null,601)),"v-e435f744":()=>n.e(114).then(n.bind(null,602)),"v-10fbe366":()=>n.e(115).then(n.bind(null,603)),"v-51b76d92":()=>n.e(116).then(n.bind(null,604)),"v-007b4402":()=>n.e(6).then(n.bind(null,605)),"v-2cf24a82":()=>n.e(15).then(n.bind(null,606)),"v-05767d49":()=>n.e(55).then(n.bind(null,607))};function Jt(t){const e=Object.create(null);return function(n){return e[n]||(e[n]=t(n))}}const Qt=/-(\w)/g,Xt=Jt(t=>t.replace(Qt,(t,e)=>e?e.toUpperCase():"")),Zt=/\B([A-Z])/g,te=Jt(t=>t.replace(Zt,"-$1").toLowerCase()),ee=Jt(t=>t.charAt(0).toUpperCase()+t.slice(1));function ne(t,e){if(!e)return;if(t(e))return t(e);return e.includes("-")?t(ee(Xt(e))):t(ee(e))||t(te(e))}const ie=Object.assign({},Yt,Kt),oe=t=>ie[t],re=t=>Kt[t],ae=t=>Yt[t],se=t=>i.a.component(t);function le(t){return ne(re,t)}function ce(t){return ne(ae,t)}function ue(t){return ne(oe,t)}function pe(t){return ne(se,t)}function me(...t){return Promise.all(t.filter(t=>t).map(async t=>{if(!pe(t)&&ue(t)){const e=await ue(t)();i.a.component(t,e.default)}}))}function de(t,e){"undefined"!=typeof window&&window.__VUEPRESS__&&(window.__VUEPRESS__[t]=e)}var he=n(117),fe=n.n(he),ge=n(118),ve=n.n(ge),ye={created(){if(this.siteMeta=this.$site.headTags.filter(([t])=>"meta"===t).map(([t,e])=>e),this.$ssrContext){const e=this.getMergedMetaTags();this.$ssrContext.title=this.$title,this.$ssrContext.lang=this.$lang,this.$ssrContext.pageMeta=(t=e)?t.map(t=>{let e="{e+=` ${n}="${ve()(t[n])}"`}),e+">"}).join("\n "):"",this.$ssrContext.canonicalLink=we(this.$canonicalUrl)}var t},mounted(){this.currentMetaTags=[...document.querySelectorAll("meta")],this.updateMeta(),this.updateCanonicalLink()},methods:{updateMeta(){document.title=this.$title,document.documentElement.lang=this.$lang;const t=this.getMergedMetaTags();this.currentMetaTags=_e(t,this.currentMetaTags)},getMergedMetaTags(){const t=this.$page.frontmatter.meta||[];return fe()([{name:"description",content:this.$description}],t,this.siteMeta,ke)},updateCanonicalLink(){be(),this.$canonicalUrl&&document.head.insertAdjacentHTML("beforeend",we(this.$canonicalUrl))}},watch:{$page(){this.updateMeta(),this.updateCanonicalLink()}},beforeDestroy(){_e(null,this.currentMetaTags),be()}};function be(){const t=document.querySelector("link[rel='canonical']");t&&t.remove()}function we(t=""){return t?``:""}function _e(t,e){if(e&&[...e].filter(t=>t.parentNode===document.head).forEach(t=>document.head.removeChild(t)),t)return t.map(t=>{const e=document.createElement("meta");return Object.keys(t).forEach(n=>{e.setAttribute(n,t[n])}),document.head.appendChild(e),e})}function ke(t){for(const e of["name","property","itemprop"])if(t.hasOwnProperty(e))return t[e]+e;return JSON.stringify(t)}var xe=n(119),Ce={mounted(){window.addEventListener("scroll",this.onScroll)},methods:{onScroll:n.n(xe)()((function(){this.setActiveHash()}),300),setActiveHash(){const t=[].slice.call(document.querySelectorAll(".sidebar-link")),e=[].slice.call(document.querySelectorAll(".header-anchor")).filter(e=>t.some(t=>t.hash===e.hash)),n=Math.max(window.pageYOffset,document.documentElement.scrollTop,document.body.scrollTop),i=Math.max(document.documentElement.scrollHeight,document.body.scrollHeight),o=window.innerHeight+n;for(let t=0;t=r.parentElement.offsetTop+10&&(!a||n{this.$nextTick(()=>{this.$vuepress.$set("disableScrollBehavior",!1)})})}}}},beforeDestroy(){window.removeEventListener("scroll",this.onScroll)}},Se=n(32),Pe=n.n(Se),Te={mounted(){Pe.a.configure({showSpinner:!1}),this.$router.beforeEach((t,e,n)=>{t.path===e.path||i.a.component(t.name)||Pe.a.start(),n()}),this.$router.afterEach(()=>{Pe.a.done(),this.isSidebarOpen=!1})}},ze=n(120),Ee=n.n(ze),Oe=[ye,Ce,Te,{mounted(){Ee.a.polyfill()}}],Ae={name:"GlobalLayout",computed:{layout(){const t=this.getLayout();return de("layout",t),i.a.component(t)}},methods:{getLayout(){if(this.$page.path){const t=this.$page.frontmatter.layout;return t&&(this.$vuepress.getLayoutAsyncComponent(t)||this.$vuepress.getVueComponent(t))?t:"Layout"}return"NotFound"}}},$e=n(16),Me=Object($e.a)(Ae,(function(){return(0,this._self._c)(this.layout,{tag:"component"})}),[],!1,null,null,null).exports;!function(t,e,n){switch(e){case"components":t[e]||(t[e]={}),Object.assign(t[e],n);break;case"mixins":t[e]||(t[e]=[]),t[e].push(...n);break;default:throw new Error("Unknown option name.")}}(Me,"mixins",Oe);const je=[{name:"v-7cbecfe2",path:"/about.html",component:Me,beforeEnter:(t,e,n)=>{me("Layout","v-7cbecfe2").then(n)}},{name:"v-79f79f20",path:"/blog/about-the-ads.html",component:Me,beforeEnter:(t,e,n)=>{me("BlogPost","v-79f79f20").then(n)}},{name:"v-01aa2ce2",path:"/blog/building-visnalize-com.html",component:Me,beforeEnter:(t,e,n)=>{me("BlogPost","v-01aa2ce2").then(n)}},{name:"v-2fec31fc",path:"/blog/building-win7-simu.html",component:Me,beforeEnter:(t,e,n)=>{me("BlogPost","v-2fec31fc").then(n)}},{name:"v-667fa73c",path:"/blog/concealing-online-identity.html",component:Me,beforeEnter:(t,e,n)=>{me("BlogPost","v-667fa73c").then(n)}},{name:"v-ac7b70bc",path:"/blog/from-side-project-to-side-hustle.html",component:Me,beforeEnter:(t,e,n)=>{me("BlogPost","v-ac7b70bc").then(n)}},{name:"v-469b7b80",path:"/blog/game-stick-lite-4k-adding-games.html",component:Me,beforeEnter:(t,e,n)=>{me("BlogPost","v-469b7b80").then(n)}},{name:"v-ff74563c",path:"/blog/from-codepen-to-app.html",component:Me,beforeEnter:(t,e,n)=>{me("BlogPost","v-ff74563c").then(n)}},{name:"v-4b7e6c3c",path:"/blog/load-any-websites-in-iframes.html",component:Me,beforeEnter:(t,e,n)=>{me("BlogPost","v-4b7e6c3c").then(n)}},{name:"v-17861269",path:"/blog/",component:Me,beforeEnter:(t,e,n)=>{me("BlogList","v-17861269").then(n)}},{path:"/blog/index.html",redirect:"/blog/"},{name:"v-fbbdb2e0",path:"/blog/simulator-vs-emulator.html",component:Me,beforeEnter:(t,e,n)=>{me("BlogPost","v-fbbdb2e0").then(n)}},{name:"v-d08e737c",path:"/blog/updates-life-inactivity-projects.html",component:Me,beforeEnter:(t,e,n)=>{me("BlogPost","v-d08e737c").then(n)}},{name:"v-194e1218",path:"/blog/visnalize-year-in-review-2023.html",component:Me,beforeEnter:(t,e,n)=>{me("BlogPost","v-194e1218").then(n)}},{name:"v-26dc8250",path:"/blog/why-side-hustle.html",component:Me,beforeEnter:(t,e,n)=>{me("BlogPost","v-26dc8250").then(n)}},{name:"v-1131db82",path:"/blog/win7-icons-viewer-downloader.html",component:Me,beforeEnter:(t,e,n)=>{me("BlogPost","v-1131db82").then(n)}},{name:"v-4182c7bc",path:"/blog/win7-simu-file-explorer.html",component:Me,beforeEnter:(t,e,n)=>{me("BlogPost","v-4182c7bc").then(n)}},{name:"v-44a529fc",path:"/blog/win7-simu-mobile-devices.html",component:Me,beforeEnter:(t,e,n)=>{me("BlogPost","v-44a529fc").then(n)}},{name:"v-3fb87dbc",path:"/blog/win7-simu-custom-cursors.html",component:Me,beforeEnter:(t,e,n)=>{me("BlogPost","v-3fb87dbc").then(n)}},{name:"v-bfc8be7c",path:"/blog/win7-simu-windows-media-center.html",component:Me,beforeEnter:(t,e,n)=>{me("BlogPost","v-bfc8be7c").then(n)}},{name:"v-72bfdbc2",path:"/blog/win7-ui-introduction.html",component:Me,beforeEnter:(t,e,n)=>{me("BlogPost","v-72bfdbc2").then(n)}},{name:"v-3424310c",path:"/blog/win7-simu-year-in-review-2022.html",component:Me,beforeEnter:(t,e,n)=>{me("BlogPost","v-3424310c").then(n)}},{name:"v-301172dc",path:"/blog/windows-resources.html",component:Me,beforeEnter:(t,e,n)=>{me("BlogPost","v-301172dc").then(n)}},{name:"v-6796123c",path:"/brick1100/about.html",component:Me,beforeEnter:(t,e,n)=>{me("WithComments","v-6796123c").then(n)}},{name:"v-3692f0a2",path:"/brick1100/builders.html",component:Me,beforeEnter:(t,e,n)=>{me("BlogPost","v-3692f0a2").then(n)}},{name:"v-84d6517c",path:"/brick1100/changelog.html",component:Me,beforeEnter:(t,e,n)=>{me("Layout","v-84d6517c").then(n)}},{name:"v-7716093c",path:"/brick1100/games.html",component:Me,beforeEnter:(t,e,n)=>{me("BlogPost","v-7716093c").then(n)}},{name:"v-16be053c",path:"/brick1100/deep-links.html",component:Me,beforeEnter:(t,e,n)=>{me("BlogPost","v-16be053c").then(n)}},{name:"v-6444650a",path:"/brick1100/",component:Me,beforeEnter:(t,e,n)=>{me("Layout","v-6444650a").then(n)}},{path:"/brick1100/index.html",redirect:"/brick1100/"},{name:"v-2af59a42",path:"/brick1100/privacy.html",component:Me,beforeEnter:(t,e,n)=>{me("Layout","v-2af59a42").then(n)}},{name:"v-6cc96c82",path:"/contact.html",component:Me,beforeEnter:(t,e,n)=>{me("Layout","v-6cc96c82").then(n)}},{name:"v-98844e8a",path:"/",component:Me,beforeEnter:(t,e,n)=>{me("Layout","v-98844e8a").then(n)}},{path:"/index.html",redirect:"/"},{name:"v-08727ec0",path:"/win7simu/about.html",component:Me,beforeEnter:(t,e,n)=>{me("WithComments","v-08727ec0").then(n)}},{name:"v-ba31739c",path:"/win7simu/changelog.html",component:Me,beforeEnter:(t,e,n)=>{me("Layout","v-ba31739c").then(n)}},{name:"v-8cd4b9a4",path:"/win7simu/faq.html",component:Me,beforeEnter:(t,e,n)=>{me("WithComments","v-8cd4b9a4").then(n)}},{name:"v-e8bf05a2",path:"/win7simu/",component:Me,beforeEnter:(t,e,n)=>{me("Layout","v-e8bf05a2").then(n)}},{path:"/win7simu/index.html",redirect:"/win7simu/"},{name:"v-738e1022",path:"/win7simu/keyboard-shortcuts.html",component:Me,beforeEnter:(t,e,n)=>{me("Visnalize","v-738e1022").then(n)}},{name:"v-0d73ba82",path:"/win7simu/simulated/bios.html",component:Me,beforeEnter:(t,e,n)=>{me("FeaturePage","v-0d73ba82").then(n)}},{name:"v-530b246c",path:"/win7simu/privacy.html",component:Me,beforeEnter:(t,e,n)=>{me("Layout","v-530b246c").then(n)}},{name:"v-7c23e4bc",path:"/win7simu/simulated/calculator.html",component:Me,beforeEnter:(t,e,n)=>{me("FeaturePage","v-7c23e4bc").then(n)}},{name:"v-3dbeba22",path:"/win7simu/simulated/chrome.html",component:Me,beforeEnter:(t,e,n)=>{me("FeaturePage","v-3dbeba22").then(n)}},{name:"v-33b74904",path:"/win7simu/simulated/cmd.html",component:Me,beforeEnter:(t,e,n)=>{me("FeaturePage","v-33b74904").then(n)}},{name:"v-1f96767c",path:"/win7simu/simulated/cpanel.html",component:Me,beforeEnter:(t,e,n)=>{me("FeaturePage","v-1f96767c").then(n)}},{name:"v-6baf4482",path:"/win7simu/simulated/fileexplorer.html",component:Me,beforeEnter:(t,e,n)=>{me("FeaturePage","v-6baf4482").then(n)}},{name:"v-10412362",path:"/win7simu/simulated/ie.html",component:Me,beforeEnter:(t,e,n)=>{me("FeaturePage","v-10412362").then(n)}},{name:"v-2ddd3eac",path:"/win7simu/simulated/gadgets.html",component:Me,beforeEnter:(t,e,n)=>{me("FeaturePage","v-2ddd3eac").then(n)}},{name:"v-aa648488",path:"/win7simu/simulated/magnifier.html",component:Me,beforeEnter:(t,e,n)=>{me("FeaturePage","v-aa648488").then(n)}},{name:"v-1e6132e6",path:"/win7simu/simulated/",component:Me,beforeEnter:(t,e,n)=>{me("FeatureList","v-1e6132e6").then(n)}},{path:"/win7simu/simulated/index.html",redirect:"/win7simu/simulated/"},{name:"v-ff06623c",path:"/win7simu/simulated/media-player.html",component:Me,beforeEnter:(t,e,n)=>{me("FeaturePage","v-ff06623c").then(n)}},{name:"v-856c7aa8",path:"/win7simu/simulated/minesweeper.html",component:Me,beforeEnter:(t,e,n)=>{me("FeaturePage","v-856c7aa8").then(n)}},{name:"v-6078d960",path:"/win7simu/simulated/personalize.html",component:Me,beforeEnter:(t,e,n)=>{me("FeaturePage","v-6078d960").then(n)}},{name:"v-605a7f7c",path:"/win7simu/simulated/paint.html",component:Me,beforeEnter:(t,e,n)=>{me("FeaturePage","v-605a7f7c").then(n)}},{name:"v-7d425f36",path:"/win7simu/simulated/notepad.html",component:Me,beforeEnter:(t,e,n)=>{me("FeaturePage","v-7d425f36").then(n)}},{name:"v-6e4fcf02",path:"/win7simu/simulated/programs.html",component:Me,beforeEnter:(t,e,n)=>{me("FeaturePage","v-6e4fcf02").then(n)}},{name:"v-9c0e9874",path:"/win7simu/simulated/purbleplace.html",component:Me,beforeEnter:(t,e,n)=>{me("FeaturePage","v-9c0e9874").then(n)}},{name:"v-50afd23c",path:"/win7simu/simulated/run.html",component:Me,beforeEnter:(t,e,n)=>{me("FeaturePage","v-50afd23c").then(n)}},{name:"v-190bf8bc",path:"/win7simu/simulated/snipping.html",component:Me,beforeEnter:(t,e,n)=>{me("FeaturePage","v-190bf8bc").then(n)}},{name:"v-496f6bc2",path:"/win7simu/simulated/sticky.html",component:Me,beforeEnter:(t,e,n)=>{me("FeaturePage","v-496f6bc2").then(n)}},{name:"v-482face2",path:"/win7simu/simulated/recorder.html",component:Me,beforeEnter:(t,e,n)=>{me("FeaturePage","v-482face2").then(n)}},{name:"v-6a81288c",path:"/win7simu/simulated/solitaire.html",component:Me,beforeEnter:(t,e,n)=>{me("FeaturePage","v-6a81288c").then(n)}},{name:"v-9c5b69dc",path:"/win7simu/simulated/taskmgr.html",component:Me,beforeEnter:(t,e,n)=>{me("FeaturePage","v-9c5b69dc").then(n)}},{name:"v-e435f744",path:"/win7simu/simulated/wmc.html",component:Me,beforeEnter:(t,e,n)=>{me("FeaturePage","v-e435f744").then(n)}},{name:"v-10fbe366",path:"/win7simu/simulated/wordpad.html",component:Me,beforeEnter:(t,e,n)=>{me("FeaturePage","v-10fbe366").then(n)}},{name:"v-51b76d92",path:"/win7simu/themestudio/changelog.html",component:Me,beforeEnter:(t,e,n)=>{me("Layout","v-51b76d92").then(n)}},{name:"v-007b4402",path:"/win7simu/themestudio/quick-guide.html",component:Me,beforeEnter:(t,e,n)=>{me("WithComments","v-007b4402").then(n)}},{name:"v-2cf24a82",path:"/win7simu/themestudio/in-depth-guide.html",component:Me,beforeEnter:(t,e,n)=>{me("WithComments","v-2cf24a82").then(n)}},{name:"v-05767d49",path:"/win7simu/themestudio/",component:Me,beforeEnter:(t,e,n)=>{me("BlogPost","v-05767d49").then(n)}},{path:"/win7simu/themestudio/index.html",redirect:"/win7simu/themestudio/"},{name:"v-0326206d",path:"/blog/tag/",component:Me,beforeEnter:(t,e,n)=>{me("BlogList","v-0326206d").then(n)},meta:{pid:"tag",id:"tag"}},{path:"/blog/tag/index.html",redirect:"/blog/tag/"},{name:"v-60422faa",path:"/blog/tag/tips/",component:Me,beforeEnter:(t,e,n)=>{me("BlogList","v-60422faa").then(n)},meta:{pid:"tag",id:"tips"}},{path:"/blog/tag/tips/index.html",redirect:"/blog/tag/tips/"},{name:"v-0052e380",path:"/blog/tag/sharing/",component:Me,beforeEnter:(t,e,n)=>{me("BlogList","v-0052e380").then(n)},meta:{pid:"tag",id:"sharing"}},{path:"/blog/tag/sharing/index.html",redirect:"/blog/tag/sharing/"},{name:"v-62ece89f",path:"/blog/tag/technical/",component:Me,beforeEnter:(t,e,n)=>{me("BlogList","v-62ece89f").then(n)},meta:{pid:"tag",id:"technical"}},{path:"/blog/tag/technical/index.html",redirect:"/blog/tag/technical/"},{name:"v-791b612c",path:"/blog/tag/win7-simu/",component:Me,beforeEnter:(t,e,n)=>{me("BlogList","v-791b612c").then(n)},meta:{pid:"tag",id:"win7-simu"}},{path:"/blog/tag/win7-simu/index.html",redirect:"/blog/tag/win7-simu/"},{name:"v-3e40a282",path:"/blog/tag/random/",component:Me,beforeEnter:(t,e,n)=>{me("BlogList","v-3e40a282").then(n)},meta:{pid:"tag",id:"random"}},{path:"/blog/tag/random/index.html",redirect:"/blog/tag/random/"},{name:"v-549e50f6",path:"/blog/tag/brick-1100/",component:Me,beforeEnter:(t,e,n)=>{me("BlogList","v-549e50f6").then(n)},meta:{pid:"tag",id:"brick-1100"}},{path:"/blog/tag/brick-1100/index.html",redirect:"/blog/tag/brick-1100/"},{name:"v-5fd14c66",path:"/blog/tag/life/",component:Me,beforeEnter:(t,e,n)=>{me("BlogList","v-5fd14c66").then(n)},meta:{pid:"tag",id:"life"}},{path:"/blog/tag/life/index.html",redirect:"/blog/tag/life/"},{name:"v-2fb4226c",path:"/blog/tag/review/",component:Me,beforeEnter:(t,e,n)=>{me("BlogList","v-2fb4226c").then(n)},meta:{pid:"tag",id:"review"}},{path:"/blog/tag/review/index.html",redirect:"/blog/tag/review/"},{name:"v-af50673e",path:"/blog/tag/tools/",component:Me,beforeEnter:(t,e,n)=>{me("BlogList","v-af50673e").then(n)},meta:{pid:"tag",id:"tools"}},{path:"/blog/tag/tools/index.html",redirect:"/blog/tag/tools/"},{name:"v-26a044cd",path:"/blog/tag/guest-post/",component:Me,beforeEnter:(t,e,n)=>{me("BlogList","v-26a044cd").then(n)},meta:{pid:"tag",id:"guest-post"}},{path:"/blog/tag/guest-post/index.html",redirect:"/blog/tag/guest-post/"},{name:"v-52b2ff7d",path:"/blog/tag/sharing/page/2/",component:Me,beforeEnter:(t,e,n)=>{me("Layout","v-52b2ff7d").then(n)},meta:{pid:"tag",id:"sharing"}},{path:"/blog/tag/sharing/page/2/index.html",redirect:"/blog/tag/sharing/page/2/"},{name:"v-1f534b11",path:"/blog/tag/win7-simu/page/2/",component:Me,beforeEnter:(t,e,n)=>{me("Layout","v-1f534b11").then(n)},meta:{pid:"tag",id:"win7-simu"}},{path:"/blog/tag/win7-simu/page/2/index.html",redirect:"/blog/tag/win7-simu/page/2/"},{path:"*",component:Me}],Be={title:"Visnalize",description:"",base:"/",headTags:[["link",{rel:"icon",href:"/assets/favicon.png"}],["meta",{name:"viewport",content:"width=device-width, initial-scale=1.0"}],["script",{async:!0,src:"https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"}],["script",{},"(function() { typeof localStorage !== 'undefined' && localStorage.getItem('darkMode') === 'true' && document.documentElement.classList.add('is-dark'); })()"],["script",{async:!0,"data-ad-client":"ca-pub-5904323684803247",src:"https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"}],["script",{async:!0,src:"https://www.googletagmanager.com/gtag/js?id=G-TRC2SF4L67"}],["script",{},"window.dataLayer = window.dataLayer || [];\nfunction gtag(){dataLayer.push(arguments);}\ngtag('js', new Date());\ngtag('config', 'G-TRC2SF4L67');"],["script",{async:!0,src:"https://fundingchoicesmessages.google.com/i/pub-5904323684803247?ers=1",nonce:"3HRDcENAr3Egc7skT36mnQ"}],["script",{nonce:"3HRDcENAr3Egc7skT36mnQ"},"(function () { function signalGooglefcPresent() { if (!window.frames['googlefcPresent']) { if (document.body) { const iframe = document.createElement('iframe'); iframe.style = 'width: 0; height: 0; border: none; z-index: -1000; left: -1000px; top: -1000px;'; iframe.style.display = 'none'; iframe.name = 'googlefcPresent'; document.body.appendChild(iframe); } else { setTimeout(signalGooglefcPresent, 0); } } } signalGooglefcPresent(); })();"],["link",{rel:"alternate",type:"application/rss+xml",href:"https://visnalize.com/rss.xml",title:"Visnalize RSS Feed"}],["link",{rel:"alternate",type:"application/atom+xml",href:"https://visnalize.com/feed.atom",title:"Visnalize Atom Feed"}],["link",{rel:"alternate",type:"application/json",href:"https://visnalize.com/feed.json",title:"Visnalize JSON Feed"}]],pages:[{title:"🙋‍♂️ About Me",frontmatter:{sidebar:!1,description:"Full-time software developer, free-time app maker. Author of Win7 Simu and Brick 1100. On a mission to relive the good old days.",image:"https://image.social/get?url=visnalize.com/about.html",meta:[{name:"image",content:"https://image.social/get?url=visnalize.com/about.html"},{name:"twitter:title",content:"🙋‍♂️ About Me"},{name:"twitter:description",content:"Full-time software developer, free-time app maker. Author of Win7 Simu and Brick 1100. On a mission to relive the good old days."},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:image",content:"https://image.social/get?url=visnalize.com/about.html"},{name:"twitter:url",content:"https://visnalize.com/about.html"},{property:"og:type",content:"article"},{property:"og:title",content:"🙋‍♂️ About Me"},{property:"og:description",content:"Full-time software developer, free-time app maker. Author of Win7 Simu and Brick 1100. On a mission to relive the good old days."},{property:"og:image",content:"https://image.social/get?url=visnalize.com/about.html"},{property:"og:url",content:"https://visnalize.com/about.html"},{property:"article:author",content:"Visnalize"},{itemprop:"name",content:"🙋‍♂️ About Me"},{itemprop:"description",content:"Full-time software developer, free-time app maker. Author of Win7 Simu and Brick 1100. On a mission to relive the good old days."},{itemprop:"image",content:"https://image.social/get?url=visnalize.com/about.html"}]},regularPath:"/about.html",relativePath:"about.md",key:"v-7cbecfe2",path:"/about.html",headers:[{level:2,title:"Visnalize",slug:"visnalize"},{level:2,title:"Contact",slug:"contact"}],lastUpdated:"9/3/2024, 8:15:04 AM",lastUpdatedTimestamp:1725351304e3,firstCreated:"7/24/2021, 12:28:16 PM",firstCreatedTimestamp:1627129696e3},{title:"About the ads and how I implement them",frontmatter:{layout:"BlogPost",description:"A couple of things about ads and how I implement them within my websites and apps",sidebar:"auto",tag:["tips","sharing"],meta:[{name:"image",content:"https://images.unsplash.com/photo-1546142711-1e28c0540deb?auto=format&fit=crop&w=740&q=80"},{name:"twitter:title",content:"About the ads and how I implement them"},{name:"twitter:description",content:"A couple of things about ads and how I implement them within my websites and apps"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:image",content:"https://images.unsplash.com/photo-1546142711-1e28c0540deb?auto=format&fit=crop&w=740&q=80"},{name:"twitter:url",content:"https://visnalize.com/blog/about-the-ads.html"},{property:"og:type",content:"article"},{property:"og:title",content:"About the ads and how I implement them"},{property:"og:description",content:"A couple of things about ads and how I implement them within my websites and apps"},{property:"og:image",content:"https://images.unsplash.com/photo-1546142711-1e28c0540deb?auto=format&fit=crop&w=740&q=80"},{property:"og:url",content:"https://visnalize.com/blog/about-the-ads.html"},{property:"article:author",content:"Visnalize"},{itemprop:"name",content:"About the ads and how I implement them"},{itemprop:"description",content:"A couple of things about ads and how I implement them within my websites and apps"},{itemprop:"image",content:"https://images.unsplash.com/photo-1546142711-1e28c0540deb?auto=format&fit=crop&w=740&q=80"}]},regularPath:"/blog/about-the-ads.html",relativePath:"blog/about-the-ads.md",key:"v-79f79f20",path:"/blog/about-the-ads.html",headers:[{level:2,title:"Choosing the Ad Network",slug:"choosing-the-ad-network"},{level:2,title:"Picking the Ad Format",slug:"picking-the-ad-format"},{level:3,title:"Mobile App",slug:"mobile-app"},{level:3,title:"Website",slug:"website"},{level:2,title:"Implementing ads",slug:"implementing-ads"},{level:3,title:"Win7 Simu",slug:"win7-simu"},{level:3,title:"This website",slug:"this-website"}],lastUpdated:"9/3/2024, 8:15:04 AM",lastUpdatedTimestamp:1725351304e3,firstCreated:"9/22/2021, 2:37:44 PM",firstCreatedTimestamp:1632321464e3},{title:"How I built visnalize.com",frontmatter:{layout:"BlogPost",description:"Read about the progress and how I built the visnalize.com website for my own brand",sidebar:"auto",tag:"technical",meta:[{name:"image",content:"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?auto=format&fit=crop&w=740&q=80"},{name:"twitter:title",content:"How I built visnalize.com"},{name:"twitter:description",content:"Read about the progress and how I built the visnalize.com website for my own brand"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:image",content:"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?auto=format&fit=crop&w=740&q=80"},{name:"twitter:url",content:"https://visnalize.com/blog/building-visnalize-com.html"},{property:"og:type",content:"article"},{property:"og:title",content:"How I built visnalize.com"},{property:"og:description",content:"Read about the progress and how I built the visnalize.com website for my own brand"},{property:"og:image",content:"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?auto=format&fit=crop&w=740&q=80"},{property:"og:url",content:"https://visnalize.com/blog/building-visnalize-com.html"},{property:"article:author",content:"Visnalize"},{itemprop:"name",content:"How I built visnalize.com"},{itemprop:"description",content:"Read about the progress and how I built the visnalize.com website for my own brand"},{itemprop:"image",content:"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?auto=format&fit=crop&w=740&q=80"}]},regularPath:"/blog/building-visnalize-com.html",relativePath:"blog/building-visnalize-com.md",key:"v-01aa2ce2",path:"/blog/building-visnalize-com.html",headers:[{level:2,title:"The focus",slug:"the-focus"},{level:2,title:"The making",slug:"the-making"},{level:3,title:"Setup",slug:"setup"},{level:3,title:"Customizing",slug:"customizing"},{level:2,title:"The deployment",slug:"the-deployment"},{level:2,title:"Epilogue",slug:"epilogue"}],lastUpdated:"9/3/2024, 8:15:04 AM",lastUpdatedTimestamp:1725351304e3,firstCreated:"5/21/2022, 5:21:07 AM",firstCreatedTimestamp:1653110467e3},{title:"How I built Win7 Simu",frontmatter:{layout:"BlogPost",description:"Read about my journey with Win7 Simu, how it all started and unveiling some boring technical stuff behind the scene",sidebar:"auto",tag:["win7-simu","sharing","technical"],meta:[{name:"image",content:"https://visnalize.com/assets/covers/building-win7-simu.jpg"},{name:"twitter:title",content:"How I built Win7 Simu"},{name:"twitter:description",content:"Read about my journey with Win7 Simu, how it all started and unveiling some boring technical stuff behind the scene"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:image",content:"https://visnalize.com/assets/covers/building-win7-simu.jpg"},{name:"twitter:url",content:"https://visnalize.com/blog/building-win7-simu.html"},{property:"og:type",content:"article"},{property:"og:title",content:"How I built Win7 Simu"},{property:"og:description",content:"Read about my journey with Win7 Simu, how it all started and unveiling some boring technical stuff behind the scene"},{property:"og:image",content:"https://visnalize.com/assets/covers/building-win7-simu.jpg"},{property:"og:url",content:"https://visnalize.com/blog/building-win7-simu.html"},{property:"article:author",content:"Visnalize"},{itemprop:"name",content:"How I built Win7 Simu"},{itemprop:"description",content:"Read about my journey with Win7 Simu, how it all started and unveiling some boring technical stuff behind the scene"},{itemprop:"image",content:"https://visnalize.com/assets/covers/building-win7-simu.jpg"}]},regularPath:"/blog/building-win7-simu.html",relativePath:"blog/building-win7-simu.md",key:"v-2fec31fc",path:"/blog/building-win7-simu.html",headers:[{level:2,title:"How it all started",slug:"how-it-all-started"},{level:3,title:"The goal",slug:"the-goal"},{level:3,title:"The tech stack",slug:"the-tech-stack"},{level:2,title:"It's come a long way",slug:"it-s-come-a-long-way"},{level:2,title:"What's next",slug:"what-s-next"}],lastUpdated:"9/3/2024, 8:15:04 AM",lastUpdatedTimestamp:1725351304e3,firstCreated:"10/10/2022, 2:57:25 AM",firstCreatedTimestamp:1665370645e3},{title:"Why I choose to conceal my online identity",frontmatter:{layout:"BlogPost",description:"My takes on internet privacy and why I choose to conceal mine.",sidebar:"auto",tag:["sharing","random"],meta:[{name:"image",content:"https://visnalize.com/assets/covers/concealing-online-identity.jpg"},{name:"twitter:title",content:"Why I choose to conceal my online identity"},{name:"twitter:description",content:"My takes on internet privacy and why I choose to conceal mine."},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:image",content:"https://visnalize.com/assets/covers/concealing-online-identity.jpg"},{name:"twitter:url",content:"https://visnalize.com/blog/concealing-online-identity.html"},{property:"og:type",content:"article"},{property:"og:title",content:"Why I choose to conceal my online identity"},{property:"og:description",content:"My takes on internet privacy and why I choose to conceal mine."},{property:"og:image",content:"https://visnalize.com/assets/covers/concealing-online-identity.jpg"},{property:"og:url",content:"https://visnalize.com/blog/concealing-online-identity.html"},{property:"article:author",content:"Visnalize"},{itemprop:"name",content:"Why I choose to conceal my online identity"},{itemprop:"description",content:"My takes on internet privacy and why I choose to conceal mine."},{itemprop:"image",content:"https://visnalize.com/assets/covers/concealing-online-identity.jpg"}]},regularPath:"/blog/concealing-online-identity.html",relativePath:"blog/concealing-online-identity.md",key:"v-667fa73c",path:"/blog/concealing-online-identity.html",headers:[{level:2,title:"1. Privacy",slug:"_1-privacy"},{level:2,title:"2. Security",slug:"_2-security"},{level:2,title:"3. Ethics",slug:"_3-ethics"},{level:2,title:"4. Commitment",slug:"_4-commitment"}],lastUpdated:"8/24/2024, 11:23:04 AM",lastUpdatedTimestamp:1724498584e3,firstCreated:"8/23/2024, 1:32:41 PM",firstCreatedTimestamp:1724419961e3},{title:"Turning my side project into a side hustle",frontmatter:{layout:"BlogPost",description:"From a side project for learning to a side hustle with recurring revenue, read about how I did it, the process, the tools, the tips and tricks.",sidebar:"auto",tag:["sharing","tips","win7-simu"],meta:[{name:"image",content:"https://media.istockphoto.com/id/1349329446/photo/dollars-cash-money-and-paper-note-with-text-written-extra-income-concept-of-financial.jpg?s=1024x1024&w=is&k=20&c=RXsEpU41u0Yke-ol53PoirkXHTOliHGfvijnYipidtQ="},{name:"twitter:title",content:"Turning my side project into a side hustle"},{name:"twitter:description",content:"From a side project for learning to a side hustle with recurring revenue, read about how I did it, the process, the tools, the tips and tricks."},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:image",content:"https://media.istockphoto.com/id/1349329446/photo/dollars-cash-money-and-paper-note-with-text-written-extra-income-concept-of-financial.jpg?s=1024x1024&w=is&k=20&c=RXsEpU41u0Yke-ol53PoirkXHTOliHGfvijnYipidtQ="},{name:"twitter:url",content:"https://visnalize.com/blog/from-side-project-to-side-hustle.html"},{property:"og:type",content:"article"},{property:"og:title",content:"Turning my side project into a side hustle"},{property:"og:description",content:"From a side project for learning to a side hustle with recurring revenue, read about how I did it, the process, the tools, the tips and tricks."},{property:"og:image",content:"https://media.istockphoto.com/id/1349329446/photo/dollars-cash-money-and-paper-note-with-text-written-extra-income-concept-of-financial.jpg?s=1024x1024&w=is&k=20&c=RXsEpU41u0Yke-ol53PoirkXHTOliHGfvijnYipidtQ="},{property:"og:url",content:"https://visnalize.com/blog/from-side-project-to-side-hustle.html"},{property:"article:author",content:"Visnalize"},{itemprop:"name",content:"Turning my side project into a side hustle"},{itemprop:"description",content:"From a side project for learning to a side hustle with recurring revenue, read about how I did it, the process, the tools, the tips and tricks."},{itemprop:"image",content:"https://media.istockphoto.com/id/1349329446/photo/dollars-cash-money-and-paper-note-with-text-written-extra-income-concept-of-financial.jpg?s=1024x1024&w=is&k=20&c=RXsEpU41u0Yke-ol53PoirkXHTOliHGfvijnYipidtQ="}]},regularPath:"/blog/from-side-project-to-side-hustle.html",relativePath:"blog/from-side-project-to-side-hustle.md",key:"v-ac7b70bc",path:"/blog/from-side-project-to-side-hustle.html",headers:[{level:2,title:"The beginning",slug:"the-beginning"},{level:3,title:"The idea that started it all",slug:"the-idea-that-started-it-all"},{level:3,title:"Building the surroundings",slug:"building-the-surroundings"},{level:2,title:"A diverse revenue model",slug:"a-diverse-revenue-model"},{level:3,title:"Ads",slug:"ads"},{level:3,title:"Subscriptions",slug:"subscriptions"},{level:3,title:"Partnerships",slug:"partnerships"},{level:2,title:"Disclosing the numbers",slug:"disclosing-the-numbers"},{level:2,title:"Final thoughts",slug:"final-thoughts"}],lastUpdated:"9/3/2024, 8:15:04 AM",lastUpdatedTimestamp:1725351304e3,firstCreated:"11/11/2023, 4:58:27 PM",firstCreatedTimestamp:1699721907e3},{title:"How to add more games to Game Stick Lite 4K",frontmatter:{layout:"BlogPost",description:"How to add games to Game Stick Lite 4K and enjoy more of your childhood games",sidebar:"auto",tag:["tips","random"],meta:[{name:"image",content:"https://visnalize.com/assets/covers/game-stick-4k-lite.jpg"},{name:"twitter:title",content:"How to add more games to Game Stick Lite 4K"},{name:"twitter:description",content:"How to add games to Game Stick Lite 4K and enjoy more of your childhood games"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:image",content:"https://visnalize.com/assets/covers/game-stick-4k-lite.jpg"},{name:"twitter:url",content:"https://visnalize.com/blog/game-stick-lite-4k-adding-games.html"},{property:"og:type",content:"article"},{property:"og:title",content:"How to add more games to Game Stick Lite 4K"},{property:"og:description",content:"How to add games to Game Stick Lite 4K and enjoy more of your childhood games"},{property:"og:image",content:"https://visnalize.com/assets/covers/game-stick-4k-lite.jpg"},{property:"og:url",content:"https://visnalize.com/blog/game-stick-lite-4k-adding-games.html"},{property:"article:author",content:"Visnalize"},{itemprop:"name",content:"How to add more games to Game Stick Lite 4K"},{itemprop:"description",content:"How to add games to Game Stick Lite 4K and enjoy more of your childhood games"},{itemprop:"image",content:"https://visnalize.com/assets/covers/game-stick-4k-lite.jpg"}]},regularPath:"/blog/game-stick-lite-4k-adding-games.html",relativePath:"blog/game-stick-lite-4k-adding-games.md",key:"v-469b7b80",path:"/blog/game-stick-lite-4k-adding-games.html",headers:[{level:2,title:"Prerequisites",slug:"prerequisites"},{level:2,title:"Step-by-step guide",slug:"step-by-step-guide"}],lastUpdated:"3/10/2024, 8:28:45 AM",lastUpdatedTimestamp:1710059325e3,firstCreated:"3/10/2024, 8:28:45 AM",firstCreatedTimestamp:1710059325e3},{title:"Turning my CodePen into an actual app",frontmatter:{layout:"BlogPost",description:"From a simple idea, what merely looked like a playful demo on CodePen, but turned into a full-fledged app",sidebar:"auto",tag:["brick-1100","sharing","technical"],meta:[{name:"image",content:"https://visnalize.com/assets/covers/from-codepen-to-app.png"},{name:"twitter:title",content:"Turning my CodePen into an actual app"},{name:"twitter:description",content:"From a simple idea, what merely looked like a playful demo on CodePen, but turned into a full-fledged app"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:image",content:"https://visnalize.com/assets/covers/from-codepen-to-app.png"},{name:"twitter:url",content:"https://visnalize.com/blog/from-codepen-to-app.html"},{property:"og:type",content:"article"},{property:"og:title",content:"Turning my CodePen into an actual app"},{property:"og:description",content:"From a simple idea, what merely looked like a playful demo on CodePen, but turned into a full-fledged app"},{property:"og:image",content:"https://visnalize.com/assets/covers/from-codepen-to-app.png"},{property:"og:url",content:"https://visnalize.com/blog/from-codepen-to-app.html"},{property:"article:author",content:"Visnalize"},{itemprop:"name",content:"Turning my CodePen into an actual app"},{itemprop:"description",content:"From a simple idea, what merely looked like a playful demo on CodePen, but turned into a full-fledged app"},{itemprop:"image",content:"https://visnalize.com/assets/covers/from-codepen-to-app.png"}]},regularPath:"/blog/from-codepen-to-app.html",relativePath:"blog/from-codepen-to-app.md",key:"v-ff74563c",path:"/blog/from-codepen-to-app.html",headers:[{level:2,title:"A silly idea that got realized",slug:"a-silly-idea-that-got-realized"},{level:2,title:"The making process",slug:"the-making-process"},{level:3,title:"Breaking down the components",slug:"breaking-down-the-components"},{level:3,title:"Adding some twists",slug:"adding-some-twists"},{level:2,title:"Final words",slug:"final-words"}],lastUpdated:"9/3/2024, 8:15:04 AM",lastUpdatedTimestamp:1725351304e3,firstCreated:"10/13/2023, 4:23:53 PM",firstCreatedTimestamp:1697214233e3},{title:"How to get iframes to load any websites",frontmatter:{layout:"BlogPost",description:"The most effective way to get iframes embedded in your web apps to load any websites",sidebar:"auto",tag:["tips","technical","win7-simu"],meta:[{name:"image",content:"https://visnalize.com/assets/covers/load-any-websites-in-iframes.png"},{name:"twitter:title",content:"How to get iframes to load any websites"},{name:"twitter:description",content:"The most effective way to get iframes embedded in your web apps to load any websites"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:image",content:"https://visnalize.com/assets/covers/load-any-websites-in-iframes.png"},{name:"twitter:url",content:"https://visnalize.com/blog/load-any-websites-in-iframes.html"},{property:"og:type",content:"article"},{property:"og:title",content:"How to get iframes to load any websites"},{property:"og:description",content:"The most effective way to get iframes embedded in your web apps to load any websites"},{property:"og:image",content:"https://visnalize.com/assets/covers/load-any-websites-in-iframes.png"},{property:"og:url",content:"https://visnalize.com/blog/load-any-websites-in-iframes.html"},{property:"article:author",content:"Visnalize"},{itemprop:"name",content:"How to get iframes to load any websites"},{itemprop:"description",content:"The most effective way to get iframes embedded in your web apps to load any websites"},{itemprop:"image",content:"https://visnalize.com/assets/covers/load-any-websites-in-iframes.png"}]},regularPath:"/blog/load-any-websites-in-iframes.html",relativePath:"blog/load-any-websites-in-iframes.md",key:"v-4b7e6c3c",path:"/blog/load-any-websites-in-iframes.html",headers:[{level:2,title:"The scenario",slug:"the-scenario"},{level:2,title:"Step-by-step guide",slug:"step-by-step-guide"},{level:3,title:"1. Install Requestly browser extension",slug:"_1-install-requestly-browser-extension"},{level:3,title:"2. Import the predefined rules",slug:"_2-import-the-predefined-rules"},{level:3,title:"3. Enjoy",slug:"_3-enjoy"}],lastUpdated:"9/3/2024, 8:15:04 AM",lastUpdatedTimestamp:1725351304e3,firstCreated:"10/24/2022, 8:42:23 AM",firstCreatedTimestamp:1666600943e3},{title:"📝 Blog",frontmatter:{layout:"BlogList",title:"📝 Blog",description:"Helpful insights, sharing, tips and tricks on various topics from Visnalize, the creator of Win7 Simu, Brick 1100, and more",image:"https://image.social/get?url=visnalize.com/blog/",meta:[{name:"image",content:"https://image.social/get?url=visnalize.com/blog/"},{name:"twitter:title",content:"📝 Blog"},{name:"twitter:description",content:"Helpful insights, sharing, tips and tricks on various topics from Visnalize, the creator of Win7 Simu, Brick 1100, and more"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:image",content:"https://image.social/get?url=visnalize.com/blog/"},{name:"twitter:url",content:"https://visnalize.com/blog/"},{property:"og:type",content:"article"},{property:"og:title",content:"📝 Blog"},{property:"og:description",content:"Helpful insights, sharing, tips and tricks on various topics from Visnalize, the creator of Win7 Simu, Brick 1100, and more"},{property:"og:image",content:"https://image.social/get?url=visnalize.com/blog/"},{property:"og:url",content:"https://visnalize.com/blog/"},{property:"article:author",content:"Visnalize"},{itemprop:"name",content:"📝 Blog"},{itemprop:"description",content:"Helpful insights, sharing, tips and tricks on various topics from Visnalize, the creator of Win7 Simu, Brick 1100, and more"},{itemprop:"image",content:"https://image.social/get?url=visnalize.com/blog/"}]},regularPath:"/blog/",relativePath:"blog/readme.md",key:"v-17861269",path:"/blog/",lastUpdated:"9/8/2024, 8:36:48 AM",lastUpdatedTimestamp:1725784608e3,firstCreated:"8/4/2021, 2:48:25 AM",firstCreatedTimestamp:1628045305e3},{title:"Simulators and Emulators: What's the difference?",frontmatter:{layout:"BlogPost",description:"Understand the differences between simulators and emulators, what they mean for Win7 Simu.",sidebar:"auto",tag:["tips","sharing","win7-simu"],meta:[{name:"image",content:"https://visnalize.com/assets/covers/simulators-vs-emulators.png"},{name:"twitter:title",content:"Simulators and Emulators: What's the difference?"},{name:"twitter:description",content:"Understand the differences between simulators and emulators, what they mean for Win7 Simu."},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:image",content:"https://visnalize.com/assets/covers/simulators-vs-emulators.png"},{name:"twitter:url",content:"https://visnalize.com/blog/simulator-vs-emulator.html"},{property:"og:type",content:"article"},{property:"og:title",content:"Simulators and Emulators: What's the difference?"},{property:"og:description",content:"Understand the differences between simulators and emulators, what they mean for Win7 Simu."},{property:"og:image",content:"https://visnalize.com/assets/covers/simulators-vs-emulators.png"},{property:"og:url",content:"https://visnalize.com/blog/simulator-vs-emulator.html"},{property:"article:author",content:"Visnalize"},{itemprop:"name",content:"Simulators and Emulators: What's the difference?"},{itemprop:"description",content:"Understand the differences between simulators and emulators, what they mean for Win7 Simu."},{itemprop:"image",content:"https://visnalize.com/assets/covers/simulators-vs-emulators.png"}]},regularPath:"/blog/simulator-vs-emulator.html",relativePath:"blog/simulator-vs-emulator.md",key:"v-fbbdb2e0",path:"/blog/simulator-vs-emulator.html",headers:[{level:2,title:"What is an Emulator?",slug:"what-is-an-emulator"},{level:2,title:"What is a Simulator?",slug:"what-is-a-simulator"},{level:2,title:"What about Win7 Simu?",slug:"what-about-win7-simu"}],lastUpdated:"2/21/2024, 11:02:25 AM",lastUpdatedTimestamp:1708513345e3,firstCreated:"2/21/2024, 11:02:25 AM",firstCreatedTimestamp:1708513345e3},{title:"Quick updates before the year ends",frontmatter:{layout:"BlogPost",description:"Life events, reasons for my inactivity, updates on projects and some random sharing.",sidebar:"auto",tag:["sharing","life"],meta:[{name:"image",content:"https://visnalize.com/assets/covers/updates-life-inactivity-projects.jpg"},{name:"twitter:title",content:"Quick updates before the year ends"},{name:"twitter:description",content:"Life events, reasons for my inactivity, updates on projects and some random sharing."},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:image",content:"https://visnalize.com/assets/covers/updates-life-inactivity-projects.jpg"},{name:"twitter:url",content:"https://visnalize.com/blog/updates-life-inactivity-projects.html"},{property:"og:type",content:"article"},{property:"og:title",content:"Quick updates before the year ends"},{property:"og:description",content:"Life events, reasons for my inactivity, updates on projects and some random sharing."},{property:"og:image",content:"https://visnalize.com/assets/covers/updates-life-inactivity-projects.jpg"},{property:"og:url",content:"https://visnalize.com/blog/updates-life-inactivity-projects.html"},{property:"article:author",content:"Visnalize"},{itemprop:"name",content:"Quick updates before the year ends"},{itemprop:"description",content:"Life events, reasons for my inactivity, updates on projects and some random sharing."},{itemprop:"image",content:"https://visnalize.com/assets/covers/updates-life-inactivity-projects.jpg"}]},regularPath:"/blog/updates-life-inactivity-projects.html",relativePath:"blog/updates-life-inactivity-projects.md",key:"v-d08e737c",path:"/blog/updates-life-inactivity-projects.html",headers:[{level:2,title:"Fourth acquisition offer",slug:"fourth-acquisition-offer"},{level:2,title:"Son hospitalized on his first birthday",slug:"son-hospitalized-on-his-first-birthday"},{level:2,title:"Exciting news ahead",slug:"exciting-news-ahead"},{level:3,title:"A new website",slug:"a-new-website"},{level:3,title:"Win7 Simu",slug:"win7-simu"},{level:3,title:"Brick 1100",slug:"brick-1100"},{level:3,title:"A third project",slug:"a-third-project"},{level:2,title:"Final words",slug:"final-words"}],lastUpdated:"12/17/2024, 6:32:16 AM",lastUpdatedTimestamp:1734417136e3,firstCreated:"12/17/2024, 5:39:30 AM",firstCreatedTimestamp:173441397e4},{title:"Visnalize year in review - 2023",frontmatter:{layout:"BlogPost",description:"Look back at some amazing achievements from Visnalize in 2023.",sidebar:"auto",tag:["win7-simu","brick-1100","review"],meta:[{name:"image",content:"https://images.unsplash.com/photo-1579952775264-625f17561a5d?auto=format&fit=crop&w=740&q=80"},{name:"twitter:title",content:"Visnalize year in review - 2023"},{name:"twitter:description",content:"Look back at some amazing achievements from Visnalize in 2023."},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:image",content:"https://images.unsplash.com/photo-1579952775264-625f17561a5d?auto=format&fit=crop&w=740&q=80"},{name:"twitter:url",content:"https://visnalize.com/blog/visnalize-year-in-review-2023.html"},{property:"og:type",content:"article"},{property:"og:title",content:"Visnalize year in review - 2023"},{property:"og:description",content:"Look back at some amazing achievements from Visnalize in 2023."},{property:"og:image",content:"https://images.unsplash.com/photo-1579952775264-625f17561a5d?auto=format&fit=crop&w=740&q=80"},{property:"og:url",content:"https://visnalize.com/blog/visnalize-year-in-review-2023.html"},{property:"article:author",content:"Visnalize"},{itemprop:"name",content:"Visnalize year in review - 2023"},{itemprop:"description",content:"Look back at some amazing achievements from Visnalize in 2023."},{itemprop:"image",content:"https://images.unsplash.com/photo-1579952775264-625f17561a5d?auto=format&fit=crop&w=740&q=80"}]},regularPath:"/blog/visnalize-year-in-review-2023.html",relativePath:"blog/visnalize-year-in-review-2023.md",key:"v-194e1218",path:"/blog/visnalize-year-in-review-2023.html",headers:[{level:2,title:"The amazing numbers",slug:"the-amazing-numbers"},{level:3,title:"Visnalize(.com)",slug:"visnalize-com"},{level:3,title:"Win7 Simu",slug:"win7-simu"},{level:3,title:"Brick 1100 (Beta)",slug:"brick-1100-beta"},{level:2,title:"Other accomplishments",slug:"other-accomplishments"},{level:3,title:"A new collaborator for Win7 Simu",slug:"a-new-collaborator-for-win7-simu"},{level:3,title:"New feedback channels for Brick 1100",slug:"new-feedback-channels-for-brick-1100"},{level:3,title:"A new chapter in life",slug:"a-new-chapter-in-life"},{level:2,title:"Looking out to 2024",slug:"looking-out-to-2024"}],lastUpdated:"9/5/2024, 4:51:57 PM",lastUpdatedTimestamp:1725555117e3,firstCreated:"1/1/2024, 2:18:12 AM",firstCreatedTimestamp:1704075492e3},{title:"Why you should have a side hustle",frontmatter:{layout:"BlogPost",description:"Some personal sharing about reasons and benefits of having a side hustle.",sidebar:"auto",tag:["sharing","tips"],meta:[{name:"image",content:"https://visnalize.com/assets/covers/why-side-hustle.jpg"},{name:"twitter:title",content:"Why you should have a side hustle"},{name:"twitter:description",content:"Some personal sharing about reasons and benefits of having a side hustle."},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:image",content:"https://visnalize.com/assets/covers/why-side-hustle.jpg"},{name:"twitter:url",content:"https://visnalize.com/blog/why-side-hustle.html"},{property:"og:type",content:"article"},{property:"og:title",content:"Why you should have a side hustle"},{property:"og:description",content:"Some personal sharing about reasons and benefits of having a side hustle."},{property:"og:image",content:"https://visnalize.com/assets/covers/why-side-hustle.jpg"},{property:"og:url",content:"https://visnalize.com/blog/why-side-hustle.html"},{property:"article:author",content:"Visnalize"},{itemprop:"name",content:"Why you should have a side hustle"},{itemprop:"description",content:"Some personal sharing about reasons and benefits of having a side hustle."},{itemprop:"image",content:"https://visnalize.com/assets/covers/why-side-hustle.jpg"}]},regularPath:"/blog/why-side-hustle.html",relativePath:"blog/why-side-hustle.md",key:"v-26dc8250",path:"/blog/why-side-hustle.html",headers:[{level:2,title:"What is a side hustle?",slug:"what-is-a-side-hustle"},{level:2,title:"The benefits",slug:"the-benefits"},{level:3,title:"Extra income",slug:"extra-income"},{level:3,title:"Skill development",slug:"skill-development"},{level:3,title:"Networking",slug:"networking"},{level:3,title:"Job security",slug:"job-security"},{level:2,title:"The challenges",slug:"the-challenges"},{level:3,title:"Time commitment",slug:"time-commitment"},{level:3,title:"Discipline and motivation",slug:"discipline-and-motivation"},{level:2,title:"Conclusion",slug:"conclusion"}],lastUpdated:"9/3/2024, 8:15:04 AM",lastUpdatedTimestamp:1725351304e3,firstCreated:"7/14/2024, 6:06:44 AM",firstCreatedTimestamp:1720937204e3},{title:"Windows 7 icon Viewer/Downloader",frontmatter:{layout:"BlogPost",description:"A simple tool to view and download Windows 7 icon collection.",sidebar:"auto",tag:["technical","tools"],meta:[{name:"image",content:"https://visnalize.com/assets/covers/win7-icons-viewer-downloader.jpg"},{name:"twitter:title",content:"Windows 7 icon Viewer/Downloader"},{name:"twitter:description",content:"A simple tool to view and download Windows 7 icon collection."},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:image",content:"https://visnalize.com/assets/covers/win7-icons-viewer-downloader.jpg"},{name:"twitter:url",content:"https://visnalize.com/blog/win7-icons-viewer-downloader.html"},{property:"og:type",content:"article"},{property:"og:title",content:"Windows 7 icon Viewer/Downloader"},{property:"og:description",content:"A simple tool to view and download Windows 7 icon collection."},{property:"og:image",content:"https://visnalize.com/assets/covers/win7-icons-viewer-downloader.jpg"},{property:"og:url",content:"https://visnalize.com/blog/win7-icons-viewer-downloader.html"},{property:"article:author",content:"Visnalize"},{itemprop:"name",content:"Windows 7 icon Viewer/Downloader"},{itemprop:"description",content:"A simple tool to view and download Windows 7 icon collection."},{itemprop:"image",content:"https://visnalize.com/assets/covers/win7-icons-viewer-downloader.jpg"}]},regularPath:"/blog/win7-icons-viewer-downloader.html",relativePath:"blog/win7-icons-viewer-downloader.md",key:"v-1131db82",path:"/blog/win7-icons-viewer-downloader.html",headers:[{level:2,title:"How to use",slug:"how-to-use"},{level:2,title:"Technical stuff",slug:"technical-stuff"},{level:3,title:"Github as a CMS",slug:"github-as-a-cms"},{level:3,title:"The familiar front-end stack",slug:"the-familiar-front-end-stack"}],lastUpdated:"6/26/2023, 12:53:04 PM",lastUpdatedTimestamp:1687783984e3,firstCreated:"11/6/2022, 4:04:36 AM",firstCreatedTimestamp:1667707476e3},{title:"Implementing File Explorer in Win7 Simu",frontmatter:{layout:"BlogPost",description:"Some key points to share about how Win7 Simu's File Explorer is implemented.",sidebar:"auto",tag:["sharing","win7-simu","technical"],meta:[{name:"image",content:"https://images.unsplash.com/photo-1544396821-4dd40b938ad3?auto=format&fit=crop&w=740&q=80"},{name:"twitter:title",content:"Implementing File Explorer in Win7 Simu"},{name:"twitter:description",content:"Some key points to share about how Win7 Simu's File Explorer is implemented."},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:image",content:"https://images.unsplash.com/photo-1544396821-4dd40b938ad3?auto=format&fit=crop&w=740&q=80"},{name:"twitter:url",content:"https://visnalize.com/blog/win7-simu-file-explorer.html"},{property:"og:type",content:"article"},{property:"og:title",content:"Implementing File Explorer in Win7 Simu"},{property:"og:description",content:"Some key points to share about how Win7 Simu's File Explorer is implemented."},{property:"og:image",content:"https://images.unsplash.com/photo-1544396821-4dd40b938ad3?auto=format&fit=crop&w=740&q=80"},{property:"og:url",content:"https://visnalize.com/blog/win7-simu-file-explorer.html"},{property:"article:author",content:"Visnalize"},{itemprop:"name",content:"Implementing File Explorer in Win7 Simu"},{itemprop:"description",content:"Some key points to share about how Win7 Simu's File Explorer is implemented."},{itemprop:"image",content:"https://images.unsplash.com/photo-1544396821-4dd40b938ad3?auto=format&fit=crop&w=740&q=80"}]},regularPath:"/blog/win7-simu-file-explorer.html",relativePath:"blog/win7-simu-file-explorer.md",key:"v-4182c7bc",path:"/blog/win7-simu-file-explorer.html",headers:[{level:2,title:"Some difficulties",slug:"some-difficulties"},{level:2,title:"Implementing the File Explorer functionalities",slug:"implementing-the-file-explorer-functionalities"},{level:3,title:"Implementation for Android",slug:"implementation-for-android"},{level:3,title:"Implementation for Web",slug:"implementation-for-web"},{level:2,title:"So, what's next",slug:"so-what-s-next"}],lastUpdated:"9/3/2024, 8:15:04 AM",lastUpdatedTimestamp:1725351304e3,firstCreated:"5/26/2023, 12:11:38 PM",firstCreatedTimestamp:1685103098e3},{title:"Win7 Simu versus mobile devices",frontmatter:{layout:"BlogPost",description:"How to install Win7 Simu on mobile devices without downloading from any App Stores.",sidebar:"auto",tag:["win7-simu","tips"],meta:[{name:"image",content:"https://images.unsplash.com/photo-1616353071855-2c045c4458ae?auto=format&fit=crop&w=740&q=80"},{name:"twitter:title",content:"Win7 Simu versus mobile devices"},{name:"twitter:description",content:"How to install Win7 Simu on mobile devices without downloading from any App Stores."},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:image",content:"https://images.unsplash.com/photo-1616353071855-2c045c4458ae?auto=format&fit=crop&w=740&q=80"},{name:"twitter:url",content:"https://visnalize.com/blog/win7-simu-mobile-devices.html"},{property:"og:type",content:"article"},{property:"og:title",content:"Win7 Simu versus mobile devices"},{property:"og:description",content:"How to install Win7 Simu on mobile devices without downloading from any App Stores."},{property:"og:image",content:"https://images.unsplash.com/photo-1616353071855-2c045c4458ae?auto=format&fit=crop&w=740&q=80"},{property:"og:url",content:"https://visnalize.com/blog/win7-simu-mobile-devices.html"},{property:"article:author",content:"Visnalize"},{itemprop:"name",content:"Win7 Simu versus mobile devices"},{itemprop:"description",content:"How to install Win7 Simu on mobile devices without downloading from any App Stores."},{itemprop:"image",content:"https://images.unsplash.com/photo-1616353071855-2c045c4458ae?auto=format&fit=crop&w=740&q=80"}]},regularPath:"/blog/win7-simu-mobile-devices.html",relativePath:"blog/win7-simu-mobile-devices.md",key:"v-44a529fc",path:"/blog/win7-simu-mobile-devices.html",headers:[{level:2,title:"Step-by-step guide",slug:"step-by-step-guide"},{level:3,title:"1. Open Win7 Simu with Safari",slug:"_1-open-win7-simu-with-safari"},{level:3,title:"2. Add to Home Screen",slug:"_2-add-to-home-screen"},{level:3,title:"3. Enjoy",slug:"_3-enjoy"},{level:2,title:"Some notes",slug:"some-notes"}],lastUpdated:"6/26/2023, 12:53:04 PM",lastUpdatedTimestamp:1687783984e3,firstCreated:"3/27/2023, 3:25:55 PM",firstCreatedTimestamp:1679930755e3},{title:"Implementing custom cursors in Win7 Simu",frontmatter:{layout:"BlogPost",description:"Deep dive into how custom cursors are implemented in Win7 Simu.",sidebar:"auto",tag:["sharing","win7-simu","technical"],meta:[{name:"image",content:"https://visnalize.com/assets/covers/win7-simu-custom-cursors.jpg"},{name:"twitter:title",content:"Implementing custom cursors in Win7 Simu"},{name:"twitter:description",content:"Deep dive into how custom cursors are implemented in Win7 Simu."},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:image",content:"https://visnalize.com/assets/covers/win7-simu-custom-cursors.jpg"},{name:"twitter:url",content:"https://visnalize.com/blog/win7-simu-custom-cursors.html"},{property:"og:type",content:"article"},{property:"og:title",content:"Implementing custom cursors in Win7 Simu"},{property:"og:description",content:"Deep dive into how custom cursors are implemented in Win7 Simu."},{property:"og:image",content:"https://visnalize.com/assets/covers/win7-simu-custom-cursors.jpg"},{property:"og:url",content:"https://visnalize.com/blog/win7-simu-custom-cursors.html"},{property:"article:author",content:"Visnalize"},{itemprop:"name",content:"Implementing custom cursors in Win7 Simu"},{itemprop:"description",content:"Deep dive into how custom cursors are implemented in Win7 Simu."},{itemprop:"image",content:"https://visnalize.com/assets/covers/win7-simu-custom-cursors.jpg"}]},regularPath:"/blog/win7-simu-custom-cursors.html",relativePath:"blog/win7-simu-custom-cursors.md",key:"v-3fb87dbc",path:"/blog/win7-simu-custom-cursors.html",headers:[{level:2,title:"The idea",slug:"the-idea"},{level:2,title:"The implementation",slug:"the-implementation"},{level:3,title:"1. Preloading the cursor images",slug:"_1-preloading-the-cursor-images"},{level:3,title:"2. Rendering the custom cursor",slug:"_2-rendering-the-custom-cursor"},{level:3,title:"3. Tracking the cursor state and position",slug:"_3-tracking-the-cursor-state-and-position"},{level:2,title:"The caveats",slug:"the-caveats"}],lastUpdated:"10/4/2024, 2:42:30 AM",lastUpdatedTimestamp:172800975e4,firstCreated:"10/3/2024, 4:06:22 AM",firstCreatedTimestamp:1727928382e3},{title:"Implementing Windows Media Center in Win7 Simu",frontmatter:{layout:"BlogPost",description:"Sharing on how Windows Media Center was implemented in Win7 Simu.",sidebar:"auto",tag:["sharing","win7-simu","technical","guest-post"],meta:[{name:"image",content:"https://visnalize.com/assets/covers/win7-simu-windows-media-center.jpg"},{name:"twitter:title",content:"Implementing Windows Media Center in Win7 Simu"},{name:"twitter:description",content:"Sharing on how Windows Media Center was implemented in Win7 Simu."},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:image",content:"https://visnalize.com/assets/covers/win7-simu-windows-media-center.jpg"},{name:"twitter:url",content:"https://visnalize.com/blog/win7-simu-windows-media-center.html"},{property:"og:type",content:"article"},{property:"og:title",content:"Implementing Windows Media Center in Win7 Simu"},{property:"og:description",content:"Sharing on how Windows Media Center was implemented in Win7 Simu."},{property:"og:image",content:"https://visnalize.com/assets/covers/win7-simu-windows-media-center.jpg"},{property:"og:url",content:"https://visnalize.com/blog/win7-simu-windows-media-center.html"},{property:"article:author",content:"Visnalize"},{itemprop:"name",content:"Implementing Windows Media Center in Win7 Simu"},{itemprop:"description",content:"Sharing on how Windows Media Center was implemented in Win7 Simu."},{itemprop:"image",content:"https://visnalize.com/assets/covers/win7-simu-windows-media-center.jpg"}]},regularPath:"/blog/win7-simu-windows-media-center.html",relativePath:"blog/win7-simu-windows-media-center.md",key:"v-bfc8be7c",path:"/blog/win7-simu-windows-media-center.html",headers:[{level:2,title:"The Scope",slug:"the-scope"},{level:2,title:"The Implementation",slug:"the-implementation"},{level:3,title:"Resource Files",slug:"resource-files"},{level:3,title:"The Intro Screen",slug:"the-intro-screen"},{level:3,title:"The Home Screen",slug:"the-home-screen"},{level:3,title:"The Photos + Videos Libraries",slug:"the-photos-videos-libraries"},{level:3,title:"The Music Library",slug:"the-music-library"},{level:2,title:"The Future?",slug:"the-future"}],lastUpdated:"10/3/2024, 4:06:22 AM",lastUpdatedTimestamp:1727928382e3,firstCreated:"4/15/2024, 12:16:47 PM",firstCreatedTimestamp:1713183407e3},{title:"Introducing Win7 UI",frontmatter:{layout:"BlogPost",description:"The open-source UI library that powers Win7 Simu behind the scenes.",sidebar:"auto",tag:["technical","tools"],meta:[{name:"image",content:"https://visnalize.com/assets/covers/win7-ui-hero.jpg"},{name:"twitter:title",content:"Introducing Win7 UI"},{name:"twitter:description",content:"The open-source UI library that powers Win7 Simu behind the scenes."},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:image",content:"https://visnalize.com/assets/covers/win7-ui-hero.jpg"},{name:"twitter:url",content:"https://visnalize.com/blog/win7-ui-introduction.html"},{property:"og:type",content:"article"},{property:"og:title",content:"Introducing Win7 UI"},{property:"og:description",content:"The open-source UI library that powers Win7 Simu behind the scenes."},{property:"og:image",content:"https://visnalize.com/assets/covers/win7-ui-hero.jpg"},{property:"og:url",content:"https://visnalize.com/blog/win7-ui-introduction.html"},{property:"article:author",content:"Visnalize"},{itemprop:"name",content:"Introducing Win7 UI"},{itemprop:"description",content:"The open-source UI library that powers Win7 Simu behind the scenes."},{itemprop:"image",content:"https://visnalize.com/assets/covers/win7-ui-hero.jpg"}]},regularPath:"/blog/win7-ui-introduction.html",relativePath:"blog/win7-ui-introduction.md",key:"v-72bfdbc2",path:"/blog/win7-ui-introduction.html",headers:[{level:2,title:"The introduction",slug:"the-introduction"},{level:2,title:"Technical stuff in-depth",slug:"technical-stuff-in-depth"},{level:3,title:"The component library",slug:"the-component-library"},{level:3,title:"The documentation site",slug:"the-documentation-site"},{level:2,title:"What to expect in the future",slug:"what-to-expect-in-the-future"}],lastUpdated:"9/3/2024, 8:15:04 AM",lastUpdatedTimestamp:1725351304e3,firstCreated:"8/20/2023, 8:34:48 AM",firstCreatedTimestamp:1692520488e3},{title:"Win7 Simu year in review - 2022",frontmatter:{layout:"BlogPost",description:"Look back at some amazing numbers for Win7 Simu in 2022.",sidebar:"auto",tag:["win7-simu","review"],meta:[{name:"image",content:"https://images.unsplash.com/photo-1651377731759-fe736975a6e9?auto=format&fit=crop&w=740&q=80"},{name:"twitter:title",content:"Win7 Simu year in review - 2022"},{name:"twitter:description",content:"Look back at some amazing numbers for Win7 Simu in 2022."},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:image",content:"https://images.unsplash.com/photo-1651377731759-fe736975a6e9?auto=format&fit=crop&w=740&q=80"},{name:"twitter:url",content:"https://visnalize.com/blog/win7-simu-year-in-review-2022.html"},{property:"og:type",content:"article"},{property:"og:title",content:"Win7 Simu year in review - 2022"},{property:"og:description",content:"Look back at some amazing numbers for Win7 Simu in 2022."},{property:"og:image",content:"https://images.unsplash.com/photo-1651377731759-fe736975a6e9?auto=format&fit=crop&w=740&q=80"},{property:"og:url",content:"https://visnalize.com/blog/win7-simu-year-in-review-2022.html"},{property:"article:author",content:"Visnalize"},{itemprop:"name",content:"Win7 Simu year in review - 2022"},{itemprop:"description",content:"Look back at some amazing numbers for Win7 Simu in 2022."},{itemprop:"image",content:"https://images.unsplash.com/photo-1651377731759-fe736975a6e9?auto=format&fit=crop&w=740&q=80"}]},regularPath:"/blog/win7-simu-year-in-review-2022.html",relativePath:"blog/win7-simu-year-in-review-2022.md",key:"v-3424310c",path:"/blog/win7-simu-year-in-review-2022.html",headers:[{level:2,title:"The amazing numbers",slug:"the-amazing-numbers"},{level:2,title:"Other interesting statistics",slug:"other-interesting-statistics"},{level:3,title:"Countries overview",slug:"countries-overview"},{level:3,title:"Devices overview",slug:"devices-overview"},{level:2,title:"Looking out to 2023",slug:"looking-out-to-2023"}],lastUpdated:"6/26/2023, 12:53:04 PM",lastUpdatedTimestamp:1687783984e3,firstCreated:"1/1/2023, 5:40:40 AM",firstCreatedTimestamp:167255164e4},{title:"How to get Windows resources",frontmatter:{layout:"BlogPost",description:"Ways that you can retrieve Windows resources such as wallpapers, icons, audio files etc.",sidebar:"auto",tag:["win7-simu","tips"],meta:[{name:"image",content:"https://images.unsplash.com/photo-1624571409108-e9a41746af53?auto=format&fit=crop&w=740&q=80"},{name:"twitter:title",content:"How to get Windows resources"},{name:"twitter:description",content:"Ways that you can retrieve Windows resources such as wallpapers, icons, audio files etc."},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:image",content:"https://images.unsplash.com/photo-1624571409108-e9a41746af53?auto=format&fit=crop&w=740&q=80"},{name:"twitter:url",content:"https://visnalize.com/blog/windows-resources.html"},{property:"og:type",content:"article"},{property:"og:title",content:"How to get Windows resources"},{property:"og:description",content:"Ways that you can retrieve Windows resources such as wallpapers, icons, audio files etc."},{property:"og:image",content:"https://images.unsplash.com/photo-1624571409108-e9a41746af53?auto=format&fit=crop&w=740&q=80"},{property:"og:url",content:"https://visnalize.com/blog/windows-resources.html"},{property:"article:author",content:"Visnalize"},{itemprop:"name",content:"How to get Windows resources"},{itemprop:"description",content:"Ways that you can retrieve Windows resources such as wallpapers, icons, audio files etc."},{itemprop:"image",content:"https://images.unsplash.com/photo-1624571409108-e9a41746af53?auto=format&fit=crop&w=740&q=80"}]},regularPath:"/blog/windows-resources.html",relativePath:"blog/windows-resources.md",key:"v-301172dc",path:"/blog/windows-resources.html",headers:[{level:2,title:"Searching around",slug:"searching-around"},{level:2,title:"Extracting icons from .dll files",slug:"extracting-icons-from-dll-files"},{level:2,title:"Summary",slug:"summary"}],lastUpdated:"9/3/2024, 8:15:04 AM",lastUpdatedTimestamp:1725351304e3,firstCreated:"8/4/2021, 2:48:25 AM",firstCreatedTimestamp:1628045305e3},{title:"What is Brick 1100?",frontmatter:{layout:"WithComments",title:"What is Brick 1100?",description:"A simulation of the Nokia 1100 mobile phone. Experience it on your smartphone/web browser",sidebar:!1,image:"https://image.social/get?url=visnalize.com/brick1100/about.html",meta:[{name:"image",content:"https://image.social/get?url=visnalize.com/brick1100/about.html"},{name:"twitter:title",content:"What is Brick 1100?"},{name:"twitter:description",content:"A simulation of the Nokia 1100 mobile phone. Experience it on your smartphone/web browser"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:image",content:"https://image.social/get?url=visnalize.com/brick1100/about.html"},{name:"twitter:url",content:"https://visnalize.com/brick1100/about.html"},{property:"og:type",content:"article"},{property:"og:title",content:"What is Brick 1100?"},{property:"og:description",content:"A simulation of the Nokia 1100 mobile phone. Experience it on your smartphone/web browser"},{property:"og:image",content:"https://image.social/get?url=visnalize.com/brick1100/about.html"},{property:"og:url",content:"https://visnalize.com/brick1100/about.html"},{property:"article:author",content:"Visnalize"},{itemprop:"name",content:"What is Brick 1100?"},{itemprop:"description",content:"A simulation of the Nokia 1100 mobile phone. Experience it on your smartphone/web browser"},{itemprop:"image",content:"https://image.social/get?url=visnalize.com/brick1100/about.html"}]},regularPath:"/brick1100/about.html",relativePath:"brick1100/about.md",key:"v-6796123c",path:"/brick1100/about.html",headers:[{level:2,title:"Interesting facts and history",slug:"interesting-facts-and-history"},{level:2,title:"Why Brick 1100?",slug:"why-brick-1100"},{level:2,title:"Features",slug:"features"}],lastUpdated:"9/8/2024, 8:36:48 AM",lastUpdatedTimestamp:1725784608e3,firstCreated:"7/17/2021, 2:35:57 PM",firstCreatedTimestamp:1626532557e3},{title:"Brick 1100 Builders",frontmatter:{layout:"BlogPost",description:"Discover how to build your own apps and games on Brick 1100. Develop and share your creations with fellow Brick 1100 users.",meta:[{name:"image",content:"https://visnalize.com/assets/covers/builders.jpg"},{name:"twitter:title",content:"Brick 1100 Builders"},{name:"twitter:description",content:"Discover how to build your own apps and games on Brick 1100. Develop and share your creations with fellow Brick 1100 users."},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:image",content:"https://visnalize.com/assets/covers/builders.jpg"},{name:"twitter:url",content:"https://visnalize.com/brick1100/builders.html"},{property:"og:type",content:"article"},{property:"og:title",content:"Brick 1100 Builders"},{property:"og:description",content:"Discover how to build your own apps and games on Brick 1100. Develop and share your creations with fellow Brick 1100 users."},{property:"og:image",content:"https://visnalize.com/assets/covers/builders.jpg"},{property:"og:url",content:"https://visnalize.com/brick1100/builders.html"},{property:"article:author",content:"Visnalize"},{itemprop:"name",content:"Brick 1100 Builders"},{itemprop:"description",content:"Discover how to build your own apps and games on Brick 1100. Develop and share your creations with fellow Brick 1100 users."},{itemprop:"image",content:"https://visnalize.com/assets/covers/builders.jpg"}]},regularPath:"/brick1100/builders.html",relativePath:"brick1100/builders.md",key:"v-3692f0a2",path:"/brick1100/builders.html",headers:[{level:2,title:"Understanding how it works",slug:"understanding-how-it-works"},{level:3,title:"The nature of Brick 1100",slug:"the-nature-of-brick-1100"},{level:3,title:"Bridge 1100",slug:"bridge-1100"},{level:2,title:"Step-by-step guide",slug:"step-by-step-guide"}],lastUpdated:"9/8/2024, 4:39:40 PM",lastUpdatedTimestamp:172581358e4,firstCreated:"9/8/2024, 4:27:05 PM",firstCreatedTimestamp:1725812825e3},{title:"Brick 1100 Changelog",frontmatter:{title:"Brick 1100 Changelog",description:"Changes throughout the versions of the Brick 1100 app. Check the log at this page.",sidebar:"auto",pageClass:"changelog",image:"https://image.social/get?url=visnalize.com/brick1100/changelog.html",meta:[{name:"image",content:"https://image.social/get?url=visnalize.com/brick1100/changelog.html"},{name:"twitter:title",content:"Brick 1100 Changelog"},{name:"twitter:description",content:"Changes throughout the versions of the Brick 1100 app. Check the log at this page."},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:image",content:"https://image.social/get?url=visnalize.com/brick1100/changelog.html"},{name:"twitter:url",content:"https://visnalize.com/brick1100/changelog.html"},{property:"og:type",content:"article"},{property:"og:title",content:"Brick 1100 Changelog"},{property:"og:description",content:"Changes throughout the versions of the Brick 1100 app. Check the log at this page."},{property:"og:image",content:"https://image.social/get?url=visnalize.com/brick1100/changelog.html"},{property:"og:url",content:"https://visnalize.com/brick1100/changelog.html"},{property:"article:author",content:"Visnalize"},{itemprop:"name",content:"Brick 1100 Changelog"},{itemprop:"description",content:"Changes throughout the versions of the Brick 1100 app. Check the log at this page."},{itemprop:"image",content:"https://image.social/get?url=visnalize.com/brick1100/changelog.html"}]},regularPath:"/brick1100/changelog.html",relativePath:"brick1100/changelog.md",key:"v-84d6517c",path:"/brick1100/changelog.html",headers:[{level:2,title:"Beta versions",slug:"beta-versions"},{level:3,title:"0.0.13 (Sep 24, 2024)",slug:"_0-0-13-sep-24-2024"},{level:3,title:"0.0.12 (Sep 22, 2024)",slug:"_0-0-12-sep-22-2024"},{level:3,title:"0.0.11 (Aug 17, 2024)",slug:"_0-0-11-aug-17-2024"},{level:3,title:"0.0.10 (Aug 10, 2024)",slug:"_0-0-10-aug-10-2024"},{level:3,title:"0.0.9 (Jun 24, 2024)",slug:"_0-0-9-jun-24-2024"},{level:3,title:"0.0.8 (Dec 2, 2023)",slug:"_0-0-8-dec-2-2023"},{level:3,title:"0.0.7 (Nov 4, 2023)",slug:"_0-0-7-nov-4-2023"},{level:3,title:"0.0.6 (Oct 16, 2023)",slug:"_0-0-6-oct-16-2023"},{level:3,title:"0.0.5 (Sep 30, 2023)",slug:"_0-0-5-sep-30-2023"},{level:3,title:"0.0.4 (Sep 27, 2023)",slug:"_0-0-4-sep-27-2023"},{level:3,title:"0.0.3 (Sep 26, 2023)",slug:"_0-0-3-sep-26-2023"},{level:3,title:"0.0.2 (Sep 26, 2023)",slug:"_0-0-2-sep-26-2023"},{level:3,title:"0.0.1 (Sep 26, 2023)",slug:"_0-0-1-sep-26-2023"}],lastUpdated:"9/25/2024, 1:00:10 AM",lastUpdatedTimestamp:172722601e4,firstCreated:"9/24/2023, 2:57:02 AM",firstCreatedTimestamp:1695524222e3},{title:"Brick 1100 Games",frontmatter:{layout:"BlogPost",description:"Play the classic games on Brick 1100. Snake, Brick Breaker, Chrome Dino, Monogram and more",image:"https://image.social/get?url=visnalize.com/brick1100/games.html",meta:[{name:"image",content:"https://image.social/get?url=visnalize.com/brick1100/games.html"},{name:"twitter:title",content:"Brick 1100 Games"},{name:"twitter:description",content:"Play the classic games on Brick 1100. Snake, Brick Breaker, Chrome Dino, Monogram and more"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:image",content:"https://image.social/get?url=visnalize.com/brick1100/games.html"},{name:"twitter:url",content:"https://visnalize.com/brick1100/games.html"},{property:"og:type",content:"article"},{property:"og:title",content:"Brick 1100 Games"},{property:"og:description",content:"Play the classic games on Brick 1100. Snake, Brick Breaker, Chrome Dino, Monogram and more"},{property:"og:image",content:"https://image.social/get?url=visnalize.com/brick1100/games.html"},{property:"og:url",content:"https://visnalize.com/brick1100/games.html"},{property:"article:author",content:"Visnalize"},{itemprop:"name",content:"Brick 1100 Games"},{itemprop:"description",content:"Play the classic games on Brick 1100. Snake, Brick Breaker, Chrome Dino, Monogram and more"},{itemprop:"image",content:"https://image.social/get?url=visnalize.com/brick1100/games.html"}]},regularPath:"/brick1100/games.html",relativePath:"brick1100/games.md",key:"v-7716093c",path:"/brick1100/games.html",headers:[{level:2,title:"Snake",slug:"snake"},{level:2,title:"Brick Breaker",slug:"brick-breaker"},{level:2,title:"Chrome Dino",slug:"chrome-dino"},{level:2,title:"Monogram",slug:"monogram"}],lastUpdated:"9/5/2024, 4:51:57 PM",lastUpdatedTimestamp:1725555117e3,firstCreated:"11/4/2023, 8:22:26 AM",firstCreatedTimestamp:1699086146e3},{title:"Brick 1100 deep links",frontmatter:{layout:"BlogPost",description:"Explore deep links available in Brick 1100. Take shortcuts to your favorite sections or share them with others",image:"https://image.social/get?url=visnalize.com/brick1100/deep-links.html",meta:[{name:"image",content:"https://image.social/get?url=visnalize.com/brick1100/deep-links.html"},{name:"twitter:title",content:"Brick 1100 deep links"},{name:"twitter:description",content:"Explore deep links available in Brick 1100. Take shortcuts to your favorite sections or share them with others"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:image",content:"https://image.social/get?url=visnalize.com/brick1100/deep-links.html"},{name:"twitter:url",content:"https://visnalize.com/brick1100/deep-links.html"},{property:"og:type",content:"article"},{property:"og:title",content:"Brick 1100 deep links"},{property:"og:description",content:"Explore deep links available in Brick 1100. Take shortcuts to your favorite sections or share them with others"},{property:"og:image",content:"https://image.social/get?url=visnalize.com/brick1100/deep-links.html"},{property:"og:url",content:"https://visnalize.com/brick1100/deep-links.html"},{property:"article:author",content:"Visnalize"},{itemprop:"name",content:"Brick 1100 deep links"},{itemprop:"description",content:"Explore deep links available in Brick 1100. Take shortcuts to your favorite sections or share them with others"},{itemprop:"image",content:"https://image.social/get?url=visnalize.com/brick1100/deep-links.html"}]},regularPath:"/brick1100/deep-links.html",relativePath:"brick1100/deep-links.md",key:"v-16be053c",path:"/brick1100/deep-links.html",headers:[{level:2,title:"Available links",slug:"available-links"}],lastUpdated:"9/8/2024, 8:36:48 AM",lastUpdatedTimestamp:1725784608e3,firstCreated:"11/4/2023, 8:22:26 AM",firstCreatedTimestamp:1699086146e3},{frontmatter:{description:"",meta:[{name:"twitter:title",content:""},{name:"twitter:description",content:""},{name:"twitter:card",content:"summary"},{name:"twitter:url",content:"https://visnalize.com/brick1100/"},{property:"og:type",content:"article"},{property:"og:title",content:""},{property:"og:description",content:""},{property:"og:url",content:"https://visnalize.com/brick1100/"},{property:"article:author",content:"Visnalize"},{itemprop:"name",content:""},{itemprop:"description",content:""}]},regularPath:"/brick1100/",relativePath:"brick1100/index.md",key:"v-6444650a",path:"/brick1100/",lastUpdated:"11/2/2023, 5:52:36 PM",lastUpdatedTimestamp:1698947556e3,firstCreated:"11/2/2023, 5:48:31 PM",firstCreatedTimestamp:1698947311e3},{title:"Brick 1100 Privacy Policy",frontmatter:{title:"Brick 1100 Privacy Policy",sidebar:"auto",image:"https://image.social/get?url=visnalize.com/brick1100/privacy.html",description:"",meta:[{name:"image",content:"https://image.social/get?url=visnalize.com/brick1100/privacy.html"},{name:"twitter:title",content:"Brick 1100 Privacy Policy"},{name:"twitter:description",content:""},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:image",content:"https://image.social/get?url=visnalize.com/brick1100/privacy.html"},{name:"twitter:url",content:"https://visnalize.com/brick1100/privacy.html"},{property:"og:type",content:"article"},{property:"og:title",content:"Brick 1100 Privacy Policy"},{property:"og:description",content:""},{property:"og:image",content:"https://image.social/get?url=visnalize.com/brick1100/privacy.html"},{property:"og:url",content:"https://visnalize.com/brick1100/privacy.html"},{property:"article:author",content:"Visnalize"},{itemprop:"name",content:"Brick 1100 Privacy Policy"},{itemprop:"description",content:""},{itemprop:"image",content:"https://image.social/get?url=visnalize.com/brick1100/privacy.html"}]},regularPath:"/brick1100/privacy.html",relativePath:"brick1100/privacy.md",key:"v-2af59a42",path:"/brick1100/privacy.html",headers:[{level:2,title:"Information Collection and Use",slug:"information-collection-and-use"},{level:2,title:"Log Data",slug:"log-data"},{level:2,title:"Cookies",slug:"cookies"},{level:2,title:"Service Providers",slug:"service-providers"},{level:2,title:"Security",slug:"security"},{level:2,title:"Links to Other Sites",slug:"links-to-other-sites"},{level:2,title:"Children's Privacy",slug:"children-s-privacy"},{level:2,title:"Changes to This Privacy Policy",slug:"changes-to-this-privacy-policy"},{level:2,title:"Contact Us",slug:"contact-us"}],lastUpdated:"6/1/2024, 6:49:33 AM",lastUpdatedTimestamp:1717224573e3,firstCreated:"9/24/2023, 2:57:02 AM",firstCreatedTimestamp:1695524222e3},{frontmatter:{description:"",meta:[{name:"twitter:title",content:""},{name:"twitter:description",content:""},{name:"twitter:card",content:"summary"},{name:"twitter:url",content:"https://visnalize.com/contact.html"},{property:"og:type",content:"article"},{property:"og:title",content:""},{property:"og:description",content:""},{property:"og:url",content:"https://visnalize.com/contact.html"},{property:"article:author",content:"Visnalize"},{itemprop:"name",content:""},{itemprop:"description",content:""}]},regularPath:"/contact.html",relativePath:"contact.md",key:"v-6cc96c82",path:"/contact.html",lastUpdated:"11/2/2023, 5:52:36 PM",lastUpdatedTimestamp:1698947556e3,firstCreated:"11/2/2023, 5:48:31 PM",firstCreatedTimestamp:1698947311e3},{title:"Home",frontmatter:{home:!0,description:"Author of Win7 Simu and Brick 1100. On a mission to relive the good old days with simulation apps.",tagline:null,pageClass:"homepage",image:"https://image.social/get?url=visnalize.com",meta:[{name:"image",content:"https://image.social/get?url=visnalize.com"},{name:"twitter:title",content:"Visnalize"},{name:"twitter:description",content:"Author of Win7 Simu and Brick 1100. On a mission to relive the good old days with simulation apps."},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:image",content:"https://image.social/get?url=visnalize.com"},{name:"twitter:url",content:"https://visnalize.com/"},{property:"og:type",content:"website"},{property:"og:title",content:"Visnalize"},{property:"og:description",content:"Author of Win7 Simu and Brick 1100. On a mission to relive the good old days with simulation apps."},{property:"og:image",content:"https://image.social/get?url=visnalize.com"},{property:"og:url",content:"https://visnalize.com/"},{itemprop:"name",content:"Visnalize"},{itemprop:"description",content:"Author of Win7 Simu and Brick 1100. On a mission to relive the good old days with simulation apps."},{itemprop:"image",content:"https://image.social/get?url=visnalize.com"}]},regularPath:"/",relativePath:"index.md",key:"v-98844e8a",path:"/",lastUpdated:"9/3/2024, 9:12:11 AM",lastUpdatedTimestamp:1725354731e3,firstCreated:"7/5/2021, 2:24:45 PM",firstCreatedTimestamp:1625495085e3},{title:"What is Win7 Simu?",frontmatter:{layout:"WithComments",title:"What is Win7 Simu?",description:"A recreation of the Windows 7 operating system on the Web/Android platform, brings back the nostalgia with the elegant Aero interface",sidebar:!1,image:"https://image.social/get?url=visnalize.com/win7simu/about.html",meta:[{name:"image",content:"https://image.social/get?url=visnalize.com/win7simu/about.html"},{name:"twitter:title",content:"What is Win7 Simu?"},{name:"twitter:description",content:"A recreation of the Windows 7 operating system on the Web/Android platform, brings back the nostalgia with the elegant Aero interface"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:image",content:"https://image.social/get?url=visnalize.com/win7simu/about.html"},{name:"twitter:url",content:"https://visnalize.com/win7simu/about.html"},{property:"og:type",content:"article"},{property:"og:title",content:"What is Win7 Simu?"},{property:"og:description",content:"A recreation of the Windows 7 operating system on the Web/Android platform, brings back the nostalgia with the elegant Aero interface"},{property:"og:image",content:"https://image.social/get?url=visnalize.com/win7simu/about.html"},{property:"og:url",content:"https://visnalize.com/win7simu/about.html"},{property:"article:author",content:"Visnalize"},{itemprop:"name",content:"What is Win7 Simu?"},{itemprop:"description",content:"A recreation of the Windows 7 operating system on the Web/Android platform, brings back the nostalgia with the elegant Aero interface"},{itemprop:"image",content:"https://image.social/get?url=visnalize.com/win7simu/about.html"}]},regularPath:"/win7simu/about.html",relativePath:"win7simu/about.md",key:"v-08727ec0",path:"/win7simu/about.html",headers:[{level:2,title:"Features",slug:"features"},{level:2,title:"Pricing",slug:"pricing"},{level:2,title:"A bit of the history",slug:"a-bit-of-the-history"}],lastUpdated:"9/8/2024, 8:36:48 AM",lastUpdatedTimestamp:1725784608e3,firstCreated:"7/5/2021, 2:24:45 PM",firstCreatedTimestamp:1625495085e3},{title:"Win7 Simu Changelog",frontmatter:{title:"Win7 Simu Changelog",description:"Curious about the changes done through versions of the Win7 Simu app? Check the log at this page",sidebar:"auto",pageClass:"changelog",image:"https://image.social/get?url=visnalize.com/win7simu/changelog.html",meta:[{name:"image",content:"https://image.social/get?url=visnalize.com/win7simu/changelog.html"},{name:"twitter:title",content:"Win7 Simu Changelog"},{name:"twitter:description",content:"Curious about the changes done through versions of the Win7 Simu app? Check the log at this page"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:image",content:"https://image.social/get?url=visnalize.com/win7simu/changelog.html"},{name:"twitter:url",content:"https://visnalize.com/win7simu/changelog.html"},{property:"og:type",content:"article"},{property:"og:title",content:"Win7 Simu Changelog"},{property:"og:description",content:"Curious about the changes done through versions of the Win7 Simu app? Check the log at this page"},{property:"og:image",content:"https://image.social/get?url=visnalize.com/win7simu/changelog.html"},{property:"og:url",content:"https://visnalize.com/win7simu/changelog.html"},{property:"article:author",content:"Visnalize"},{itemprop:"name",content:"Win7 Simu Changelog"},{itemprop:"description",content:"Curious about the changes done through versions of the Win7 Simu app? Check the log at this page"},{itemprop:"image",content:"https://image.social/get?url=visnalize.com/win7simu/changelog.html"}]},regularPath:"/win7simu/changelog.html",relativePath:"win7simu/changelog.md",key:"v-ba31739c",path:"/win7simu/changelog.html",headers:[{level:2,title:"2024",slug:"_2024"},{level:3,title:"3.15.0 (Oct 31, 2024)",slug:"_3-15-0-oct-31-2024"},{level:3,title:"3.14.0 (Oct 8, 2024)",slug:"_3-14-0-oct-8-2024"},{level:3,title:"3.13.1 (Sep 14, 2024)",slug:"_3-13-1-sep-14-2024"},{level:3,title:"3.13.0 (Sep 8, 2024)",slug:"_3-13-0-sep-8-2024"},{level:3,title:"3.12.1 (Aug 24, 2024)",slug:"_3-12-1-aug-24-2024"},{level:3,title:"3.12.0 (Aug 13, 2024)",slug:"_3-12-0-aug-13-2024"},{level:3,title:"3.11.2 (June 20, 2024)",slug:"_3-11-2-june-20-2024"},{level:3,title:"3.11.1 (June 19, 2024)",slug:"_3-11-1-june-19-2024"},{level:3,title:"3.11.0 (June 18, 2024)",slug:"_3-11-0-june-18-2024"},{level:3,title:"3.10.0 (June 7, 2024)",slug:"_3-10-0-june-7-2024"},{level:3,title:"3.9.0 (Apr 13, 2024)",slug:"_3-9-0-apr-13-2024"},{level:3,title:"3.8.1 (Jan 29, 2024)",slug:"_3-8-1-jan-29-2024"},{level:3,title:"3.8.0 (Jan 29, 2024)",slug:"_3-8-0-jan-29-2024"},{level:3,title:"3.7.0 (Jan 14, 2024)",slug:"_3-7-0-jan-14-2024"},{level:2,title:"2023",slug:"_2023"},{level:3,title:"3.6.1 (Dec 28, 2023)",slug:"_3-6-1-dec-28-2023"},{level:3,title:"3.6.0 (Dec 24, 2023)",slug:"_3-6-0-dec-24-2023"},{level:3,title:"3.5.0 (Nov 19, 2023)",slug:"_3-5-0-nov-19-2023"},{level:3,title:"3.4.0 (Oct 6, 2023)",slug:"_3-4-0-oct-6-2023"},{level:3,title:"3.3.1 (Aug 4, 2023)",slug:"_3-3-1-aug-4-2023"},{level:3,title:"3.3.0 (Aug 3, 2023)",slug:"_3-3-0-aug-3-2023"},{level:3,title:"3.2.0 (Jul 25, 2023)",slug:"_3-2-0-jul-25-2023"},{level:3,title:"3.1.0 (Jul 10, 2023)",slug:"_3-1-0-jul-10-2023"},{level:3,title:"3.0.4 (Jun 24, 2023)",slug:"_3-0-4-jun-24-2023"},{level:3,title:"3.0.3 (Jun 10, 2023)",slug:"_3-0-3-jun-10-2023"},{level:3,title:"3.0.2 (May 23, 2023)",slug:"_3-0-2-may-23-2023"},{level:3,title:"3.0.1 (May 21, 2023)",slug:"_3-0-1-may-21-2023"},{level:3,title:"3.0.0 (May 20, 2023)",slug:"_3-0-0-may-20-2023"},{level:3,title:"2.28.0 (Apr 5, 2023)",slug:"_2-28-0-apr-5-2023"},{level:3,title:"2.27.0 (Mar 13, 2023)",slug:"_2-27-0-mar-13-2023"},{level:3,title:"2.26.2 (Feb 24, 2023)",slug:"_2-26-2-feb-24-2023"},{level:3,title:"2.26.1 (Feb 23, 2023)",slug:"_2-26-1-feb-23-2023"},{level:3,title:"2.26.0 (Feb 19, 2023)",slug:"_2-26-0-feb-19-2023"},{level:2,title:"2022",slug:"_2022"},{level:3,title:"2.25.0 (Dec 29, 2022)",slug:"_2-25-0-dec-29-2022"},{level:3,title:"2.24.0 (Nov 19, 2022)",slug:"_2-24-0-nov-19-2022"},{level:3,title:"2.23.1 (Sep 30, 2022)",slug:"_2-23-1-sep-30-2022"},{level:3,title:"2.23.2 (Oct 15, 2022)",slug:"_2-23-2-oct-15-2022"},{level:3,title:"2.23.0 (Sep 25, 2022)",slug:"_2-23-0-sep-25-2022"},{level:3,title:"2.22.2 (Sep 10, 2022)",slug:"_2-22-2-sep-10-2022"},{level:3,title:"2.22.1 (Aug 6, 2022)",slug:"_2-22-1-aug-6-2022"},{level:3,title:"2.22.0 (Aug 6, 2022)",slug:"_2-22-0-aug-6-2022"},{level:3,title:"2.21.0 (Jun 10, 2022)",slug:"_2-21-0-jun-10-2022"},{level:3,title:"2.20.0 (Jan 4, 2022)",slug:"_2-20-0-jan-4-2022"},{level:2,title:"2021",slug:"_2021"},{level:3,title:"2.19.0 (Nov 7, 2021)",slug:"_2-19-0-nov-7-2021"},{level:3,title:"2.18.0 (Oct 15, 2021)",slug:"_2-18-0-oct-15-2021"},{level:3,title:"2.17.0 (Oct 3, 2021)",slug:"_2-17-0-oct-3-2021"},{level:3,title:"2.16.0 (Sep 18, 2021)",slug:"_2-16-0-sep-18-2021"},{level:3,title:"2.15.0 (Sep 8, 2021)",slug:"_2-15-0-sep-8-2021"},{level:3,title:"2.14.0 (Aug 28, 2021)",slug:"_2-14-0-aug-28-2021"},{level:3,title:"2.13.0 (Aug 18, 2021)",slug:"_2-13-0-aug-18-2021"},{level:3,title:"2.12.0 (Aug 7, 2021)",slug:"_2-12-0-aug-7-2021"},{level:3,title:"2.11.1 (Jul 27, 2021)",slug:"_2-11-1-jul-27-2021"},{level:3,title:"2.11.0 (Jul 23, 2021)",slug:"_2-11-0-jul-23-2021"},{level:3,title:"2.10.0 (Jul 4, 2021)",slug:"_2-10-0-jul-4-2021"},{level:3,title:"2.9.0 (Jun 21, 2021)",slug:"_2-9-0-jun-21-2021"},{level:3,title:"2.8.0 (Jun 10, 2021)",slug:"_2-8-0-jun-10-2021"},{level:3,title:"2.7.0 (May 23, 2021)",slug:"_2-7-0-may-23-2021"},{level:3,title:"2.6.0 (May 14, 2021)",slug:"_2-6-0-may-14-2021"},{level:3,title:"2.5.0 (Apr 29, 2021)",slug:"_2-5-0-apr-29-2021"},{level:3,title:"2.4.0 (Apr 15, 2021)",slug:"_2-4-0-apr-15-2021"},{level:2,title:"2020",slug:"_2020"},{level:3,title:"2.3.3 (Aug 18, 2020)",slug:"_2-3-3-aug-18-2020"},{level:3,title:"2.3.2 (Aug 16, 2020)",slug:"_2-3-2-aug-16-2020"},{level:3,title:"2.3.1 (Jul 31, 2020)",slug:"_2-3-1-jul-31-2020"},{level:3,title:"2.3 (Jul 22, 2020)",slug:"_2-3-jul-22-2020"},{level:3,title:"2.2 (Jul 11, 2020)",slug:"_2-2-jul-11-2020"},{level:3,title:"2.1 (Jun 13, 2020)",slug:"_2-1-jun-13-2020"},{level:3,title:"2.0 (May 30, 2020)",slug:"_2-0-may-30-2020"},{level:3,title:"1.2.2 (May 9, 2020)",slug:"_1-2-2-may-9-2020"},{level:3,title:"1.2.1 (May 3, 2020)",slug:"_1-2-1-may-3-2020"},{level:3,title:"1.2 (Apr 16, 2020)",slug:"_1-2-apr-16-2020"},{level:3,title:"1.1 (Feb 27, 2020)",slug:"_1-1-feb-27-2020"},{level:3,title:"1.0 (Feb 16, 2020)",slug:"_1-0-feb-16-2020"}],lastUpdated:"10/31/2024, 1:44:26 PM",lastUpdatedTimestamp:1730382266e3,firstCreated:"7/7/2021, 2:18:59 AM",firstCreatedTimestamp:1625624339e3},{title:"Win7 Simu Frequently Asked Questions",frontmatter:{title:"Win7 Simu Frequently Asked Questions",description:"Have questions in regards to the Win7 Simu app? This page answers them, immediate and straightforward",layout:"WithComments",sidebar:"auto",image:"https://image.social/get?url=visnalize.com/win7simu/faq.html",meta:[{name:"image",content:"https://image.social/get?url=visnalize.com/win7simu/faq.html"},{name:"twitter:title",content:"Win7 Simu Frequently Asked Questions"},{name:"twitter:description",content:"Have questions in regards to the Win7 Simu app? This page answers them, immediate and straightforward"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:image",content:"https://image.social/get?url=visnalize.com/win7simu/faq.html"},{name:"twitter:url",content:"https://visnalize.com/win7simu/faq.html"},{property:"og:type",content:"article"},{property:"og:title",content:"Win7 Simu Frequently Asked Questions"},{property:"og:description",content:"Have questions in regards to the Win7 Simu app? This page answers them, immediate and straightforward"},{property:"og:image",content:"https://image.social/get?url=visnalize.com/win7simu/faq.html"},{property:"og:url",content:"https://visnalize.com/win7simu/faq.html"},{property:"article:author",content:"Visnalize"},{itemprop:"name",content:"Win7 Simu Frequently Asked Questions"},{itemprop:"description",content:"Have questions in regards to the Win7 Simu app? This page answers them, immediate and straightforward"},{itemprop:"image",content:"https://image.social/get?url=visnalize.com/win7simu/faq.html"}]},regularPath:"/win7simu/faq.html",relativePath:"win7simu/faq.md",key:"v-8cd4b9a4",path:"/win7simu/faq.html",headers:[{level:2,title:"1. Simulator features",slug:"_1-simulator-features"},{level:3,title:"Can I install exe files/Windows programs on this?",slug:"can-i-install-exe-files-windows-programs-on-this"},{level:3,title:"Can you implement the mouse control in the same way as the Win98 Simulator?",slug:"can-you-implement-the-mouse-control-in-the-same-way-as-the-win98-simulator"},{level:3,title:"IE and Chrome cannot connect to the internet. Can you fix them?",slug:"ie-and-chrome-cannot-connect-to-the-internet-can-you-fix-them"},{level:3,title:"IE and Chrome are too slow. Can you fix them?",slug:"ie-and-chrome-are-too-slow-can-you-fix-them"},{level:3,title:"IE and Chrome cannot download files/programs. Can you fix them?",slug:"ie-and-chrome-cannot-download-files-programs-can-you-fix-them"},{level:3,title:"Can you add Microsoft Office?",slug:"can-you-add-microsoft-office"},{level:3,title:"Can you add this feature, that feature and more features?",slug:"can-you-add-this-feature-that-feature-and-more-features"},{level:3,title:"Can I use this simulator as a launcher/home screen?",slug:"can-i-use-this-simulator-as-a-launcher-home-screen"},{level:3,title:"Does this simulator work offline?",slug:"does-this-simulator-work-offline"},{level:2,title:"2. How to use",slug:"_2-how-to-use"},{level:3,title:"How do I create a user account?",slug:"how-do-i-create-a-user-account"},{level:3,title:"I don't know the password. How do I login?",slug:"i-don-t-know-the-password-how-do-i-login"},{level:3,title:"I have forgotten my password. How to recover it?",slug:"i-have-forgotten-my-password-how-to-recover-it"},{level:3,title:"How do I open the desktop menu?",slug:"how-do-i-open-the-desktop-menu"},{level:3,title:"How do I bring programs/apps to desktop?",slug:"how-do-i-bring-programs-apps-to-desktop"},{level:2,title:"3. Miscellaneous",slug:"_3-miscellaneous"},{level:3,title:"Can you remove the ads?",slug:"can-you-remove-the-ads"},{level:3,title:"Can this simulator work on Android versions earlier than 6.0?",slug:"can-this-simulator-work-on-android-versions-earlier-than-6-0"},{level:3,title:"The simulator only shows a black screen on my device. What should I do?",slug:"the-simulator-only-shows-a-black-screen-on-my-device-what-should-i-do"},{level:3,title:"My games/apps are not showing in the Start Menu. What's the problem?",slug:"my-games-apps-are-not-showing-in-the-start-menu-what-s-the-problem"},{level:3,title:"File Explorer does not show files on my device. What's the problem?",slug:"file-explorer-does-not-show-files-on-my-device-what-s-the-problem"},{level:3,title:"Any plan to publish this simulator to App Store?",slug:"any-plan-to-publish-this-simulator-to-app-store"},{level:3,title:"I found a bug in the simulator. How do I report it?",slug:"i-found-a-bug-in-the-simulator-how-do-i-report-it"}],lastUpdated:"9/3/2024, 8:15:04 AM",lastUpdatedTimestamp:1725351304e3,firstCreated:"7/5/2021, 2:24:45 PM",firstCreatedTimestamp:1625495085e3},{frontmatter:{description:"",meta:[{name:"twitter:title",content:""},{name:"twitter:description",content:""},{name:"twitter:card",content:"summary"},{name:"twitter:url",content:"https://visnalize.com/win7simu/"},{property:"og:type",content:"article"},{property:"og:title",content:""},{property:"og:description",content:""},{property:"og:url",content:"https://visnalize.com/win7simu/"},{property:"article:author",content:"Visnalize"},{itemprop:"name",content:""},{itemprop:"description",content:""}]},regularPath:"/win7simu/",relativePath:"win7simu/index.md",key:"v-e8bf05a2",path:"/win7simu/",lastUpdated:"11/2/2023, 5:52:36 PM",lastUpdatedTimestamp:1698947556e3,firstCreated:"11/2/2023, 5:48:31 PM",firstCreatedTimestamp:1698947311e3},{title:"Win7 Simu keyboard shortcuts",frontmatter:{description:"A list of available keyboard shortcuts that can be used in Win7 Simu.",layout:"Visnalize",sidebar:"auto",image:"https://image.social/get?url=visnalize.com/win7simu/keyboard-shortcuts.html",meta:[{name:"image",content:"https://image.social/get?url=visnalize.com/win7simu/keyboard-shortcuts.html"},{name:"twitter:title",content:"Win7 Simu keyboard shortcuts"},{name:"twitter:description",content:"A list of available keyboard shortcuts that can be used in Win7 Simu."},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:image",content:"https://image.social/get?url=visnalize.com/win7simu/keyboard-shortcuts.html"},{name:"twitter:url",content:"https://visnalize.com/win7simu/keyboard-shortcuts.html"},{property:"og:type",content:"article"},{property:"og:title",content:"Win7 Simu keyboard shortcuts"},{property:"og:description",content:"A list of available keyboard shortcuts that can be used in Win7 Simu."},{property:"og:image",content:"https://image.social/get?url=visnalize.com/win7simu/keyboard-shortcuts.html"},{property:"og:url",content:"https://visnalize.com/win7simu/keyboard-shortcuts.html"},{property:"article:author",content:"Visnalize"},{itemprop:"name",content:"Win7 Simu keyboard shortcuts"},{itemprop:"description",content:"A list of available keyboard shortcuts that can be used in Win7 Simu."},{itemprop:"image",content:"https://image.social/get?url=visnalize.com/win7simu/keyboard-shortcuts.html"}]},regularPath:"/win7simu/keyboard-shortcuts.html",relativePath:"win7simu/keyboard-shortcuts.md",key:"v-738e1022",path:"/win7simu/keyboard-shortcuts.html",headers:[{level:2,title:"General",slug:"general"},{level:2,title:"Window management",slug:"window-management"},{level:2,title:"General program shortcuts",slug:"general-program-shortcuts"}],lastUpdated:"10/8/2024, 9:58:29 AM",lastUpdatedTimestamp:1728381509e3,firstCreated:"10/8/2024, 9:58:29 AM",firstCreatedTimestamp:1728381509e3},{title:"BIOS Setup Utility",frontmatter:{layout:"FeaturePage",title:"BIOS Setup Utility",description:"Allows you to view system information and configure supported boot settings for your Win7 Simu",image:"/assets/features/bios.png",version:"2.16.0",meta:[{name:"image",content:"https://visnalize.com/assets/features/bios.png"},{name:"twitter:title",content:"BIOS Setup Utility"},{name:"twitter:description",content:"Allows you to view system information and configure supported boot settings for your Win7 Simu"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:image",content:"https://visnalize.com/assets/features/bios.png"},{name:"twitter:url",content:"https://visnalize.com/win7simu/simulated/bios.html"},{property:"og:type",content:"article"},{property:"og:title",content:"BIOS Setup Utility"},{property:"og:description",content:"Allows you to view system information and configure supported boot settings for your Win7 Simu"},{property:"og:image",content:"https://visnalize.com/assets/features/bios.png"},{property:"og:url",content:"https://visnalize.com/win7simu/simulated/bios.html"},{property:"article:author",content:"Visnalize"},{itemprop:"name",content:"BIOS Setup Utility"},{itemprop:"description",content:"Allows you to view system information and configure supported boot settings for your Win7 Simu"},{itemprop:"image",content:"https://visnalize.com/assets/features/bios.png"}]},regularPath:"/win7simu/simulated/bios.html",relativePath:"win7simu/simulated/bios.md",key:"v-0d73ba82",path:"/win7simu/simulated/bios.html",lastUpdated:"8/31/2024, 1:10:28 PM",lastUpdatedTimestamp:1725109828e3,firstCreated:"8/30/2024, 10:09:03 AM",firstCreatedTimestamp:1725012543e3},{title:"Win7 Simu Privacy Policy",frontmatter:{title:"Win7 Simu Privacy Policy",description:"Worry about your privacy while using the Win7 Simu app? This page eases your concern",sidebar:"auto",image:"https://image.social/get?url=visnalize.com/win7simu/privacy.html",meta:[{name:"image",content:"https://image.social/get?url=visnalize.com/win7simu/privacy.html"},{name:"twitter:title",content:"Win7 Simu Privacy Policy"},{name:"twitter:description",content:"Worry about your privacy while using the Win7 Simu app? This page eases your concern"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:image",content:"https://image.social/get?url=visnalize.com/win7simu/privacy.html"},{name:"twitter:url",content:"https://visnalize.com/win7simu/privacy.html"},{property:"og:type",content:"article"},{property:"og:title",content:"Win7 Simu Privacy Policy"},{property:"og:description",content:"Worry about your privacy while using the Win7 Simu app? This page eases your concern"},{property:"og:image",content:"https://image.social/get?url=visnalize.com/win7simu/privacy.html"},{property:"og:url",content:"https://visnalize.com/win7simu/privacy.html"},{property:"article:author",content:"Visnalize"},{itemprop:"name",content:"Win7 Simu Privacy Policy"},{itemprop:"description",content:"Worry about your privacy while using the Win7 Simu app? This page eases your concern"},{itemprop:"image",content:"https://image.social/get?url=visnalize.com/win7simu/privacy.html"}]},regularPath:"/win7simu/privacy.html",relativePath:"win7simu/privacy.md",key:"v-530b246c",path:"/win7simu/privacy.html",headers:[{level:2,title:"Information Collection and Use",slug:"information-collection-and-use"},{level:2,title:"Log Data",slug:"log-data"},{level:2,title:"Cookies",slug:"cookies"},{level:2,title:"Service Providers",slug:"service-providers"},{level:2,title:"Security",slug:"security"},{level:2,title:"Links to Other Sites",slug:"links-to-other-sites"},{level:2,title:"Children's Privacy",slug:"children-s-privacy"},{level:2,title:"Changes to This Privacy Policy",slug:"changes-to-this-privacy-policy"},{level:2,title:"Contact Us",slug:"contact-us"}],lastUpdated:"6/1/2024, 6:49:33 AM",lastUpdatedTimestamp:1717224573e3,firstCreated:"7/5/2021, 2:24:45 PM",firstCreatedTimestamp:1625495085e3},{title:"Calculator",frontmatter:{layout:"FeaturePage",title:"Calculator",description:"Allows you to perform basic arithmetic calculations, such as addition, subtraction, multiplication, and division",image:"/assets/features/calculator.png",version:"1.0.0",meta:[{name:"image",content:"https://visnalize.com/assets/features/calculator.png"},{name:"twitter:title",content:"Calculator"},{name:"twitter:description",content:"Allows you to perform basic arithmetic calculations, such as addition, subtraction, multiplication, and division"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:image",content:"https://visnalize.com/assets/features/calculator.png"},{name:"twitter:url",content:"https://visnalize.com/win7simu/simulated/calculator.html"},{property:"og:type",content:"article"},{property:"og:title",content:"Calculator"},{property:"og:description",content:"Allows you to perform basic arithmetic calculations, such as addition, subtraction, multiplication, and division"},{property:"og:image",content:"https://visnalize.com/assets/features/calculator.png"},{property:"og:url",content:"https://visnalize.com/win7simu/simulated/calculator.html"},{property:"article:author",content:"Visnalize"},{itemprop:"name",content:"Calculator"},{itemprop:"description",content:"Allows you to perform basic arithmetic calculations, such as addition, subtraction, multiplication, and division"},{itemprop:"image",content:"https://visnalize.com/assets/features/calculator.png"}]},regularPath:"/win7simu/simulated/calculator.html",relativePath:"win7simu/simulated/calculator.md",key:"v-7c23e4bc",path:"/win7simu/simulated/calculator.html",lastUpdated:"8/31/2024, 1:10:28 PM",lastUpdatedTimestamp:1725109828e3,firstCreated:"8/31/2024, 1:10:28 PM",firstCreatedTimestamp:1725109828e3},{title:"Chrome",frontmatter:{layout:"FeaturePage",title:"Chrome",description:"Allows you to browse the web with the Google Chrome browser interface in Win7 Simu",image:"/assets/features/chrome.png",version:"2.8.0",meta:[{name:"image",content:"https://visnalize.com/assets/features/chrome.png"},{name:"twitter:title",content:"Chrome"},{name:"twitter:description",content:"Allows you to browse the web with the Google Chrome browser interface in Win7 Simu"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:image",content:"https://visnalize.com/assets/features/chrome.png"},{name:"twitter:url",content:"https://visnalize.com/win7simu/simulated/chrome.html"},{property:"og:type",content:"article"},{property:"og:title",content:"Chrome"},{property:"og:description",content:"Allows you to browse the web with the Google Chrome browser interface in Win7 Simu"},{property:"og:image",content:"https://visnalize.com/assets/features/chrome.png"},{property:"og:url",content:"https://visnalize.com/win7simu/simulated/chrome.html"},{property:"article:author",content:"Visnalize"},{itemprop:"name",content:"Chrome"},{itemprop:"description",content:"Allows you to browse the web with the Google Chrome browser interface in Win7 Simu"},{itemprop:"image",content:"https://visnalize.com/assets/features/chrome.png"}]},regularPath:"/win7simu/simulated/chrome.html",relativePath:"win7simu/simulated/chrome.md",key:"v-3dbeba22",path:"/win7simu/simulated/chrome.html",lastUpdated:"8/31/2024, 1:10:28 PM",lastUpdatedTimestamp:1725109828e3,firstCreated:"8/31/2024, 1:10:28 PM",firstCreatedTimestamp:1725109828e3},{title:"Command Prompt",frontmatter:{layout:"FeaturePage",title:"Command Prompt",description:"Allows you to perform various tasks, such as running programs, executing commands, and managing files and directories in Win7 Simu",image:"/assets/features/cmd.png",version:"1.1.0",meta:[{name:"image",content:"https://visnalize.com/assets/features/cmd.png"},{name:"twitter:title",content:"Command Prompt"},{name:"twitter:description",content:"Allows you to perform various tasks, such as running programs, executing commands, and managing files and directories in Win7 Simu"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:image",content:"https://visnalize.com/assets/features/cmd.png"},{name:"twitter:url",content:"https://visnalize.com/win7simu/simulated/cmd.html"},{property:"og:type",content:"article"},{property:"og:title",content:"Command Prompt"},{property:"og:description",content:"Allows you to perform various tasks, such as running programs, executing commands, and managing files and directories in Win7 Simu"},{property:"og:image",content:"https://visnalize.com/assets/features/cmd.png"},{property:"og:url",content:"https://visnalize.com/win7simu/simulated/cmd.html"},{property:"article:author",content:"Visnalize"},{itemprop:"name",content:"Command Prompt"},{itemprop:"description",content:"Allows you to perform various tasks, such as running programs, executing commands, and managing files and directories in Win7 Simu"},{itemprop:"image",content:"https://visnalize.com/assets/features/cmd.png"}]},regularPath:"/win7simu/simulated/cmd.html",relativePath:"win7simu/simulated/cmd.md",key:"v-33b74904",path:"/win7simu/simulated/cmd.html",lastUpdated:"8/31/2024, 1:10:28 PM",lastUpdatedTimestamp:1725109828e3,firstCreated:"8/31/2024, 1:10:28 PM",firstCreatedTimestamp:1725109828e3},{title:"Control Panel",frontmatter:{layout:"FeaturePage",title:"Control Panel",description:"Allows you to view and change system settings, install and uninstall programs, manage user accounts, and more in Win7 Simu",image:"/assets/features/cpanel.png",version:"1.1.0",meta:[{name:"image",content:"https://visnalize.com/assets/features/cpanel.png"},{name:"twitter:title",content:"Control Panel"},{name:"twitter:description",content:"Allows you to view and change system settings, install and uninstall programs, manage user accounts, and more in Win7 Simu"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:image",content:"https://visnalize.com/assets/features/cpanel.png"},{name:"twitter:url",content:"https://visnalize.com/win7simu/simulated/cpanel.html"},{property:"og:type",content:"article"},{property:"og:title",content:"Control Panel"},{property:"og:description",content:"Allows you to view and change system settings, install and uninstall programs, manage user accounts, and more in Win7 Simu"},{property:"og:image",content:"https://visnalize.com/assets/features/cpanel.png"},{property:"og:url",content:"https://visnalize.com/win7simu/simulated/cpanel.html"},{property:"article:author",content:"Visnalize"},{itemprop:"name",content:"Control Panel"},{itemprop:"description",content:"Allows you to view and change system settings, install and uninstall programs, manage user accounts, and more in Win7 Simu"},{itemprop:"image",content:"https://visnalize.com/assets/features/cpanel.png"}]},regularPath:"/win7simu/simulated/cpanel.html",relativePath:"win7simu/simulated/cpanel.md",key:"v-1f96767c",path:"/win7simu/simulated/cpanel.html",lastUpdated:"8/31/2024, 1:10:28 PM",lastUpdatedTimestamp:1725109828e3,firstCreated:"8/31/2024, 1:10:28 PM",firstCreatedTimestamp:1725109828e3},{title:"File Explorer",frontmatter:{layout:"FeaturePage",title:"File Explorer",description:"Allows you to manage files and folders in a simulated Windows 7 environment, including creating, deleting, and moving files and folders",image:"/assets/features/fileexplorer.png",version:"3.0.0",meta:[{name:"image",content:"https://visnalize.com/assets/features/fileexplorer.png"},{name:"twitter:title",content:"File Explorer"},{name:"twitter:description",content:"Allows you to manage files and folders in a simulated Windows 7 environment, including creating, deleting, and moving files and folders"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:image",content:"https://visnalize.com/assets/features/fileexplorer.png"},{name:"twitter:url",content:"https://visnalize.com/win7simu/simulated/fileexplorer.html"},{property:"og:type",content:"article"},{property:"og:title",content:"File Explorer"},{property:"og:description",content:"Allows you to manage files and folders in a simulated Windows 7 environment, including creating, deleting, and moving files and folders"},{property:"og:image",content:"https://visnalize.com/assets/features/fileexplorer.png"},{property:"og:url",content:"https://visnalize.com/win7simu/simulated/fileexplorer.html"},{property:"article:author",content:"Visnalize"},{itemprop:"name",content:"File Explorer"},{itemprop:"description",content:"Allows you to manage files and folders in a simulated Windows 7 environment, including creating, deleting, and moving files and folders"},{itemprop:"image",content:"https://visnalize.com/assets/features/fileexplorer.png"}]},regularPath:"/win7simu/simulated/fileexplorer.html",relativePath:"win7simu/simulated/fileexplorer.md",key:"v-6baf4482",path:"/win7simu/simulated/fileexplorer.html",lastUpdated:"9/1/2024, 3:54:23 AM",lastUpdatedTimestamp:1725162863e3,firstCreated:"8/31/2024, 1:10:28 PM",firstCreatedTimestamp:1725109828e3},{title:"Internet Explorer",frontmatter:{layout:"FeaturePage",title:"Internet Explorer",description:"Allows you to browse the web, search for information with Bing as the default search engine",image:"/assets/features/ie.png",version:"1.0.0",meta:[{name:"image",content:"https://visnalize.com/assets/features/ie.png"},{name:"twitter:title",content:"Internet Explorer"},{name:"twitter:description",content:"Allows you to browse the web, search for information with Bing as the default search engine"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:image",content:"https://visnalize.com/assets/features/ie.png"},{name:"twitter:url",content:"https://visnalize.com/win7simu/simulated/ie.html"},{property:"og:type",content:"article"},{property:"og:title",content:"Internet Explorer"},{property:"og:description",content:"Allows you to browse the web, search for information with Bing as the default search engine"},{property:"og:image",content:"https://visnalize.com/assets/features/ie.png"},{property:"og:url",content:"https://visnalize.com/win7simu/simulated/ie.html"},{property:"article:author",content:"Visnalize"},{itemprop:"name",content:"Internet Explorer"},{itemprop:"description",content:"Allows you to browse the web, search for information with Bing as the default search engine"},{itemprop:"image",content:"https://visnalize.com/assets/features/ie.png"}]},regularPath:"/win7simu/simulated/ie.html",relativePath:"win7simu/simulated/ie.md",key:"v-10412362",path:"/win7simu/simulated/ie.html",lastUpdated:"8/31/2024, 1:10:28 PM",lastUpdatedTimestamp:1725109828e3,firstCreated:"8/31/2024, 1:10:28 PM",firstCreatedTimestamp:1725109828e3},{title:"Windows Gadgets",frontmatter:{layout:"FeaturePage",title:"Windows Gadgets",description:"Brings you various gadgets that you can use to enhance your desktop experience in Win7 Simu, such as the Clock, Calendar, Weather, and more",image:"/assets/features/gadgets.png",version:"2.6.0",meta:[{name:"image",content:"https://visnalize.com/assets/features/gadgets.png"},{name:"twitter:title",content:"Windows Gadgets"},{name:"twitter:description",content:"Brings you various gadgets that you can use to enhance your desktop experience in Win7 Simu, such as the Clock, Calendar, Weather, and more"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:image",content:"https://visnalize.com/assets/features/gadgets.png"},{name:"twitter:url",content:"https://visnalize.com/win7simu/simulated/gadgets.html"},{property:"og:type",content:"article"},{property:"og:title",content:"Windows Gadgets"},{property:"og:description",content:"Brings you various gadgets that you can use to enhance your desktop experience in Win7 Simu, such as the Clock, Calendar, Weather, and more"},{property:"og:image",content:"https://visnalize.com/assets/features/gadgets.png"},{property:"og:url",content:"https://visnalize.com/win7simu/simulated/gadgets.html"},{property:"article:author",content:"Visnalize"},{itemprop:"name",content:"Windows Gadgets"},{itemprop:"description",content:"Brings you various gadgets that you can use to enhance your desktop experience in Win7 Simu, such as the Clock, Calendar, Weather, and more"},{itemprop:"image",content:"https://visnalize.com/assets/features/gadgets.png"}]},regularPath:"/win7simu/simulated/gadgets.html",relativePath:"win7simu/simulated/gadgets.md",key:"v-2ddd3eac",path:"/win7simu/simulated/gadgets.html",lastUpdated:"8/31/2024, 1:10:28 PM",lastUpdatedTimestamp:1725109828e3,firstCreated:"8/31/2024, 1:10:28 PM",firstCreatedTimestamp:1725109828e3},{title:"Magnifier",frontmatter:{layout:"FeaturePage",title:"Magnifier",description:"Allows you to control the magnification level of the screen for better viewing",image:"/assets/features/magnifier.png",version:"2.24.0",meta:[{name:"image",content:"https://visnalize.com/assets/features/magnifier.png"},{name:"twitter:title",content:"Magnifier"},{name:"twitter:description",content:"Allows you to control the magnification level of the screen for better viewing"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:image",content:"https://visnalize.com/assets/features/magnifier.png"},{name:"twitter:url",content:"https://visnalize.com/win7simu/simulated/magnifier.html"},{property:"og:type",content:"article"},{property:"og:title",content:"Magnifier"},{property:"og:description",content:"Allows you to control the magnification level of the screen for better viewing"},{property:"og:image",content:"https://visnalize.com/assets/features/magnifier.png"},{property:"og:url",content:"https://visnalize.com/win7simu/simulated/magnifier.html"},{property:"article:author",content:"Visnalize"},{itemprop:"name",content:"Magnifier"},{itemprop:"description",content:"Allows you to control the magnification level of the screen for better viewing"},{itemprop:"image",content:"https://visnalize.com/assets/features/magnifier.png"}]},regularPath:"/win7simu/simulated/magnifier.html",relativePath:"win7simu/simulated/magnifier.md",key:"v-aa648488",path:"/win7simu/simulated/magnifier.html",lastUpdated:"8/31/2024, 1:10:28 PM",lastUpdatedTimestamp:1725109828e3,firstCreated:"8/31/2024, 1:10:28 PM",firstCreatedTimestamp:1725109828e3},{title:"Win7 Simu simulated apps",frontmatter:{layout:"FeatureList",title:"Win7 Simu simulated apps",description:"An overview of simulated applications available in Win7 Simu",image:"https://image.social/get?url=visnalize.com/win7simu/simulated/",meta:[{name:"image",content:"https://image.social/get?url=visnalize.com/win7simu/simulated/"},{name:"twitter:title",content:"Win7 Simu simulated apps"},{name:"twitter:description",content:"An overview of simulated applications available in Win7 Simu"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:image",content:"https://image.social/get?url=visnalize.com/win7simu/simulated/"},{name:"twitter:url",content:"https://visnalize.com/win7simu/simulated/"},{property:"og:type",content:"article"},{property:"og:title",content:"Win7 Simu simulated apps"},{property:"og:description",content:"An overview of simulated applications available in Win7 Simu"},{property:"og:image",content:"https://image.social/get?url=visnalize.com/win7simu/simulated/"},{property:"og:url",content:"https://visnalize.com/win7simu/simulated/"},{property:"article:author",content:"Visnalize"},{itemprop:"name",content:"Win7 Simu simulated apps"},{itemprop:"description",content:"An overview of simulated applications available in Win7 Simu"},{itemprop:"image",content:"https://image.social/get?url=visnalize.com/win7simu/simulated/"}]},regularPath:"/win7simu/simulated/",relativePath:"win7simu/simulated/index.md",key:"v-1e6132e6",path:"/win7simu/simulated/",lastUpdated:"8/30/2024, 10:09:03 AM",lastUpdatedTimestamp:1725012543e3,firstCreated:"8/30/2024, 10:09:03 AM",firstCreatedTimestamp:1725012543e3},{title:"Windows Media Player",frontmatter:{layout:"FeaturePage",title:"Windows Media Player",description:"Allows you to play music, videos, and photos in various formats supported by Win7 Simu, in a simple and efficient manner",image:"/assets/features/media-player.png",version:"1.0.0",meta:[{name:"image",content:"https://visnalize.com/assets/features/media-player.png"},{name:"twitter:title",content:"Windows Media Player"},{name:"twitter:description",content:"Allows you to play music, videos, and photos in various formats supported by Win7 Simu, in a simple and efficient manner"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:image",content:"https://visnalize.com/assets/features/media-player.png"},{name:"twitter:url",content:"https://visnalize.com/win7simu/simulated/media-player.html"},{property:"og:type",content:"article"},{property:"og:title",content:"Windows Media Player"},{property:"og:description",content:"Allows you to play music, videos, and photos in various formats supported by Win7 Simu, in a simple and efficient manner"},{property:"og:image",content:"https://visnalize.com/assets/features/media-player.png"},{property:"og:url",content:"https://visnalize.com/win7simu/simulated/media-player.html"},{property:"article:author",content:"Visnalize"},{itemprop:"name",content:"Windows Media Player"},{itemprop:"description",content:"Allows you to play music, videos, and photos in various formats supported by Win7 Simu, in a simple and efficient manner"},{itemprop:"image",content:"https://visnalize.com/assets/features/media-player.png"}]},regularPath:"/win7simu/simulated/media-player.html",relativePath:"win7simu/simulated/media-player.md",key:"v-ff06623c",path:"/win7simu/simulated/media-player.html",lastUpdated:"8/31/2024, 1:10:28 PM",lastUpdatedTimestamp:1725109828e3,firstCreated:"8/31/2024, 1:10:28 PM",firstCreatedTimestamp:1725109828e3},{title:"Minesweeper",frontmatter:{layout:"FeaturePage",title:"Minesweeper",description:"Lets you play the classic Minesweeper game, where you have to clear a minefield without detonating any mines. Can you beat your best time?",image:"/assets/features/minesweeper.png",version:"1.2.0",meta:[{name:"image",content:"https://visnalize.com/assets/features/minesweeper.png"},{name:"twitter:title",content:"Minesweeper"},{name:"twitter:description",content:"Lets you play the classic Minesweeper game, where you have to clear a minefield without detonating any mines. Can you beat your best time?"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:image",content:"https://visnalize.com/assets/features/minesweeper.png"},{name:"twitter:url",content:"https://visnalize.com/win7simu/simulated/minesweeper.html"},{property:"og:type",content:"article"},{property:"og:title",content:"Minesweeper"},{property:"og:description",content:"Lets you play the classic Minesweeper game, where you have to clear a minefield without detonating any mines. Can you beat your best time?"},{property:"og:image",content:"https://visnalize.com/assets/features/minesweeper.png"},{property:"og:url",content:"https://visnalize.com/win7simu/simulated/minesweeper.html"},{property:"article:author",content:"Visnalize"},{itemprop:"name",content:"Minesweeper"},{itemprop:"description",content:"Lets you play the classic Minesweeper game, where you have to clear a minefield without detonating any mines. Can you beat your best time?"},{itemprop:"image",content:"https://visnalize.com/assets/features/minesweeper.png"}]},regularPath:"/win7simu/simulated/minesweeper.html",relativePath:"win7simu/simulated/minesweeper.md",key:"v-856c7aa8",path:"/win7simu/simulated/minesweeper.html",lastUpdated:"8/31/2024, 1:10:28 PM",lastUpdatedTimestamp:1725109828e3,firstCreated:"8/31/2024, 1:10:28 PM",firstCreatedTimestamp:1725109828e3},{title:"Personalize",frontmatter:{layout:"FeaturePage",title:"Personalize",description:"Allows you to customize the appearance of your Win7 Simu, including the desktop background, window colors, sounds, screen saver, or altogether as a theme",image:"/assets/features/personalize.png",version:"1.0.0",meta:[{name:"image",content:"https://visnalize.com/assets/features/personalize.png"},{name:"twitter:title",content:"Personalize"},{name:"twitter:description",content:"Allows you to customize the appearance of your Win7 Simu, including the desktop background, window colors, sounds, screen saver, or altogether as a theme"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:image",content:"https://visnalize.com/assets/features/personalize.png"},{name:"twitter:url",content:"https://visnalize.com/win7simu/simulated/personalize.html"},{property:"og:type",content:"article"},{property:"og:title",content:"Personalize"},{property:"og:description",content:"Allows you to customize the appearance of your Win7 Simu, including the desktop background, window colors, sounds, screen saver, or altogether as a theme"},{property:"og:image",content:"https://visnalize.com/assets/features/personalize.png"},{property:"og:url",content:"https://visnalize.com/win7simu/simulated/personalize.html"},{property:"article:author",content:"Visnalize"},{itemprop:"name",content:"Personalize"},{itemprop:"description",content:"Allows you to customize the appearance of your Win7 Simu, including the desktop background, window colors, sounds, screen saver, or altogether as a theme"},{itemprop:"image",content:"https://visnalize.com/assets/features/personalize.png"}]},regularPath:"/win7simu/simulated/personalize.html",relativePath:"win7simu/simulated/personalize.md",key:"v-6078d960",path:"/win7simu/simulated/personalize.html",lastUpdated:"8/31/2024, 1:10:28 PM",lastUpdatedTimestamp:1725109828e3,firstCreated:"8/31/2024, 1:10:28 PM",firstCreatedTimestamp:1725109828e3},{title:"Paint",frontmatter:{layout:"FeaturePage",title:"Paint",description:"Allows you to create and edit images using various tools, such as brushes, shapes, text, colors, and more in Win7 Simu",image:"/assets/features/paint.png",version:"2.2.0",meta:[{name:"image",content:"https://visnalize.com/assets/features/paint.png"},{name:"twitter:title",content:"Paint"},{name:"twitter:description",content:"Allows you to create and edit images using various tools, such as brushes, shapes, text, colors, and more in Win7 Simu"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:image",content:"https://visnalize.com/assets/features/paint.png"},{name:"twitter:url",content:"https://visnalize.com/win7simu/simulated/paint.html"},{property:"og:type",content:"article"},{property:"og:title",content:"Paint"},{property:"og:description",content:"Allows you to create and edit images using various tools, such as brushes, shapes, text, colors, and more in Win7 Simu"},{property:"og:image",content:"https://visnalize.com/assets/features/paint.png"},{property:"og:url",content:"https://visnalize.com/win7simu/simulated/paint.html"},{property:"article:author",content:"Visnalize"},{itemprop:"name",content:"Paint"},{itemprop:"description",content:"Allows you to create and edit images using various tools, such as brushes, shapes, text, colors, and more in Win7 Simu"},{itemprop:"image",content:"https://visnalize.com/assets/features/paint.png"}]},regularPath:"/win7simu/simulated/paint.html",relativePath:"win7simu/simulated/paint.md",key:"v-605a7f7c",path:"/win7simu/simulated/paint.html",lastUpdated:"8/31/2024, 1:10:28 PM",lastUpdatedTimestamp:1725109828e3,firstCreated:"8/31/2024, 1:10:28 PM",firstCreatedTimestamp:1725109828e3},{title:"Notepad",frontmatter:{layout:"FeaturePage",title:"Notepad",description:"Allows you to perform basic text editing tasks, such as creating, viewing, and editing text files in a simple and efficient manner",image:"/assets/features/notepad.png",version:"1.0.0",meta:[{name:"image",content:"https://visnalize.com/assets/features/notepad.png"},{name:"twitter:title",content:"Notepad"},{name:"twitter:description",content:"Allows you to perform basic text editing tasks, such as creating, viewing, and editing text files in a simple and efficient manner"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:image",content:"https://visnalize.com/assets/features/notepad.png"},{name:"twitter:url",content:"https://visnalize.com/win7simu/simulated/notepad.html"},{property:"og:type",content:"article"},{property:"og:title",content:"Notepad"},{property:"og:description",content:"Allows you to perform basic text editing tasks, such as creating, viewing, and editing text files in a simple and efficient manner"},{property:"og:image",content:"https://visnalize.com/assets/features/notepad.png"},{property:"og:url",content:"https://visnalize.com/win7simu/simulated/notepad.html"},{property:"article:author",content:"Visnalize"},{itemprop:"name",content:"Notepad"},{itemprop:"description",content:"Allows you to perform basic text editing tasks, such as creating, viewing, and editing text files in a simple and efficient manner"},{itemprop:"image",content:"https://visnalize.com/assets/features/notepad.png"}]},regularPath:"/win7simu/simulated/notepad.html",relativePath:"win7simu/simulated/notepad.md",key:"v-7d425f36",path:"/win7simu/simulated/notepad.html",lastUpdated:"8/31/2024, 1:10:28 PM",lastUpdatedTimestamp:1725109828e3,firstCreated:"8/31/2024, 1:10:28 PM",firstCreatedTimestamp:1725109828e3},{title:"Programs and Features",frontmatter:{layout:"FeaturePage",title:"Programs and Features",description:"Lets you manage the programs and features supported by Win7 Simu or install new ones",image:"/assets/features/programs.png",version:"2.27.0",meta:[{name:"image",content:"https://visnalize.com/assets/features/programs.png"},{name:"twitter:title",content:"Programs and Features"},{name:"twitter:description",content:"Lets you manage the programs and features supported by Win7 Simu or install new ones"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:image",content:"https://visnalize.com/assets/features/programs.png"},{name:"twitter:url",content:"https://visnalize.com/win7simu/simulated/programs.html"},{property:"og:type",content:"article"},{property:"og:title",content:"Programs and Features"},{property:"og:description",content:"Lets you manage the programs and features supported by Win7 Simu or install new ones"},{property:"og:image",content:"https://visnalize.com/assets/features/programs.png"},{property:"og:url",content:"https://visnalize.com/win7simu/simulated/programs.html"},{property:"article:author",content:"Visnalize"},{itemprop:"name",content:"Programs and Features"},{itemprop:"description",content:"Lets you manage the programs and features supported by Win7 Simu or install new ones"},{itemprop:"image",content:"https://visnalize.com/assets/features/programs.png"}]},regularPath:"/win7simu/simulated/programs.html",relativePath:"win7simu/simulated/programs.md",key:"v-6e4fcf02",path:"/win7simu/simulated/programs.html",lastUpdated:"8/31/2024, 1:10:28 PM",lastUpdatedTimestamp:1725109828e3,firstCreated:"8/31/2024, 1:10:28 PM",firstCreatedTimestamp:1725109828e3},{title:"Purble Place",frontmatter:{layout:"FeaturePage",title:"Purble Place",description:"Brings back the classic Purble Place game suite, which includes three mini-games, Purble Pairs, Comfy Cakes, and Purble Shop. Do you have what it takes to master all three games?",image:"/assets/features/purbleplace.png",version:"1.2.0",meta:[{name:"image",content:"https://visnalize.com/assets/features/purbleplace.png"},{name:"twitter:title",content:"Purble Place"},{name:"twitter:description",content:"Brings back the classic Purble Place game suite, which includes three mini-games, Purble Pairs, Comfy Cakes, and Purble Shop. Do you have what it takes to master all three games?"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:image",content:"https://visnalize.com/assets/features/purbleplace.png"},{name:"twitter:url",content:"https://visnalize.com/win7simu/simulated/purbleplace.html"},{property:"og:type",content:"article"},{property:"og:title",content:"Purble Place"},{property:"og:description",content:"Brings back the classic Purble Place game suite, which includes three mini-games, Purble Pairs, Comfy Cakes, and Purble Shop. Do you have what it takes to master all three games?"},{property:"og:image",content:"https://visnalize.com/assets/features/purbleplace.png"},{property:"og:url",content:"https://visnalize.com/win7simu/simulated/purbleplace.html"},{property:"article:author",content:"Visnalize"},{itemprop:"name",content:"Purble Place"},{itemprop:"description",content:"Brings back the classic Purble Place game suite, which includes three mini-games, Purble Pairs, Comfy Cakes, and Purble Shop. Do you have what it takes to master all three games?"},{itemprop:"image",content:"https://visnalize.com/assets/features/purbleplace.png"}]},regularPath:"/win7simu/simulated/purbleplace.html",relativePath:"win7simu/simulated/purbleplace.md",key:"v-9c0e9874",path:"/win7simu/simulated/purbleplace.html",lastUpdated:"8/31/2024, 1:10:28 PM",lastUpdatedTimestamp:1725109828e3,firstCreated:"8/31/2024, 1:10:28 PM",firstCreatedTimestamp:1725109828e3},{title:"Run",frontmatter:{layout:"FeaturePage",title:"Run",description:"Allows you to quickly open programs, files, folders, and other items in the simulator",image:"/assets/features/run.png",version:"2.18.0",meta:[{name:"image",content:"https://visnalize.com/assets/features/run.png"},{name:"twitter:title",content:"Run"},{name:"twitter:description",content:"Allows you to quickly open programs, files, folders, and other items in the simulator"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:image",content:"https://visnalize.com/assets/features/run.png"},{name:"twitter:url",content:"https://visnalize.com/win7simu/simulated/run.html"},{property:"og:type",content:"article"},{property:"og:title",content:"Run"},{property:"og:description",content:"Allows you to quickly open programs, files, folders, and other items in the simulator"},{property:"og:image",content:"https://visnalize.com/assets/features/run.png"},{property:"og:url",content:"https://visnalize.com/win7simu/simulated/run.html"},{property:"article:author",content:"Visnalize"},{itemprop:"name",content:"Run"},{itemprop:"description",content:"Allows you to quickly open programs, files, folders, and other items in the simulator"},{itemprop:"image",content:"https://visnalize.com/assets/features/run.png"}]},regularPath:"/win7simu/simulated/run.html",relativePath:"win7simu/simulated/run.md",key:"v-50afd23c",path:"/win7simu/simulated/run.html",lastUpdated:"10/8/2024, 9:58:29 AM",lastUpdatedTimestamp:1728381509e3,firstCreated:"10/8/2024, 9:58:29 AM",firstCreatedTimestamp:1728381509e3},{title:"Snipping Tool",frontmatter:{layout:"FeaturePage",title:"Snipping Tool",description:"Allows you to quickly capture screenshots of your desktop, a window, or a specific region of your screen, and save it as an image file",image:"/assets/features/snipping.png",version:"1.0.0",meta:[{name:"image",content:"https://visnalize.com/assets/features/snipping.png"},{name:"twitter:title",content:"Snipping Tool"},{name:"twitter:description",content:"Allows you to quickly capture screenshots of your desktop, a window, or a specific region of your screen, and save it as an image file"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:image",content:"https://visnalize.com/assets/features/snipping.png"},{name:"twitter:url",content:"https://visnalize.com/win7simu/simulated/snipping.html"},{property:"og:type",content:"article"},{property:"og:title",content:"Snipping Tool"},{property:"og:description",content:"Allows you to quickly capture screenshots of your desktop, a window, or a specific region of your screen, and save it as an image file"},{property:"og:image",content:"https://visnalize.com/assets/features/snipping.png"},{property:"og:url",content:"https://visnalize.com/win7simu/simulated/snipping.html"},{property:"article:author",content:"Visnalize"},{itemprop:"name",content:"Snipping Tool"},{itemprop:"description",content:"Allows you to quickly capture screenshots of your desktop, a window, or a specific region of your screen, and save it as an image file"},{itemprop:"image",content:"https://visnalize.com/assets/features/snipping.png"}]},regularPath:"/win7simu/simulated/snipping.html",relativePath:"win7simu/simulated/snipping.md",key:"v-190bf8bc",path:"/win7simu/simulated/snipping.html",lastUpdated:"8/31/2024, 1:10:28 PM",lastUpdatedTimestamp:1725109828e3,firstCreated:"8/31/2024, 1:10:28 PM",firstCreatedTimestamp:1725109828e3},{title:"Sticky Notes",frontmatter:{layout:"FeaturePage",title:"Sticky Notes",description:"Allows you to create and manage colorful sticky notes on your desktop in Win7 Simu",image:"/assets/features/sticky.png",version:"2.14.0",meta:[{name:"image",content:"https://visnalize.com/assets/features/sticky.png"},{name:"twitter:title",content:"Sticky Notes"},{name:"twitter:description",content:"Allows you to create and manage colorful sticky notes on your desktop in Win7 Simu"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:image",content:"https://visnalize.com/assets/features/sticky.png"},{name:"twitter:url",content:"https://visnalize.com/win7simu/simulated/sticky.html"},{property:"og:type",content:"article"},{property:"og:title",content:"Sticky Notes"},{property:"og:description",content:"Allows you to create and manage colorful sticky notes on your desktop in Win7 Simu"},{property:"og:image",content:"https://visnalize.com/assets/features/sticky.png"},{property:"og:url",content:"https://visnalize.com/win7simu/simulated/sticky.html"},{property:"article:author",content:"Visnalize"},{itemprop:"name",content:"Sticky Notes"},{itemprop:"description",content:"Allows you to create and manage colorful sticky notes on your desktop in Win7 Simu"},{itemprop:"image",content:"https://visnalize.com/assets/features/sticky.png"}]},regularPath:"/win7simu/simulated/sticky.html",relativePath:"win7simu/simulated/sticky.md",key:"v-496f6bc2",path:"/win7simu/simulated/sticky.html",lastUpdated:"8/31/2024, 1:10:28 PM",lastUpdatedTimestamp:1725109828e3,firstCreated:"8/31/2024, 1:10:28 PM",firstCreatedTimestamp:1725109828e3},{title:"Sound Recorder",frontmatter:{layout:"FeaturePage",title:"Sound Recorder",description:"Lets you record sound from your microphone and save it as audio files in Win7 Simu",image:"/assets/features/recorder.png",version:"2.15.0",meta:[{name:"image",content:"https://visnalize.com/assets/features/recorder.png"},{name:"twitter:title",content:"Sound Recorder"},{name:"twitter:description",content:"Lets you record sound from your microphone and save it as audio files in Win7 Simu"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:image",content:"https://visnalize.com/assets/features/recorder.png"},{name:"twitter:url",content:"https://visnalize.com/win7simu/simulated/recorder.html"},{property:"og:type",content:"article"},{property:"og:title",content:"Sound Recorder"},{property:"og:description",content:"Lets you record sound from your microphone and save it as audio files in Win7 Simu"},{property:"og:image",content:"https://visnalize.com/assets/features/recorder.png"},{property:"og:url",content:"https://visnalize.com/win7simu/simulated/recorder.html"},{property:"article:author",content:"Visnalize"},{itemprop:"name",content:"Sound Recorder"},{itemprop:"description",content:"Lets you record sound from your microphone and save it as audio files in Win7 Simu"},{itemprop:"image",content:"https://visnalize.com/assets/features/recorder.png"}]},regularPath:"/win7simu/simulated/recorder.html",relativePath:"win7simu/simulated/recorder.md",key:"v-482face2",path:"/win7simu/simulated/recorder.html",lastUpdated:"8/31/2024, 1:10:28 PM",lastUpdatedTimestamp:1725109828e3,firstCreated:"8/31/2024, 1:10:28 PM",firstCreatedTimestamp:1725109828e3},{title:"Solitaire",frontmatter:{layout:"FeaturePage",title:"Solitaire",description:"Brings back the classic card game with a nostalgic look and feel of the Windows 7 version",image:"/assets/features/solitaire.png",version:"2.12.0",meta:[{name:"image",content:"https://visnalize.com/assets/features/solitaire.png"},{name:"twitter:title",content:"Solitaire"},{name:"twitter:description",content:"Brings back the classic card game with a nostalgic look and feel of the Windows 7 version"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:image",content:"https://visnalize.com/assets/features/solitaire.png"},{name:"twitter:url",content:"https://visnalize.com/win7simu/simulated/solitaire.html"},{property:"og:type",content:"article"},{property:"og:title",content:"Solitaire"},{property:"og:description",content:"Brings back the classic card game with a nostalgic look and feel of the Windows 7 version"},{property:"og:image",content:"https://visnalize.com/assets/features/solitaire.png"},{property:"og:url",content:"https://visnalize.com/win7simu/simulated/solitaire.html"},{property:"article:author",content:"Visnalize"},{itemprop:"name",content:"Solitaire"},{itemprop:"description",content:"Brings back the classic card game with a nostalgic look and feel of the Windows 7 version"},{itemprop:"image",content:"https://visnalize.com/assets/features/solitaire.png"}]},regularPath:"/win7simu/simulated/solitaire.html",relativePath:"win7simu/simulated/solitaire.md",key:"v-6a81288c",path:"/win7simu/simulated/solitaire.html",lastUpdated:"9/1/2024, 3:54:23 AM",lastUpdatedTimestamp:1725162863e3,firstCreated:"9/1/2024, 3:54:23 AM",firstCreatedTimestamp:1725162863e3},{title:"Task Manager",frontmatter:{layout:"FeaturePage",title:"Task Manager",description:"Monitors and manages the applications, processes, and services running in Win7 Simu",image:"/assets/features/taskmgr.png",version:"2.17.0",meta:[{name:"image",content:"https://visnalize.com/assets/features/taskmgr.png"},{name:"twitter:title",content:"Task Manager"},{name:"twitter:description",content:"Monitors and manages the applications, processes, and services running in Win7 Simu"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:image",content:"https://visnalize.com/assets/features/taskmgr.png"},{name:"twitter:url",content:"https://visnalize.com/win7simu/simulated/taskmgr.html"},{property:"og:type",content:"article"},{property:"og:title",content:"Task Manager"},{property:"og:description",content:"Monitors and manages the applications, processes, and services running in Win7 Simu"},{property:"og:image",content:"https://visnalize.com/assets/features/taskmgr.png"},{property:"og:url",content:"https://visnalize.com/win7simu/simulated/taskmgr.html"},{property:"article:author",content:"Visnalize"},{itemprop:"name",content:"Task Manager"},{itemprop:"description",content:"Monitors and manages the applications, processes, and services running in Win7 Simu"},{itemprop:"image",content:"https://visnalize.com/assets/features/taskmgr.png"}]},regularPath:"/win7simu/simulated/taskmgr.html",relativePath:"win7simu/simulated/taskmgr.md",key:"v-9c5b69dc",path:"/win7simu/simulated/taskmgr.html",lastUpdated:"8/31/2024, 1:10:28 PM",lastUpdatedTimestamp:1725109828e3,firstCreated:"8/31/2024, 1:10:28 PM",firstCreatedTimestamp:1725109828e3},{title:"Windows Media Center",frontmatter:{layout:"FeaturePage",title:"Windows Media Center",description:"Allows you to play music, videos, photos, and more, with stunning visuals and animations",image:"/assets/features/wmc.png",version:"3.9.0",meta:[{name:"image",content:"https://visnalize.com/assets/features/wmc.png"},{name:"twitter:title",content:"Windows Media Center"},{name:"twitter:description",content:"Allows you to play music, videos, photos, and more, with stunning visuals and animations"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:image",content:"https://visnalize.com/assets/features/wmc.png"},{name:"twitter:url",content:"https://visnalize.com/win7simu/simulated/wmc.html"},{property:"og:type",content:"article"},{property:"og:title",content:"Windows Media Center"},{property:"og:description",content:"Allows you to play music, videos, photos, and more, with stunning visuals and animations"},{property:"og:image",content:"https://visnalize.com/assets/features/wmc.png"},{property:"og:url",content:"https://visnalize.com/win7simu/simulated/wmc.html"},{property:"article:author",content:"Visnalize"},{itemprop:"name",content:"Windows Media Center"},{itemprop:"description",content:"Allows you to play music, videos, photos, and more, with stunning visuals and animations"},{itemprop:"image",content:"https://visnalize.com/assets/features/wmc.png"}]},regularPath:"/win7simu/simulated/wmc.html",relativePath:"win7simu/simulated/wmc.md",key:"v-e435f744",path:"/win7simu/simulated/wmc.html",lastUpdated:"8/31/2024, 1:10:28 PM",lastUpdatedTimestamp:1725109828e3,firstCreated:"8/31/2024, 1:10:28 PM",firstCreatedTimestamp:1725109828e3},{title:"WordPad",frontmatter:{layout:"FeaturePage",title:"WordPad",description:"Allows you to perform more advanced text editing tasks, such as creating, viewing, and editing rich text files with formatting options and more",image:"/assets/features/wordpad.png",version:"2.17.0",meta:[{name:"image",content:"https://visnalize.com/assets/features/wordpad.png"},{name:"twitter:title",content:"WordPad"},{name:"twitter:description",content:"Allows you to perform more advanced text editing tasks, such as creating, viewing, and editing rich text files with formatting options and more"},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:image",content:"https://visnalize.com/assets/features/wordpad.png"},{name:"twitter:url",content:"https://visnalize.com/win7simu/simulated/wordpad.html"},{property:"og:type",content:"article"},{property:"og:title",content:"WordPad"},{property:"og:description",content:"Allows you to perform more advanced text editing tasks, such as creating, viewing, and editing rich text files with formatting options and more"},{property:"og:image",content:"https://visnalize.com/assets/features/wordpad.png"},{property:"og:url",content:"https://visnalize.com/win7simu/simulated/wordpad.html"},{property:"article:author",content:"Visnalize"},{itemprop:"name",content:"WordPad"},{itemprop:"description",content:"Allows you to perform more advanced text editing tasks, such as creating, viewing, and editing rich text files with formatting options and more"},{itemprop:"image",content:"https://visnalize.com/assets/features/wordpad.png"}]},regularPath:"/win7simu/simulated/wordpad.html",relativePath:"win7simu/simulated/wordpad.md",key:"v-10fbe366",path:"/win7simu/simulated/wordpad.html",lastUpdated:"8/31/2024, 1:10:28 PM",lastUpdatedTimestamp:1725109828e3,firstCreated:"8/31/2024, 1:10:28 PM",firstCreatedTimestamp:1725109828e3},{title:"Theme Studio Changelog",frontmatter:{sidebar:"auto",pageClass:"changelog",description:"",meta:[{name:"twitter:title",content:"Theme Studio Changelog"},{name:"twitter:description",content:""},{name:"twitter:card",content:"summary"},{name:"twitter:url",content:"https://visnalize.com/win7simu/themestudio/changelog.html"},{property:"og:type",content:"article"},{property:"og:title",content:"Theme Studio Changelog"},{property:"og:description",content:""},{property:"og:url",content:"https://visnalize.com/win7simu/themestudio/changelog.html"},{property:"article:author",content:"Visnalize"},{itemprop:"name",content:"Theme Studio Changelog"},{itemprop:"description",content:""}]},regularPath:"/win7simu/themestudio/changelog.html",relativePath:"win7simu/themestudio/changelog.md",key:"v-51b76d92",path:"/win7simu/themestudio/changelog.html",headers:[{level:2,title:"All versions",slug:"all-versions"},{level:3,title:"1.3.0 (Oct 31, 2024)",slug:"_1-3-0-oct-31-2024"},{level:3,title:"1.2.0 (Jul 10, 2023)",slug:"_1-2-0-jul-10-2023"},{level:3,title:"1.1.0 (Mar 13, 2023)",slug:"_1-1-0-mar-13-2023"},{level:3,title:"1.0.0 (Feb 19, 2023)",slug:"_1-0-0-feb-19-2023"}],lastUpdated:"10/31/2024, 1:44:26 PM",lastUpdatedTimestamp:1730382266e3,firstCreated:"2/18/2023, 6:34:47 PM",firstCreatedTimestamp:1676745287e3},{title:"Getting started with Theme Studio",frontmatter:{layout:"WithComments",title:"Getting started with Theme Studio",sidebarDepth:2,description:"",meta:[{name:"image",content:"https://visnalize.com/./img/themestudio-editor.png"},{name:"twitter:title",content:"Getting started with Theme Studio"},{name:"twitter:description",content:""},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:image",content:"https://visnalize.com/./img/themestudio-editor.png"},{name:"twitter:url",content:"https://visnalize.com/win7simu/themestudio/quick-guide.html"},{property:"og:type",content:"article"},{property:"og:title",content:"Getting started with Theme Studio"},{property:"og:description",content:""},{property:"og:image",content:"https://visnalize.com/./img/themestudio-editor.png"},{property:"og:url",content:"https://visnalize.com/win7simu/themestudio/quick-guide.html"},{property:"article:author",content:"Visnalize"},{itemprop:"name",content:"Getting started with Theme Studio"},{itemprop:"description",content:""},{itemprop:"image",content:"https://visnalize.com/./img/themestudio-editor.png"}]},regularPath:"/win7simu/themestudio/quick-guide.html",relativePath:"win7simu/themestudio/quick-guide.md",key:"v-007b4402",path:"/win7simu/themestudio/quick-guide.html",headers:[{level:2,title:"User interface",slug:"user-interface"},{level:3,title:"Theme Editor",slug:"theme-editor"},{level:3,title:"Themes Explorer",slug:"themes-explorer"},{level:2,title:"Quick start",slug:"quick-start"}],lastUpdated:"9/8/2024, 8:36:48 AM",lastUpdatedTimestamp:1725784608e3,firstCreated:"2/18/2023, 6:34:47 PM",firstCreatedTimestamp:1676745287e3},{title:"Theme Studio in-depth guide",frontmatter:{layout:"WithComments",title:"Theme Studio in-depth guide",sidebarDepth:2,description:"",meta:[{name:"image",content:"https://visnalize.com/./img/guide1.png"},{name:"twitter:title",content:"Theme Studio in-depth guide"},{name:"twitter:description",content:""},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:image",content:"https://visnalize.com/./img/guide1.png"},{name:"twitter:url",content:"https://visnalize.com/win7simu/themestudio/in-depth-guide.html"},{property:"og:type",content:"article"},{property:"og:title",content:"Theme Studio in-depth guide"},{property:"og:description",content:""},{property:"og:image",content:"https://visnalize.com/./img/guide1.png"},{property:"og:url",content:"https://visnalize.com/win7simu/themestudio/in-depth-guide.html"},{property:"article:author",content:"Visnalize"},{itemprop:"name",content:"Theme Studio in-depth guide"},{itemprop:"description",content:""},{itemprop:"image",content:"https://visnalize.com/./img/guide1.png"}]},regularPath:"/win7simu/themestudio/in-depth-guide.html",relativePath:"win7simu/themestudio/in-depth-guide.md",key:"v-2cf24a82",path:"/win7simu/themestudio/in-depth-guide.html",headers:[{level:2,title:"Step-by-step",slug:"step-by-step"},{level:3,title:"Writing your first theme",slug:"writing-your-first-theme"},{level:3,title:"Using themes",slug:"using-themes"},{level:3,title:"Publishing your theme",slug:"publishing-your-theme"},{level:2,title:"Common selectors",slug:"common-selectors"},{level:2,title:"Background and icons",slug:"background-and-icons"},{level:3,title:"Program IDs",slug:"program-ids"}],lastUpdated:"9/8/2024, 8:36:48 AM",lastUpdatedTimestamp:1725784608e3,firstCreated:"2/18/2023, 6:34:47 PM",firstCreatedTimestamp:1676745287e3},{title:"Theme Studio",frontmatter:{layout:"BlogPost",description:"Introduction to Theme Studio, an exclusive application to Win7 Simu.",meta:[{name:"image",content:"https://visnalize.com/./img/themestudio.jpg"},{name:"twitter:title",content:"Theme Studio"},{name:"twitter:description",content:"Introduction to Theme Studio, an exclusive application to Win7 Simu."},{name:"twitter:card",content:"summary_large_image"},{name:"twitter:image",content:"https://visnalize.com/./img/themestudio.jpg"},{name:"twitter:url",content:"https://visnalize.com/win7simu/themestudio/"},{property:"og:type",content:"article"},{property:"og:title",content:"Theme Studio"},{property:"og:description",content:"Introduction to Theme Studio, an exclusive application to Win7 Simu."},{property:"og:image",content:"https://visnalize.com/./img/themestudio.jpg"},{property:"og:url",content:"https://visnalize.com/win7simu/themestudio/"},{property:"article:author",content:"Visnalize"},{itemprop:"name",content:"Theme Studio"},{itemprop:"description",content:"Introduction to Theme Studio, an exclusive application to Win7 Simu."},{itemprop:"image",content:"https://visnalize.com/./img/themestudio.jpg"}]},regularPath:"/win7simu/themestudio/",relativePath:"win7simu/themestudio/readme.md",key:"v-05767d49",path:"/win7simu/themestudio/",lastUpdated:"9/3/2024, 8:15:04 AM",lastUpdatedTimestamp:1725351304e3,firstCreated:"2/18/2023, 6:34:47 PM",firstCreatedTimestamp:1676745287e3},{frontmatter:{layout:"BlogList",title:"Tag",description:"",meta:[{name:"twitter:title",content:""},{name:"twitter:description",content:""},{name:"twitter:card",content:"summary"},{name:"twitter:url",content:"https://visnalize.com/blog/tag/"},{property:"og:type",content:"article"},{property:"og:title",content:""},{property:"og:description",content:""},{property:"og:url",content:"https://visnalize.com/blog/tag/"},{property:"article:author",content:"Visnalize"},{itemprop:"name",content:""},{itemprop:"description",content:""}]},regularPath:"/blog/tag/",key:"v-0326206d",path:"/blog/tag/"},{frontmatter:{layout:"BlogList",title:"tips Tag",description:"",meta:[{name:"twitter:title",content:""},{name:"twitter:description",content:""},{name:"twitter:card",content:"summary"},{name:"twitter:url",content:"https://visnalize.com/blog/tag/tips/"},{property:"og:type",content:"article"},{property:"og:title",content:""},{property:"og:description",content:""},{property:"og:url",content:"https://visnalize.com/blog/tag/tips/"},{property:"article:author",content:"Visnalize"},{itemprop:"name",content:""},{itemprop:"description",content:""}]},regularPath:"/blog/tag/tips/",key:"v-60422faa",path:"/blog/tag/tips/"},{frontmatter:{layout:"BlogList",title:"sharing Tag",description:"",meta:[{name:"twitter:title",content:""},{name:"twitter:description",content:""},{name:"twitter:card",content:"summary"},{name:"twitter:url",content:"https://visnalize.com/blog/tag/sharing/"},{property:"og:type",content:"article"},{property:"og:title",content:""},{property:"og:description",content:""},{property:"og:url",content:"https://visnalize.com/blog/tag/sharing/"},{property:"article:author",content:"Visnalize"},{itemprop:"name",content:""},{itemprop:"description",content:""}]},regularPath:"/blog/tag/sharing/",key:"v-0052e380",path:"/blog/tag/sharing/"},{frontmatter:{layout:"BlogList",title:"technical Tag",description:"",meta:[{name:"twitter:title",content:""},{name:"twitter:description",content:""},{name:"twitter:card",content:"summary"},{name:"twitter:url",content:"https://visnalize.com/blog/tag/technical/"},{property:"og:type",content:"article"},{property:"og:title",content:""},{property:"og:description",content:""},{property:"og:url",content:"https://visnalize.com/blog/tag/technical/"},{property:"article:author",content:"Visnalize"},{itemprop:"name",content:""},{itemprop:"description",content:""}]},regularPath:"/blog/tag/technical/",key:"v-62ece89f",path:"/blog/tag/technical/"},{frontmatter:{layout:"BlogList",title:"win7-simu Tag",description:"",meta:[{name:"twitter:title",content:""},{name:"twitter:description",content:""},{name:"twitter:card",content:"summary"},{name:"twitter:url",content:"https://visnalize.com/blog/tag/win7-simu/"},{property:"og:type",content:"article"},{property:"og:title",content:""},{property:"og:description",content:""},{property:"og:url",content:"https://visnalize.com/blog/tag/win7-simu/"},{property:"article:author",content:"Visnalize"},{itemprop:"name",content:""},{itemprop:"description",content:""}]},regularPath:"/blog/tag/win7-simu/",key:"v-791b612c",path:"/blog/tag/win7-simu/"},{frontmatter:{layout:"BlogList",title:"random Tag",description:"",meta:[{name:"twitter:title",content:""},{name:"twitter:description",content:""},{name:"twitter:card",content:"summary"},{name:"twitter:url",content:"https://visnalize.com/blog/tag/random/"},{property:"og:type",content:"article"},{property:"og:title",content:""},{property:"og:description",content:""},{property:"og:url",content:"https://visnalize.com/blog/tag/random/"},{property:"article:author",content:"Visnalize"},{itemprop:"name",content:""},{itemprop:"description",content:""}]},regularPath:"/blog/tag/random/",key:"v-3e40a282",path:"/blog/tag/random/"},{frontmatter:{layout:"BlogList",title:"brick-1100 Tag",description:"",meta:[{name:"twitter:title",content:""},{name:"twitter:description",content:""},{name:"twitter:card",content:"summary"},{name:"twitter:url",content:"https://visnalize.com/blog/tag/brick-1100/"},{property:"og:type",content:"article"},{property:"og:title",content:""},{property:"og:description",content:""},{property:"og:url",content:"https://visnalize.com/blog/tag/brick-1100/"},{property:"article:author",content:"Visnalize"},{itemprop:"name",content:""},{itemprop:"description",content:""}]},regularPath:"/blog/tag/brick-1100/",key:"v-549e50f6",path:"/blog/tag/brick-1100/"},{frontmatter:{layout:"BlogList",title:"life Tag",description:"",meta:[{name:"twitter:title",content:""},{name:"twitter:description",content:""},{name:"twitter:card",content:"summary"},{name:"twitter:url",content:"https://visnalize.com/blog/tag/life/"},{property:"og:type",content:"article"},{property:"og:title",content:""},{property:"og:description",content:""},{property:"og:url",content:"https://visnalize.com/blog/tag/life/"},{property:"article:author",content:"Visnalize"},{itemprop:"name",content:""},{itemprop:"description",content:""}]},regularPath:"/blog/tag/life/",key:"v-5fd14c66",path:"/blog/tag/life/"},{frontmatter:{layout:"BlogList",title:"review Tag",description:"",meta:[{name:"twitter:title",content:""},{name:"twitter:description",content:""},{name:"twitter:card",content:"summary"},{name:"twitter:url",content:"https://visnalize.com/blog/tag/review/"},{property:"og:type",content:"article"},{property:"og:title",content:""},{property:"og:description",content:""},{property:"og:url",content:"https://visnalize.com/blog/tag/review/"},{property:"article:author",content:"Visnalize"},{itemprop:"name",content:""},{itemprop:"description",content:""}]},regularPath:"/blog/tag/review/",key:"v-2fb4226c",path:"/blog/tag/review/"},{frontmatter:{layout:"BlogList",title:"tools Tag",description:"",meta:[{name:"twitter:title",content:""},{name:"twitter:description",content:""},{name:"twitter:card",content:"summary"},{name:"twitter:url",content:"https://visnalize.com/blog/tag/tools/"},{property:"og:type",content:"article"},{property:"og:title",content:""},{property:"og:description",content:""},{property:"og:url",content:"https://visnalize.com/blog/tag/tools/"},{property:"article:author",content:"Visnalize"},{itemprop:"name",content:""},{itemprop:"description",content:""}]},regularPath:"/blog/tag/tools/",key:"v-af50673e",path:"/blog/tag/tools/"},{frontmatter:{layout:"BlogList",title:"guest-post Tag",description:"",meta:[{name:"twitter:title",content:""},{name:"twitter:description",content:""},{name:"twitter:card",content:"summary"},{name:"twitter:url",content:"https://visnalize.com/blog/tag/guest-post/"},{property:"og:type",content:"article"},{property:"og:title",content:""},{property:"og:description",content:""},{property:"og:url",content:"https://visnalize.com/blog/tag/guest-post/"},{property:"article:author",content:"Visnalize"},{itemprop:"name",content:""},{itemprop:"description",content:""}]},regularPath:"/blog/tag/guest-post/",key:"v-26a044cd",path:"/blog/tag/guest-post/"},{frontmatter:{layout:"Layout",title:"Page 2 - sharing | Tag",description:"",meta:[{name:"twitter:title",content:""},{name:"twitter:description",content:""},{name:"twitter:card",content:"summary"},{name:"twitter:url",content:"https://visnalize.com/blog/tag/sharing/page/2/"},{property:"og:type",content:"article"},{property:"og:title",content:""},{property:"og:description",content:""},{property:"og:url",content:"https://visnalize.com/blog/tag/sharing/page/2/"},{property:"article:author",content:"Visnalize"},{itemprop:"name",content:""},{itemprop:"description",content:""}]},regularPath:"/blog/tag/sharing/page/2/",key:"v-52b2ff7d",path:"/blog/tag/sharing/page/2/"},{frontmatter:{layout:"Layout",title:"Page 2 - win7-simu | Tag",description:"",meta:[{name:"twitter:title",content:""},{name:"twitter:description",content:""},{name:"twitter:card",content:"summary"},{name:"twitter:url",content:"https://visnalize.com/blog/tag/win7-simu/page/2/"},{property:"og:type",content:"article"},{property:"og:title",content:""},{property:"og:description",content:""},{property:"og:url",content:"https://visnalize.com/blog/tag/win7-simu/page/2/"},{property:"article:author",content:"Visnalize"},{itemprop:"name",content:""},{itemprop:"description",content:""}]},regularPath:"/blog/tag/win7-simu/page/2/",key:"v-1f534b11",path:"/blog/tag/win7-simu/page/2/"}],themeConfig:{logo:"/assets/favicon.png",nav:[{text:"💻 Win7 Simu",items:[{text:"About",link:"/win7simu/about"},{text:"Changelog",link:"/win7simu/changelog"},{text:"FAQs",link:"/win7simu/faq"},{text:"Privacy Policy",link:"/win7simu/privacy"},{text:"Guides",items:[{text:"Simulated apps",link:"/win7simu/simulated/"},{text:"Theme Studio",link:"/win7simu/themestudio/"},{text:"Keyboard shortcuts",link:"/win7simu/keyboard-shortcuts"}]}]},{text:"📵 Brick 1100",items:[{text:"About",link:"/brick1100/about"},{text:"Changelog",link:"/brick1100/changelog"},{text:"Privacy Policy",link:"/brick1100/privacy"},{text:"Guides",items:[{text:"Games",link:"/brick1100/games"},{text:"Deep Links",link:"/brick1100/deep-links"},{text:"Builders",link:"/brick1100/builders"}]}]},{text:"📝 Blog",link:"/blog/"},{text:"🙋‍♂️ About",link:"/about"},{text:"🌏 Social",items:[{text:"Google Play",link:"https://play.google.com/store/apps/dev?id=7119371547095400132"},{text:"Youtube",link:"https://www.youtube.com/c/visnalize"},{text:"Github",link:"https://github.com/Visnalize"},{text:"Twitter",link:"https://twitter.com/visnalize"}]}],sidebar:{"/win7simu/themestudio/":[["","Introduction"],["quick-guide","Getting started"],["in-depth-guide","In-depth guide"],["changelog","Changelog"]],"/brick1100/":"auto","/blog/":!1},smoothScroll:!0,lastUpdated:!0}};var Le=n(21),Ie=n.n(Le),We=n(15),Ne=n.n(We),Ue=n(121),qe=n.n(Ue),Re=n(122),De=n.n(Re),Fe="undefined"!=typeof window&&"undefined"!=typeof document&&"undefined"!=typeof navigator,Ve=function(){for(var t=["Edge","Trident","Firefox"],e=0;e=0)return 1;return 0}();var He=Fe&&window.Promise?function(t){var e=!1;return function(){e||(e=!0,window.Promise.resolve().then((function(){e=!1,t()})))}}:function(t){var e=!1;return function(){e||(e=!0,setTimeout((function(){e=!1,t()}),Ve))}};function Ge(t){return t&&"[object Function]"==={}.toString.call(t)}function Ye(t,e){if(1!==t.nodeType)return[];var n=t.ownerDocument.defaultView.getComputedStyle(t,null);return e?n[e]:n}function Ke(t){return"HTML"===t.nodeName?t:t.parentNode||t.host}function Je(t){if(!t)return document.body;switch(t.nodeName){case"HTML":case"BODY":return t.ownerDocument.body;case"#document":return t.body}var e=Ye(t),n=e.overflow,i=e.overflowX,o=e.overflowY;return/(auto|scroll|overlay)/.test(n+o+i)?t:Je(Ke(t))}function Qe(t){return t&&t.referenceNode?t.referenceNode:t}var Xe=Fe&&!(!window.MSInputMethodContext||!document.documentMode),Ze=Fe&&/MSIE 10/.test(navigator.userAgent);function tn(t){return 11===t?Xe:10===t?Ze:Xe||Ze}function en(t){if(!t)return document.documentElement;for(var e=tn(10)?document.body:null,n=t.offsetParent||null;n===e&&t.nextElementSibling;)n=(t=t.nextElementSibling).offsetParent;var i=n&&n.nodeName;return i&&"BODY"!==i&&"HTML"!==i?-1!==["TH","TD","TABLE"].indexOf(n.nodeName)&&"static"===Ye(n,"position")?en(n):n:t?t.ownerDocument.documentElement:document.documentElement}function nn(t){return null!==t.parentNode?nn(t.parentNode):t}function on(t,e){if(!(t&&t.nodeType&&e&&e.nodeType))return document.documentElement;var n=t.compareDocumentPosition(e)&Node.DOCUMENT_POSITION_FOLLOWING,i=n?t:e,o=n?e:t,r=document.createRange();r.setStart(i,0),r.setEnd(o,0);var a,s,l=r.commonAncestorContainer;if(t!==l&&e!==l||i.contains(o))return"BODY"===(s=(a=l).nodeName)||"HTML"!==s&&en(a.firstElementChild)!==a?en(l):l;var c=nn(t);return c.host?on(c.host,e):on(t,nn(e).host)}function rn(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"top",n="top"===e?"scrollTop":"scrollLeft",i=t.nodeName;if("BODY"===i||"HTML"===i){var o=t.ownerDocument.documentElement,r=t.ownerDocument.scrollingElement||o;return r[n]}return t[n]}function an(t,e){var n=arguments.length>2&&void 0!==arguments[2]&&arguments[2],i=rn(e,"top"),o=rn(e,"left"),r=n?-1:1;return t.top+=i*r,t.bottom+=i*r,t.left+=o*r,t.right+=o*r,t}function sn(t,e){var n="x"===e?"Left":"Top",i="Left"===n?"Right":"Bottom";return parseFloat(t["border"+n+"Width"])+parseFloat(t["border"+i+"Width"])}function ln(t,e,n,i){return Math.max(e["offset"+t],e["scroll"+t],n["client"+t],n["offset"+t],n["scroll"+t],tn(10)?parseInt(n["offset"+t])+parseInt(i["margin"+("Height"===t?"Top":"Left")])+parseInt(i["margin"+("Height"===t?"Bottom":"Right")]):0)}function cn(t){var e=t.body,n=t.documentElement,i=tn(10)&&getComputedStyle(n);return{height:ln("Height",e,n,i),width:ln("Width",e,n,i)}}var un=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")},pn=function(){function t(t,e){for(var n=0;n2&&void 0!==arguments[2]&&arguments[2],i=tn(10),o="HTML"===e.nodeName,r=fn(t),a=fn(e),s=Je(t),l=Ye(e),c=parseFloat(l.borderTopWidth),u=parseFloat(l.borderLeftWidth);n&&o&&(a.top=Math.max(a.top,0),a.left=Math.max(a.left,0));var p=hn({top:r.top-a.top-c,left:r.left-a.left-u,width:r.width,height:r.height});if(p.marginTop=0,p.marginLeft=0,!i&&o){var m=parseFloat(l.marginTop),d=parseFloat(l.marginLeft);p.top-=c-m,p.bottom-=c-m,p.left-=u-d,p.right-=u-d,p.marginTop=m,p.marginLeft=d}return(i&&!n?e.contains(s):e===s&&"BODY"!==s.nodeName)&&(p=an(p,e)),p}function vn(t){var e=arguments.length>1&&void 0!==arguments[1]&&arguments[1],n=t.ownerDocument.documentElement,i=gn(t,n),o=Math.max(n.clientWidth,window.innerWidth||0),r=Math.max(n.clientHeight,window.innerHeight||0),a=e?0:rn(n),s=e?0:rn(n,"left"),l={top:a-i.top+i.marginTop,left:s-i.left+i.marginLeft,width:o,height:r};return hn(l)}function yn(t){var e=t.nodeName;if("BODY"===e||"HTML"===e)return!1;if("fixed"===Ye(t,"position"))return!0;var n=Ke(t);return!!n&&yn(n)}function bn(t){if(!t||!t.parentElement||tn())return document.documentElement;for(var e=t.parentElement;e&&"none"===Ye(e,"transform");)e=e.parentElement;return e||document.documentElement}function wn(t,e,n,i){var o=arguments.length>4&&void 0!==arguments[4]&&arguments[4],r={top:0,left:0},a=o?bn(t):on(t,Qe(e));if("viewport"===i)r=vn(a,o);else{var s=void 0;"scrollParent"===i?"BODY"===(s=Je(Ke(e))).nodeName&&(s=t.ownerDocument.documentElement):s="window"===i?t.ownerDocument.documentElement:i;var l=gn(s,a,o);if("HTML"!==s.nodeName||yn(a))r=l;else{var c=cn(t.ownerDocument),u=c.height,p=c.width;r.top+=l.top-l.marginTop,r.bottom=u+l.top,r.left+=l.left-l.marginLeft,r.right=p+l.left}}var m="number"==typeof(n=n||0);return r.left+=m?n:n.left||0,r.top+=m?n:n.top||0,r.right-=m?n:n.right||0,r.bottom-=m?n:n.bottom||0,r}function _n(t){return t.width*t.height}function kn(t,e,n,i,o){var r=arguments.length>5&&void 0!==arguments[5]?arguments[5]:0;if(-1===t.indexOf("auto"))return t;var a=wn(n,i,r,o),s={top:{width:a.width,height:e.top-a.top},right:{width:a.right-e.right,height:a.height},bottom:{width:a.width,height:a.bottom-e.bottom},left:{width:e.left-a.left,height:a.height}},l=Object.keys(s).map((function(t){return dn({key:t},s[t],{area:_n(s[t])})})).sort((function(t,e){return e.area-t.area})),c=l.filter((function(t){var e=t.width,i=t.height;return e>=n.clientWidth&&i>=n.clientHeight})),u=c.length>0?c[0].key:l[0].key,p=t.split("-")[1];return u+(p?"-"+p:"")}function xn(t,e,n){var i=arguments.length>3&&void 0!==arguments[3]?arguments[3]:null,o=i?bn(e):on(e,Qe(n));return gn(n,o,i)}function Cn(t){var e=t.ownerDocument.defaultView.getComputedStyle(t),n=parseFloat(e.marginTop||0)+parseFloat(e.marginBottom||0),i=parseFloat(e.marginLeft||0)+parseFloat(e.marginRight||0);return{width:t.offsetWidth+i,height:t.offsetHeight+n}}function Sn(t){var e={left:"right",right:"left",bottom:"top",top:"bottom"};return t.replace(/left|right|bottom|top/g,(function(t){return e[t]}))}function Pn(t,e,n){n=n.split("-")[0];var i=Cn(t),o={width:i.width,height:i.height},r=-1!==["right","left"].indexOf(n),a=r?"top":"left",s=r?"left":"top",l=r?"height":"width",c=r?"width":"height";return o[a]=e[a]+e[l]/2-i[l]/2,o[s]=n===s?e[s]-i[c]:e[Sn(s)],o}function Tn(t,e){return Array.prototype.find?t.find(e):t.filter(e)[0]}function zn(t,e,n){return(void 0===n?t:t.slice(0,function(t,e,n){if(Array.prototype.findIndex)return t.findIndex((function(t){return t[e]===n}));var i=Tn(t,(function(t){return t[e]===n}));return t.indexOf(i)}(t,"name",n))).forEach((function(t){t.function&&console.warn("`modifier.function` is deprecated, use `modifier.fn`!");var n=t.function||t.fn;t.enabled&&Ge(n)&&(e.offsets.popper=hn(e.offsets.popper),e.offsets.reference=hn(e.offsets.reference),e=n(e,t))})),e}function En(){if(!this.state.isDestroyed){var t={instance:this,styles:{},arrowStyles:{},attributes:{},flipped:!1,offsets:{}};t.offsets.reference=xn(this.state,this.popper,this.reference,this.options.positionFixed),t.placement=kn(this.options.placement,t.offsets.reference,this.popper,this.reference,this.options.modifiers.flip.boundariesElement,this.options.modifiers.flip.padding),t.originalPlacement=t.placement,t.positionFixed=this.options.positionFixed,t.offsets.popper=Pn(this.popper,t.offsets.reference,t.placement),t.offsets.popper.position=this.options.positionFixed?"fixed":"absolute",t=zn(this.modifiers,t),this.state.isCreated?this.options.onUpdate(t):(this.state.isCreated=!0,this.options.onCreate(t))}}function On(t,e){return t.some((function(t){var n=t.name;return t.enabled&&n===e}))}function An(t){for(var e=[!1,"ms","Webkit","Moz","O"],n=t.charAt(0).toUpperCase()+t.slice(1),i=0;i1&&void 0!==arguments[1]&&arguments[1],n=Rn.indexOf(t),i=Rn.slice(n+1).concat(Rn.slice(0,n));return e?i.reverse():i}var Fn="flip",Vn="clockwise",Hn="counterclockwise";function Gn(t,e,n,i){var o=[0,0],r=-1!==["right","left"].indexOf(i),a=t.split(/(\+|\-)/).map((function(t){return t.trim()})),s=a.indexOf(Tn(a,(function(t){return-1!==t.search(/,|\s/)})));a[s]&&-1===a[s].indexOf(",")&&console.warn("Offsets separated by white space(s) are deprecated, use a comma (,) instead.");var l=/\s*,\s*|\s+/,c=-1!==s?[a.slice(0,s).concat([a[s].split(l)[0]]),[a[s].split(l)[1]].concat(a.slice(s+1))]:[a];return(c=c.map((function(t,i){var o=(1===i?!r:r)?"height":"width",a=!1;return t.reduce((function(t,e){return""===t[t.length-1]&&-1!==["+","-"].indexOf(e)?(t[t.length-1]=e,a=!0,t):a?(t[t.length-1]+=e,a=!1,t):t.concat(e)}),[]).map((function(t){return function(t,e,n,i){var o=t.match(/((?:\-|\+)?\d*\.?\d*)(.*)/),r=+o[1],a=o[2];if(!r)return t;if(0===a.indexOf("%")){var s=void 0;switch(a){case"%p":s=n;break;case"%":case"%r":default:s=i}return hn(s)[e]/100*r}if("vh"===a||"vw"===a){return("vh"===a?Math.max(document.documentElement.clientHeight,window.innerHeight||0):Math.max(document.documentElement.clientWidth,window.innerWidth||0))/100*r}return r}(t,o,e,n)}))}))).forEach((function(t,e){t.forEach((function(n,i){In(n)&&(o[e]+=n*("-"===t[i-1]?-1:1))}))})),o}var Yn={placement:"bottom",positionFixed:!1,eventsEnabled:!0,removeOnDestroy:!1,onCreate:function(){},onUpdate:function(){},modifiers:{shift:{order:100,enabled:!0,fn:function(t){var e=t.placement,n=e.split("-")[0],i=e.split("-")[1];if(i){var o=t.offsets,r=o.reference,a=o.popper,s=-1!==["bottom","top"].indexOf(n),l=s?"left":"top",c=s?"width":"height",u={start:mn({},l,r[l]),end:mn({},l,r[l]+r[c]-a[c])};t.offsets.popper=dn({},a,u[i])}return t}},offset:{order:200,enabled:!0,fn:function(t,e){var n=e.offset,i=t.placement,o=t.offsets,r=o.popper,a=o.reference,s=i.split("-")[0],l=void 0;return l=In(+n)?[+n,0]:Gn(n,r,a,s),"left"===s?(r.top+=l[0],r.left-=l[1]):"right"===s?(r.top+=l[0],r.left+=l[1]):"top"===s?(r.left+=l[0],r.top-=l[1]):"bottom"===s&&(r.left+=l[0],r.top+=l[1]),t.popper=r,t},offset:0},preventOverflow:{order:300,enabled:!0,fn:function(t,e){var n=e.boundariesElement||en(t.instance.popper);t.instance.reference===n&&(n=en(n));var i=An("transform"),o=t.instance.popper.style,r=o.top,a=o.left,s=o[i];o.top="",o.left="",o[i]="";var l=wn(t.instance.popper,t.instance.reference,e.padding,n,t.positionFixed);o.top=r,o.left=a,o[i]=s,e.boundaries=l;var c=e.priority,u=t.offsets.popper,p={primary:function(t){var n=u[t];return u[t]l[t]&&!e.escapeWithReference&&(i=Math.min(u[n],l[t]-("right"===t?u.width:u.height))),mn({},n,i)}};return c.forEach((function(t){var e=-1!==["left","top"].indexOf(t)?"primary":"secondary";u=dn({},u,p[e](t))})),t.offsets.popper=u,t},priority:["left","right","top","bottom"],padding:5,boundariesElement:"scrollParent"},keepTogether:{order:400,enabled:!0,fn:function(t){var e=t.offsets,n=e.popper,i=e.reference,o=t.placement.split("-")[0],r=Math.floor,a=-1!==["top","bottom"].indexOf(o),s=a?"right":"bottom",l=a?"left":"top",c=a?"width":"height";return n[s]r(i[s])&&(t.offsets.popper[l]=r(i[s])),t}},arrow:{order:500,enabled:!0,fn:function(t,e){var n;if(!Un(t.instance.modifiers,"arrow","keepTogether"))return t;var i=e.element;if("string"==typeof i){if(!(i=t.instance.popper.querySelector(i)))return t}else if(!t.instance.popper.contains(i))return console.warn("WARNING: `arrow.element` must be child of its popper element!"),t;var o=t.placement.split("-")[0],r=t.offsets,a=r.popper,s=r.reference,l=-1!==["left","right"].indexOf(o),c=l?"height":"width",u=l?"Top":"Left",p=u.toLowerCase(),m=l?"left":"top",d=l?"bottom":"right",h=Cn(i)[c];s[d]-ha[d]&&(t.offsets.popper[p]+=s[p]+h-a[d]),t.offsets.popper=hn(t.offsets.popper);var f=s[p]+s[c]/2-h/2,g=Ye(t.instance.popper),v=parseFloat(g["margin"+u]),y=parseFloat(g["border"+u+"Width"]),b=f-t.offsets.popper[p]-v-y;return b=Math.max(Math.min(a[c]-h,b),0),t.arrowElement=i,t.offsets.arrow=(mn(n={},p,Math.round(b)),mn(n,m,""),n),t},element:"[x-arrow]"},flip:{order:600,enabled:!0,fn:function(t,e){if(On(t.instance.modifiers,"inner"))return t;if(t.flipped&&t.placement===t.originalPlacement)return t;var n=wn(t.instance.popper,t.instance.reference,e.padding,e.boundariesElement,t.positionFixed),i=t.placement.split("-")[0],o=Sn(i),r=t.placement.split("-")[1]||"",a=[];switch(e.behavior){case Fn:a=[i,o];break;case Vn:a=Dn(i);break;case Hn:a=Dn(i,!0);break;default:a=e.behavior}return a.forEach((function(s,l){if(i!==s||a.length===l+1)return t;i=t.placement.split("-")[0],o=Sn(i);var c=t.offsets.popper,u=t.offsets.reference,p=Math.floor,m="left"===i&&p(c.right)>p(u.left)||"right"===i&&p(c.left)p(u.top)||"bottom"===i&&p(c.top)p(n.right),f=p(c.top)p(n.bottom),v="left"===i&&d||"right"===i&&h||"top"===i&&f||"bottom"===i&&g,y=-1!==["top","bottom"].indexOf(i),b=!!e.flipVariations&&(y&&"start"===r&&d||y&&"end"===r&&h||!y&&"start"===r&&f||!y&&"end"===r&&g),w=!!e.flipVariationsByContent&&(y&&"start"===r&&h||y&&"end"===r&&d||!y&&"start"===r&&g||!y&&"end"===r&&f),_=b||w;(m||v||_)&&(t.flipped=!0,(m||v)&&(i=a[l+1]),_&&(r=function(t){return"end"===t?"start":"start"===t?"end":t}(r)),t.placement=i+(r?"-"+r:""),t.offsets.popper=dn({},t.offsets.popper,Pn(t.instance.popper,t.offsets.reference,t.placement)),t=zn(t.instance.modifiers,t,"flip"))})),t},behavior:"flip",padding:5,boundariesElement:"viewport",flipVariations:!1,flipVariationsByContent:!1},inner:{order:700,enabled:!1,fn:function(t){var e=t.placement,n=e.split("-")[0],i=t.offsets,o=i.popper,r=i.reference,a=-1!==["left","right"].indexOf(n),s=-1===["top","left"].indexOf(n);return o[a?"left":"top"]=r[n]-(s?o[a?"width":"height"]:0),t.placement=Sn(e),t.offsets.popper=hn(o),t}},hide:{order:800,enabled:!0,fn:function(t){if(!Un(t.instance.modifiers,"hide","preventOverflow"))return t;var e=t.offsets.reference,n=Tn(t.instance.modifiers,(function(t){return"preventOverflow"===t.name})).boundaries;if(e.bottomn.right||e.top>n.bottom||e.right2&&void 0!==arguments[2]?arguments[2]:{};un(this,t),this.scheduleUpdate=function(){return requestAnimationFrame(i.update)},this.update=He(this.update.bind(this)),this.options=dn({},t.Defaults,o),this.state={isDestroyed:!1,isCreated:!1,scrollParents:[]},this.reference=e&&e.jquery?e[0]:e,this.popper=n&&n.jquery?n[0]:n,this.options.modifiers={},Object.keys(dn({},t.Defaults.modifiers,o.modifiers)).forEach((function(e){i.options.modifiers[e]=dn({},t.Defaults.modifiers[e]||{},o.modifiers?o.modifiers[e]:{})})),this.modifiers=Object.keys(this.options.modifiers).map((function(t){return dn({name:t},i.options.modifiers[t])})).sort((function(t,e){return t.order-e.order})),this.modifiers.forEach((function(t){t.enabled&&Ge(t.onLoad)&&t.onLoad(i.reference,i.popper,i.options,t,i.state)})),this.update();var r=this.options.eventsEnabled;r&&this.enableEventListeners(),this.state.eventsEnabled=r}return pn(t,[{key:"update",value:function(){return En.call(this)}},{key:"destroy",value:function(){return $n.call(this)}},{key:"enableEventListeners",value:function(){return Bn.call(this)}},{key:"disableEventListeners",value:function(){return Ln.call(this)}}]),t}();Kn.Utils=("undefined"!=typeof window?window:global).PopperUtils,Kn.placements=qn,Kn.Defaults=Yn;var Jn,Qn=Kn,Xn=n(123),Zn=n.n(Xn);function ti(){ti.init||(ti.init=!0,Jn=-1!==function(){var t=window.navigator.userAgent,e=t.indexOf("MSIE ");if(e>0)return parseInt(t.substring(e+5,t.indexOf(".",e)),10);if(t.indexOf("Trident/")>0){var n=t.indexOf("rv:");return parseInt(t.substring(n+3,t.indexOf(".",n)),10)}var i=t.indexOf("Edge/");return i>0?parseInt(t.substring(i+5,t.indexOf(".",i)),10):-1}())}function ei(t,e,n,i,o,r,a,s,l,c){"boolean"!=typeof a&&(l=s,s=a,a=!1);var u,p="function"==typeof n?n.options:n;if(t&&t.render&&(p.render=t.render,p.staticRenderFns=t.staticRenderFns,p._compiled=!0,o&&(p.functional=!0)),i&&(p._scopeId=i),r?(u=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),e&&e.call(this,l(t)),t&&t._registeredComponents&&t._registeredComponents.add(r)},p._ssrRegister=u):e&&(u=a?function(t){e.call(this,c(t,this.$root.$options.shadowRoot))}:function(t){e.call(this,s(t))}),u)if(p.functional){var m=p.render;p.render=function(t,e){return u.call(e),m(t,e)}}else{var d=p.beforeCreate;p.beforeCreate=d?[].concat(d,u):[u]}return n}var ni={name:"ResizeObserver",props:{emitOnMount:{type:Boolean,default:!1},ignoreWidth:{type:Boolean,default:!1},ignoreHeight:{type:Boolean,default:!1}},mounted:function(){var t=this;ti(),this.$nextTick((function(){t._w=t.$el.offsetWidth,t._h=t.$el.offsetHeight,t.emitOnMount&&t.emitSize()}));var e=document.createElement("object");this._resizeObject=e,e.setAttribute("aria-hidden","true"),e.setAttribute("tabindex",-1),e.onload=this.addResizeHandlers,e.type="text/html",Jn&&this.$el.appendChild(e),e.data="about:blank",Jn||this.$el.appendChild(e)},beforeDestroy:function(){this.removeResizeHandlers()},methods:{compareAndNotify:function(){(!this.ignoreWidth&&this._w!==this.$el.offsetWidth||!this.ignoreHeight&&this._h!==this.$el.offsetHeight)&&(this._w=this.$el.offsetWidth,this._h=this.$el.offsetHeight,this.emitSize())},emitSize:function(){this.$emit("notify",{width:this._w,height:this._h})},addResizeHandlers:function(){this._resizeObject.contentDocument.defaultView.addEventListener("resize",this.compareAndNotify),this.compareAndNotify()},removeResizeHandlers:function(){this._resizeObject&&this._resizeObject.onload&&(!Jn&&this._resizeObject.contentDocument&&this._resizeObject.contentDocument.defaultView.removeEventListener("resize",this.compareAndNotify),this.$el.removeChild(this._resizeObject),this._resizeObject.onload=null,this._resizeObject=null)}}},ii=function(){var t=this.$createElement;return(this._self._c||t)("div",{staticClass:"resize-observer",attrs:{tabindex:"-1"}})};ii._withStripped=!0;var oi=ei({render:ii,staticRenderFns:[]},void 0,ni,"data-v-8859cc6c",!1,void 0,!1,void 0,void 0,void 0);var ri={version:"1.0.1",install:function(t){t.component("resize-observer",oi),t.component("ResizeObserver",oi)}},ai=null;"undefined"!=typeof window?ai=window.Vue:"undefined"!=typeof global&&(ai=global.Vue),ai&&ai.use(ri);var si=n(124),li=n.n(si),ci=function(){};function ui(t){return"string"==typeof t&&(t=t.split(" ")),t}function pi(t,e){var n,i=ui(e);n=t.className instanceof ci?ui(t.className.baseVal):ui(t.className),i.forEach((function(t){-1===n.indexOf(t)&&n.push(t)})),t instanceof SVGElement?t.setAttribute("class",n.join(" ")):t.className=n.join(" ")}function mi(t,e){var n,i=ui(e);n=t.className instanceof ci?ui(t.className.baseVal):ui(t.className),i.forEach((function(t){var e=n.indexOf(t);-1!==e&&n.splice(e,1)})),t instanceof SVGElement?t.setAttribute("class",n.join(" ")):t.className=n.join(" ")}"undefined"!=typeof window&&(ci=window.SVGAnimatedString);var di=!1;if("undefined"!=typeof window){di=!1;try{var hi=Object.defineProperty({},"passive",{get:function(){di=!0}});window.addEventListener("test",null,hi)}catch(t){}}function fi(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(t);e&&(i=i.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,i)}return n}function gi(t){for(var e=1;e
',trigger:"hover focus",offset:0},yi=[],bi=function(){function t(e,n){var i=this;qe()(this,t),Ne()(this,"_events",[]),Ne()(this,"_setTooltipNodeEvent",(function(t,e,n,o){var r=t.relatedreference||t.toElement||t.relatedTarget;return!!i._tooltipNode.contains(r)&&(i._tooltipNode.addEventListener(t.type,(function n(r){var a=r.relatedreference||r.toElement||r.relatedTarget;i._tooltipNode.removeEventListener(t.type,n),e.contains(a)||i._scheduleHide(e,o.delay,o,r)})),!0)})),n=gi(gi({},vi),n),e.jquery&&(e=e[0]),this.show=this.show.bind(this),this.hide=this.hide.bind(this),this.reference=e,this.options=n,this._isOpen=!1,this._init()}return De()(t,[{key:"show",value:function(){this._show(this.reference,this.options)}},{key:"hide",value:function(){this._hide()}},{key:"dispose",value:function(){this._dispose()}},{key:"toggle",value:function(){return this._isOpen?this.hide():this.show()}},{key:"setClasses",value:function(t){this._classes=t}},{key:"setContent",value:function(t){this.options.title=t,this._tooltipNode&&this._setContent(t,this.options)}},{key:"setOptions",value:function(t){var e=!1,n=t&&t.classes||Oi.options.defaultClass;Zn()(this._classes,n)||(this.setClasses(n),e=!0),t=Si(t);var i=!1,o=!1;for(var r in this.options.offset===t.offset&&this.options.placement===t.placement||(i=!0),(this.options.template!==t.template||this.options.trigger!==t.trigger||this.options.container!==t.container||e)&&(o=!0),t)this.options[r]=t[r];if(this._tooltipNode)if(o){var a=this._isOpen;this.dispose(),this._init(),a&&this.show()}else i&&this.popperInstance.update()}},{key:"_init",value:function(){var t="string"==typeof this.options.trigger?this.options.trigger.split(" "):[];this._isDisposed=!1,this._enableDocumentTouch=-1===t.indexOf("manual"),t=t.filter((function(t){return-1!==["click","hover","focus"].indexOf(t)})),this._setEventListeners(this.reference,t,this.options),this.$_originalTitle=this.reference.getAttribute("title"),this.reference.removeAttribute("title"),this.reference.setAttribute("data-original-title",this.$_originalTitle)}},{key:"_create",value:function(t,e){var n=this,i=window.document.createElement("div");i.innerHTML=e.trim();var o=i.childNodes[0];return o.id=this.options.ariaId||"tooltip_".concat(Math.random().toString(36).substr(2,10)),o.setAttribute("aria-hidden","true"),this.options.autoHide&&-1!==this.options.trigger.indexOf("hover")&&(o.addEventListener("mouseenter",(function(e){return n._scheduleHide(t,n.options.delay,n.options,e)})),o.addEventListener("click",(function(e){return n._scheduleHide(t,n.options.delay,n.options,e)}))),o}},{key:"_setContent",value:function(t,e){var n=this;this.asyncContent=!1,this._applyContent(t,e).then((function(){n.popperInstance&&n.popperInstance.update()}))}},{key:"_applyContent",value:function(t,e){var n=this;return new Promise((function(i,o){var r=e.html,a=n._tooltipNode;if(a){var s=a.querySelector(n.options.innerSelector);if(1===t.nodeType){if(r){for(;s.firstChild;)s.removeChild(s.firstChild);s.appendChild(t)}}else{if("function"==typeof t){var l=t();return void(l&&"function"==typeof l.then?(n.asyncContent=!0,e.loadingClass&&pi(a,e.loadingClass),e.loadingContent&&n._applyContent(e.loadingContent,e),l.then((function(t){return e.loadingClass&&mi(a,e.loadingClass),n._applyContent(t,e)})).then(i).catch(o)):n._applyContent(l,e).then(i).catch(o))}r?s.innerHTML=t:s.innerText=t}i()}}))}},{key:"_show",value:function(t,e){if(e&&"string"==typeof e.container&&!document.querySelector(e.container))return;clearTimeout(this._disposeTimer),delete(e=Object.assign({},e)).offset;var n=!0;this._tooltipNode&&(pi(this._tooltipNode,this._classes),n=!1);var i=this._ensureShown(t,e);return n&&this._tooltipNode&&pi(this._tooltipNode,this._classes),pi(t,["v-tooltip-open"]),i}},{key:"_ensureShown",value:function(t,e){var n=this;if(this._isOpen)return this;if(this._isOpen=!0,yi.push(this),this._tooltipNode)return this._tooltipNode.style.display="",this._tooltipNode.setAttribute("aria-hidden","false"),this.popperInstance.enableEventListeners(),this.popperInstance.update(),this.asyncContent&&this._setContent(e.title,e),this;var i=t.getAttribute("title")||e.title;if(!i)return this;var o=this._create(t,e.template);this._tooltipNode=o,t.setAttribute("aria-describedby",o.id);var r=this._findContainer(e.container,t);this._append(o,r);var a=gi(gi({},e.popperOptions),{},{placement:e.placement});return a.modifiers=gi(gi({},a.modifiers),{},{arrow:{element:this.options.arrowSelector}}),e.boundariesElement&&(a.modifiers.preventOverflow={boundariesElement:e.boundariesElement}),this.popperInstance=new Qn(t,o,a),this._setContent(i,e),requestAnimationFrame((function(){!n._isDisposed&&n.popperInstance?(n.popperInstance.update(),requestAnimationFrame((function(){n._isDisposed?n.dispose():n._isOpen&&o.setAttribute("aria-hidden","false")}))):n.dispose()})),this}},{key:"_noLongerOpen",value:function(){var t=yi.indexOf(this);-1!==t&&yi.splice(t,1)}},{key:"_hide",value:function(){var t=this;if(!this._isOpen)return this;this._isOpen=!1,this._noLongerOpen(),this._tooltipNode.style.display="none",this._tooltipNode.setAttribute("aria-hidden","true"),this.popperInstance&&this.popperInstance.disableEventListeners(),clearTimeout(this._disposeTimer);var e=Oi.options.disposeTimeout;return null!==e&&(this._disposeTimer=setTimeout((function(){t._tooltipNode&&(t._tooltipNode.removeEventListener("mouseenter",t.hide),t._tooltipNode.removeEventListener("click",t.hide),t._removeTooltipNode())}),e)),mi(this.reference,["v-tooltip-open"]),this}},{key:"_removeTooltipNode",value:function(){if(this._tooltipNode){var t=this._tooltipNode.parentNode;t&&(t.removeChild(this._tooltipNode),this.reference.removeAttribute("aria-describedby")),this._tooltipNode=null}}},{key:"_dispose",value:function(){var t=this;return this._isDisposed=!0,this.reference.removeAttribute("data-original-title"),this.$_originalTitle&&this.reference.setAttribute("title",this.$_originalTitle),this._events.forEach((function(e){var n=e.func,i=e.event;t.reference.removeEventListener(i,n)})),this._events=[],this._tooltipNode?(this._hide(),this._tooltipNode.removeEventListener("mouseenter",this.hide),this._tooltipNode.removeEventListener("click",this.hide),this.popperInstance.destroy(),this.popperInstance.options.removeOnDestroy||this._removeTooltipNode()):this._noLongerOpen(),this}},{key:"_findContainer",value:function(t,e){return"string"==typeof t?t=window.document.querySelector(t):!1===t&&(t=e.parentNode),t}},{key:"_append",value:function(t,e){e.appendChild(t)}},{key:"_setEventListeners",value:function(t,e,n){var i=this,o=[],r=[];e.forEach((function(t){switch(t){case"hover":o.push("mouseenter"),r.push("mouseleave"),i.options.hideOnTargetClick&&r.push("click");break;case"focus":o.push("focus"),r.push("blur"),i.options.hideOnTargetClick&&r.push("click");break;case"click":o.push("click"),r.push("click")}})),o.forEach((function(e){var o=function(e){!0!==i._isOpen&&(e.usedByTooltip=!0,i._scheduleShow(t,n.delay,n,e))};i._events.push({event:e,func:o}),t.addEventListener(e,o)})),r.forEach((function(e){var o=function(e){!0!==e.usedByTooltip&&i._scheduleHide(t,n.delay,n,e)};i._events.push({event:e,func:o}),t.addEventListener(e,o)}))}},{key:"_onDocumentTouch",value:function(t){this._enableDocumentTouch&&this._scheduleHide(this.reference,this.options.delay,this.options,t)}},{key:"_scheduleShow",value:function(t,e,n){var i=this,o=e&&e.show||e||0;clearTimeout(this._scheduleTimer),this._scheduleTimer=window.setTimeout((function(){return i._show(t,n)}),o)}},{key:"_scheduleHide",value:function(t,e,n,i){var o=this,r=e&&e.hide||e||0;clearTimeout(this._scheduleTimer),this._scheduleTimer=window.setTimeout((function(){if(!1!==o._isOpen&&o._tooltipNode.ownerDocument.body.contains(o._tooltipNode)){if("mouseleave"===i.type)if(o._setTooltipNodeEvent(i,t,e,n))return;o._hide(t,n)}}),r)}}]),t}();function wi(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(t);e&&(i=i.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,i)}return n}function _i(t){for(var e=1;e
',defaultArrowSelector:".tooltip-arrow, .tooltip__arrow",defaultInnerSelector:".tooltip-inner, .tooltip__inner",defaultDelay:0,defaultTrigger:"hover focus",defaultOffset:0,defaultContainer:"body",defaultBoundariesElement:void 0,defaultPopperOptions:{},defaultLoadingClass:"tooltip-loading",defaultLoadingContent:"...",autoHide:!0,defaultHideOnTargetClick:!0,disposeTimeout:5e3,popover:{defaultPlacement:"bottom",defaultClass:"vue-popover-theme",defaultBaseClass:"tooltip popover",defaultWrapperClass:"wrapper",defaultInnerClass:"tooltip-inner popover-inner",defaultArrowClass:"tooltip-arrow popover-arrow",defaultOpenClass:"open",defaultDelay:0,defaultTrigger:"click",defaultOffset:0,defaultContainer:"body",defaultBoundariesElement:void 0,defaultPopperOptions:{},defaultAutoHide:!0,defaultHandleResize:!0}};function Si(t){var e={placement:void 0!==t.placement?t.placement:Oi.options.defaultPlacement,delay:void 0!==t.delay?t.delay:Oi.options.defaultDelay,html:void 0!==t.html?t.html:Oi.options.defaultHtml,template:void 0!==t.template?t.template:Oi.options.defaultTemplate,arrowSelector:void 0!==t.arrowSelector?t.arrowSelector:Oi.options.defaultArrowSelector,innerSelector:void 0!==t.innerSelector?t.innerSelector:Oi.options.defaultInnerSelector,trigger:void 0!==t.trigger?t.trigger:Oi.options.defaultTrigger,offset:void 0!==t.offset?t.offset:Oi.options.defaultOffset,container:void 0!==t.container?t.container:Oi.options.defaultContainer,boundariesElement:void 0!==t.boundariesElement?t.boundariesElement:Oi.options.defaultBoundariesElement,autoHide:void 0!==t.autoHide?t.autoHide:Oi.options.autoHide,hideOnTargetClick:void 0!==t.hideOnTargetClick?t.hideOnTargetClick:Oi.options.defaultHideOnTargetClick,loadingClass:void 0!==t.loadingClass?t.loadingClass:Oi.options.defaultLoadingClass,loadingContent:void 0!==t.loadingContent?t.loadingContent:Oi.options.defaultLoadingContent,popperOptions:_i({},void 0!==t.popperOptions?t.popperOptions:Oi.options.defaultPopperOptions)};if(e.offset){var n=Ie()(e.offset),i=e.offset;("number"===n||"string"===n&&-1===i.indexOf(","))&&(i="0, ".concat(i)),e.popperOptions.modifiers||(e.popperOptions.modifiers={}),e.popperOptions.modifiers.offset={offset:i}}return e.trigger&&-1!==e.trigger.indexOf("click")&&(e.hideOnTargetClick=!1),e}function Pi(t,e){for(var n=t.placement,i=0;i2&&void 0!==arguments[2]?arguments[2]:{},i=Ti(e),o=void 0!==e.classes?e.classes:Oi.options.defaultClass,r=_i({title:i},Si(_i(_i({},"object"===Ie()(e)?e:{}),{},{placement:Pi(e,n)}))),a=t._tooltip=new bi(t,r);a.setClasses(o),a._vueEl=t;var s=void 0!==e.targetClasses?e.targetClasses:Oi.options.defaultTargetClass;return t._tooltipTargetClasses=s,pi(t,s),a}(t,n,o),void 0!==n.show&&n.show!==t._tooltipOldShow&&(t._tooltipOldShow=n.show,n.show?i.show():i.hide())):zi(t)}var Oi={options:Ci,bind:Ei,update:Ei,unbind:function(t){zi(t)}};function Ai(t){t.addEventListener("click",Mi),t.addEventListener("touchstart",ji,!!di&&{passive:!0})}function $i(t){t.removeEventListener("click",Mi),t.removeEventListener("touchstart",ji),t.removeEventListener("touchend",Bi),t.removeEventListener("touchcancel",Li)}function Mi(t){var e=t.currentTarget;t.closePopover=!e.$_vclosepopover_touch,t.closeAllPopover=e.$_closePopoverModifiers&&!!e.$_closePopoverModifiers.all}function ji(t){if(1===t.changedTouches.length){var e=t.currentTarget;e.$_vclosepopover_touch=!0;var n=t.changedTouches[0];e.$_vclosepopover_touchPoint=n,e.addEventListener("touchend",Bi),e.addEventListener("touchcancel",Li)}}function Bi(t){var e=t.currentTarget;if(e.$_vclosepopover_touch=!1,1===t.changedTouches.length){var n=t.changedTouches[0],i=e.$_vclosepopover_touchPoint;t.closePopover=Math.abs(n.screenY-i.screenY)<20&&Math.abs(n.screenX-i.screenX)<20,t.closeAllPopover=e.$_closePopoverModifiers&&!!e.$_closePopoverModifiers.all}}function Li(t){t.currentTarget.$_vclosepopover_touch=!1}var Ii={bind:function(t,e){var n=e.value,i=e.modifiers;t.$_closePopoverModifiers=i,(void 0===n||n)&&Ai(t)},update:function(t,e){var n=e.value,i=e.oldValue,o=e.modifiers;t.$_closePopoverModifiers=o,n!==i&&(void 0===n||n?Ai(t):$i(t))},unbind:function(t){$i(t)}};function Wi(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(t);e&&(i=i.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,i)}return n}function Ni(t){for(var e=1;e0&&void 0!==arguments[0]?arguments[0]:{},n=e.event;e.skipDelay;var i=e.force,o=void 0!==i&&i;!o&&this.disabled||(this.$_scheduleShow(n),this.$emit("show")),this.$emit("update:open",!0),this.$_beingShowed=!0,requestAnimationFrame((function(){t.$_beingShowed=!1}))},hide:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},e=t.event;t.skipDelay,this.$_scheduleHide(e),this.$emit("hide"),this.$emit("update:open",!1)},dispose:function(){if(this.$_isDisposed=!0,this.$_removeEventListeners(),this.hide({skipDelay:!0}),this.popperInstance&&(this.popperInstance.destroy(),!this.popperInstance.options.removeOnDestroy)){var t=this.$refs.popover;t.parentNode&&t.parentNode.removeChild(t)}this.$_mounted=!1,this.popperInstance=null,this.isOpen=!1,this.$emit("dispose")},$_init:function(){-1===this.trigger.indexOf("manual")&&this.$_addEventListeners()},$_show:function(){var t=this,e=this.$refs.trigger,n=this.$refs.popover;if(clearTimeout(this.$_disposeTimer),!this.isOpen){if(this.popperInstance&&(this.isOpen=!0,this.popperInstance.enableEventListeners(),this.popperInstance.scheduleUpdate()),!this.$_mounted){var i=this.$_findContainer(this.container,e);if(!i)return void console.warn("No container for popover",this);i.appendChild(n),this.$_mounted=!0,this.isOpen=!1,this.popperInstance&&requestAnimationFrame((function(){t.hidden||(t.isOpen=!0)}))}if(!this.popperInstance){var o=Ni(Ni({},this.popperOptions),{},{placement:this.placement});if(o.modifiers=Ni(Ni({},o.modifiers),{},{arrow:Ni(Ni({},o.modifiers&&o.modifiers.arrow),{},{element:this.$refs.arrow})}),this.offset){var r=this.$_getOffset();o.modifiers.offset=Ni(Ni({},o.modifiers&&o.modifiers.offset),{},{offset:r})}this.boundariesElement&&(o.modifiers.preventOverflow=Ni(Ni({},o.modifiers&&o.modifiers.preventOverflow),{},{boundariesElement:this.boundariesElement})),this.popperInstance=new Qn(e,n,o),requestAnimationFrame((function(){if(t.hidden)return t.hidden=!1,void t.$_hide();!t.$_isDisposed&&t.popperInstance?(t.popperInstance.scheduleUpdate(),requestAnimationFrame((function(){if(t.hidden)return t.hidden=!1,void t.$_hide();t.$_isDisposed?t.dispose():t.isOpen=!0}))):t.dispose()}))}var a=this.openGroup;if(a)for(var s,l=0;l1&&void 0!==arguments[1]&&arguments[1];if(clearTimeout(this.$_scheduleTimer),t)this.$_show();else{var e=parseInt(this.delay&&this.delay.show||this.delay||0);this.$_scheduleTimer=setTimeout(this.$_show.bind(this),e)}},$_scheduleHide:function(){var t=this,e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null,n=arguments.length>1&&void 0!==arguments[1]&&arguments[1];if(clearTimeout(this.$_scheduleTimer),n)this.$_hide();else{var i=parseInt(this.delay&&this.delay.hide||this.delay||0);this.$_scheduleTimer=setTimeout((function(){if(t.isOpen){if(e&&"mouseleave"===e.type)if(t.$_setTooltipNodeEvent(e))return;t.$_hide()}}),i)}},$_setTooltipNodeEvent:function(t){var e=this,n=this.$refs.trigger,i=this.$refs.popover,o=t.relatedreference||t.toElement||t.relatedTarget;return!!i.contains(o)&&(i.addEventListener(t.type,(function o(r){var a=r.relatedreference||r.toElement||r.relatedTarget;i.removeEventListener(t.type,o),n.contains(a)||e.hide({event:r})})),!0)},$_removeEventListeners:function(){var t=this.$refs.trigger;this.$_events.forEach((function(e){var n=e.func,i=e.event;t.removeEventListener(i,n)})),this.$_events=[]},$_updatePopper:function(t){this.popperInstance&&(t(),this.isOpen&&this.popperInstance.scheduleUpdate())},$_restartPopper:function(){if(this.popperInstance){var t=this.isOpen;this.dispose(),this.$_isDisposed=!1,this.$_init(),t&&this.show({skipDelay:!0,force:!0})}},$_handleGlobalClose:function(t){var e=this,n=arguments.length>1&&void 0!==arguments[1]&&arguments[1];this.$_beingShowed||(this.hide({event:t}),t.closePopover?this.$emit("close-directive"):this.$emit("auto-hide"),n&&(this.$_preventOpen=!0,setTimeout((function(){e.$_preventOpen=!1}),300)))},$_handleResize:function(){this.isOpen&&this.popperInstance&&(this.popperInstance.scheduleUpdate(),this.$emit("resize"))}}};function Vi(t){for(var e=arguments.length>1&&void 0!==arguments[1]&&arguments[1],n=function(n){var i=Ri[n];if(i.$refs.popover){var o=i.$refs.popover.contains(t.target);requestAnimationFrame((function(){(t.closeAllPopover||t.closePopover&&o||i.autoHide&&!o)&&i.$_handleGlobalClose(t,e)}))}},i=0;i1&&void 0!==arguments[1]?arguments[1]:{};if(!t.installed){t.installed=!0;var i={};li()(i,Ci,n),Ji.options=i,Oi.options=i,e.directive("tooltip",Oi),e.directive("close-popover",Ii),e.component("VPopover",Ki)}},get enabled(){return ki.enabled},set enabled(t){ki.enabled=t}},Qi=null;"undefined"!=typeof window?Qi=window.Vue:"undefined"!=typeof global&&(Qi=global.Vue),Qi&&Qi.use(Ji);var Xi=Ji;n(276);i.a.component("ABackToTop",()=>n.e(60).then(n.bind(null,507))),i.a.component("AButton",()=>Promise.all([n.e(0),n.e(25)]).then(n.bind(null,508))),i.a.component("AChangelog",()=>n.e(61).then(n.bind(null,509))),i.a.component("ACommentCount",()=>Promise.all([n.e(0),n.e(26)]).then(n.bind(null,510))),i.a.component("AControl",()=>Promise.all([n.e(0),n.e(27)]).then(n.bind(null,511))),i.a.component("ACreated",()=>Promise.all([n.e(0),n.e(28)]).then(n.bind(null,512))),i.a.component("ADeeplink",()=>n.e(62).then(n.bind(null,513))),i.a.component("AGoogleAd",()=>Promise.all([n.e(0),n.e(29)]).then(n.bind(null,514))),i.a.component("AIcon",()=>Promise.all([n.e(0),n.e(30)]).then(n.bind(null,515))),i.a.component("AKey",()=>n.e(63).then(n.bind(null,516))),i.a.component("ANotation",()=>Promise.all([n.e(0),n.e(31)]).then(n.bind(null,517))),i.a.component("ARedirect",()=>n.e(64).then(n.bind(null,518))),i.a.component("ASponsorAd",()=>Promise.all([n.e(0),n.e(32)]).then(n.bind(null,519))),i.a.component("ATextToSpeech",()=>n.e(65).then(n.bind(null,520))),i.a.component("AThemeToggle",()=>n.e(66).then(n.bind(null,521))),i.a.component("AUpdated",()=>Promise.all([n.e(0),n.e(33)]).then(n.bind(null,522))),i.a.component("GSiteNotice",()=>Promise.all([n.e(0),n.e(56),n.e(34)]).then(n.bind(null,523))),i.a.component("GSiteSettings",()=>Promise.all([n.e(0),n.e(3),n.e(35)]).then(n.bind(null,524))),i.a.component("MAccessLinks",()=>Promise.all([n.e(0),n.e(40)]).then(n.bind(null,525))),i.a.component("MBlogLinks",()=>Promise.all([n.e(0),n.e(41)]).then(n.bind(null,526))),i.a.component("MBlogMeta",()=>Promise.all([n.e(0),n.e(42)]).then(n.bind(null,527))),i.a.component("MBlogTagList",()=>Promise.all([n.e(0),n.e(16)]).then(n.bind(null,528))),i.a.component("MBlogTagNav",()=>Promise.all([n.e(0),n.e(43)]).then(n.bind(null,529))),i.a.component("MComments",()=>Promise.all([n.e(0),n.e(44)]).then(n.bind(null,530))),i.a.component("MFeatures",()=>Promise.all([n.e(0),n.e(46)]).then(n.bind(null,531))),i.a.component("MEmailSender",()=>Promise.all([n.e(0),n.e(45)]).then(n.bind(null,532))),i.a.component("MFooter",()=>Promise.all([n.e(0),n.e(7)]).then(n.bind(null,533))),i.a.component("MSocialLinks",()=>Promise.all([n.e(0),n.e(47)]).then(n.bind(null,534))),i.a.component("Home-Hero",()=>Promise.all([n.e(0),n.e(10)]).then(n.bind(null,499))),i.a.component("Home-Preview",()=>Promise.all([n.e(0),n.e(36)]).then(n.bind(null,535))),i.a.component("Home-Reviews",()=>Promise.all([n.e(0),n.e(37)]).then(n.bind(null,536))),i.a.component("Home-Section",()=>Promise.all([n.e(0),n.e(38)]).then(n.bind(null,537))),i.a.component("Home-Videos",()=>Promise.all([n.e(0),n.e(39)]).then(n.bind(null,538))),i.a.component("Badge",()=>Promise.all([n.e(0),n.e(22)]).then(n.bind(null,608))),i.a.component("CodeBlock",()=>Promise.all([n.e(0),n.e(23)]).then(n.bind(null,539))),i.a.component("CodeGroup",()=>Promise.all([n.e(0),n.e(24)]).then(n.bind(null,540)));n(277),n(278);function Zi(t){const e=document.documentElement.getBoundingClientRect(),n=t.getBoundingClientRect();return{x:n.left-e.left,y:n.top-e.top}}var to={tag:{tips:{key:"tips",scope:"tag",path:"/blog/tag/tips/",pageKeys:["v-79f79f20","v-ac7b70bc","v-469b7b80","v-4b7e6c3c","v-fbbdb2e0","v-26dc8250","v-44a529fc","v-301172dc"]},sharing:{key:"sharing",scope:"tag",path:"/blog/tag/sharing/",pageKeys:["v-79f79f20","v-2fec31fc","v-667fa73c","v-ac7b70bc","v-ff74563c","v-fbbdb2e0","v-d08e737c","v-26dc8250","v-4182c7bc","v-3fb87dbc","v-bfc8be7c"]},technical:{key:"technical",scope:"tag",path:"/blog/tag/technical/",pageKeys:["v-01aa2ce2","v-2fec31fc","v-ff74563c","v-4b7e6c3c","v-1131db82","v-4182c7bc","v-3fb87dbc","v-bfc8be7c","v-72bfdbc2"]},"win7-simu":{key:"win7-simu",scope:"tag",path:"/blog/tag/win7-simu/",pageKeys:["v-2fec31fc","v-ac7b70bc","v-4b7e6c3c","v-fbbdb2e0","v-194e1218","v-4182c7bc","v-44a529fc","v-3fb87dbc","v-bfc8be7c","v-3424310c","v-301172dc"]},random:{key:"random",scope:"tag",path:"/blog/tag/random/",pageKeys:["v-667fa73c","v-469b7b80"]},"brick-1100":{key:"brick-1100",scope:"tag",path:"/blog/tag/brick-1100/",pageKeys:["v-ff74563c","v-194e1218"]},life:{key:"life",scope:"tag",path:"/blog/tag/life/",pageKeys:["v-d08e737c"]},review:{key:"review",scope:"tag",path:"/blog/tag/review/",pageKeys:["v-194e1218","v-3424310c"]},tools:{key:"tools",scope:"tag",path:"/blog/tag/tools/",pageKeys:["v-1131db82","v-72bfdbc2"]},"guest-post":{key:"guest-post",scope:"tag",path:"/blog/tag/guest-post/",pageKeys:["v-bfc8be7c"]}}};class eo{constructor(t,e){this._metaMap=Object.assign({},t),Object.keys(this._metaMap).forEach(t=>{const{pageKeys:n}=this._metaMap[t];this._metaMap[t].pages=n.map(t=>function(t,e){for(let n=0;n{const{pages:n,path:i}=this._metaMap[e];t.push({name:e,pages:n,path:i})}),t}getItemByName(t){return this._metaMap[t]}}var no={tag:(t,e)=>{const i=n(279);return i(t.frontmatter.date)-i(e.frontmatter.date)>0?-1:1}},io={tag:function(t,e,n){const i=e;return["tag","tags"].some(e=>{const n=t.frontmatter[e];return Array.isArray(n)?n.some(t=>t==i):n==i})}},oo=[{pid:"tag",id:"tips",filter:io.tag,sorter:no.tag,pages:[{path:"/blog/tag/tips/",interval:[0,8]}],prevText:"Prev",nextText:"Next"},{pid:"tag",id:"sharing",filter:io.tag,sorter:no.tag,pages:[{path:"/blog/tag/sharing/",interval:[0,9]},{path:"/blog/tag/sharing/page/2/",interval:[10,11]}],prevText:"Prev",nextText:"Next"},{pid:"tag",id:"technical",filter:io.tag,sorter:no.tag,pages:[{path:"/blog/tag/technical/",interval:[0,9]}],prevText:"Prev",nextText:"Next"},{pid:"tag",id:"win7-simu",filter:io.tag,sorter:no.tag,pages:[{path:"/blog/tag/win7-simu/",interval:[0,9]},{path:"/blog/tag/win7-simu/page/2/",interval:[10,11]}],prevText:"Prev",nextText:"Next"},{pid:"tag",id:"random",filter:io.tag,sorter:no.tag,pages:[{path:"/blog/tag/random/",interval:[0,2]}],prevText:"Prev",nextText:"Next"},{pid:"tag",id:"brick-1100",filter:io.tag,sorter:no.tag,pages:[{path:"/blog/tag/brick-1100/",interval:[0,2]}],prevText:"Prev",nextText:"Next"},{pid:"tag",id:"life",filter:io.tag,sorter:no.tag,pages:[{path:"/blog/tag/life/",interval:[0,1]}],prevText:"Prev",nextText:"Next"},{pid:"tag",id:"review",filter:io.tag,sorter:no.tag,pages:[{path:"/blog/tag/review/",interval:[0,2]}],prevText:"Prev",nextText:"Next"},{pid:"tag",id:"tools",filter:io.tag,sorter:no.tag,pages:[{path:"/blog/tag/tools/",interval:[0,2]}],prevText:"Prev",nextText:"Next"},{pid:"tag",id:"guest-post",filter:io.tag,sorter:no.tag,pages:[{path:"/blog/tag/guest-post/",interval:[0,1]}],prevText:"Prev",nextText:"Next"}],ro=n(125);const ao=n.n(ro)()("plugin-blog:pagination");class so{constructor(t,e,n){ao("pagination",t);const{pages:i,prevText:o,nextText:r}=t,{path:a}=n;this._prevText=o,this._nextText=r;for(let t=0,e=i.length;tt.filter(e,t.id,t.pid)).sort(t.sorter)}setIndexPage(t){this._indexPage=t}get length(){return this._paginationPages.length}get pages(){const[t,e]=this._currentPage.interval;return this._matchedPages.slice(t,e+1)}get hasPrev(){return 0!==this.paginationIndex}get prevLink(){return this.hasPrev?this.paginationIndex-1==0&&this._indexPage?this._indexPage:this._paginationPages[this.paginationIndex-1].path:null}get hasNext(){return this.paginationIndex!==this.length-1}get nextLink(){return this.hasNext?this._paginationPages[this.paginationIndex+1].path:null}get prevText(){return this._prevText}get nextText(){return this._nextText}getSpecificPageLink(t){return this._paginationPages[t].path}}const lo=new class{constructor(t){this.paginations=t}get pages(){return i.a.$vuepress.$get("siteData").pages}getPagination(t,e,n){ao("id",e),ao("pid",t);const i=this.paginations.filter(n=>n.id===e&&n.pid===t)[0];return new so(i,this.pages,n)}}(oo);var co={comment:{enabled:!1,service:""},email:{enabled:!1},feed:{rss:!0,atom:!0,json:!0}},uo={created(){void 0!==this.$ssrContext&&(this.$ssrContext.userHeadTags+=``)},methods:{computeURL(){return"https://visnalize.com"+this.$page.path}}},po=Object($e.a)(uo,(function(){return(0,this._self._c)("div")}),[],!1,null,null,null).exports,mo=n(107),ho=n.n(mo);i.a.component("TextToSpeech",()=>n.e(59).then(n.bind(null,609)));var fo=[({Vue:t,options:e,router:n,siteData:i})=>{t.use(Xi)},{},({Vue:t})=>{t.mixin({computed:{$dataBlock(){return this.$options.__data__block__}}})},{},{},({Vue:t,router:e})=>{e.options.scrollBehavior=(e,n,i)=>{if(i)return window.scrollTo({top:i.y,behavior:"smooth"});if(e.hash){if(t.$vuepress.$get("disableScrollBehavior"))return!1;const n=document.querySelector(e.hash);return!!n&&window.scrollTo({top:Zi(n).y,behavior:"smooth"})}return window.scrollTo({top:0,behavior:"smooth"})}},({Vue:t})=>{const e=Object.keys(to).map(t=>{const e=to[t],n="$"+t;return{[n](){const{pages:t}=this.$site;return new eo(e,t)},["$current"+(t.charAt(0).toUpperCase()+t.slice(1))](){const t=this.$route.meta.id;return this[n].getItemByName(t)}}}).reduce((t,e)=>(Object.assign(t,e),t),{});e.$frontmatterKey=function(){const t=this["$"+this.$route.meta.id];return t||null},t.mixin({computed:e})},({Vue:t})=>{t.mixin({computed:{$pagination(){return this.$route.meta.pid&&this.$route.meta.id?this.$getPagination(this.$route.meta.pid,this.$route.meta.id):null}},methods:{$getPagination(t,e){return e=e||t,lo.getPagination(t,e,this.$route)}}})},({Vue:t})=>{const e={$service:()=>co};t.mixin({computed:e})},({Vue:t,options:e})=>{t.component("Canonical",po)},ho.a,({Vue:t})=>{const e=JSON.parse('{"shortname":"visnalize"}'),i=e.name||"Disqus",o=()=>n.e(58).then(n.bind(null,541));delete e.name,t.component(i,{functional:!0,render(t,{parent:n,props:i}){let r;if(r="en-US"===n.$lang?"en":n.$lang.replace(/\-/,"_"),n._isMounted)return t(o,{props:Object.assign({language:r},e,i)});n.$once("hook:mounted",()=>{n.$forceUpdate()})}})},{}],go=["GSiteSettings","GSiteNotice","Canonical"];class vo extends class{constructor(){this.store=new i.a({data:{state:{}}})}$get(t){return this.store.state[t]}$set(t,e){i.a.set(this.store.state,t,e)}$emit(...t){this.store.$emit(...t)}$on(...t){this.store.$on(...t)}}{}Object.assign(vo.prototype,{getPageAsyncComponent:le,getLayoutAsyncComponent:ce,getAsyncComponent:ue,getVueComponent:pe});var yo={install(t){const e=new vo;t.$vuepress=e,t.prototype.$vuepress=e}};function bo(t,e){const n=e.toLowerCase();return t.options.routes.some(t=>t.path.toLowerCase()===n)}var wo={props:{pageKey:String,slotKey:{type:String,default:"default"}},render(t){const e=this.pageKey||this.$parent.$page.key;return de("pageKey",e),i.a.component(e)||i.a.component(e,le(e)),i.a.component(e)?t(e):t("")}},_o={functional:!0,props:{slotKey:String,required:!0},render:(t,{props:e,slots:n})=>t("div",{class:["content__"+e.slotKey]},n()[e.slotKey])},ko={computed:{openInNewWindowTitle(){return this.$themeLocaleConfig.openNewWindowText||"(opens new window)"}}},xo=(n(310),n(311),Object($e.a)(ko,(function(){var t=this._self._c;return t("span",[t("svg",{staticClass:"icon outbound",attrs:{xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",focusable:"false",x:"0px",y:"0px",viewBox:"0 0 100 100",width:"15",height:"15"}},[t("path",{attrs:{fill:"currentColor",d:"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"}}),this._v(" "),t("polygon",{attrs:{fill:"currentColor",points:"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"}})]),this._v(" "),t("span",{staticClass:"sr-only"},[this._v(this._s(this.openInNewWindowTitle))])])}),[],!1,null,null,null).exports),Co={functional:!0,render(t,{parent:e,children:n}){if(e._isMounted)return n;e.$once("hook:mounted",()=>{e.$forceUpdate()})}};i.a.config.productionTip=!1,i.a.use(Ht),i.a.use(yo),i.a.mixin(function(t,e,n=i.a){!function(t){t.locales&&Object.keys(t.locales).forEach(e=>{t.locales[e].path=e});Object.freeze(t)}(e),n.$vuepress.$set("siteData",e);const o=new(t(n.$vuepress.$get("siteData"))),r=Object.getOwnPropertyDescriptors(Object.getPrototypeOf(o)),a={};return Object.keys(r).reduce((t,e)=>(e.startsWith("$")&&(t[e]=r[e].get),t),a),{computed:a}}(t=>class{setPage(t){this.__page=t}get $site(){return t}get $themeConfig(){return this.$site.themeConfig}get $frontmatter(){return this.$page.frontmatter}get $localeConfig(){const{locales:t={}}=this.$site;let e,n;for(const i in t)"/"===i?n=t[i]:0===this.$page.path.indexOf(i)&&(e=t[i]);return e||n||{}}get $siteTitle(){return this.$localeConfig.title||this.$site.title||""}get $canonicalUrl(){const{canonicalUrl:t}=this.$page.frontmatter;return"string"==typeof t&&t}get $title(){const t=this.$page,{metaTitle:e}=this.$page.frontmatter;if("string"==typeof e)return e;const n=this.$siteTitle,i=t.frontmatter.home?null:t.frontmatter.title||t.title;return n?i?i+" | "+n:n:i||"VuePress"}get $description(){const t=function(t){if(t){const e=t.filter(t=>"description"===t.name)[0];if(e)return e.content}}(this.$page.frontmatter.meta);return t||(this.$page.frontmatter.description||this.$localeConfig.description||this.$site.description||"")}get $lang(){return this.$page.frontmatter.lang||this.$localeConfig.lang||"en-US"}get $localePath(){return this.$localeConfig.path||"/"}get $themeLocaleConfig(){return(this.$site.themeConfig.locales||{})[this.$localePath]||{}}get $page(){return this.__page?this.__page:function(t,e){for(let n=0;nn||(t.hash?!i.a.$vuepress.$get("disableScrollBehavior")&&{selector:decodeURIComponent(t.hash)}:{x:0,y:0})});!function(t){t.beforeEach((e,n,i)=>{if(bo(t,e.path))i();else if(/(\/|\.html)$/.test(e.path))if(/\/$/.test(e.path)){const n=e.path.replace(/\/$/,"")+".html";bo(t,n)?i(n):i()}else i();else{const n=e.path+"/",o=e.path+".html";bo(t,o)?i(o):bo(t,n)?i(n):i()}})}(n);const o={};try{await Promise.all(fo.filter(t=>"function"==typeof t).map(e=>e({Vue:i.a,options:o,router:n,siteData:Be,isServer:t})))}catch(t){console.error(t)}return{app:new i.a(Object.assign(o,{router:n,render:t=>t("div",{attrs:{id:"app"}},[t("RouterView",{ref:"layout"}),t("div",{class:"global-ui"},go.map(e=>t(e)))])})),router:n}}(!1).then(({app:t,router:e})=>{e.onReady(()=>{t.$mount("#app")})})}]); \ No newline at end of file diff --git a/blog/about-the-ads.html b/blog/about-the-ads.html index 51458865..ce2adf24 100644 --- a/blog/about-the-ads.html +++ b/blog/about-the-ads.html @@ -37,8 +37,8 @@ - - + +
Visnalize
- + diff --git a/blog/building-visnalize-com.html b/blog/building-visnalize-com.html index 8a1a40f8..fed7ff47 100644 --- a/blog/building-visnalize-com.html +++ b/blog/building-visnalize-com.html @@ -37,8 +37,8 @@ - - + +
Visnalize
- + diff --git a/blog/building-win7-simu.html b/blog/building-win7-simu.html index e217933d..10b65ce1 100644 --- a/blog/building-win7-simu.html +++ b/blog/building-win7-simu.html @@ -37,8 +37,8 @@ - - + +
Visnalize
- + diff --git a/blog/concealing-online-identity.html b/blog/concealing-online-identity.html index 5f8172cb..b95e60d0 100644 --- a/blog/concealing-online-identity.html +++ b/blog/concealing-online-identity.html @@ -37,8 +37,8 @@ - - + +
Visnalize
- + diff --git a/blog/from-codepen-to-app.html b/blog/from-codepen-to-app.html index 1f56cf47..3d7e2d46 100644 --- a/blog/from-codepen-to-app.html +++ b/blog/from-codepen-to-app.html @@ -37,8 +37,8 @@ - - + +
Visnalize
- + diff --git a/blog/from-side-project-to-side-hustle.html b/blog/from-side-project-to-side-hustle.html index 87d6140e..f8c73f83 100644 --- a/blog/from-side-project-to-side-hustle.html +++ b/blog/from-side-project-to-side-hustle.html @@ -37,8 +37,8 @@ - - + +
Visnalize
- + diff --git a/blog/game-stick-lite-4k-adding-games.html b/blog/game-stick-lite-4k-adding-games.html index 622e03e0..36710ef9 100644 --- a/blog/game-stick-lite-4k-adding-games.html +++ b/blog/game-stick-lite-4k-adding-games.html @@ -37,8 +37,8 @@ - - + +
Visnalize
- + diff --git a/blog/index.html b/blog/index.html index b8aa4b67..bc8bea85 100644 --- a/blog/index.html +++ b/blog/index.html @@ -37,8 +37,8 @@ - - + +
Visnalize

📝 Blog

Last Updated: 9/8/2024, 8:36:48 AM
  • google
  • youtube
  • github
  • twitter
Copyright © 2021 - present. All Rights Reserved
- + diff --git a/blog/load-any-websites-in-iframes.html b/blog/load-any-websites-in-iframes.html index ba462dd6..a3d57a5e 100644 --- a/blog/load-any-websites-in-iframes.html +++ b/blog/load-any-websites-in-iframes.html @@ -37,8 +37,8 @@ - - + +
Visnalize
- + diff --git a/blog/simulator-vs-emulator.html b/blog/simulator-vs-emulator.html index 8420e564..edf8e081 100644 --- a/blog/simulator-vs-emulator.html +++ b/blog/simulator-vs-emulator.html @@ -37,8 +37,8 @@ - - + +
Visnalize
- + diff --git a/blog/tag/brick-1100/index.html b/blog/tag/brick-1100/index.html index df47ca1c..202f4c31 100644 --- a/blog/tag/brick-1100/index.html +++ b/blog/tag/brick-1100/index.html @@ -33,8 +33,8 @@ - - + + - + diff --git a/blog/tag/guest-post/index.html b/blog/tag/guest-post/index.html index 3458adc0..8fbc5c52 100644 --- a/blog/tag/guest-post/index.html +++ b/blog/tag/guest-post/index.html @@ -33,8 +33,8 @@ - - + + - + diff --git a/blog/tag/index.html b/blog/tag/index.html index 96a84ef0..6137e1e1 100644 --- a/blog/tag/index.html +++ b/blog/tag/index.html @@ -33,8 +33,8 @@ - - + + - + diff --git a/blog/tag/life/index.html b/blog/tag/life/index.html index 128c49d2..8de3271e 100644 --- a/blog/tag/life/index.html +++ b/blog/tag/life/index.html @@ -33,8 +33,8 @@ - - + + - + diff --git a/blog/tag/random/index.html b/blog/tag/random/index.html index ad52fa2c..49708003 100644 --- a/blog/tag/random/index.html +++ b/blog/tag/random/index.html @@ -33,8 +33,8 @@ - - + + - + diff --git a/blog/tag/review/index.html b/blog/tag/review/index.html index 235a3843..2f2b6ce6 100644 --- a/blog/tag/review/index.html +++ b/blog/tag/review/index.html @@ -33,8 +33,8 @@ - - + + - + diff --git a/blog/tag/sharing/index.html b/blog/tag/sharing/index.html index 70006513..a60f200c 100644 --- a/blog/tag/sharing/index.html +++ b/blog/tag/sharing/index.html @@ -33,8 +33,8 @@ - - + + - + diff --git a/blog/tag/sharing/page/2/index.html b/blog/tag/sharing/page/2/index.html index 58bd6ec5..6cdb8cf5 100644 --- a/blog/tag/sharing/page/2/index.html +++ b/blog/tag/sharing/page/2/index.html @@ -33,8 +33,8 @@ - - + +
Visnalize
- + diff --git a/blog/tag/technical/index.html b/blog/tag/technical/index.html index 7bc3b7fa..a781a6ee 100644 --- a/blog/tag/technical/index.html +++ b/blog/tag/technical/index.html @@ -33,8 +33,8 @@ - - + + - + diff --git a/blog/tag/tips/index.html b/blog/tag/tips/index.html index 1dc6aedf..76ad45c7 100644 --- a/blog/tag/tips/index.html +++ b/blog/tag/tips/index.html @@ -33,8 +33,8 @@ - - + + - + diff --git a/blog/tag/tools/index.html b/blog/tag/tools/index.html index 9de8c0cf..8625deb6 100644 --- a/blog/tag/tools/index.html +++ b/blog/tag/tools/index.html @@ -33,8 +33,8 @@ - - + + - + diff --git a/blog/tag/win7-simu/index.html b/blog/tag/win7-simu/index.html index 6e948d03..546acfe6 100644 --- a/blog/tag/win7-simu/index.html +++ b/blog/tag/win7-simu/index.html @@ -33,8 +33,8 @@ - - + + - + diff --git a/blog/tag/win7-simu/page/2/index.html b/blog/tag/win7-simu/page/2/index.html index e4650aeb..d79a5321 100644 --- a/blog/tag/win7-simu/page/2/index.html +++ b/blog/tag/win7-simu/page/2/index.html @@ -33,8 +33,8 @@ - - + +
Visnalize
- + diff --git a/blog/updates-life-inactivity-projects.html b/blog/updates-life-inactivity-projects.html index 48cc98b9..c068d552 100644 --- a/blog/updates-life-inactivity-projects.html +++ b/blog/updates-life-inactivity-projects.html @@ -37,11 +37,11 @@ - - + + -
Visnalize

# Quick updates before the year ends

A tray of traditional Vietnamese dishes

The year is coming to an end, and for the last few months I've been quite inactive on social media, my blog, and even my projects, so I thought it would be good to save some time and write a quick post to share what I've been up to, the status of my projects, and some random things I just want to write down and let out of my mind.

# Fourth acquisition offer

Rounds representative reaching out for a handshake

In October, I received yet another acquisition offer for Win7 Simu. This was the fourth one since I launched the app back in 2020. The potential buyer was a big company with a lot of experience in the product acquisition and expansion business. From their writing style and the way they approached me, I could feel the professionalism and seriousness in their offer, in addition, I was interested to see how much this little side project of mine would be valued at, so I decided to give it a shot and see what they had to offer.

Since the previous post where I disclosed the revenue of Win7 Simu, the app has been growing steadily and at the point of the acquisition offer, it was making around $3,000/month. With all the data and information I provided, the buyer offered $80,000 for the app, I proposed a higher price of $90,000 with good reasons and they accepted it.

The agreed price for Win7 Simu

Following their process, I granted limited access to some Win7 Simu's assets for their due diligence team to do certain verification, we had a few more discussions on the terms and a meeting was scheduled for the code review and assessment. The entire process spanned for nearly a month due to some issues in between on both sides, a personal issue from my end and the work overload from theirs.

In the end, the deal was called off due to the limited time and resources they were able to invest in the project. It was a bit disappointing to see the deal fall through, but I'm glad that I had the chance to experience the acquisition process and learn a lot from it, and the mutual understanding left a good impression on me about the company and the people behind it.

# Son hospitalized on his first birthday

During the time when the acquisition offer was being discussed, my son got seriously ill and had to be hospitalized right on his first birthday. He was diagnosed with a severe case of pneumonia and had to be put on a ventilator for a couple of days. It was stressful and emotional for both me and my wife, having to see our first child in such a critical condition was heartbreaking.

I had to stay at the hospital for a whole month, working remotely while helping my wife take care of our son. Luckily, after several treatments and medications, he finally recovered and was discharged from the hospital. The whole experience was a wake-up call for me, reminding me of the importance of family and health, and how fragile life can be. I'm grateful that my son is now healthy and happy, and I'm cherishing every moment I have with him.

# Exciting news ahead

In case you're wondering, I'm still working on my projects, though at a slower pace due to the recent events (and don't worry, I don't plan to abandon them, at least not anytime soon 😛). Here are some sneak peeks of what I've been up to:

# A new website

After more than 2 years since the previous sharing, I decided to give my home on the internet a fresh look. Yes, this website (visnalize.com) is getting a major overhaul, with a new design, more content, and exciting new features to enhance your experience while browsing the site.

It's still a work in progress, but I'm planning to launch it early next year. If you're eager to see the new site, please see the below screenshots for a sneak peek. Hope you'll like it, and don't hesitate to share your thoughts and feedback with me.

Visnalize.com's new blog Visnalize.com's new layout Visnalize.com's new changelog Visnalize.com's new apps listing Visnalize.com's new search

# Win7 Simu

Win7 Simu is still being actively maintained and updated in the background. There are some ongoing refactoring and optimization on the codebase to enhance the project's development speed, experience and allow early bug detection and prevention.

Thuan (opens new window) also continues to work on bringing the best features out of Windows Media Center to Win7 Simu while exploring some cool and innovative techs for the app. Here's a sneak peek of his brilliant work on the new Chess Titans game:

Chess Titans render for Win7 Simu

# Brick 1100

I have a long list of features and improvements planned for Brick 1100, both internally and externally. The only thing that matters now is to arrange the time and resources to work on them. But don't worry, I'm still committed to building Brick 1100 into something great, not just as an app, but a memo for everyone one of us to remember the good old days.

# A third project

An idea sparked in my mind when I build Win7 Simu and Brick 1100, to solve a pain point that I've been dealing with while working on these projects. I wonder if it's a common problem that many others are facing, and wish there was a simpler and more efficient solution for it. In addition, I also want to explore some new technologies, push my limits, and learn new things along the way. So I decided to start a new project, which I'm "unofficially" calling it Cloudd for now.

Here's a very rough sneak peek of the project:

Visnalize's new project - cloudd.cc

If you're curious about the project and eager to try it out early, follow my social media accounts or the project's Blue Sky account (opens new window) for the latest updates and early access.

# Final words

I hope this post has given you a better understanding of what I've been up to lately, and the reasons behind my inactivity. Life is surely unpredictable and challenging at times, but I choose to embrace it with a positive attitude and keep moving forward. I'm grateful for all the support and encouragement I've received from my family, friends, and the community, and I'm looking forward to sharing more exciting news and updates with you in the future.

P.S. The cover image is of some traditional Vietnamese dishes that my wife made for me the other day. It's so delicious that I can't help but share it here 😄

Last Updated: 12/17/2024, 6:32:16 AM

Comments

+ diff --git a/blog/visnalize-year-in-review-2023.html b/blog/visnalize-year-in-review-2023.html index 5abf0d5a..d6c8acf7 100644 --- a/blog/visnalize-year-in-review-2023.html +++ b/blog/visnalize-year-in-review-2023.html @@ -37,8 +37,8 @@ - - + +
Visnalize
- + diff --git a/blog/why-side-hustle.html b/blog/why-side-hustle.html index 3c465688..a3a2387a 100644 --- a/blog/why-side-hustle.html +++ b/blog/why-side-hustle.html @@ -37,8 +37,8 @@ - - + +
Visnalize
- + diff --git a/blog/win7-icons-viewer-downloader.html b/blog/win7-icons-viewer-downloader.html index 85e3f4f0..50779d32 100644 --- a/blog/win7-icons-viewer-downloader.html +++ b/blog/win7-icons-viewer-downloader.html @@ -37,8 +37,8 @@ - - + +
Visnalize
- + diff --git a/blog/win7-simu-custom-cursors.html b/blog/win7-simu-custom-cursors.html index aaf259c0..cf3fbd8f 100644 --- a/blog/win7-simu-custom-cursors.html +++ b/blog/win7-simu-custom-cursors.html @@ -37,8 +37,8 @@ - - + +
Visnalize
- + diff --git a/blog/win7-simu-file-explorer.html b/blog/win7-simu-file-explorer.html index 224cf4e0..971fcb8e 100644 --- a/blog/win7-simu-file-explorer.html +++ b/blog/win7-simu-file-explorer.html @@ -37,8 +37,8 @@ - - + +
Visnalize
- + diff --git a/blog/win7-simu-mobile-devices.html b/blog/win7-simu-mobile-devices.html index 7f5758e1..e5123c38 100644 --- a/blog/win7-simu-mobile-devices.html +++ b/blog/win7-simu-mobile-devices.html @@ -37,8 +37,8 @@ - - + +
Visnalize
- + diff --git a/blog/win7-simu-windows-media-center.html b/blog/win7-simu-windows-media-center.html index e1e2814c..2b0036db 100644 --- a/blog/win7-simu-windows-media-center.html +++ b/blog/win7-simu-windows-media-center.html @@ -37,8 +37,8 @@ - - + +
Visnalize
- + diff --git a/blog/win7-simu-year-in-review-2022.html b/blog/win7-simu-year-in-review-2022.html index 9b856b32..c80f1ae5 100644 --- a/blog/win7-simu-year-in-review-2022.html +++ b/blog/win7-simu-year-in-review-2022.html @@ -37,8 +37,8 @@ - - + +
Visnalize
- + diff --git a/blog/win7-ui-introduction.html b/blog/win7-ui-introduction.html index 286b25eb..fe15edd5 100644 --- a/blog/win7-ui-introduction.html +++ b/blog/win7-ui-introduction.html @@ -37,8 +37,8 @@ - - + +
Visnalize
- + diff --git a/blog/windows-resources.html b/blog/windows-resources.html index 982e3247..be201b5a 100644 --- a/blog/windows-resources.html +++ b/blog/windows-resources.html @@ -37,8 +37,8 @@ - - + +
Visnalize
- + diff --git a/brick1100/about.html b/brick1100/about.html index 9e068f2c..43227dbd 100644 --- a/brick1100/about.html +++ b/brick1100/about.html @@ -37,8 +37,8 @@ - - + +
Visnalize

# Brick 1100

Brick 1100 is a simulation of the Nokia 1100 mobile phone, the best-selling mobile phone of all time worldwide. The simulation aims to bring the users back to the simpler time with the fundamental graphics and features from one of the most durable phones produced by Nokia (opens new window), a Finnish based firm.

Play StoreApp Store

# Interesting facts and history

Nokia 1100 was announced on August 27, 2003. Since then, over 250 million units have been sold in the world and the phone is still, up to this day, taking the lead as the world's best-selling phone. Despite the presence of other modern products at the time, it was able to achieve such popularity thanks to it being among the cheapest mobile phones available in the market, primarily targeting developing countries where it provides just enough features to fulfill the needs.

Aside from being the best-selling phone, it is also the world's best-selling electronic consumer goods, meaning not only phones but no other television, computer, game console or any electronic device has sold more units than the Nokia 1100. It is also known for having a solid battery that could last up to 400 hours in standby mode, and a flashlight that is said to be widely used to light up the dark spots in the small regions of those developing countries.

# Why Brick 1100?

Well, you should have guessed, Nokia is well-known for producing the most durable phones and this 1100 is no exception, if you throw it against the wall, all you have to do is pick it up and put back the battery in place and it will work again just fine. That should describe how tough it is, just like a brick, and hence the name (also to avoid the copyrighted trademark of Nokia).

# Features

As a simulator of Nokia 1100, it attempts to simulate every aspect of the phone, from the keypad control, graphics, sound effects to some of the familiar features such as the iconic Snake game, flashlight, reminders, calculator, etc. Additionally, a few twists are added to make it more unique and fun to play with.

Tip

Refer to Changelog for a complete list of available features through versions.

Last Updated: 9/8/2024, 8:36:48 AM

Comments

- + diff --git a/brick1100/builders.html b/brick1100/builders.html index 5460af15..ca28b8a2 100644 --- a/brick1100/builders.html +++ b/brick1100/builders.html @@ -37,8 +37,8 @@ - - + +
Visnalize

# Brick 1100 Builders

Brick 1100 Builder achievement

Builders is a short name for an advanced program available in Brick 1100. It offers a set of tools and features that allow you to create your own apps and games, and seamlessly integrate them with Brick 1100. You can publish your creations and share with other Brick 1100 users, and even earn rewards for your work. The owners of these creations are referred to as builders.

This page will guide you through the process of building and publishing your apps and games on Brick 1100.

# Understanding how it works

# The nature of Brick 1100

Recommended read: Turning my CodePen into an actual app.

Despite being a mobile app, Brick 1100 at its core is developed using web techs (HTML, CSS, and JavaScript). Ignoring the technical details, this means you can create your own apps and games using the same techs, which subjectively have a lower entry barrier if you are new to programming, or easier and faster to work with if you are already familiar with them.

Web techs offer a powerful iframe (opens new window) feature that allows embedding web content within web content. This is the key for how Brick 1100 works: it embeds your apps and games within its own interface, providing a seamless experience for the user.

Brick 1100 visual

The diagram above illustrates how your apps and games are integrated with Brick 1100 using iframe.

# Bridge 1100

Bridge 1100 is a small JavaScript utility that acts as a bridge between your apps/games and Brick 1100. It provides an API that allows your creation to exchange events and data from and to Brick 1100 such as start, stop, keypress, numpress etc. In addition, it comes with a set of predefined styles to make your creation fit seamlessly with Brick 1100's interface effortlessly.

Head over to the Bridge 1100 GitHub repository (opens new window) to learn more about it.

# Step-by-step guide

As these apps/games are developed using web techs, you can use any code editor of your choice (even a Notepad will do the job just fine). However, Visual Studio Code (opens new window) is recommended as it offers a wide range of features and extensions, including this Live Server (opens new window) extension that enhances your development experience.

Follow the steps below to get your first creation up and running on Brick 1100. Feel free to leave a comment or reach out on Discord (opens new window) if you need help or have any questions.

🚧 Under construction
Last Updated: 9/8/2024, 4:39:40 PM

Comments

- + diff --git a/brick1100/changelog.html b/brick1100/changelog.html index afe863fc..58be16a8 100644 --- a/brick1100/changelog.html +++ b/brick1100/changelog.html @@ -37,8 +37,8 @@ - - + +
Visnalize

# Changelog

Annotation: Android, iOS, Premium feature

# Beta versions

# 0.0.13 (Sep 24, 2024)

  • Fixed audio issues
  • Fixed call/dialer not opening
  • Fixed deep links not working
  • Added Shortcut maker (Menu > Extras > Utilities > Shortcut maker)

# 0.0.12 (Sep 22, 2024)

Minor bug fixes.

# 0.0.11 (Aug 17, 2024)

# 0.0.10 (Aug 10, 2024)

  • Added Time settings (Menu > Settings > Time)
  • Added Calendar (Menu > Extras > Calendar)
  • Added Apple login (Menu > Settings > Account settings)
  • Added achievements for Snake & Chrome Dino games
  • Close app on Switch Off

# 0.0.9 (Jun 24, 2024)

  • Added leaderboards/score ranking for games
  • Added in-app achievements - you can now unlock Google Play Games achievements while exploring the app (Menu > Extras > Achievements)
  • Added new online app: BMI Calculator (Menu > Online > Online apps > BMI Calculator)
  • Added in-app purchases (Menu > Settings > Subscription settings)

# 0.0.8 (Dec 2, 2023)

Minor bug fixes.

# 0.0.7 (Nov 4, 2023)

  • Added new built-in game: Monogram (Menu > Games > Monogram)
  • Added user account (pretty much useless for now)
  • Added ability to access the app using deep links
  • You can now suggest, vote for feature ideas or report bugs via the feedback forum

# 0.0.6 (Oct 16, 2023)

Minor bug fixes.

# 0.0.5 (Sep 30, 2023)

  • Added new built-in game: Chrome Dino (Menu > Games > Chrome Dino)
  • Fixed game audio issues

# 0.0.4 (Sep 27, 2023)

Minor bug fixes.

# 0.0.3 (Sep 26, 2023)

Minor bug fixes.

# 0.0.2 (Sep 26, 2023)

Minor bug fixes.

# 0.0.1 (Sep 26, 2023)

The first beta release of the app with the core interface and functionalities implemented.

  • A pixelated interface (fonts and icons) with a functional keypad.
  • Contacts management (add, delete, edit contacts)
  • Tones management (play and save tones, adjust keypad volume)
  • Settings (change phone color)
  • Reminders (add, delete, edit reminders)
  • Built-in Games (Snake, Brick Breaker)
  • Built-in Extras/Apps (Calculator, Stopwatch, Countdown Timer, Flashlight)
  • An Online Apps section with curated apps for the Brick 1100
Last Updated: 9/25/2024, 1:00:10 AM
- + diff --git a/brick1100/deep-links.html b/brick1100/deep-links.html index bfb58514..af99a70e 100644 --- a/brick1100/deep-links.html +++ b/brick1100/deep-links.html @@ -37,8 +37,8 @@ - - + +
Visnalize

# Brick 1100 deep links

Overview

Deep links take you directly to a specific section of the app without needing to navigate through the app to get to that section. You can use them to create shortcuts to your favorite sections or to share them with others.

The table below lists the deep links that are available in the app and the sections they take you to.

Deep link Section
https://brick1100.visnalize.com/#/main Home screen
https://brick1100.visnalize.com/#/menu Menu screen
https://brick1100.visnalize.com/#/messages Messages
https://brick1100.visnalize.com/#/messages/editor Add/edit messages
https://brick1100.visnalize.com/#/messages/viewer/inbox Inbox messages
https://brick1100.visnalize.com/#/messages/viewer/draft Draft messages
https://brick1100.visnalize.com/#/messages/viewer/sent Sent messages
https://brick1100.visnalize.com/#/contacts Contacts
https://brick1100.visnalize.com/#/contacts/search Search contacts
https://brick1100.visnalize.com/#/contacts/editor Add/edit contacts
https://brick1100.visnalize.com/#/contacts/viewer View contacts
https://brick1100.visnalize.com/#/contacts/viewer?edit=1 Edit contacts
https://brick1100.visnalize.com/#/tones Tones
https://brick1100.visnalize.com/#/tones/tones Ringtones
https://brick1100.visnalize.com/#/tones/keypad Keypad tones
https://brick1100.visnalize.com/#/profiles Profiles
https://brick1100.visnalize.com/#/settings Settings
https://brick1100.visnalize.com/#/settings/phone Phone settings
https://brick1100.visnalize.com/#/settings/account Account settings
https://brick1100.visnalize.com/#/reminders Reminders
https://brick1100.visnalize.com/#/reminders/editor Add/edit reminders
https://brick1100.visnalize.com/#/reminders/viewer View reminders
https://brick1100.visnalize.com/#/reminders/delete Delete reminders
https://brick1100.visnalize.com/#/games Games
https://brick1100.visnalize.com/#/games/snake Game Snake II
https://brick1100.visnalize.com/#/games/brick-breaker Game Brick Breaker
https://brick1100.visnalize.com/#/games/dino Game Chrome Dino
https://brick1100.visnalize.com/#/games/monogram Game Monogram
https://brick1100.visnalize.com/#/games/settings Game settings
https://brick1100.visnalize.com/#/extras Extras
https://brick1100.visnalize.com/#/extras/calculator Calculator
https://brick1100.visnalize.com/#/extras/stopwatch Stopwatch
https://brick1100.visnalize.com/#/extras/timer Countdown timer
https://brick1100.visnalize.com/#/extras/flashlight Flashlight
https://brick1100.visnalize.com/#/online Online
https://brick1100.visnalize.com/#/online/apps Online apps
https://brick1100.visnalize.com/#/online/networks Networks
Last Updated: 9/8/2024, 8:36:48 AM

Comments

- + diff --git a/brick1100/games.html b/brick1100/games.html index a56f3140..fdb0728f 100644 --- a/brick1100/games.html +++ b/brick1100/games.html @@ -37,8 +37,8 @@ - - + +
Visnalize
- + diff --git a/brick1100/index.html b/brick1100/index.html index ed7d5685..a818ef98 100644 --- a/brick1100/index.html +++ b/brick1100/index.html @@ -33,8 +33,8 @@ - - + +
Visnalize

Last Updated: 11/2/2023, 5:52:36 PM
- + diff --git a/brick1100/privacy.html b/brick1100/privacy.html index f2c1a312..ebe3bab5 100644 --- a/brick1100/privacy.html +++ b/brick1100/privacy.html @@ -37,8 +37,8 @@ - - + +
Visnalize

# Privacy Policy

Last Updated: 6/1/2024, 6:49:33 AM

Visnalize ("we", "us", "our") built the Brick 1100 app as an Ad-supported app. This SERVICE is provided by Visnalize at no cost and is intended for use as is.

This page is used to inform visitors regarding our policies with the collection, use, and disclosure of Personal Information if anyone decided to use our Service.

If you choose to use our Service, then you agree to the collection and use of information in relation to this policy. The Personal Information that we collect is used for providing and improving the Service. we will not use or share your information with anyone except as described in this Privacy Policy.

The terms used in this Privacy Policy have the same meanings as in our Terms and Conditions, which is accessible at Brick 1100 unless otherwise defined in this Privacy Policy.

# Information Collection and Use

For a better experience, while using our Service, we may require you to provide us with certain personally identifiable information, including but not limited to your device information. The information that we request will be retained on your device and is not collected by us in any way.

The app does use third party services that may collect information used to identify you.

Link to privacy policy of third party service providers used by the app:

# Log Data

We want to inform you that whenever you use our Service, in a case of an error in the app we collect data and information (through third party products) on your phone called Log Data. This Log Data may include information such as your device Internet Protocol (“IP”) address, device name, operating system version, the configuration of the app when utilizing our Service, the time and date of your use of the Service, and other statistics.

# Cookies

Cookies are files with a small amount of data that are commonly used as anonymous unique identifiers. These are sent to your browser from the websites that you visit and are stored on your device's internal memory.

This Service does not use these “cookies” explicitly. However, the app may use third party code and libraries that use “cookies” to collect information and improve their services. You have the option to either accept or refuse these cookies and know when a cookie is being sent to your device. If you choose to refuse our cookies, you may not be able to use some portions of this Service.

# Service Providers

We may employ third-party companies and individuals due to the following reasons:

  • To facilitate our Service;
  • To provide the Service on our behalf;
  • To perform Service-related services; or
  • To assist us in analyzing how our Service is used.

We want to inform users of this Service that these third parties have access to your Personal Information. The reason is to perform the tasks assigned to them on our behalf. However, they are obligated not to disclose or use the information for any other purpose.

# Security

We value your trust in providing us your Personal Information, thus we are striving to use commercially acceptable means of protecting it. But remember that no method of transmission over the internet, or method of electronic storage is 100% secure and reliable, and we cannot guarantee its absolute security.

This Service may contain links to other sites. If you click on a third-party link, you will be directed to that site. Note that these external sites are not operated by us. Therefore, we strongly advise you to review the Privacy Policy of these websites. We have no control over and assume no responsibility for the content, privacy policies, or practices of any third-party sites or services.

# Children's Privacy

These Services do not address anyone under the age of 13. We do not knowingly collect personally identifiable information from children under 13. In the case we discover that a child under 13 has provided us with personal information, we immediately delete this from our servers. If you are a parent or guardian and you are aware that your child has provided us with personal information, please contact us so that we will be able to do necessary actions.

# Changes to This Privacy Policy

We may update our Privacy Policy from time to time. Thus, you are advised to review this page periodically for any changes. We will notify you of any changes by posting the new Privacy Policy on this page. These changes are effective immediately after they are posted on this page.

# Contact Us

If you have any questions or suggestions about our Privacy Policy, do not hesitate to contact us at hey@visnalize.com.

Last Updated: 6/1/2024, 6:49:33 AM
- + diff --git a/contact.html b/contact.html index dbc50018..3a5b2ed4 100644 --- a/contact.html +++ b/contact.html @@ -33,8 +33,8 @@ - - + +
Visnalize
Last Updated: 11/2/2023, 5:52:36 PM
- + diff --git a/feed.atom b/feed.atom index 67299f88..61e90b5d 100644 --- a/feed.atom +++ b/feed.atom @@ -2,32 +2,32 @@ https://visnalize.com Visnalize - 2024-12-17T06:28:04.476Z + 2024-12-17T06:33:06.983Z https://github.com/webmasterish/vuepress-plugin-feed - - <![CDATA[How I built visnalize.com]]> - https://visnalize.com/blog/building-visnalize-com.html - - - 2024-12-17T06:28:04.466Z - - <![CDATA[About the ads and how I implement them]]> https://visnalize.com/blog/about-the-ads.html - 2024-12-17T06:28:04.466Z + 2024-12-17T06:33:06.973Z + + <![CDATA[How I built visnalize.com]]> + https://visnalize.com/blog/building-visnalize-com.html + + + 2024-12-17T06:33:06.973Z + + <![CDATA[How I built Win7 Simu]]> https://visnalize.com/blog/building-win7-simu.html - 2024-12-17T06:28:04.467Z + 2024-12-17T06:33:06.973Z @@ -35,23 +35,15 @@ https://visnalize.com/blog/concealing-online-identity.html - 2024-12-17T06:28:04.467Z + 2024-12-17T06:33:06.974Z - - <![CDATA[Turning my CodePen into an actual app]]> - https://visnalize.com/blog/from-codepen-to-app.html - - - 2024-12-17T06:28:04.467Z - - <![CDATA[Turning my side project into a side hustle]]> https://visnalize.com/blog/from-side-project-to-side-hustle.html - 2024-12-17T06:28:04.467Z + 2024-12-17T06:33:06.974Z @@ -59,15 +51,23 @@ https://visnalize.com/blog/game-stick-lite-4k-adding-games.html - 2024-12-17T06:28:04.467Z + 2024-12-17T06:33:06.974Z + + <![CDATA[Turning my CodePen into an actual app]]> + https://visnalize.com/blog/from-codepen-to-app.html + + + 2024-12-17T06:33:06.974Z + + <![CDATA[How to get iframes to load any websites]]> https://visnalize.com/blog/load-any-websites-in-iframes.html - 2024-12-17T06:28:04.467Z + 2024-12-17T06:33:06.974Z @@ -75,7 +75,7 @@ https://visnalize.com/blog/ - 2024-12-17T06:28:04.467Z + 2024-12-17T06:33:06.974Z @@ -83,7 +83,7 @@ https://visnalize.com/blog/simulator-vs-emulator.html - 2024-12-17T06:28:04.467Z + 2024-12-17T06:33:06.974Z @@ -91,7 +91,7 @@ https://visnalize.com/blog/updates-life-inactivity-projects.html - 2024-12-17T06:28:04.467Z + 2024-12-17T06:33:06.974Z @@ -99,39 +99,31 @@ https://visnalize.com/blog/visnalize-year-in-review-2023.html - 2024-12-17T06:28:04.467Z + 2024-12-17T06:33:06.974Z - - <![CDATA[Windows 7 icon Viewer/Downloader]]> - https://visnalize.com/blog/win7-icons-viewer-downloader.html - - - 2024-12-17T06:28:04.467Z - - <![CDATA[Why you should have a side hustle]]> https://visnalize.com/blog/why-side-hustle.html - 2024-12-17T06:28:04.468Z + 2024-12-17T06:33:06.974Z - <![CDATA[Implementing custom cursors in Win7 Simu]]> - https://visnalize.com/blog/win7-simu-custom-cursors.html - + <![CDATA[Windows 7 icon Viewer/Downloader]]> + https://visnalize.com/blog/win7-icons-viewer-downloader.html + - 2024-12-17T06:28:04.468Z - + 2024-12-17T06:33:06.975Z + <![CDATA[Implementing File Explorer in Win7 Simu]]> https://visnalize.com/blog/win7-simu-file-explorer.html - 2024-12-17T06:28:04.468Z + 2024-12-17T06:33:06.975Z @@ -139,31 +131,39 @@ https://visnalize.com/blog/win7-simu-mobile-devices.html - 2024-12-17T06:28:04.468Z + 2024-12-17T06:33:06.975Z + + <![CDATA[Implementing custom cursors in Win7 Simu]]> + https://visnalize.com/blog/win7-simu-custom-cursors.html + + + 2024-12-17T06:33:06.975Z + + <![CDATA[Implementing Windows Media Center in Win7 Simu]]> https://visnalize.com/blog/win7-simu-windows-media-center.html - 2024-12-17T06:28:04.468Z + 2024-12-17T06:33:06.975Z - - <![CDATA[Win7 Simu year in review - 2022]]> - https://visnalize.com/blog/win7-simu-year-in-review-2022.html - - - 2024-12-17T06:28:04.468Z - - <![CDATA[Introducing Win7 UI]]> https://visnalize.com/blog/win7-ui-introduction.html - 2024-12-17T06:28:04.468Z + 2024-12-17T06:33:06.975Z + + <![CDATA[Win7 Simu year in review - 2022]]> + https://visnalize.com/blog/win7-simu-year-in-review-2022.html + + + 2024-12-17T06:33:06.975Z + + \ No newline at end of file diff --git a/feed.json b/feed.json index 95dbd552..32bee18a 100644 --- a/feed.json +++ b/feed.json @@ -4,21 +4,21 @@ "home_page_url": "https://visnalize.com", "feed_url": "https://visnalize.com/feed.json", "items": [ - { - "id": "https://visnalize.com/blog/building-visnalize-com.html", - "url": "https://visnalize.com/blog/building-visnalize-com.html", - "title": "How I built visnalize.com", - "summary": "Read about the progress and how I built the visnalize.com website for my own brand", - "image": "https://images.unsplash.com/photo-1461749280684-dccba630e2f6?auto=format&fit=crop&w=740&q=80", - "date_modified": "2024-12-17T06:28:04.466Z" - }, { "id": "https://visnalize.com/blog/about-the-ads.html", "url": "https://visnalize.com/blog/about-the-ads.html", "title": "About the ads and how I implement them", "summary": "A couple of things about ads and how I implement them within my websites and apps", "image": "https://images.unsplash.com/photo-1546142711-1e28c0540deb?auto=format&fit=crop&w=740&q=80", - "date_modified": "2024-12-17T06:28:04.466Z" + "date_modified": "2024-12-17T06:33:06.973Z" + }, + { + "id": "https://visnalize.com/blog/building-visnalize-com.html", + "url": "https://visnalize.com/blog/building-visnalize-com.html", + "title": "How I built visnalize.com", + "summary": "Read about the progress and how I built the visnalize.com website for my own brand", + "image": "https://images.unsplash.com/photo-1461749280684-dccba630e2f6?auto=format&fit=crop&w=740&q=80", + "date_modified": "2024-12-17T06:33:06.973Z" }, { "id": "https://visnalize.com/blog/building-win7-simu.html", @@ -26,7 +26,7 @@ "title": "How I built Win7 Simu", "summary": "Read about my journey with Win7 Simu, how it all started and unveiling some boring technical stuff behind the scene", "image": "https://visnalize.com/assets/covers/building-win7-simu.jpg", - "date_modified": "2024-12-17T06:28:04.467Z" + "date_modified": "2024-12-17T06:33:06.973Z" }, { "id": "https://visnalize.com/blog/concealing-online-identity.html", @@ -34,15 +34,7 @@ "title": "Why I choose to conceal my online identity", "summary": "My takes on internet privacy and why I choose to conceal mine.", "image": "https://visnalize.com/assets/covers/concealing-online-identity.jpg", - "date_modified": "2024-12-17T06:28:04.467Z" - }, - { - "id": "https://visnalize.com/blog/from-codepen-to-app.html", - "url": "https://visnalize.com/blog/from-codepen-to-app.html", - "title": "Turning my CodePen into an actual app", - "summary": "From a simple idea, what merely looked like a playful demo on CodePen, but turned into a full-fledged app", - "image": "https://visnalize.com/assets/covers/from-codepen-to-app.png", - "date_modified": "2024-12-17T06:28:04.467Z" + "date_modified": "2024-12-17T06:33:06.974Z" }, { "id": "https://visnalize.com/blog/from-side-project-to-side-hustle.html", @@ -50,7 +42,7 @@ "title": "Turning my side project into a side hustle", "summary": "From a side project for learning to a side hustle with recurring revenue, read about how I did it, the process, the tools, the tips and tricks.", "image": "https://media.istockphoto.com/id/1349329446/photo/dollars-cash-money-and-paper-note-with-text-written-extra-income-concept-of-financial.jpg?s=1024x1024&w=is&k=20&c=RXsEpU41u0Yke-ol53PoirkXHTOliHGfvijnYipidtQ=", - "date_modified": "2024-12-17T06:28:04.467Z" + "date_modified": "2024-12-17T06:33:06.974Z" }, { "id": "https://visnalize.com/blog/game-stick-lite-4k-adding-games.html", @@ -58,7 +50,15 @@ "title": "How to add more games to Game Stick Lite 4K", "summary": "How to add games to Game Stick Lite 4K and enjoy more of your childhood games", "image": "https://visnalize.com/assets/covers/game-stick-4k-lite.jpg", - "date_modified": "2024-12-17T06:28:04.467Z" + "date_modified": "2024-12-17T06:33:06.974Z" + }, + { + "id": "https://visnalize.com/blog/from-codepen-to-app.html", + "url": "https://visnalize.com/blog/from-codepen-to-app.html", + "title": "Turning my CodePen into an actual app", + "summary": "From a simple idea, what merely looked like a playful demo on CodePen, but turned into a full-fledged app", + "image": "https://visnalize.com/assets/covers/from-codepen-to-app.png", + "date_modified": "2024-12-17T06:33:06.974Z" }, { "id": "https://visnalize.com/blog/load-any-websites-in-iframes.html", @@ -66,7 +66,7 @@ "title": "How to get iframes to load any websites", "summary": "The most effective way to get iframes embedded in your web apps to load any websites", "image": "https://visnalize.com/assets/covers/load-any-websites-in-iframes.png", - "date_modified": "2024-12-17T06:28:04.467Z" + "date_modified": "2024-12-17T06:33:06.974Z" }, { "id": "https://visnalize.com/blog/", @@ -74,7 +74,7 @@ "title": "📝 Blog", "summary": "Helpful insights, sharing, tips and tricks on various topics from Visnalize, the creator of Win7 Simu, Brick 1100, and more", "image": "https://image.social/get?url=visnalize.com/blog/", - "date_modified": "2024-12-17T06:28:04.467Z" + "date_modified": "2024-12-17T06:33:06.974Z" }, { "id": "https://visnalize.com/blog/simulator-vs-emulator.html", @@ -82,7 +82,7 @@ "title": "Simulators and Emulators: What's the difference?", "summary": "Understand the differences between simulators and emulators, what they mean for Win7 Simu.", "image": "https://visnalize.com/assets/covers/simulators-vs-emulators.png", - "date_modified": "2024-12-17T06:28:04.467Z" + "date_modified": "2024-12-17T06:33:06.974Z" }, { "id": "https://visnalize.com/blog/updates-life-inactivity-projects.html", @@ -90,7 +90,7 @@ "title": "Quick updates before the year ends", "summary": "Life events, reasons for my inactivity, updates on projects and some random sharing.", "image": "https://visnalize.com/assets/covers/updates-life-inactivity-projects.jpg", - "date_modified": "2024-12-17T06:28:04.467Z" + "date_modified": "2024-12-17T06:33:06.974Z" }, { "id": "https://visnalize.com/blog/visnalize-year-in-review-2023.html", @@ -98,15 +98,7 @@ "title": "Visnalize year in review - 2023", "summary": "Look back at some amazing achievements from Visnalize in 2023.", "image": "https://images.unsplash.com/photo-1579952775264-625f17561a5d?auto=format&fit=crop&w=740&q=80", - "date_modified": "2024-12-17T06:28:04.467Z" - }, - { - "id": "https://visnalize.com/blog/win7-icons-viewer-downloader.html", - "url": "https://visnalize.com/blog/win7-icons-viewer-downloader.html", - "title": "Windows 7 icon Viewer/Downloader", - "summary": "A simple tool to view and download Windows 7 icon collection.", - "image": "https://visnalize.com/assets/covers/win7-icons-viewer-downloader.jpg", - "date_modified": "2024-12-17T06:28:04.467Z" + "date_modified": "2024-12-17T06:33:06.974Z" }, { "id": "https://visnalize.com/blog/why-side-hustle.html", @@ -114,15 +106,15 @@ "title": "Why you should have a side hustle", "summary": "Some personal sharing about reasons and benefits of having a side hustle.", "image": "https://visnalize.com/assets/covers/why-side-hustle.jpg", - "date_modified": "2024-12-17T06:28:04.468Z" + "date_modified": "2024-12-17T06:33:06.974Z" }, { - "id": "https://visnalize.com/blog/win7-simu-custom-cursors.html", - "url": "https://visnalize.com/blog/win7-simu-custom-cursors.html", - "title": "Implementing custom cursors in Win7 Simu", - "summary": "Deep dive into how custom cursors are implemented in Win7 Simu.", - "image": "https://visnalize.com/assets/covers/win7-simu-custom-cursors.jpg", - "date_modified": "2024-12-17T06:28:04.468Z" + "id": "https://visnalize.com/blog/win7-icons-viewer-downloader.html", + "url": "https://visnalize.com/blog/win7-icons-viewer-downloader.html", + "title": "Windows 7 icon Viewer/Downloader", + "summary": "A simple tool to view and download Windows 7 icon collection.", + "image": "https://visnalize.com/assets/covers/win7-icons-viewer-downloader.jpg", + "date_modified": "2024-12-17T06:33:06.975Z" }, { "id": "https://visnalize.com/blog/win7-simu-file-explorer.html", @@ -130,7 +122,7 @@ "title": "Implementing File Explorer in Win7 Simu", "summary": "Some key points to share about how Win7 Simu's File Explorer is implemented.", "image": "https://images.unsplash.com/photo-1544396821-4dd40b938ad3?auto=format&fit=crop&w=740&q=80", - "date_modified": "2024-12-17T06:28:04.468Z" + "date_modified": "2024-12-17T06:33:06.975Z" }, { "id": "https://visnalize.com/blog/win7-simu-mobile-devices.html", @@ -138,7 +130,15 @@ "title": "Win7 Simu versus mobile devices", "summary": "How to install Win7 Simu on mobile devices without downloading from any App Stores.", "image": "https://images.unsplash.com/photo-1616353071855-2c045c4458ae?auto=format&fit=crop&w=740&q=80", - "date_modified": "2024-12-17T06:28:04.468Z" + "date_modified": "2024-12-17T06:33:06.975Z" + }, + { + "id": "https://visnalize.com/blog/win7-simu-custom-cursors.html", + "url": "https://visnalize.com/blog/win7-simu-custom-cursors.html", + "title": "Implementing custom cursors in Win7 Simu", + "summary": "Deep dive into how custom cursors are implemented in Win7 Simu.", + "image": "https://visnalize.com/assets/covers/win7-simu-custom-cursors.jpg", + "date_modified": "2024-12-17T06:33:06.975Z" }, { "id": "https://visnalize.com/blog/win7-simu-windows-media-center.html", @@ -146,15 +146,7 @@ "title": "Implementing Windows Media Center in Win7 Simu", "summary": "Sharing on how Windows Media Center was implemented in Win7 Simu.", "image": "https://visnalize.com/assets/covers/win7-simu-windows-media-center.jpg", - "date_modified": "2024-12-17T06:28:04.468Z" - }, - { - "id": "https://visnalize.com/blog/win7-simu-year-in-review-2022.html", - "url": "https://visnalize.com/blog/win7-simu-year-in-review-2022.html", - "title": "Win7 Simu year in review - 2022", - "summary": "Look back at some amazing numbers for Win7 Simu in 2022.", - "image": "https://images.unsplash.com/photo-1651377731759-fe736975a6e9?auto=format&fit=crop&w=740&q=80", - "date_modified": "2024-12-17T06:28:04.468Z" + "date_modified": "2024-12-17T06:33:06.975Z" }, { "id": "https://visnalize.com/blog/win7-ui-introduction.html", @@ -162,7 +154,15 @@ "title": "Introducing Win7 UI", "summary": "The open-source UI library that powers Win7 Simu behind the scenes.", "image": "https://visnalize.com/assets/covers/win7-ui-hero.jpg", - "date_modified": "2024-12-17T06:28:04.468Z" + "date_modified": "2024-12-17T06:33:06.975Z" + }, + { + "id": "https://visnalize.com/blog/win7-simu-year-in-review-2022.html", + "url": "https://visnalize.com/blog/win7-simu-year-in-review-2022.html", + "title": "Win7 Simu year in review - 2022", + "summary": "Look back at some amazing numbers for Win7 Simu in 2022.", + "image": "https://images.unsplash.com/photo-1651377731759-fe736975a6e9?auto=format&fit=crop&w=740&q=80", + "date_modified": "2024-12-17T06:33:06.975Z" } ] } \ No newline at end of file diff --git a/index.html b/index.html index 2c2fc93c..95a7cde8 100644 --- a/index.html +++ b/index.html @@ -36,8 +36,8 @@ - - + +
Visnalize
- + diff --git a/rss.xml b/rss.xml index 0232360e..ca8e0b8b 100644 --- a/rss.xml +++ b/rss.xml @@ -4,33 +4,33 @@ Visnalize https://visnalize.com - Tue, 17 Dec 2024 06:28:04 GMT + Tue, 17 Dec 2024 06:33:06 GMT http://blogs.law.harvard.edu/tech/rss https://github.com/webmasterish/vuepress-plugin-feed - - <![CDATA[How I built visnalize.com]]> - https://visnalize.com/blog/building-visnalize-com.html - https://visnalize.com/blog/building-visnalize-com.html - Tue, 17 Dec 2024 06:28:04 GMT - - - - <![CDATA[About the ads and how I implement them]]> https://visnalize.com/blog/about-the-ads.html https://visnalize.com/blog/about-the-ads.html - Tue, 17 Dec 2024 06:28:04 GMT + Tue, 17 Dec 2024 06:33:06 GMT + + <![CDATA[How I built visnalize.com]]> + https://visnalize.com/blog/building-visnalize-com.html + https://visnalize.com/blog/building-visnalize-com.html + Tue, 17 Dec 2024 06:33:06 GMT + + + + <![CDATA[How I built Win7 Simu]]> https://visnalize.com/blog/building-win7-simu.html https://visnalize.com/blog/building-win7-simu.html - Tue, 17 Dec 2024 06:28:04 GMT + Tue, 17 Dec 2024 06:33:06 GMT @@ -39,25 +39,16 @@ <![CDATA[Why I choose to conceal my online identity]]> https://visnalize.com/blog/concealing-online-identity.html https://visnalize.com/blog/concealing-online-identity.html - Tue, 17 Dec 2024 06:28:04 GMT + Tue, 17 Dec 2024 06:33:06 GMT - - <![CDATA[Turning my CodePen into an actual app]]> - https://visnalize.com/blog/from-codepen-to-app.html - https://visnalize.com/blog/from-codepen-to-app.html - Tue, 17 Dec 2024 06:28:04 GMT - - - - <![CDATA[Turning my side project into a side hustle]]> https://visnalize.com/blog/from-side-project-to-side-hustle.html https://visnalize.com/blog/from-side-project-to-side-hustle.html - Tue, 17 Dec 2024 06:28:04 GMT + Tue, 17 Dec 2024 06:33:06 GMT @@ -66,16 +57,25 @@ <![CDATA[How to add more games to Game Stick Lite 4K]]> https://visnalize.com/blog/game-stick-lite-4k-adding-games.html https://visnalize.com/blog/game-stick-lite-4k-adding-games.html - Tue, 17 Dec 2024 06:28:04 GMT + Tue, 17 Dec 2024 06:33:06 GMT + + <![CDATA[Turning my CodePen into an actual app]]> + https://visnalize.com/blog/from-codepen-to-app.html + https://visnalize.com/blog/from-codepen-to-app.html + Tue, 17 Dec 2024 06:33:06 GMT + + + + <![CDATA[How to get iframes to load any websites]]> https://visnalize.com/blog/load-any-websites-in-iframes.html https://visnalize.com/blog/load-any-websites-in-iframes.html - Tue, 17 Dec 2024 06:28:04 GMT + Tue, 17 Dec 2024 06:33:06 GMT @@ -84,7 +84,7 @@ <![CDATA[📝 Blog]]> https://visnalize.com/blog/ https://visnalize.com/blog/ - Tue, 17 Dec 2024 06:28:04 GMT + Tue, 17 Dec 2024 06:33:06 GMT @@ -93,7 +93,7 @@ <![CDATA[Simulators and Emulators: What's the difference?]]> https://visnalize.com/blog/simulator-vs-emulator.html https://visnalize.com/blog/simulator-vs-emulator.html - Tue, 17 Dec 2024 06:28:04 GMT + Tue, 17 Dec 2024 06:33:06 GMT @@ -102,7 +102,7 @@ <![CDATA[Quick updates before the year ends]]> https://visnalize.com/blog/updates-life-inactivity-projects.html https://visnalize.com/blog/updates-life-inactivity-projects.html - Tue, 17 Dec 2024 06:28:04 GMT + Tue, 17 Dec 2024 06:33:06 GMT @@ -111,43 +111,34 @@ <![CDATA[Visnalize year in review - 2023]]> https://visnalize.com/blog/visnalize-year-in-review-2023.html https://visnalize.com/blog/visnalize-year-in-review-2023.html - Tue, 17 Dec 2024 06:28:04 GMT + Tue, 17 Dec 2024 06:33:06 GMT - - <![CDATA[Windows 7 icon Viewer/Downloader]]> - https://visnalize.com/blog/win7-icons-viewer-downloader.html - https://visnalize.com/blog/win7-icons-viewer-downloader.html - Tue, 17 Dec 2024 06:28:04 GMT - - - - <![CDATA[Why you should have a side hustle]]> https://visnalize.com/blog/why-side-hustle.html https://visnalize.com/blog/why-side-hustle.html - Tue, 17 Dec 2024 06:28:04 GMT + Tue, 17 Dec 2024 06:33:06 GMT - <![CDATA[Implementing custom cursors in Win7 Simu]]> - https://visnalize.com/blog/win7-simu-custom-cursors.html - https://visnalize.com/blog/win7-simu-custom-cursors.html - Tue, 17 Dec 2024 06:28:04 GMT - - + <![CDATA[Windows 7 icon Viewer/Downloader]]> + https://visnalize.com/blog/win7-icons-viewer-downloader.html + https://visnalize.com/blog/win7-icons-viewer-downloader.html + Tue, 17 Dec 2024 06:33:06 GMT + + <![CDATA[Implementing File Explorer in Win7 Simu]]> https://visnalize.com/blog/win7-simu-file-explorer.html https://visnalize.com/blog/win7-simu-file-explorer.html - Tue, 17 Dec 2024 06:28:04 GMT + Tue, 17 Dec 2024 06:33:06 GMT @@ -156,37 +147,46 @@ <![CDATA[Win7 Simu versus mobile devices]]> https://visnalize.com/blog/win7-simu-mobile-devices.html https://visnalize.com/blog/win7-simu-mobile-devices.html - Tue, 17 Dec 2024 06:28:04 GMT + Tue, 17 Dec 2024 06:33:06 GMT + + <![CDATA[Implementing custom cursors in Win7 Simu]]> + https://visnalize.com/blog/win7-simu-custom-cursors.html + https://visnalize.com/blog/win7-simu-custom-cursors.html + Tue, 17 Dec 2024 06:33:06 GMT + + + + <![CDATA[Implementing Windows Media Center in Win7 Simu]]> https://visnalize.com/blog/win7-simu-windows-media-center.html https://visnalize.com/blog/win7-simu-windows-media-center.html - Tue, 17 Dec 2024 06:28:04 GMT + Tue, 17 Dec 2024 06:33:06 GMT - - <![CDATA[Win7 Simu year in review - 2022]]> - https://visnalize.com/blog/win7-simu-year-in-review-2022.html - https://visnalize.com/blog/win7-simu-year-in-review-2022.html - Tue, 17 Dec 2024 06:28:04 GMT - - - - <![CDATA[Introducing Win7 UI]]> https://visnalize.com/blog/win7-ui-introduction.html https://visnalize.com/blog/win7-ui-introduction.html - Tue, 17 Dec 2024 06:28:04 GMT + Tue, 17 Dec 2024 06:33:06 GMT + + <![CDATA[Win7 Simu year in review - 2022]]> + https://visnalize.com/blog/win7-simu-year-in-review-2022.html + https://visnalize.com/blog/win7-simu-year-in-review-2022.html + Tue, 17 Dec 2024 06:33:06 GMT + + + + \ No newline at end of file diff --git a/sitemap.xml b/sitemap.xml index 8a8f9350..bfc398a6 100644 --- a/sitemap.xml +++ b/sitemap.xml @@ -1 +1 @@ -https://visnalize.com/about.html2024-09-03T08:15:04.000Zdailyhttps://visnalize.com/blog/building-visnalize-com.html2024-09-03T08:15:04.000Zdailyhttps://visnalize.com/blog/about-the-ads.html2024-09-03T08:15:04.000Zdailyhttps://visnalize.com/blog/building-win7-simu.html2024-09-03T08:15:04.000Zdailyhttps://visnalize.com/blog/concealing-online-identity.html2024-08-24T11:23:04.000Zdailyhttps://visnalize.com/blog/from-codepen-to-app.html2024-09-03T08:15:04.000Zdailyhttps://visnalize.com/blog/from-side-project-to-side-hustle.html2024-09-03T08:15:04.000Zdailyhttps://visnalize.com/blog/game-stick-lite-4k-adding-games.html2024-03-10T08:28:45.000Zdailyhttps://visnalize.com/blog/load-any-websites-in-iframes.html2024-09-03T08:15:04.000Zdailyhttps://visnalize.com/blog/2024-09-08T08:36:48.000Zdailyhttps://visnalize.com/blog/simulator-vs-emulator.html2024-02-21T11:02:25.000Zdailyhttps://visnalize.com/blog/updates-life-inactivity-projects.html2024-12-17T06:27:05.000Zdailyhttps://visnalize.com/blog/visnalize-year-in-review-2023.html2024-09-05T16:51:57.000Zdailyhttps://visnalize.com/blog/win7-icons-viewer-downloader.html2023-06-26T12:53:04.000Zdailyhttps://visnalize.com/blog/why-side-hustle.html2024-09-03T08:15:04.000Zdailyhttps://visnalize.com/blog/win7-simu-custom-cursors.html2024-10-04T02:42:30.000Zdailyhttps://visnalize.com/blog/win7-simu-file-explorer.html2024-09-03T08:15:04.000Zdailyhttps://visnalize.com/blog/win7-simu-mobile-devices.html2023-06-26T12:53:04.000Zdailyhttps://visnalize.com/blog/win7-simu-windows-media-center.html2024-10-03T04:06:22.000Zdailyhttps://visnalize.com/blog/win7-simu-year-in-review-2022.html2023-06-26T12:53:04.000Zdailyhttps://visnalize.com/blog/win7-ui-introduction.html2024-09-03T08:15:04.000Zdailyhttps://visnalize.com/blog/windows-resources.html2024-09-03T08:15:04.000Zdailyhttps://visnalize.com/brick1100/about.html2024-09-08T08:36:48.000Zdailyhttps://visnalize.com/brick1100/changelog.html2024-09-25T01:00:10.000Zdailyhttps://visnalize.com/brick1100/deep-links.html2024-09-08T08:36:48.000Zdailyhttps://visnalize.com/brick1100/builders.html2024-09-08T16:39:40.000Zdailyhttps://visnalize.com/brick1100/games.html2024-09-05T16:51:57.000Zdailyhttps://visnalize.com/brick1100/2023-11-02T17:52:36.000Zdailyhttps://visnalize.com/brick1100/privacy.html2024-06-01T06:49:33.000Zdailyhttps://visnalize.com/contact.html2023-11-02T17:52:36.000Zdailyhttps://visnalize.com/2024-09-03T09:12:11.000Zdailyhttps://visnalize.com/win7simu/changelog.html2024-10-31T13:44:26.000Zdailyhttps://visnalize.com/win7simu/about.html2024-09-08T08:36:48.000Zdailyhttps://visnalize.com/win7simu/faq.html2024-09-03T08:15:04.000Zdailyhttps://visnalize.com/win7simu/2023-11-02T17:52:36.000Zdailyhttps://visnalize.com/win7simu/keyboard-shortcuts.html2024-10-08T09:58:29.000Zdailyhttps://visnalize.com/win7simu/privacy.html2024-06-01T06:49:33.000Zdailyhttps://visnalize.com/win7simu/simulated/bios.html2024-08-31T13:10:28.000Zdailyhttps://visnalize.com/win7simu/simulated/calculator.html2024-08-31T13:10:28.000Zdailyhttps://visnalize.com/win7simu/simulated/chrome.html2024-08-31T13:10:28.000Zdailyhttps://visnalize.com/win7simu/simulated/cpanel.html2024-08-31T13:10:28.000Zdailyhttps://visnalize.com/win7simu/simulated/fileexplorer.html2024-09-01T03:54:23.000Zdailyhttps://visnalize.com/win7simu/simulated/cmd.html2024-08-31T13:10:28.000Zdailyhttps://visnalize.com/win7simu/simulated/gadgets.html2024-08-31T13:10:28.000Zdailyhttps://visnalize.com/win7simu/simulated/ie.html2024-08-31T13:10:28.000Zdailyhttps://visnalize.com/win7simu/simulated/2024-08-30T10:09:03.000Zdailyhttps://visnalize.com/win7simu/simulated/magnifier.html2024-08-31T13:10:28.000Zdailyhttps://visnalize.com/win7simu/simulated/media-player.html2024-08-31T13:10:28.000Zdailyhttps://visnalize.com/win7simu/simulated/minesweeper.html2024-08-31T13:10:28.000Zdailyhttps://visnalize.com/win7simu/simulated/notepad.html2024-08-31T13:10:28.000Zdailyhttps://visnalize.com/win7simu/simulated/personalize.html2024-08-31T13:10:28.000Zdailyhttps://visnalize.com/win7simu/simulated/paint.html2024-08-31T13:10:28.000Zdailyhttps://visnalize.com/win7simu/simulated/purbleplace.html2024-08-31T13:10:28.000Zdailyhttps://visnalize.com/win7simu/simulated/programs.html2024-08-31T13:10:28.000Zdailyhttps://visnalize.com/win7simu/simulated/run.html2024-10-08T09:58:29.000Zdailyhttps://visnalize.com/win7simu/simulated/snipping.html2024-08-31T13:10:28.000Zdailyhttps://visnalize.com/win7simu/simulated/solitaire.html2024-09-01T03:54:23.000Zdailyhttps://visnalize.com/win7simu/simulated/sticky.html2024-08-31T13:10:28.000Zdailyhttps://visnalize.com/win7simu/simulated/recorder.html2024-08-31T13:10:28.000Zdailyhttps://visnalize.com/win7simu/simulated/taskmgr.html2024-08-31T13:10:28.000Zdailyhttps://visnalize.com/win7simu/simulated/wordpad.html2024-08-31T13:10:28.000Zdailyhttps://visnalize.com/win7simu/simulated/wmc.html2024-08-31T13:10:28.000Zdailyhttps://visnalize.com/win7simu/themestudio/changelog.html2024-10-31T13:44:26.000Zdailyhttps://visnalize.com/win7simu/themestudio/in-depth-guide.html2024-09-08T08:36:48.000Zdailyhttps://visnalize.com/win7simu/themestudio/quick-guide.html2024-09-08T08:36:48.000Zdailyhttps://visnalize.com/win7simu/themestudio/2024-09-03T08:15:04.000Zdailyhttps://visnalize.com/blog/tag/dailyhttps://visnalize.com/blog/tag/technical/dailyhttps://visnalize.com/blog/tag/tips/dailyhttps://visnalize.com/blog/tag/sharing/dailyhttps://visnalize.com/blog/tag/win7-simu/dailyhttps://visnalize.com/blog/tag/random/dailyhttps://visnalize.com/blog/tag/brick-1100/dailyhttps://visnalize.com/blog/tag/life/dailyhttps://visnalize.com/blog/tag/review/dailyhttps://visnalize.com/blog/tag/tools/dailyhttps://visnalize.com/blog/tag/guest-post/dailyhttps://visnalize.com/blog/tag/sharing/page/2/dailyhttps://visnalize.com/blog/tag/win7-simu/page/2/daily \ No newline at end of file +https://visnalize.com/about.html2024-09-03T08:15:04.000Zdailyhttps://visnalize.com/blog/about-the-ads.html2024-09-03T08:15:04.000Zdailyhttps://visnalize.com/blog/building-visnalize-com.html2024-09-03T08:15:04.000Zdailyhttps://visnalize.com/blog/building-win7-simu.html2024-09-03T08:15:04.000Zdailyhttps://visnalize.com/blog/concealing-online-identity.html2024-08-24T11:23:04.000Zdailyhttps://visnalize.com/blog/from-side-project-to-side-hustle.html2024-09-03T08:15:04.000Zdailyhttps://visnalize.com/blog/game-stick-lite-4k-adding-games.html2024-03-10T08:28:45.000Zdailyhttps://visnalize.com/blog/from-codepen-to-app.html2024-09-03T08:15:04.000Zdailyhttps://visnalize.com/blog/load-any-websites-in-iframes.html2024-09-03T08:15:04.000Zdailyhttps://visnalize.com/blog/2024-09-08T08:36:48.000Zdailyhttps://visnalize.com/blog/simulator-vs-emulator.html2024-02-21T11:02:25.000Zdailyhttps://visnalize.com/blog/updates-life-inactivity-projects.html2024-12-17T06:32:16.000Zdailyhttps://visnalize.com/blog/visnalize-year-in-review-2023.html2024-09-05T16:51:57.000Zdailyhttps://visnalize.com/blog/why-side-hustle.html2024-09-03T08:15:04.000Zdailyhttps://visnalize.com/blog/win7-icons-viewer-downloader.html2023-06-26T12:53:04.000Zdailyhttps://visnalize.com/blog/win7-simu-file-explorer.html2024-09-03T08:15:04.000Zdailyhttps://visnalize.com/blog/win7-simu-mobile-devices.html2023-06-26T12:53:04.000Zdailyhttps://visnalize.com/blog/win7-simu-custom-cursors.html2024-10-04T02:42:30.000Zdailyhttps://visnalize.com/blog/win7-simu-windows-media-center.html2024-10-03T04:06:22.000Zdailyhttps://visnalize.com/blog/win7-ui-introduction.html2024-09-03T08:15:04.000Zdailyhttps://visnalize.com/blog/win7-simu-year-in-review-2022.html2023-06-26T12:53:04.000Zdailyhttps://visnalize.com/blog/windows-resources.html2024-09-03T08:15:04.000Zdailyhttps://visnalize.com/brick1100/about.html2024-09-08T08:36:48.000Zdailyhttps://visnalize.com/brick1100/builders.html2024-09-08T16:39:40.000Zdailyhttps://visnalize.com/brick1100/changelog.html2024-09-25T01:00:10.000Zdailyhttps://visnalize.com/brick1100/games.html2024-09-05T16:51:57.000Zdailyhttps://visnalize.com/brick1100/deep-links.html2024-09-08T08:36:48.000Zdailyhttps://visnalize.com/brick1100/2023-11-02T17:52:36.000Zdailyhttps://visnalize.com/brick1100/privacy.html2024-06-01T06:49:33.000Zdailyhttps://visnalize.com/contact.html2023-11-02T17:52:36.000Zdailyhttps://visnalize.com/2024-09-03T09:12:11.000Zdailyhttps://visnalize.com/win7simu/about.html2024-09-08T08:36:48.000Zdailyhttps://visnalize.com/win7simu/changelog.html2024-10-31T13:44:26.000Zdailyhttps://visnalize.com/win7simu/faq.html2024-09-03T08:15:04.000Zdailyhttps://visnalize.com/win7simu/2023-11-02T17:52:36.000Zdailyhttps://visnalize.com/win7simu/keyboard-shortcuts.html2024-10-08T09:58:29.000Zdailyhttps://visnalize.com/win7simu/simulated/bios.html2024-08-31T13:10:28.000Zdailyhttps://visnalize.com/win7simu/privacy.html2024-06-01T06:49:33.000Zdailyhttps://visnalize.com/win7simu/simulated/calculator.html2024-08-31T13:10:28.000Zdailyhttps://visnalize.com/win7simu/simulated/chrome.html2024-08-31T13:10:28.000Zdailyhttps://visnalize.com/win7simu/simulated/cmd.html2024-08-31T13:10:28.000Zdailyhttps://visnalize.com/win7simu/simulated/cpanel.html2024-08-31T13:10:28.000Zdailyhttps://visnalize.com/win7simu/simulated/fileexplorer.html2024-09-01T03:54:23.000Zdailyhttps://visnalize.com/win7simu/simulated/ie.html2024-08-31T13:10:28.000Zdailyhttps://visnalize.com/win7simu/simulated/gadgets.html2024-08-31T13:10:28.000Zdailyhttps://visnalize.com/win7simu/simulated/magnifier.html2024-08-31T13:10:28.000Zdailyhttps://visnalize.com/win7simu/simulated/2024-08-30T10:09:03.000Zdailyhttps://visnalize.com/win7simu/simulated/media-player.html2024-08-31T13:10:28.000Zdailyhttps://visnalize.com/win7simu/simulated/minesweeper.html2024-08-31T13:10:28.000Zdailyhttps://visnalize.com/win7simu/simulated/personalize.html2024-08-31T13:10:28.000Zdailyhttps://visnalize.com/win7simu/simulated/paint.html2024-08-31T13:10:28.000Zdailyhttps://visnalize.com/win7simu/simulated/notepad.html2024-08-31T13:10:28.000Zdailyhttps://visnalize.com/win7simu/simulated/programs.html2024-08-31T13:10:28.000Zdailyhttps://visnalize.com/win7simu/simulated/purbleplace.html2024-08-31T13:10:28.000Zdailyhttps://visnalize.com/win7simu/simulated/run.html2024-10-08T09:58:29.000Zdailyhttps://visnalize.com/win7simu/simulated/snipping.html2024-08-31T13:10:28.000Zdailyhttps://visnalize.com/win7simu/simulated/sticky.html2024-08-31T13:10:28.000Zdailyhttps://visnalize.com/win7simu/simulated/recorder.html2024-08-31T13:10:28.000Zdailyhttps://visnalize.com/win7simu/simulated/solitaire.html2024-09-01T03:54:23.000Zdailyhttps://visnalize.com/win7simu/simulated/taskmgr.html2024-08-31T13:10:28.000Zdailyhttps://visnalize.com/win7simu/simulated/wmc.html2024-08-31T13:10:28.000Zdailyhttps://visnalize.com/win7simu/simulated/wordpad.html2024-08-31T13:10:28.000Zdailyhttps://visnalize.com/win7simu/themestudio/changelog.html2024-10-31T13:44:26.000Zdailyhttps://visnalize.com/win7simu/themestudio/quick-guide.html2024-09-08T08:36:48.000Zdailyhttps://visnalize.com/win7simu/themestudio/in-depth-guide.html2024-09-08T08:36:48.000Zdailyhttps://visnalize.com/win7simu/themestudio/2024-09-03T08:15:04.000Zdailyhttps://visnalize.com/blog/tag/dailyhttps://visnalize.com/blog/tag/tips/dailyhttps://visnalize.com/blog/tag/sharing/dailyhttps://visnalize.com/blog/tag/technical/dailyhttps://visnalize.com/blog/tag/win7-simu/dailyhttps://visnalize.com/blog/tag/random/dailyhttps://visnalize.com/blog/tag/brick-1100/dailyhttps://visnalize.com/blog/tag/life/dailyhttps://visnalize.com/blog/tag/review/dailyhttps://visnalize.com/blog/tag/tools/dailyhttps://visnalize.com/blog/tag/guest-post/dailyhttps://visnalize.com/blog/tag/sharing/page/2/dailyhttps://visnalize.com/blog/tag/win7-simu/page/2/daily \ No newline at end of file diff --git a/win7simu/about.html b/win7simu/about.html index 44c57483..fb33eeec 100644 --- a/win7simu/about.html +++ b/win7simu/about.html @@ -37,8 +37,8 @@ - - + +
Visnalize

# Win7 Simu

Win7 Simu is a recreation of the Windows 7 operating system on the Web/Android platform. It is built out of pure joy and nostalgia for the sake of reliving the good old time with the elegant Aero and Glassy interface.

Play StoreWeb App

# Features

As a simulator of Windows 7, it attempts to simulate every aspect of Windows 7, from the most familiar programs of Windows 7 such as Calculator, Command Prompt, the striking glass effect of the Aero themes, to the exclusive Desktop Gadgets only available in Windows Vista and 7. The simulator also comes with some other cool and nostalgic Windows themes designed on the core of Windows 7 such as Windows 2000, Windows XP, Windows 8...

The simulator is in active development and new features are constantly rolled out. If you have suggestions or feedback, please feel free to write to us at hey@visnalize.com.

Tip

Refer to Changelog for a complete list of available features through versions.

On August 28, 2021, a web version of the app was released. It is accessible for those who do not own an Android device. The graphics, interface, and most of the features are identical to the Android app, except for some, which are exclusive to Android and cannot be replicated for the web due to technical constraints. A comparison of some key features is listed as below:

Feature Android Web
Cross-platform support* ❌ ✅
Work offline ✅ ❌
Can access local files directly with File Explorer** ❌ ❌
Can access local/native apps ✅ ❌
Sync settings with online accounts ✅ ✅
Multi-theming support ✅ ✅
Multi-language support ✅ ✅
System notifications ✅ ❌

* It doesn't matter if the device is Android, iOS, Windows, or Mac, as long as it has a web browser and connects to the internet.

** The early versions of Win7 Simu were able to access local files on Android devices. However, due to Google Play's policy, this feature was removed from v3.6.0 onwards.

# Pricing

Win7 Simu is and will always remain FREE to use. However, as it has been growing in popularity, the time and effort invested in the development and maintenance, as well as the server costs for the app, are also increasing. Therefore, a small subscription was introduced to help cover the costs and keep the service running. The subscription is completely optional and does not affect the core features of the app. It is available at $1.99/month or $19.99/year. Subscribers will be able to enjoy the app without any ads and may cancel their subscriptions at any time.

We would like to express our sincere gratitude to all the subscribers who have been supporting us.

# A bit of the history

Windows 7 was first released by Microsoft (opens new window) on October 22, 2009, succeeding Windows Vista, which was criticized for its long development time, performance and compatibility issues at launch, and many other critiques. Windows 7 was well-received and praised, stating it to be a "big improvement" over Windows Vista and a "worthy successor" of Windows XP at the time.

After more than a decade, on January 14, 2020, support for Windows 7 ended. Security updates and fixes were no longer provided by Microsoft. However, even on the day of its death, Windows 7 was still the second-most popular operating system with a 32.75% market share, behind Windows 10 with 47.65%, showing how much love it still had.

Last Updated: 9/8/2024, 8:36:48 AM

Comments

- + diff --git a/win7simu/changelog.html b/win7simu/changelog.html index 969f5030..0ebb338c 100644 --- a/win7simu/changelog.html +++ b/win7simu/changelog.html @@ -37,8 +37,8 @@ - - + +
Visnalize
- + diff --git a/win7simu/faq.html b/win7simu/faq.html index baf64cff..e1c44ae0 100644 --- a/win7simu/faq.html +++ b/win7simu/faq.html @@ -37,8 +37,8 @@ - - + +
Visnalize

# Frequently Asked Questions

Note

This page is updated regularly in accordance with the user's queries from all sources (emails, Play Store reviews, YouTube comments). Please check back to this before asking any question as the question will not be responded if it's already included here.

Last Updated: 9/3/2024, 8:15:04 AM

# 1. Simulator features

# Can I install exe files/Windows programs on this?

No. This is just a simulator. It does not have the necessary infrastructure to run those programs.

# Can you implement the mouse control in the same way as the Win98 Simulator?

No. This simulator uses a different technology approach from the Win98 Simulator, therefore it's not feasible to implement the same.

# IE and Chrome cannot connect to the internet. Can you fix them?

Please keep in mind that this is just a simulator. Web browser functionalities are very limited and are unstable. I'm afraid this is as far I can get to implement them.

# IE and Chrome are too slow. Can you fix them?

No. Please see above.

# IE and Chrome cannot download files/programs. Can you fix them?

No. Please see above.

# Can you add Microsoft Office?

Yes. However, the priority is low and your expectation might not be met. Please keep in mind this is still just a simulator.

# Can you add this feature, that feature and more features?

Yes. If the feature is not rejected above. You can comment your request below in the comment section or write to me at hey@visnalize.com.

# Can I use this simulator as a launcher/home screen?

No. Due to the its nature, this simulator is not designed to be used as a launcher/home screen.

# Does this simulator work offline?

Yes. However, certain features such as user accounts, some games and browsers will not work as they require internet connection to connect with the servers.

# 2. How to use

# How do I create a user account?

You can create your own account with username and password (please refer this video tutorial (opens new window)), or you can use your social accounts (Google, Github etc.) to login without having to create one.

# I don't know the password. How do I login?

You can either click on the suitcase to login with the Guest account, or create your own account (see above) and use it to login.

# I have forgotten my password. How to recover it?

Unfortunately, account recovery is not supported at the moment. Please create a new account if you have forgotten your password.

# How do I open the desktop menu?

To open the desktop menu or any context menu, simply hold your finger for a second (video tutorial (opens new window)).

# How do I bring programs/apps to desktop?

There are currently 2 ways:

  • From the Start Menu, hold your finger on the programs/apps you want to add, a context menu should appear, then select "Send to Desktop".
  • From the desktop, you can refer to this video tutorial (opens new window).

# 3. Miscellaneous

# Can you remove the ads?

No, I'm afraid. A lot of time and effort have been spent to develop and maintain this simulator, it even costs me a fair amount of money to maintain the cloud services to retain your user accounts and settings within. However, there is a small monthly subscription plan available with to which you can subscribe, to enjoy the app ad-free and support me to keep improving it and bring you more cool features. For the web version, you can disable the ads by becoming a patron on Patreon (opens new window) at the same price.

# Can this simulator work on Android versions earlier than 6.0?

No, I'm afraid. And there is no way to support Android versions older than 6.0 due to certain technical limitations that cannot be resolved.

# The simulator only shows a black screen on my device. What should I do?

Please make sure you have the latest version of Android WebView (opens new window) installed. It is an important piece that allows Win7 Simu to operate normally on your device. If that didn't solve the problem, please use the web version (opens new window) instead.

# My games/apps are not showing in the Start Menu. What's the problem?

This happens on devices with Android 12 or later. Unfortunately, from Android 12+, Google restricts access to the packages (games, apps, etc.) on user devices. There's nothing that can be done about it (see this version changelog).

# File Explorer does not show files on my device. What's the problem?

Due to Google Play's policy, from Android 11 onwards, apps are restricted from accessing files on user devices. There's nothing that can be done about it (for more context, see this post (opens new window)).

# Any plan to publish this simulator to App Store?

No, I'm afraid. It's unlikely that this simulator will be published to App Store due to Apple's strict policies. However, you can still use the web version (opens new window) or even "install (opens new window)" it on your iOS device.

# I found a bug in the simulator. How do I report it?

To help facilitate the bug smashing process, I only look into bug reports that are submitted via email, from Github issues board (opens new window) or through the simulator itself. You can find a "Report bugs" option in the About app to report bugs through the simulator. Please include as much detail as possible that would help reproduce the bug.

Last Updated: 9/3/2024, 8:15:04 AM

Comments

- + diff --git a/win7simu/index.html b/win7simu/index.html index 36b3fadd..041d434a 100644 --- a/win7simu/index.html +++ b/win7simu/index.html @@ -33,8 +33,8 @@ - - + +
Visnalize
Last Updated: 11/2/2023, 5:52:36 PM
- + diff --git a/win7simu/keyboard-shortcuts.html b/win7simu/keyboard-shortcuts.html index 7acc9258..7b7fd2e4 100644 --- a/win7simu/keyboard-shortcuts.html +++ b/win7simu/keyboard-shortcuts.html @@ -37,8 +37,8 @@ - - + +
Visnalize

# Win7 Simu keyboard shortcuts

All keyboard shortcuts that can be used in Win7 Simu are listed below. These shortcuts are generally available in the web version of the app, for the Android version, they can be used with an external keyboard connected to the device.

Note

Alt key is used as the modifier key for all shortcuts to avoid conflicts with the system shortcuts. On MacOS, ⌥ (Option) can be used as the equivalent of the Alt key.

# General

Shortcut Description
Alt + W Open Start Menu
Alt + D Minimize all windows and show desktop
Alt + E Open File Explorer
Alt + R Open Run dialog
Alt + L Log off the current user

# Window management

Shortcut Description
Alt + Up Maximize window
Alt + Down Restore/minimize window
Alt + Left Snap window to the left
Alt + Right Snap window to the right
Alt + 4 Close window

# General program shortcuts

Shortcut Description
Alt + N Create a new blank document
Alt + O Open file
Alt + S Save file
Alt + Shift + S Save as
Last Updated: 10/8/2024, 9:58:29 AM

Comments

- + diff --git a/win7simu/privacy.html b/win7simu/privacy.html index 6f1a19d7..3bad72e6 100644 --- a/win7simu/privacy.html +++ b/win7simu/privacy.html @@ -37,8 +37,8 @@ - - + +
Visnalize

# Privacy Policy

Last Updated: 6/1/2024, 6:49:33 AM

Visnalize ("we", "us", "our") built the Win7 Simu app as an Ad-supported app. This SERVICE is provided by Visnalize at no cost and is intended for use as is.

This page is used to inform visitors regarding our policies with the collection, use, and disclosure of Personal Information if anyone decided to use our Service.

If you choose to use our Service, then you agree to the collection and use of information in relation to this policy. The Personal Information that we collect is used for providing and improving the Service. we will not use or share your information with anyone except as described in this Privacy Policy.

The terms used in this Privacy Policy have the same meanings as in our Terms and Conditions, which is accessible at Win7 Simu unless otherwise defined in this Privacy Policy.

# Information Collection and Use

For a better experience, while using our Service, we may require you to provide us with certain personally identifiable information, including but not limited to your device information. The information that we request will be retained on your device and is not collected by us in any way.

The app does use third party services that may collect information used to identify you.

Link to privacy policy of third party service providers used by the app:

# Log Data

We want to inform you that whenever you use our Service, in a case of an error in the app we collect data and information (through third party products) on your phone called Log Data. This Log Data may include information such as your device Internet Protocol (“IP”) address, device name, operating system version, the configuration of the app when utilizing our Service, the time and date of your use of the Service, and other statistics.

# Cookies

Cookies are files with a small amount of data that are commonly used as anonymous unique identifiers. These are sent to your browser from the websites that you visit and are stored on your device's internal memory.

This Service does not use these “cookies” explicitly. However, the app may use third party code and libraries that use “cookies” to collect information and improve their services. You have the option to either accept or refuse these cookies and know when a cookie is being sent to your device. If you choose to refuse our cookies, you may not be able to use some portions of this Service.

# Service Providers

We may employ third-party companies and individuals due to the following reasons:

  • To facilitate our Service;
  • To provide the Service on our behalf;
  • To perform Service-related services; or
  • To assist us in analyzing how our Service is used.

We want to inform users of this Service that these third parties have access to your Personal Information. The reason is to perform the tasks assigned to them on our behalf. However, they are obligated not to disclose or use the information for any other purpose.

# Security

We value your trust in providing us your Personal Information, thus we are striving to use commercially acceptable means of protecting it. But remember that no method of transmission over the internet, or method of electronic storage is 100% secure and reliable, and we cannot guarantee its absolute security.

This Service may contain links to other sites. If you click on a third-party link, you will be directed to that site. Note that these external sites are not operated by us. Therefore, we strongly advise you to review the Privacy Policy of these websites. We have no control over and assume no responsibility for the content, privacy policies, or practices of any third-party sites or services.

# Children's Privacy

These Services do not address anyone under the age of 13. We do not knowingly collect personally identifiable information from children under 13. In the case we discover that a child under 13 has provided us with personal information, we immediately delete this from our servers. If you are a parent or guardian and you are aware that your child has provided us with personal information, please contact us so that we will be able to do necessary actions.

# Changes to This Privacy Policy

We may update our Privacy Policy from time to time. Thus, you are advised to review this page periodically for any changes. We will notify you of any changes by posting the new Privacy Policy on this page. These changes are effective immediately after they are posted on this page.

# Contact Us

If you have any questions or suggestions about our Privacy Policy, do not hesitate to contact us at hey@visnalize.com.

Last Updated: 6/1/2024, 6:49:33 AM
- + diff --git a/win7simu/simulated/bios.html b/win7simu/simulated/bios.html index e0525c01..0b16e69b 100644 --- a/win7simu/simulated/bios.html +++ b/win7simu/simulated/bios.html @@ -37,8 +37,8 @@ - - + +
Visnalize
- + diff --git a/win7simu/simulated/calculator.html b/win7simu/simulated/calculator.html index d8193274..c5446221 100644 --- a/win7simu/simulated/calculator.html +++ b/win7simu/simulated/calculator.html @@ -37,8 +37,8 @@ - - + +
Visnalize
- + diff --git a/win7simu/simulated/chrome.html b/win7simu/simulated/chrome.html index 18a3073f..6e05d1c1 100644 --- a/win7simu/simulated/chrome.html +++ b/win7simu/simulated/chrome.html @@ -37,8 +37,8 @@ - - + +
Visnalize
- + diff --git a/win7simu/simulated/cmd.html b/win7simu/simulated/cmd.html index e6b109ad..ec15d2ff 100644 --- a/win7simu/simulated/cmd.html +++ b/win7simu/simulated/cmd.html @@ -37,8 +37,8 @@ - - + +
Visnalize
- + diff --git a/win7simu/simulated/cpanel.html b/win7simu/simulated/cpanel.html index 723ba243..1cfda3cf 100644 --- a/win7simu/simulated/cpanel.html +++ b/win7simu/simulated/cpanel.html @@ -37,8 +37,8 @@ - - + +
Visnalize
- + diff --git a/win7simu/simulated/fileexplorer.html b/win7simu/simulated/fileexplorer.html index 42ed04cd..16bc6c4d 100644 --- a/win7simu/simulated/fileexplorer.html +++ b/win7simu/simulated/fileexplorer.html @@ -37,8 +37,8 @@ - - + +
Visnalize
- + diff --git a/win7simu/simulated/gadgets.html b/win7simu/simulated/gadgets.html index 4dc4f40d..ae36095b 100644 --- a/win7simu/simulated/gadgets.html +++ b/win7simu/simulated/gadgets.html @@ -37,8 +37,8 @@ - - + +
Visnalize
- + diff --git a/win7simu/simulated/ie.html b/win7simu/simulated/ie.html index 25d3a08d..4a52deb1 100644 --- a/win7simu/simulated/ie.html +++ b/win7simu/simulated/ie.html @@ -37,8 +37,8 @@ - - + +
+ diff --git a/win7simu/simulated/magnifier.html b/win7simu/simulated/magnifier.html index 9f1ae986..497a0705 100644 --- a/win7simu/simulated/magnifier.html +++ b/win7simu/simulated/magnifier.html @@ -37,8 +37,8 @@ - - + +
+ diff --git a/win7simu/simulated/media-player.html b/win7simu/simulated/media-player.html index 6307a69c..57feb427 100644 --- a/win7simu/simulated/media-player.html +++ b/win7simu/simulated/media-player.html @@ -37,8 +37,8 @@ - - + +
Visnalize
- + diff --git a/win7simu/simulated/minesweeper.html b/win7simu/simulated/minesweeper.html index 778ac3e2..5d9df5b6 100644 --- a/win7simu/simulated/minesweeper.html +++ b/win7simu/simulated/minesweeper.html @@ -37,8 +37,8 @@ - - + +
Visnalize
- + diff --git a/win7simu/simulated/notepad.html b/win7simu/simulated/notepad.html index 129d4424..3b2f543c 100644 --- a/win7simu/simulated/notepad.html +++ b/win7simu/simulated/notepad.html @@ -37,8 +37,8 @@ - - + +
Visnalize
- + diff --git a/win7simu/simulated/paint.html b/win7simu/simulated/paint.html index 3a84b7e9..fa3ff060 100644 --- a/win7simu/simulated/paint.html +++ b/win7simu/simulated/paint.html @@ -37,8 +37,8 @@ - - + +
Visnalize
- + diff --git a/win7simu/simulated/personalize.html b/win7simu/simulated/personalize.html index e7166f49..1db6a46e 100644 --- a/win7simu/simulated/personalize.html +++ b/win7simu/simulated/personalize.html @@ -37,8 +37,8 @@ - - + +
Visnalize
- + diff --git a/win7simu/simulated/programs.html b/win7simu/simulated/programs.html index a7d72e2f..61a7f89a 100644 --- a/win7simu/simulated/programs.html +++ b/win7simu/simulated/programs.html @@ -37,8 +37,8 @@ - - + +
Visnalize
- + diff --git a/win7simu/simulated/purbleplace.html b/win7simu/simulated/purbleplace.html index e7168fea..386722da 100644 --- a/win7simu/simulated/purbleplace.html +++ b/win7simu/simulated/purbleplace.html @@ -37,8 +37,8 @@ - - + +
Visnalize
- + diff --git a/win7simu/simulated/recorder.html b/win7simu/simulated/recorder.html index cb468ff3..5ddf94dd 100644 --- a/win7simu/simulated/recorder.html +++ b/win7simu/simulated/recorder.html @@ -37,8 +37,8 @@ - - + +
Visnalize
- + diff --git a/win7simu/simulated/run.html b/win7simu/simulated/run.html index 94a77f92..2c1a476e 100644 --- a/win7simu/simulated/run.html +++ b/win7simu/simulated/run.html @@ -37,8 +37,8 @@ - - + +
Visnalize
- + diff --git a/win7simu/simulated/snipping.html b/win7simu/simulated/snipping.html index a1b85988..ca553fd7 100644 --- a/win7simu/simulated/snipping.html +++ b/win7simu/simulated/snipping.html @@ -37,8 +37,8 @@ - - + +
Visnalize
- + diff --git a/win7simu/simulated/solitaire.html b/win7simu/simulated/solitaire.html index 48c9570f..cba29157 100644 --- a/win7simu/simulated/solitaire.html +++ b/win7simu/simulated/solitaire.html @@ -37,8 +37,8 @@ - - + +
Visnalize
- + diff --git a/win7simu/simulated/sticky.html b/win7simu/simulated/sticky.html index fe4420bb..f9b22226 100644 --- a/win7simu/simulated/sticky.html +++ b/win7simu/simulated/sticky.html @@ -37,8 +37,8 @@ - - + +
Visnalize
- + diff --git a/win7simu/simulated/taskmgr.html b/win7simu/simulated/taskmgr.html index 26cfd7b9..4853b599 100644 --- a/win7simu/simulated/taskmgr.html +++ b/win7simu/simulated/taskmgr.html @@ -37,8 +37,8 @@ - - + +
Visnalize
- + diff --git a/win7simu/simulated/wmc.html b/win7simu/simulated/wmc.html index 3e149a6c..85d6385a 100644 --- a/win7simu/simulated/wmc.html +++ b/win7simu/simulated/wmc.html @@ -37,8 +37,8 @@ - - + +
Visnalize
- + diff --git a/win7simu/simulated/wordpad.html b/win7simu/simulated/wordpad.html index aaa0b7b0..685a5c7e 100644 --- a/win7simu/simulated/wordpad.html +++ b/win7simu/simulated/wordpad.html @@ -37,8 +37,8 @@ - - + +
Visnalize
- + diff --git a/win7simu/themestudio/changelog.html b/win7simu/themestudio/changelog.html index 29bbcbe9..f103e592 100644 --- a/win7simu/themestudio/changelog.html +++ b/win7simu/themestudio/changelog.html @@ -33,8 +33,8 @@ - - + +
Visnalize

# Theme Studio Changelog

# All versions

# 1.3.0 (Oct 31, 2024)

  • Enhance Theme Explorer's performance and usability

# 1.2.0 (Jul 10, 2023)

  • Add link to video tutorials
  • Improve theme viewing by creators
  • Creators can now edit/overwrite their published themes

# 1.1.0 (Mar 13, 2023)

  • Search public themes by author
  • View theme's properties

# 1.0.0 (Feb 19, 2023)

  • Load and edit theme source code
  • Save themes locally or publish to cloud storage
  • Explore public themes - search by name, sort by date/use
  • Apply themes
Last Updated: 10/31/2024, 1:44:26 PM
- + diff --git a/win7simu/themestudio/in-depth-guide.html b/win7simu/themestudio/in-depth-guide.html index a77bd334..0ff11493 100644 --- a/win7simu/themestudio/in-depth-guide.html +++ b/win7simu/themestudio/in-depth-guide.html @@ -37,8 +37,8 @@ - - + +
Visnalize
- + diff --git a/win7simu/themestudio/index.html b/win7simu/themestudio/index.html index 819c4761..24e1d332 100644 --- a/win7simu/themestudio/index.html +++ b/win7simu/themestudio/index.html @@ -37,8 +37,8 @@ - - + +
Visnalize
- + diff --git a/win7simu/themestudio/quick-guide.html b/win7simu/themestudio/quick-guide.html index ff34e873..22f84708 100644 --- a/win7simu/themestudio/quick-guide.html +++ b/win7simu/themestudio/quick-guide.html @@ -37,8 +37,8 @@ - - + +
Visnalize
- +