From 6b63540d39c47bf98c4b7b6d8252fba31055d7ac Mon Sep 17 00:00:00 2001 From: Khang Date: Sun, 24 Mar 2024 03:34:22 +0000 Subject: [PATCH] Updates --- 404.html | 8 +- about.html | 8 +- assets/js/{1.1b87efce.js => 1.db427668.js} | 2 +- assets/js/{10.1e4f52c9.js => 10.e1d09130.js} | 2 +- assets/js/{11.3267f5ba.js => 11.984400d8.js} | 2 +- assets/js/{12.e97021ff.js => 12.f789ecec.js} | 2 +- assets/js/{13.100232ae.js => 13.fa116280.js} | 2 +- assets/js/{14.5b0bdbea.js => 14.0f1e7f55.js} | 2 +- assets/js/{15.cb57cc7e.js => 15.9d6073db.js} | 2 +- assets/js/{16.a84d4024.js => 16.02c91c53.js} | 2 +- assets/js/{17.bf358cab.js => 17.02d61573.js} | 2 +- assets/js/{18.2fd4c19a.js => 18.89846cbb.js} | 2 +- assets/js/{19.4d563810.js => 19.f8195d4e.js} | 2 +- assets/js/{20.a6a4da15.js => 20.fd61a8b9.js} | 2 +- assets/js/{21.990ec1da.js => 21.c81bbf7f.js} | 2 +- assets/js/{22.89abef91.js => 22.da52cca7.js} | 2 +- assets/js/{23.c5fb20c7.js => 23.64158f90.js} | 2 +- assets/js/{24.49527bd5.js => 24.44596632.js} | 2 +- assets/js/{25.a969c908.js => 25.ab19059d.js} | 2 +- assets/js/{26.919270b6.js => 26.800f234b.js} | 2 +- assets/js/{27.f5c69753.js => 27.9b8afeca.js} | 2 +- assets/js/{28.73c6d0b5.js => 28.f1940eeb.js} | 2 +- assets/js/{29.fcccc641.js => 29.53f850b6.js} | 2 +- assets/js/{3.043f2ab7.js => 3.9aaf4d99.js} | 2 +- assets/js/{30.7d692a37.js => 30.b1176015.js} | 2 +- assets/js/{31.ffd1f41a.js => 31.ff10ab21.js} | 2 +- assets/js/{32.5992aa8e.js => 32.162091b0.js} | 2 +- assets/js/{33.b1bbf1a3.js => 33.d25369e4.js} | 2 +- assets/js/{34.ac335fe6.js => 34.d927dbf4.js} | 2 +- assets/js/{35.2420d9c6.js => 35.1810d325.js} | 2 +- assets/js/{36.529e9f75.js => 36.5401ee64.js} | 2 +- assets/js/{37.b8546ac6.js => 37.fac87816.js} | 2 +- assets/js/{38.c5547cb2.js => 38.eaca4635.js} | 2 +- assets/js/{39.072d729e.js => 39.dfbbd6cf.js} | 2 +- assets/js/{40.a7116048.js => 40.244c8b53.js} | 2 +- assets/js/{41.e3704ea3.js => 41.6ac88f94.js} | 2 +- assets/js/{42.1c70a71c.js => 42.a42d0cc3.js} | 2 +- assets/js/{43.bd31020b.js => 43.3d328da7.js} | 2 +- assets/js/{44.9c66132e.js => 44.4ae85495.js} | 2 +- assets/js/{45.94cfe345.js => 45.2ae39d61.js} | 2 +- assets/js/{46.9caec567.js => 46.446ebc06.js} | 2 +- assets/js/{47.6e893ca2.js => 47.c4792bb2.js} | 2 +- assets/js/{48.d36dd319.js => 48.7f0101ea.js} | 2 +- assets/js/{49.c6658b0c.js => 49.508cb150.js} | 2 +- assets/js/{5.e382e002.js => 5.38e10f2e.js} | 2 +- assets/js/{51.c0924c4f.js => 51.83754830.js} | 2 +- assets/js/{52.c6e1ed27.js => 52.ee14066d.js} | 2 +- assets/js/{53.63eaffef.js => 53.4d1a0347.js} | 2 +- assets/js/{54.0de9779f.js => 54.3137a2df.js} | 2 +- assets/js/{55.809f433e.js => 55.77c7e5ef.js} | 2 +- assets/js/{56.1213c22c.js => 56.16320812.js} | 2 +- assets/js/{57.23ce4c5f.js => 57.3a3e093c.js} | 2 +- assets/js/{58.b91beeb1.js => 58.865910d1.js} | 2 +- assets/js/{59.9bd86a1e.js => 59.ffcd6f23.js} | 2 +- assets/js/{6.109e1dd3.js => 6.3361311e.js} | 2 +- assets/js/{60.5d40199f.js => 60.e465b120.js} | 2 +- assets/js/{61.80801009.js => 61.ed54b48a.js} | 2 +- assets/js/{62.0434ae3c.js => 62.3884150f.js} | 2 +- assets/js/{63.2dfb341f.js => 63.f257c693.js} | 2 +- assets/js/{64.fedbac58.js => 64.f450c284.js} | 2 +- assets/js/{65.e8a5597a.js => 65.3f3d9224.js} | 2 +- assets/js/{66.58062959.js => 66.78b35c1d.js} | 2 +- assets/js/{67.885a6c64.js => 67.95249660.js} | 2 +- assets/js/{68.c41b9662.js => 68.cfcb6c84.js} | 2 +- assets/js/{69.18c839df.js => 69.2241e73a.js} | 2 +- assets/js/{7.c741a374.js => 7.64ce4d2b.js} | 2 +- assets/js/{70.4e82d937.js => 70.82fa6c33.js} | 2 +- assets/js/{71.fa55d55c.js => 71.11c97e14.js} | 2 +- assets/js/{72.3a67fde0.js => 72.a43c9ea7.js} | 2 +- assets/js/{73.60e2506d.js => 73.1d26696c.js} | 2 +- assets/js/{74.974d98a6.js => 74.ef726418.js} | 2 +- assets/js/{75.dda45cb7.js => 75.b41c854a.js} | 2 +- assets/js/{76.e6800871.js => 76.a4739ce1.js} | 2 +- assets/js/{77.88d911a8.js => 77.f7492dd2.js} | 2 +- assets/js/{8.b1a004c6.js => 8.fdcf9c42.js} | 2 +- assets/js/{9.7b48fdaa.js => 9.bc7476d2.js} | 2 +- .../js/{app.e383d10f.js => app.28c6afd4.js} | 10 +- blog/about-the-ads.html | 8 +- blog/building-visnalize-com.html | 8 +- blog/building-win7-simu.html | 8 +- blog/from-codepen-to-app.html | 8 +- blog/from-side-project-to-side-hustle.html | 8 +- blog/game-stick-lite-4k-adding-games.html | 8 +- blog/index.html | 12 +-- blog/load-any-websites-in-iframes.html | 8 +- blog/simulator-vs-emulator.html | 8 +- blog/tag/brick-1100/index.html | 12 +-- blog/tag/index.html | 12 +-- blog/tag/random/index.html | 12 +-- blog/tag/review/index.html | 12 +-- blog/tag/sharing/index.html | 12 +-- blog/tag/technical/index.html | 12 +-- blog/tag/tips/index.html | 12 +-- blog/tag/tools/index.html | 12 +-- blog/tag/win7-simu/index.html | 12 +-- blog/visnalize-year-in-review-2023.html | 8 +- blog/win7-icons-viewer-downloader.html | 8 +- blog/win7-simu-file-explorer.html | 8 +- blog/win7-simu-mobile-devices.html | 8 +- blog/win7-simu-year-in-review-2022.html | 8 +- blog/win7-ui-introduction.html | 8 +- blog/windows-resources.html | 8 +- brick1100/about.html | 8 +- brick1100/changelog.html | 8 +- brick1100/deep-links.html | 8 +- brick1100/games.html | 8 +- brick1100/index.html | 8 +- brick1100/privacy.html | 8 +- contact.html | 8 +- feed.atom | 90 ++++++++--------- feed.json | 90 ++++++++--------- index.html | 8 +- rss.xml | 96 +++++++++---------- sitemap.xml | 2 +- win7simu/about.html | 8 +- win7simu/changelog.html | 8 +- win7simu/faq.html | 8 +- win7simu/index.html | 8 +- win7simu/privacy.html | 8 +- win7simu/themestudio/changelog.html | 8 +- win7simu/themestudio/in-depth-guide.html | 8 +- win7simu/themestudio/index.html | 8 +- win7simu/themestudio/quick-guide.html | 8 +- 123 files changed, 414 insertions(+), 414 deletions(-) rename assets/js/{1.1b87efce.js => 1.db427668.js} (98%) rename assets/js/{10.1e4f52c9.js => 10.e1d09130.js} (88%) rename assets/js/{11.3267f5ba.js => 11.984400d8.js} (88%) rename assets/js/{12.e97021ff.js => 12.f789ecec.js} (89%) rename assets/js/{13.100232ae.js => 13.fa116280.js} (98%) rename assets/js/{14.5b0bdbea.js => 14.0f1e7f55.js} (92%) rename assets/js/{15.cb57cc7e.js => 15.9d6073db.js} (94%) rename assets/js/{16.a84d4024.js => 16.02c91c53.js} (96%) rename assets/js/{17.bf358cab.js => 17.02d61573.js} (99%) rename assets/js/{18.2fd4c19a.js => 18.89846cbb.js} (88%) rename assets/js/{19.4d563810.js => 19.f8195d4e.js} (92%) rename assets/js/{20.a6a4da15.js => 20.fd61a8b9.js} (99%) rename assets/js/{21.990ec1da.js => 21.c81bbf7f.js} (88%) rename assets/js/{22.89abef91.js => 22.da52cca7.js} (88%) rename assets/js/{23.c5fb20c7.js => 23.64158f90.js} (87%) rename assets/js/{24.49527bd5.js => 24.44596632.js} (92%) rename assets/js/{25.a969c908.js => 25.ab19059d.js} (98%) rename assets/js/{26.919270b6.js => 26.800f234b.js} (88%) rename assets/js/{27.f5c69753.js => 27.9b8afeca.js} (86%) rename assets/js/{28.73c6d0b5.js => 28.f1940eeb.js} (88%) rename assets/js/{29.fcccc641.js => 29.53f850b6.js} (96%) rename assets/js/{3.043f2ab7.js => 3.9aaf4d99.js} (91%) rename assets/js/{30.7d692a37.js => 30.b1176015.js} (90%) rename assets/js/{31.ffd1f41a.js => 31.ff10ab21.js} (86%) rename assets/js/{32.5992aa8e.js => 32.162091b0.js} (88%) rename assets/js/{33.b1bbf1a3.js => 33.d25369e4.js} (87%) rename assets/js/{34.ac335fe6.js => 34.d927dbf4.js} (87%) rename assets/js/{35.2420d9c6.js => 35.1810d325.js} (91%) rename assets/js/{36.529e9f75.js => 36.5401ee64.js} (91%) rename assets/js/{37.b8546ac6.js => 37.fac87816.js} (93%) rename assets/js/{38.c5547cb2.js => 38.eaca4635.js} (89%) rename assets/js/{39.072d729e.js => 39.dfbbd6cf.js} (87%) rename assets/js/{40.a7116048.js => 40.244c8b53.js} (98%) rename assets/js/{41.e3704ea3.js => 41.6ac88f94.js} (83%) rename assets/js/{42.1c70a71c.js => 42.a42d0cc3.js} (93%) rename assets/js/{43.bd31020b.js => 43.3d328da7.js} (86%) rename assets/js/{44.9c66132e.js => 44.4ae85495.js} (90%) rename assets/js/{45.94cfe345.js => 45.2ae39d61.js} (99%) rename assets/js/{46.9caec567.js => 46.446ebc06.js} (99%) rename assets/js/{47.6e893ca2.js => 47.c4792bb2.js} (91%) rename assets/js/{48.d36dd319.js => 48.7f0101ea.js} (99%) rename assets/js/{49.c6658b0c.js => 49.508cb150.js} (97%) rename assets/js/{5.e382e002.js => 5.38e10f2e.js} (91%) rename assets/js/{51.c0924c4f.js => 51.83754830.js} (90%) rename assets/js/{52.c6e1ed27.js => 52.ee14066d.js} (95%) rename assets/js/{53.63eaffef.js => 53.4d1a0347.js} (95%) rename assets/js/{54.0de9779f.js => 54.3137a2df.js} (83%) rename assets/js/{55.809f433e.js => 55.77c7e5ef.js} (82%) rename assets/js/{56.1213c22c.js => 56.16320812.js} (79%) rename assets/js/{57.23ce4c5f.js => 57.3a3e093c.js} (98%) rename assets/js/{58.b91beeb1.js => 58.865910d1.js} (99%) rename assets/js/{59.9bd86a1e.js => 59.ffcd6f23.js} (99%) rename assets/js/{6.109e1dd3.js => 6.3361311e.js} (88%) rename assets/js/{60.5d40199f.js => 60.e465b120.js} (54%) rename assets/js/{61.80801009.js => 61.ed54b48a.js} (97%) rename assets/js/{62.0434ae3c.js => 62.3884150f.js} (98%) rename assets/js/{63.2dfb341f.js => 63.f257c693.js} (98%) rename assets/js/{64.fedbac58.js => 64.f450c284.js} (98%) rename assets/js/{65.e8a5597a.js => 65.3f3d9224.js} (96%) rename assets/js/{66.58062959.js => 66.78b35c1d.js} (96%) rename assets/js/{67.885a6c64.js => 67.95249660.js} (97%) rename assets/js/{68.c41b9662.js => 68.cfcb6c84.js} (62%) rename assets/js/{69.18c839df.js => 69.2241e73a.js} (98%) rename assets/js/{7.c741a374.js => 7.64ce4d2b.js} (90%) rename assets/js/{70.4e82d937.js => 70.82fa6c33.js} (60%) rename assets/js/{71.fa55d55c.js => 71.11c97e14.js} (93%) rename assets/js/{72.3a67fde0.js => 72.a43c9ea7.js} (99%) rename assets/js/{73.60e2506d.js => 73.1d26696c.js} (99%) rename assets/js/{74.974d98a6.js => 74.ef726418.js} (98%) rename assets/js/{75.dda45cb7.js => 75.b41c854a.js} (61%) rename assets/js/{76.e6800871.js => 76.a4739ce1.js} (98%) rename assets/js/{77.88d911a8.js => 77.f7492dd2.js} (92%) rename assets/js/{8.b1a004c6.js => 8.fdcf9c42.js} (86%) rename assets/js/{9.7b48fdaa.js => 9.bc7476d2.js} (98%) rename assets/js/{app.e383d10f.js => app.28c6afd4.js} (70%) diff --git a/404.html b/404.html index ef0a0063..fff615ab 100644 --- a/404.html +++ b/404.html @@ -16,17 +16,17 @@ - + - +

404

Looks like we've got some broken links.
Take me home. -
- +
+ diff --git a/about.html b/about.html index 4eb0a41b..42fe8411 100644 --- a/about.html +++ b/about.html @@ -16,7 +16,7 @@ - + @@ -31,7 +31,7 @@ - + @@ -107,7 +107,7 @@ Github (opens new window)
  • Twitter - (opens new window)

    • # 🙋‍♂️ 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: 10/31/2023, 7:27:50 AM
    - + (opens new window)

    # 🙋‍♂️ 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: 10/31/2023, 7:27:50 AM
    + diff --git a/assets/js/1.1b87efce.js b/assets/js/1.db427668.js similarity index 98% rename from assets/js/1.1b87efce.js rename to assets/js/1.db427668.js index f0e19636..3b9a03ac 100644 --- a/assets/js/1.1b87efce.js +++ b/assets/js/1.db427668.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[1],{294:function(t,e,n){"use strict";n.d(e,"d",(function(){return s})),n.d(e,"a",(function(){return a})),n.d(e,"i",(function(){return r})),n.d(e,"f",(function(){return l})),n.d(e,"g",(function(){return u})),n.d(e,"h",(function(){return c})),n.d(e,"b",(function(){return h})),n.d(e,"e",(function(){return p})),n.d(e,"k",(function(){return d})),n.d(e,"l",(function(){return f})),n.d(e,"c",(function(){return m})),n.d(e,"j",(function(){return b}));n(48);const s=/#.*$/,i=/\.(md|html)$/,a=/\/$/,r=/^[a-z]+:/i;function o(t){return decodeURI(t).replace(s,"").replace(i,"")}function l(t){return r.test(t)}function u(t){return/^mailto:/.test(t)}function c(t){return/^tel:/.test(t)}function h(t){if(l(t))return t;const e=t.match(s),n=e?e[0]:"",i=o(t);return a.test(i)?t:i+".html"+n}function p(t,e){const n=decodeURIComponent(t.hash),i=function(t){const e=t.match(s);if(e)return e[0]}(e);if(i&&n!==i)return!1;return o(t.path)===o(e)}function d(t,e,n){if(l(e))return{type:"external",path:e};n&&(e=function(t,e,n){const s=t.charAt(0);if("/"===s)return t;if("?"===s||"#"===s)return e+t;const i=e.split("/");n&&i[i.length-1]||i.pop();const a=t.replace(/^\//,"").split("/");for(let t=0;tfunction t(e,n,s,i=1){if("string"==typeof e)return d(n,e,s);if(Array.isArray(e))return Object.assign(d(n,e[0],s),{title:e[1]});{const a=e.children||[];return 0===a.length&&e.path?Object.assign(d(n,e.path,s),{title:e.title}):{type:"group",path:e.path,title:e.title,sidebarDepth:e.sidebarDepth,initialOpenGroupIndex:e.initialOpenGroupIndex,children:a.map(e=>t(e,n,s,i+1)),collapsable:!1!==e.collapsable}}}(t,i,n)):[]}return[]}function g(t){const e=m(t.headers||[]);return[{type:"group",collapsable:!1,title:t.title,path:null,children:e.map(e=>({type:"auto",title:e.title,basePath:t.path,path:t.path+"#"+e.slug,children:e.children||[]}))}]}function m(t){let e;return(t=t.map(t=>Object.assign({},t))).forEach(t=>{2===t.level?e=t:e&&(e.children||(e.children=[])).push(t)}),t.filter(t=>2===t.level)}function b(t){return Object.assign(t,{type:t.items&&t.items.length?"links":"link"})}},306:function(t,e,n){"use strict";n.r(e);var s=n(294),i={name:"NavLink",props:{item:{required:!0}},computed:{link(){return Object(s.b)(this.item.link)},exact(){return this.$site.locales?Object.keys(this.$site.locales).some(t=>t===this.link):"/"===this.link},isNonHttpURI(){return Object(s.g)(this.link)||Object(s.h)(this.link)},isBlankTarget(){return"_blank"===this.target},isInternal(){return!Object(s.f)(this.link)&&!this.isBlankTarget},target(){return this.isNonHttpURI?null:this.item.target?this.item.target:Object(s.f)(this.link)?"_blank":""},rel(){return this.isNonHttpURI||!1===this.item.rel?null:this.item.rel?this.item.rel:this.isBlankTarget?"noopener noreferrer":null}},methods:{focusoutAction(){this.$emit("focusout")}}},a=n(17),r=Object(a.a)(i,(function(){var t=this,e=t._self._c;return t.isInternal?e("RouterLink",{staticClass:"nav-link",attrs:{to:t.link,exact:t.exact},nativeOn:{focusout:function(e){return t.focusoutAction.apply(null,arguments)}}},[t._v("\n "+t._s(t.item.text)+"\n")]):e("a",{staticClass:"nav-link external",attrs:{href:t.link,target:t.target,rel:t.rel},on:{focusout:t.focusoutAction}},[t._v("\n "+t._s(t.item.text)+"\n "),t.isBlankTarget?e("OutboundLink"):t._e()],1)}),[],!1,null,null,null).exports,o={name:"Home",components:{NavLink:r},computed:{data(){return this.$page.frontmatter},actionLink(){return{link:this.data.actionLink,text:this.data.actionText}}}},l=(n(363),Object(a.a)(o,(function(){var t=this,e=t._self._c;return e("main",{staticClass:"home",attrs:{"aria-labelledby":null!==t.data.heroText?"main-title":null}},[e("header",{staticClass:"hero"},[t.data.heroImage?e("img",{attrs:{src:t.$withBase(t.data.heroImage),alt:t.data.heroAlt||"hero"}}):t._e(),t._v(" "),null!==t.data.heroText?e("h1",{attrs:{id:"main-title"}},[t._v("\n "+t._s(t.data.heroText||t.$title||"Hello")+"\n ")]):t._e(),t._v(" "),null!==t.data.tagline?e("p",{staticClass:"description"},[t._v("\n "+t._s(t.data.tagline||t.$description||"Welcome to your VuePress site")+"\n ")]):t._e(),t._v(" "),t.data.actionText&&t.data.actionLink?e("p",{staticClass:"action"},[e("NavLink",{staticClass:"action-button",attrs:{item:t.actionLink}})],1):t._e()]),t._v(" "),t.data.features&&t.data.features.length?e("div",{staticClass:"features"},t._l(t.data.features,(function(n,s){return e("div",{key:s,staticClass:"feature"},[e("h2",[t._v(t._s(n.title))]),t._v(" "),e("p",[t._v(t._s(n.details))])])})),0):t._e(),t._v(" "),e("Content",{staticClass:"theme-default-content custom"}),t._v(" "),t.data.footer?e("div",{staticClass:"footer"},[t._v("\n "+t._s(t.data.footer)+"\n ")]):e("Content",{staticClass:"footer",attrs:{"slot-key":"footer"}})],1)}),[],!1,null,null,null).exports),u=(n(48),n(107)),c=n.n(u),h=(t,e,n=null)=>{let s=c()(e,"title","");return c()(e,"frontmatter.tags")&&(s+=" "+e.frontmatter.tags.join(" ")),n&&(s+=" "+n),p(t,s)};const p=(t,e)=>{const n=t=>t.replace(/[-/\\^$*+?.()|[\]{}]/g,"\\$&"),s=new RegExp("[^\0-]"),i=t.split(/\s+/g).map(t=>t.trim()).filter(t=>!!t);if(s.test(t))return i.some(t=>e.toLowerCase().indexOf(t)>-1);{const s=t.endsWith(" ");return new RegExp(i.map((t,e)=>i.length!==e+1||s?`(?=.*\\b${n(t)}\\b)`:`(?=.*\\b${n(t)})`).join("")+".+","gi").test(e)}};var d={name:"SearchBox",data:()=>({query:"",focused:!1,focusIndex:0,placeholder:void 0}),computed:{showSuggestions(){return this.focused&&this.suggestions&&this.suggestions.length},suggestions(){const t=this.query.trim().toLowerCase();if(!t)return;const{pages:e}=this.$site,n=this.$site.themeConfig.searchMaxSuggestions||5,s=this.$localePath,i=[];for(let a=0;a=n);a++){const r=e[a];if(this.getPageLocalePath(r)===s&&this.isSearchable(r))if(h(t,r))i.push(r);else if(r.headers)for(let e=0;e=n);e++){const n=r.headers[e];n.title&&h(t,r,n.title)&&i.push(Object.assign({},r,{path:r.path+"#"+n.slug,header:n}))}}return i},alignRight(){return(this.$site.themeConfig.nav||[]).length+(this.$site.repo?1:0)<=2}},mounted(){this.placeholder=this.$site.themeConfig.searchPlaceholder||"",document.addEventListener("keydown",this.onHotkey)},beforeDestroy(){document.removeEventListener("keydown",this.onHotkey)},methods:{getPageLocalePath(t){for(const e in this.$site.locales||{})if("/"!==e&&0===t.path.indexOf(e))return e;return"/"},isSearchable(t){let e=null;return null===e||(e=Array.isArray(e)?e:new Array(e),e.filter(e=>t.path.match(e)).length>0)},onHotkey(t){t.srcElement===document.body&&["s","/"].includes(t.key)&&(this.$refs.input.focus(),t.preventDefault())},onUp(){this.showSuggestions&&(this.focusIndex>0?this.focusIndex--:this.focusIndex=this.suggestions.length-1)},onDown(){this.showSuggestions&&(this.focusIndex "+t._s(n.header.title))]):t._e()])])})),0):t._e()])}),[],!1,null,null,null).exports),g=(n(365),Object(a.a)({},(function(){var t=this,e=t._self._c;return e("div",{staticClass:"sidebar-button",on:{click:function(e){return t.$emit("toggle-sidebar")}}},[e("svg",{staticClass:"icon",attrs:{xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",role:"img",viewBox:"0 0 448 512"}},[e("path",{attrs:{fill:"currentColor",d:"M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"}})])])}),[],!1,null,null,null).exports),m=n(359),b=n(108),v=n.n(b),k={name:"DropdownLink",components:{NavLink:r,DropdownTransition:m.a},props:{item:{required:!0}},data:()=>({open:!1}),computed:{dropdownAriaLabel(){return this.item.ariaLabel||this.item.text}},watch:{$route(){this.open=!1}},methods:{setOpen(t){this.open=t},isLastItemOfArray:(t,e)=>v()(e)===t,handleDropdown(){0===event.detail&&this.setOpen(!this.open)}}},_=(n(367),{name:"NavLinks",components:{NavLink:r,DropdownLink:Object(a.a)(k,(function(){var t=this,e=t._self._c;return e("div",{staticClass:"dropdown-wrapper",class:{open:t.open}},[e("button",{staticClass:"dropdown-title",attrs:{type:"button","aria-label":t.dropdownAriaLabel},on:{click:t.handleDropdown}},[e("span",{staticClass:"title"},[t._v(t._s(t.item.text))]),t._v(" "),e("span",{staticClass:"arrow down"})]),t._v(" "),e("button",{staticClass:"mobile-dropdown-title",attrs:{type:"button","aria-label":t.dropdownAriaLabel},on:{click:function(e){return t.setOpen(!t.open)}}},[e("span",{staticClass:"title"},[t._v(t._s(t.item.text))]),t._v(" "),e("span",{staticClass:"arrow",class:t.open?"down":"right"})]),t._v(" "),e("DropdownTransition",[e("ul",{directives:[{name:"show",rawName:"v-show",value:t.open,expression:"open"}],staticClass:"nav-dropdown"},t._l(t.item.items,(function(n,s){return e("li",{key:n.link||s,staticClass:"dropdown-item"},["links"===n.type?e("h4",[t._v("\n "+t._s(n.text)+"\n ")]):t._e(),t._v(" "),"links"===n.type?e("ul",{staticClass:"dropdown-subitem-wrapper"},t._l(n.items,(function(s){return e("li",{key:s.link,staticClass:"dropdown-subitem"},[e("NavLink",{attrs:{item:s},on:{focusout:function(e){t.isLastItemOfArray(s,n.items)&&t.isLastItemOfArray(n,t.item.items)&&t.setOpen(!1)}}})],1)})),0):e("NavLink",{attrs:{item:n},on:{focusout:function(e){t.isLastItemOfArray(n,t.item.items)&&t.setOpen(!1)}}})],1)})),0)])],1)}),[],!1,null,null,null).exports},computed:{userNav(){return this.$themeLocaleConfig.nav||this.$site.themeConfig.nav||[]},nav(){const{locales:t}=this.$site;if(t&&Object.keys(t).length>1){const e=this.$page.path,n=this.$router.options.routes,s=this.$site.themeConfig.locales||{},i={text:this.$themeLocaleConfig.selectText||"Languages",ariaLabel:this.$themeLocaleConfig.ariaLabel||"Select language",items:Object.keys(t).map(i=>{const a=t[i],r=s[i]&&s[i].label||a.lang;let o;return a.lang===this.$lang?o=e:(o=e.replace(this.$localeConfig.path,i),n.some(t=>t.path===o)||(o=i)),{text:r,link:o}})};return[...this.userNav,i]}return this.userNav},userLinks(){return(this.nav||[]).map(t=>Object.assign(Object(s.j)(t),{items:(t.items||[]).map(s.j)}))},repoLink(){const{repo:t}=this.$site.themeConfig;return t?/^https?:/.test(t)?t:"https://github.com/"+t:null},repoLabel(){if(!this.repoLink)return;if(this.$site.themeConfig.repoLabel)return this.$site.themeConfig.repoLabel;const t=this.repoLink.match(/^https?:\/\/[^/]+/)[0],e=["GitHub","GitLab","Bitbucket"];for(let n=0;n({linksWrapMaxWidth:null}),computed:{algolia(){return this.$themeLocaleConfig.algolia||this.$site.themeConfig.algolia||{}},isAlgoliaSearch(){return this.algolia&&this.algolia.apiKey&&this.algolia.indexName}},mounted(){const t=parseInt(C(this.$el,"paddingLeft"))+parseInt(C(this.$el,"paddingRight")),e=()=>{document.documentElement.clientWidth<719?this.linksWrapMaxWidth=null:this.linksWrapMaxWidth=this.$el.offsetWidth-t-(this.$refs.siteName&&this.$refs.siteName.offsetWidth||0)};e(),window.addEventListener("resize",e,!1)}},$=(n(369),Object(a.a)(L,(function(){var t=this,e=t._self._c;return e("header",{staticClass:"navbar"},[e("SidebarButton",{on:{"toggle-sidebar":function(e){return t.$emit("toggle-sidebar")}}}),t._v(" "),e("RouterLink",{staticClass:"home-link",attrs:{to:t.$localePath}},[t.$site.themeConfig.logo?e("img",{staticClass:"logo",attrs:{src:t.$withBase(t.$site.themeConfig.logo),alt:t.$siteTitle}}):t._e(),t._v(" "),t.$siteTitle?e("span",{ref:"siteName",staticClass:"site-name",class:{"can-hide":t.$site.themeConfig.logo}},[t._v(t._s(t.$siteTitle))]):t._e()]),t._v(" "),e("div",{staticClass:"links",style:t.linksWrapMaxWidth?{"max-width":t.linksWrapMaxWidth+"px"}:{}},[t.isAlgoliaSearch?e("AlgoliaSearchBox",{attrs:{options:t.algolia}}):!1!==t.$site.themeConfig.search&&!1!==t.$page.frontmatter.search?e("SearchBox"):t._e(),t._v(" "),e("NavLinks",{staticClass:"can-hide"})],1)],1)}),[],!1,null,null,null).exports),y=n(323),w=n.n(y),O={name:"PageEdit",computed:{lastUpdated(){return this.$page.lastUpdated},lastUpdatedText(){return"string"==typeof this.$themeLocaleConfig.lastUpdated?this.$themeLocaleConfig.lastUpdated:"string"==typeof this.$site.themeConfig.lastUpdated?this.$site.themeConfig.lastUpdated:"Last Updated"},editLink(){const t=w()(this.$page.frontmatter.editLink)?this.$site.themeConfig.editLinks:this.$page.frontmatter.editLink,{repo:e,docsDir:n="",docsBranch:s="master",docsRepo:i=e}=this.$site.themeConfig;return t&&i&&this.$page.relativePath?this.createEditLink(e,i,n,s,this.$page.relativePath):null},editLinkText(){return this.$themeLocaleConfig.editLinkText||this.$site.themeConfig.editLinkText||"Edit this page"}},methods:{createEditLink(t,e,n,i,a){if(/bitbucket.org/.test(e)){return e.replace(s.a,"")+"/src"+`/${i}/`+(n?n.replace(s.a,"")+"/":"")+a+`?mode=edit&spa=0&at=${i}&fileviewer=file-view-default`}if(/gitlab.com/.test(e)){return e.replace(s.a,"")+"/-/edit"+`/${i}/`+(n?n.replace(s.a,"")+"/":"")+a}return(s.i.test(e)?e:"https://github.com/"+e).replace(s.a,"")+"/edit"+`/${i}/`+(n?n.replace(s.a,"")+"/":"")+a}}},S=(n(370),Object(a.a)(O,(function(){var t=this,e=t._self._c;return e("footer",{staticClass:"page-edit"},[t.editLink?e("div",{staticClass:"edit-link"},[e("a",{attrs:{href:t.editLink,target:"_blank",rel:"noopener noreferrer"}},[t._v(t._s(t.editLinkText))]),t._v(" "),e("OutboundLink")],1):t._e(),t._v(" "),t.lastUpdated?e("div",{staticClass:"last-updated"},[e("span",{staticClass:"prefix"},[t._v(t._s(t.lastUpdatedText)+":")]),t._v(" "),e("span",{staticClass:"time"},[t._v(t._s(t.lastUpdated))])]):t._e()])}),[],!1,null,null,null).exports),I=n(371),j=n.n(I),N={name:"PageNav",props:["sidebarItems"],computed:{prev(){return P(T.PREV,this)},next(){return P(T.NEXT,this)}}};const T={NEXT:{resolveLink:function(t,e){return A(t,e,1)},getThemeLinkConfig:({nextLinks:t})=>t,getPageLinkConfig:({frontmatter:t})=>t.next},PREV:{resolveLink:function(t,e){return A(t,e,-1)},getThemeLinkConfig:({prevLinks:t})=>t,getPageLinkConfig:({frontmatter:t})=>t.prev}};function P(t,{$themeConfig:e,$page:n,$route:i,$site:a,sidebarItems:r}){const{resolveLink:o,getThemeLinkConfig:l,getPageLinkConfig:u}=t,c=l(e),h=u(n),p=w()(h)?c:h;return!1===p?void 0:j()(p)?Object(s.k)(a.pages,p,i.path):o(n,r)}function A(t,e,n){const s=[];!function t(e,n){for(let s=0,i=e.length;s({isSidebarOpen:!1}),computed:{shouldShowNavbar(){const{themeConfig:t}=this.$site,{frontmatter:e}=this.$page;return!1!==e.navbar&&!1!==t.navbar&&(this.$title||t.logo||t.repo||t.nav||this.$themeLocaleConfig.nav)},shouldShowSidebar(){const{frontmatter:t}=this.$page;return!t.home&&!1!==t.sidebar&&this.sidebarItems.length},sidebarItems(){return Object(s.l)(this.$page,this.$page.regularPath,this.$site,this.$localePath)},pageClasses(){const t=this.$page.frontmatter.pageClass;return[{"no-navbar":!this.shouldShowNavbar,"sidebar-open":this.isSidebarOpen,"no-sidebar":!this.shouldShowSidebar},t]}},mounted(){this.$router.afterEach(()=>{this.isSidebarOpen=!1})},methods:{toggleSidebar(t){this.isSidebarOpen="boolean"==typeof t?t:!this.isSidebarOpen,this.$emit("toggle-sidebar",this.isSidebarOpen)},onTouchStart(t){this.touchStart={x:t.changedTouches[0].clientX,y:t.changedTouches[0].clientY}},onTouchEnd(t){const e=t.changedTouches[0].clientX-this.touchStart.x,n=t.changedTouches[0].clientY-this.touchStart.y;Math.abs(e)>Math.abs(n)&&Math.abs(e)>40&&(e>0&&this.touchStart.x<=80?this.toggleSidebar(!0):this.toggleSidebar(!1))}}}),G=Object(a.a)(U,(function(){var t=this,e=t._self._c;return e("div",{staticClass:"theme-container",class:t.pageClasses,on:{touchstart:t.onTouchStart,touchend:t.onTouchEnd}},[t.shouldShowNavbar?e("Navbar",{on:{"toggle-sidebar":t.toggleSidebar}}):t._e(),t._v(" "),e("div",{staticClass:"sidebar-mask",on:{click:function(e){return t.toggleSidebar(!1)}}}),t._v(" "),e("Sidebar",{attrs:{items:t.sidebarItems},on:{"toggle-sidebar":t.toggleSidebar},scopedSlots:t._u([{key:"top",fn:function(){return[t._t("sidebar-top")]},proxy:!0},{key:"bottom",fn:function(){return[t._t("sidebar-bottom")]},proxy:!0}],null,!0)}),t._v(" "),t.$page.frontmatter.home?e("Home"):e("Page",{attrs:{"sidebar-items":t.sidebarItems},scopedSlots:t._u([{key:"top",fn:function(){return[t._t("page-top")]},proxy:!0},{key:"bottom",fn:function(){return[t._t("page-bottom")]},proxy:!0}],null,!0)})],1)}),[],!1,null,null,null);e.default=G.exports},316:function(t,e,n){},317:function(t,e,n){},318:function(t,e,n){},319:function(t,e,n){},320:function(t,e,n){},321:function(t,e,n){},322:function(t,e,n){},323:function(t,e){t.exports=function(t){return null==t}},324:function(t,e,n){},325:function(t,e,n){},326:function(t,e,n){},327:function(t,e,n){},328:function(t,e,n){},329:function(t,e,n){},351:function(t,e,n){"use strict";n.r(e);var s=n(294),i={name:"SidebarGroup",components:{DropdownTransition:n(359).a},props:["item","open","collapsable","depth"],beforeCreate(){this.$options.components.SidebarLinks=n(351).default},methods:{isActive:s.e}},a=(n(374),n(17)),r=Object(a.a)(i,(function(){var t=this,e=t._self._c;return e("section",{staticClass:"sidebar-group",class:[{collapsable:t.collapsable,"is-sub-group":0!==t.depth},"depth-"+t.depth]},[t.item.path?e("RouterLink",{staticClass:"sidebar-heading clickable",class:{open:t.open,active:t.isActive(t.$route,t.item.path)},attrs:{to:t.item.path},nativeOn:{click:function(e){return t.$emit("toggle")}}},[e("span",[t._v(t._s(t.item.title))]),t._v(" "),t.collapsable?e("span",{staticClass:"arrow",class:t.open?"down":"right"}):t._e()]):e("p",{staticClass:"sidebar-heading",class:{open:t.open},on:{click:function(e){return t.$emit("toggle")}}},[e("span",[t._v(t._s(t.item.title))]),t._v(" "),t.collapsable?e("span",{staticClass:"arrow",class:t.open?"down":"right"}):t._e()]),t._v(" "),e("DropdownTransition",[t.open||!t.collapsable?e("SidebarLinks",{staticClass:"sidebar-group-items",attrs:{items:t.item.children,"sidebar-depth":t.item.sidebarDepth,"initial-open-group-index":t.item.initialOpenGroupIndex,depth:t.depth+1}}):t._e()],1)],1)}),[],!1,null,null,null).exports;function o(t,e,n,s,i){const a={props:{to:e,activeClass:"",exactActiveClass:""},class:{active:s,"sidebar-link":!0}};return i>2&&(a.style={"padding-left":i+"rem"}),t("RouterLink",a,n)}function l(t,e,n,i,a,r=1){return!e||r>a?null:t("ul",{class:"sidebar-sub-headers"},e.map(e=>{const u=Object(s.e)(i,n+"#"+e.slug);return t("li",{class:"sidebar-sub-header"},[o(t,n+"#"+e.slug,e.title,u,e.level-1),l(t,e.children,n,i,a,r+1)])}))}var u={functional:!0,props:["item","sidebarDepth"],render(t,{parent:{$page:e,$site:n,$route:i,$themeConfig:a,$themeLocaleConfig:r},props:{item:u,sidebarDepth:c}}){const h=Object(s.e)(i,u.path),p="auto"===u.type?h||u.children.some(t=>Object(s.e)(i,u.basePath+"#"+t.slug)):h,d="external"===u.type?function(t,e,n){return t("a",{attrs:{href:e,target:"_blank",rel:"noopener noreferrer"},class:{"sidebar-link":!0}},[n,t("OutboundLink")])}(t,u.path,u.title||u.path):o(t,u.path,u.title||u.path,p),f=[e.frontmatter.sidebarDepth,c,r.sidebarDepth,a.sidebarDepth,1].find(t=>void 0!==t),g=r.displayAllHeaders||a.displayAllHeaders;if("auto"===u.type)return[d,l(t,u.children,u.basePath,i,f)];if((p||g)&&u.headers&&!s.d.test(u.path)){return[d,l(t,Object(s.c)(u.headers),u.path,i,f)]}return d}};n(375);function c(t,e){if("group"===e.type){const n=e.path&&Object(s.e)(t,e.path),i=e.children.some(e=>"group"===e.type?c(t,e):"page"===e.type&&Object(s.e)(t,e.path));return n||i}return!1}var h={name:"SidebarLinks",components:{SidebarGroup:r,SidebarLink:Object(a.a)(u,void 0,void 0,!1,null,null,null).exports},props:["items","depth","sidebarDepth","initialOpenGroupIndex"],data(){return{openGroupIndex:this.initialOpenGroupIndex||0}},watch:{$route(){this.refreshIndex()}},created(){this.refreshIndex()},methods:{refreshIndex(){const t=function(t,e){for(let n=0;n-1&&(this.openGroupIndex=t)},toggleGroup(t){this.openGroupIndex=t===this.openGroupIndex?-1:t},isActive(t){return Object(s.e)(this.$route,t.regularPath)}}},p=Object(a.a)(h,(function(){var t=this,e=t._self._c;return t.items.length?e("ul",{staticClass:"sidebar-links"},t._l(t.items,(function(n,s){return e("li",{key:s},["group"===n.type?e("SidebarGroup",{attrs:{item:n,open:s===t.openGroupIndex,collapsable:n.collapsable||n.collapsible,depth:t.depth},on:{toggle:function(e){return t.toggleGroup(s)}}}):e("SidebarLink",{attrs:{"sidebar-depth":t.sidebarDepth,item:n}})],1)})),0):t._e()}),[],!1,null,null,null);e.default=p.exports},359:function(t,e,n){"use strict";var s={name:"DropdownTransition",methods:{setHeight(t){t.style.height=t.scrollHeight+"px"},unsetHeight(t){t.style.height=""}}},i=(n(366),n(17)),a=Object(i.a)(s,(function(){return(0,this._self._c)("transition",{attrs:{name:"dropdown"},on:{enter:this.setHeight,"after-enter":this.unsetHeight,"before-leave":this.setHeight}},[this._t("default")],2)}),[],!1,null,null,null);e.a=a.exports},363:function(t,e,n){"use strict";n(316)},364:function(t,e,n){"use strict";n(317)},365:function(t,e,n){"use strict";n(318)},366:function(t,e,n){"use strict";n(319)},367:function(t,e,n){"use strict";n(320)},368:function(t,e,n){"use strict";n(321)},369:function(t,e,n){"use strict";n(322)},370:function(t,e,n){"use strict";n(324)},371:function(t,e,n){var s=n(14),i=n(4),a=n(13);t.exports=function(t){return"string"==typeof t||!i(t)&&a(t)&&"[object String]"==s(t)}},372:function(t,e,n){"use strict";n(325)},373:function(t,e,n){"use strict";n(326)},374:function(t,e,n){"use strict";n(327)},375:function(t,e,n){"use strict";n(328)},376:function(t,e,n){"use strict";n(329)}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[1],{294:function(t,e,n){"use strict";n.d(e,"d",(function(){return s})),n.d(e,"a",(function(){return a})),n.d(e,"i",(function(){return r})),n.d(e,"f",(function(){return l})),n.d(e,"g",(function(){return u})),n.d(e,"h",(function(){return c})),n.d(e,"b",(function(){return h})),n.d(e,"e",(function(){return p})),n.d(e,"k",(function(){return d})),n.d(e,"l",(function(){return f})),n.d(e,"c",(function(){return m})),n.d(e,"j",(function(){return b}));n(48);const s=/#.*$/,i=/\.(md|html)$/,a=/\/$/,r=/^[a-z]+:/i;function o(t){return decodeURI(t).replace(s,"").replace(i,"")}function l(t){return r.test(t)}function u(t){return/^mailto:/.test(t)}function c(t){return/^tel:/.test(t)}function h(t){if(l(t))return t;const e=t.match(s),n=e?e[0]:"",i=o(t);return a.test(i)?t:i+".html"+n}function p(t,e){const n=decodeURIComponent(t.hash),i=function(t){const e=t.match(s);if(e)return e[0]}(e);if(i&&n!==i)return!1;return o(t.path)===o(e)}function d(t,e,n){if(l(e))return{type:"external",path:e};n&&(e=function(t,e,n){const s=t.charAt(0);if("/"===s)return t;if("?"===s||"#"===s)return e+t;const i=e.split("/");n&&i[i.length-1]||i.pop();const a=t.replace(/^\//,"").split("/");for(let t=0;tfunction t(e,n,s,i=1){if("string"==typeof e)return d(n,e,s);if(Array.isArray(e))return Object.assign(d(n,e[0],s),{title:e[1]});{const a=e.children||[];return 0===a.length&&e.path?Object.assign(d(n,e.path,s),{title:e.title}):{type:"group",path:e.path,title:e.title,sidebarDepth:e.sidebarDepth,initialOpenGroupIndex:e.initialOpenGroupIndex,children:a.map(e=>t(e,n,s,i+1)),collapsable:!1!==e.collapsable}}}(t,i,n)):[]}return[]}function g(t){const e=m(t.headers||[]);return[{type:"group",collapsable:!1,title:t.title,path:null,children:e.map(e=>({type:"auto",title:e.title,basePath:t.path,path:t.path+"#"+e.slug,children:e.children||[]}))}]}function m(t){let e;return(t=t.map(t=>Object.assign({},t))).forEach(t=>{2===t.level?e=t:e&&(e.children||(e.children=[])).push(t)}),t.filter(t=>2===t.level)}function b(t){return Object.assign(t,{type:t.items&&t.items.length?"links":"link"})}},306:function(t,e,n){"use strict";n.r(e);var s=n(294),i={name:"NavLink",props:{item:{required:!0}},computed:{link(){return Object(s.b)(this.item.link)},exact(){return this.$site.locales?Object.keys(this.$site.locales).some(t=>t===this.link):"/"===this.link},isNonHttpURI(){return Object(s.g)(this.link)||Object(s.h)(this.link)},isBlankTarget(){return"_blank"===this.target},isInternal(){return!Object(s.f)(this.link)&&!this.isBlankTarget},target(){return this.isNonHttpURI?null:this.item.target?this.item.target:Object(s.f)(this.link)?"_blank":""},rel(){return this.isNonHttpURI||!1===this.item.rel?null:this.item.rel?this.item.rel:this.isBlankTarget?"noopener noreferrer":null}},methods:{focusoutAction(){this.$emit("focusout")}}},a=n(13),r=Object(a.a)(i,(function(){var t=this,e=t._self._c;return t.isInternal?e("RouterLink",{staticClass:"nav-link",attrs:{to:t.link,exact:t.exact},nativeOn:{focusout:function(e){return t.focusoutAction.apply(null,arguments)}}},[t._v("\n "+t._s(t.item.text)+"\n")]):e("a",{staticClass:"nav-link external",attrs:{href:t.link,target:t.target,rel:t.rel},on:{focusout:t.focusoutAction}},[t._v("\n "+t._s(t.item.text)+"\n "),t.isBlankTarget?e("OutboundLink"):t._e()],1)}),[],!1,null,null,null).exports,o={name:"Home",components:{NavLink:r},computed:{data(){return this.$page.frontmatter},actionLink(){return{link:this.data.actionLink,text:this.data.actionText}}}},l=(n(363),Object(a.a)(o,(function(){var t=this,e=t._self._c;return e("main",{staticClass:"home",attrs:{"aria-labelledby":null!==t.data.heroText?"main-title":null}},[e("header",{staticClass:"hero"},[t.data.heroImage?e("img",{attrs:{src:t.$withBase(t.data.heroImage),alt:t.data.heroAlt||"hero"}}):t._e(),t._v(" "),null!==t.data.heroText?e("h1",{attrs:{id:"main-title"}},[t._v("\n "+t._s(t.data.heroText||t.$title||"Hello")+"\n ")]):t._e(),t._v(" "),null!==t.data.tagline?e("p",{staticClass:"description"},[t._v("\n "+t._s(t.data.tagline||t.$description||"Welcome to your VuePress site")+"\n ")]):t._e(),t._v(" "),t.data.actionText&&t.data.actionLink?e("p",{staticClass:"action"},[e("NavLink",{staticClass:"action-button",attrs:{item:t.actionLink}})],1):t._e()]),t._v(" "),t.data.features&&t.data.features.length?e("div",{staticClass:"features"},t._l(t.data.features,(function(n,s){return e("div",{key:s,staticClass:"feature"},[e("h2",[t._v(t._s(n.title))]),t._v(" "),e("p",[t._v(t._s(n.details))])])})),0):t._e(),t._v(" "),e("Content",{staticClass:"theme-default-content custom"}),t._v(" "),t.data.footer?e("div",{staticClass:"footer"},[t._v("\n "+t._s(t.data.footer)+"\n ")]):e("Content",{staticClass:"footer",attrs:{"slot-key":"footer"}})],1)}),[],!1,null,null,null).exports),u=(n(48),n(107)),c=n.n(u),h=(t,e,n=null)=>{let s=c()(e,"title","");return c()(e,"frontmatter.tags")&&(s+=" "+e.frontmatter.tags.join(" ")),n&&(s+=" "+n),p(t,s)};const p=(t,e)=>{const n=t=>t.replace(/[-/\\^$*+?.()|[\]{}]/g,"\\$&"),s=new RegExp("[^\0-]"),i=t.split(/\s+/g).map(t=>t.trim()).filter(t=>!!t);if(s.test(t))return i.some(t=>e.toLowerCase().indexOf(t)>-1);{const s=t.endsWith(" ");return new RegExp(i.map((t,e)=>i.length!==e+1||s?`(?=.*\\b${n(t)}\\b)`:`(?=.*\\b${n(t)})`).join("")+".+","gi").test(e)}};var d={name:"SearchBox",data:()=>({query:"",focused:!1,focusIndex:0,placeholder:void 0}),computed:{showSuggestions(){return this.focused&&this.suggestions&&this.suggestions.length},suggestions(){const t=this.query.trim().toLowerCase();if(!t)return;const{pages:e}=this.$site,n=this.$site.themeConfig.searchMaxSuggestions||5,s=this.$localePath,i=[];for(let a=0;a=n);a++){const r=e[a];if(this.getPageLocalePath(r)===s&&this.isSearchable(r))if(h(t,r))i.push(r);else if(r.headers)for(let e=0;e=n);e++){const n=r.headers[e];n.title&&h(t,r,n.title)&&i.push(Object.assign({},r,{path:r.path+"#"+n.slug,header:n}))}}return i},alignRight(){return(this.$site.themeConfig.nav||[]).length+(this.$site.repo?1:0)<=2}},mounted(){this.placeholder=this.$site.themeConfig.searchPlaceholder||"",document.addEventListener("keydown",this.onHotkey)},beforeDestroy(){document.removeEventListener("keydown",this.onHotkey)},methods:{getPageLocalePath(t){for(const e in this.$site.locales||{})if("/"!==e&&0===t.path.indexOf(e))return e;return"/"},isSearchable(t){let e=null;return null===e||(e=Array.isArray(e)?e:new Array(e),e.filter(e=>t.path.match(e)).length>0)},onHotkey(t){t.srcElement===document.body&&["s","/"].includes(t.key)&&(this.$refs.input.focus(),t.preventDefault())},onUp(){this.showSuggestions&&(this.focusIndex>0?this.focusIndex--:this.focusIndex=this.suggestions.length-1)},onDown(){this.showSuggestions&&(this.focusIndex "+t._s(n.header.title))]):t._e()])])})),0):t._e()])}),[],!1,null,null,null).exports),g=(n(365),Object(a.a)({},(function(){var t=this,e=t._self._c;return e("div",{staticClass:"sidebar-button",on:{click:function(e){return t.$emit("toggle-sidebar")}}},[e("svg",{staticClass:"icon",attrs:{xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",role:"img",viewBox:"0 0 448 512"}},[e("path",{attrs:{fill:"currentColor",d:"M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"}})])])}),[],!1,null,null,null).exports),m=n(359),b=n(108),v=n.n(b),k={name:"DropdownLink",components:{NavLink:r,DropdownTransition:m.a},props:{item:{required:!0}},data:()=>({open:!1}),computed:{dropdownAriaLabel(){return this.item.ariaLabel||this.item.text}},watch:{$route(){this.open=!1}},methods:{setOpen(t){this.open=t},isLastItemOfArray:(t,e)=>v()(e)===t,handleDropdown(){0===event.detail&&this.setOpen(!this.open)}}},_=(n(367),{name:"NavLinks",components:{NavLink:r,DropdownLink:Object(a.a)(k,(function(){var t=this,e=t._self._c;return e("div",{staticClass:"dropdown-wrapper",class:{open:t.open}},[e("button",{staticClass:"dropdown-title",attrs:{type:"button","aria-label":t.dropdownAriaLabel},on:{click:t.handleDropdown}},[e("span",{staticClass:"title"},[t._v(t._s(t.item.text))]),t._v(" "),e("span",{staticClass:"arrow down"})]),t._v(" "),e("button",{staticClass:"mobile-dropdown-title",attrs:{type:"button","aria-label":t.dropdownAriaLabel},on:{click:function(e){return t.setOpen(!t.open)}}},[e("span",{staticClass:"title"},[t._v(t._s(t.item.text))]),t._v(" "),e("span",{staticClass:"arrow",class:t.open?"down":"right"})]),t._v(" "),e("DropdownTransition",[e("ul",{directives:[{name:"show",rawName:"v-show",value:t.open,expression:"open"}],staticClass:"nav-dropdown"},t._l(t.item.items,(function(n,s){return e("li",{key:n.link||s,staticClass:"dropdown-item"},["links"===n.type?e("h4",[t._v("\n "+t._s(n.text)+"\n ")]):t._e(),t._v(" "),"links"===n.type?e("ul",{staticClass:"dropdown-subitem-wrapper"},t._l(n.items,(function(s){return e("li",{key:s.link,staticClass:"dropdown-subitem"},[e("NavLink",{attrs:{item:s},on:{focusout:function(e){t.isLastItemOfArray(s,n.items)&&t.isLastItemOfArray(n,t.item.items)&&t.setOpen(!1)}}})],1)})),0):e("NavLink",{attrs:{item:n},on:{focusout:function(e){t.isLastItemOfArray(n,t.item.items)&&t.setOpen(!1)}}})],1)})),0)])],1)}),[],!1,null,null,null).exports},computed:{userNav(){return this.$themeLocaleConfig.nav||this.$site.themeConfig.nav||[]},nav(){const{locales:t}=this.$site;if(t&&Object.keys(t).length>1){const e=this.$page.path,n=this.$router.options.routes,s=this.$site.themeConfig.locales||{},i={text:this.$themeLocaleConfig.selectText||"Languages",ariaLabel:this.$themeLocaleConfig.ariaLabel||"Select language",items:Object.keys(t).map(i=>{const a=t[i],r=s[i]&&s[i].label||a.lang;let o;return a.lang===this.$lang?o=e:(o=e.replace(this.$localeConfig.path,i),n.some(t=>t.path===o)||(o=i)),{text:r,link:o}})};return[...this.userNav,i]}return this.userNav},userLinks(){return(this.nav||[]).map(t=>Object.assign(Object(s.j)(t),{items:(t.items||[]).map(s.j)}))},repoLink(){const{repo:t}=this.$site.themeConfig;return t?/^https?:/.test(t)?t:"https://github.com/"+t:null},repoLabel(){if(!this.repoLink)return;if(this.$site.themeConfig.repoLabel)return this.$site.themeConfig.repoLabel;const t=this.repoLink.match(/^https?:\/\/[^/]+/)[0],e=["GitHub","GitLab","Bitbucket"];for(let n=0;n({linksWrapMaxWidth:null}),computed:{algolia(){return this.$themeLocaleConfig.algolia||this.$site.themeConfig.algolia||{}},isAlgoliaSearch(){return this.algolia&&this.algolia.apiKey&&this.algolia.indexName}},mounted(){const t=parseInt(C(this.$el,"paddingLeft"))+parseInt(C(this.$el,"paddingRight")),e=()=>{document.documentElement.clientWidth<719?this.linksWrapMaxWidth=null:this.linksWrapMaxWidth=this.$el.offsetWidth-t-(this.$refs.siteName&&this.$refs.siteName.offsetWidth||0)};e(),window.addEventListener("resize",e,!1)}},$=(n(369),Object(a.a)(L,(function(){var t=this,e=t._self._c;return e("header",{staticClass:"navbar"},[e("SidebarButton",{on:{"toggle-sidebar":function(e){return t.$emit("toggle-sidebar")}}}),t._v(" "),e("RouterLink",{staticClass:"home-link",attrs:{to:t.$localePath}},[t.$site.themeConfig.logo?e("img",{staticClass:"logo",attrs:{src:t.$withBase(t.$site.themeConfig.logo),alt:t.$siteTitle}}):t._e(),t._v(" "),t.$siteTitle?e("span",{ref:"siteName",staticClass:"site-name",class:{"can-hide":t.$site.themeConfig.logo}},[t._v(t._s(t.$siteTitle))]):t._e()]),t._v(" "),e("div",{staticClass:"links",style:t.linksWrapMaxWidth?{"max-width":t.linksWrapMaxWidth+"px"}:{}},[t.isAlgoliaSearch?e("AlgoliaSearchBox",{attrs:{options:t.algolia}}):!1!==t.$site.themeConfig.search&&!1!==t.$page.frontmatter.search?e("SearchBox"):t._e(),t._v(" "),e("NavLinks",{staticClass:"can-hide"})],1)],1)}),[],!1,null,null,null).exports),y=n(323),w=n.n(y),O={name:"PageEdit",computed:{lastUpdated(){return this.$page.lastUpdated},lastUpdatedText(){return"string"==typeof this.$themeLocaleConfig.lastUpdated?this.$themeLocaleConfig.lastUpdated:"string"==typeof this.$site.themeConfig.lastUpdated?this.$site.themeConfig.lastUpdated:"Last Updated"},editLink(){const t=w()(this.$page.frontmatter.editLink)?this.$site.themeConfig.editLinks:this.$page.frontmatter.editLink,{repo:e,docsDir:n="",docsBranch:s="master",docsRepo:i=e}=this.$site.themeConfig;return t&&i&&this.$page.relativePath?this.createEditLink(e,i,n,s,this.$page.relativePath):null},editLinkText(){return this.$themeLocaleConfig.editLinkText||this.$site.themeConfig.editLinkText||"Edit this page"}},methods:{createEditLink(t,e,n,i,a){if(/bitbucket.org/.test(e)){return e.replace(s.a,"")+"/src"+`/${i}/`+(n?n.replace(s.a,"")+"/":"")+a+`?mode=edit&spa=0&at=${i}&fileviewer=file-view-default`}if(/gitlab.com/.test(e)){return e.replace(s.a,"")+"/-/edit"+`/${i}/`+(n?n.replace(s.a,"")+"/":"")+a}return(s.i.test(e)?e:"https://github.com/"+e).replace(s.a,"")+"/edit"+`/${i}/`+(n?n.replace(s.a,"")+"/":"")+a}}},S=(n(370),Object(a.a)(O,(function(){var t=this,e=t._self._c;return e("footer",{staticClass:"page-edit"},[t.editLink?e("div",{staticClass:"edit-link"},[e("a",{attrs:{href:t.editLink,target:"_blank",rel:"noopener noreferrer"}},[t._v(t._s(t.editLinkText))]),t._v(" "),e("OutboundLink")],1):t._e(),t._v(" "),t.lastUpdated?e("div",{staticClass:"last-updated"},[e("span",{staticClass:"prefix"},[t._v(t._s(t.lastUpdatedText)+":")]),t._v(" "),e("span",{staticClass:"time"},[t._v(t._s(t.lastUpdated))])]):t._e()])}),[],!1,null,null,null).exports),I=n(371),j=n.n(I),N={name:"PageNav",props:["sidebarItems"],computed:{prev(){return P(T.PREV,this)},next(){return P(T.NEXT,this)}}};const T={NEXT:{resolveLink:function(t,e){return A(t,e,1)},getThemeLinkConfig:({nextLinks:t})=>t,getPageLinkConfig:({frontmatter:t})=>t.next},PREV:{resolveLink:function(t,e){return A(t,e,-1)},getThemeLinkConfig:({prevLinks:t})=>t,getPageLinkConfig:({frontmatter:t})=>t.prev}};function P(t,{$themeConfig:e,$page:n,$route:i,$site:a,sidebarItems:r}){const{resolveLink:o,getThemeLinkConfig:l,getPageLinkConfig:u}=t,c=l(e),h=u(n),p=w()(h)?c:h;return!1===p?void 0:j()(p)?Object(s.k)(a.pages,p,i.path):o(n,r)}function A(t,e,n){const s=[];!function t(e,n){for(let s=0,i=e.length;s({isSidebarOpen:!1}),computed:{shouldShowNavbar(){const{themeConfig:t}=this.$site,{frontmatter:e}=this.$page;return!1!==e.navbar&&!1!==t.navbar&&(this.$title||t.logo||t.repo||t.nav||this.$themeLocaleConfig.nav)},shouldShowSidebar(){const{frontmatter:t}=this.$page;return!t.home&&!1!==t.sidebar&&this.sidebarItems.length},sidebarItems(){return Object(s.l)(this.$page,this.$page.regularPath,this.$site,this.$localePath)},pageClasses(){const t=this.$page.frontmatter.pageClass;return[{"no-navbar":!this.shouldShowNavbar,"sidebar-open":this.isSidebarOpen,"no-sidebar":!this.shouldShowSidebar},t]}},mounted(){this.$router.afterEach(()=>{this.isSidebarOpen=!1})},methods:{toggleSidebar(t){this.isSidebarOpen="boolean"==typeof t?t:!this.isSidebarOpen,this.$emit("toggle-sidebar",this.isSidebarOpen)},onTouchStart(t){this.touchStart={x:t.changedTouches[0].clientX,y:t.changedTouches[0].clientY}},onTouchEnd(t){const e=t.changedTouches[0].clientX-this.touchStart.x,n=t.changedTouches[0].clientY-this.touchStart.y;Math.abs(e)>Math.abs(n)&&Math.abs(e)>40&&(e>0&&this.touchStart.x<=80?this.toggleSidebar(!0):this.toggleSidebar(!1))}}}),G=Object(a.a)(U,(function(){var t=this,e=t._self._c;return e("div",{staticClass:"theme-container",class:t.pageClasses,on:{touchstart:t.onTouchStart,touchend:t.onTouchEnd}},[t.shouldShowNavbar?e("Navbar",{on:{"toggle-sidebar":t.toggleSidebar}}):t._e(),t._v(" "),e("div",{staticClass:"sidebar-mask",on:{click:function(e){return t.toggleSidebar(!1)}}}),t._v(" "),e("Sidebar",{attrs:{items:t.sidebarItems},on:{"toggle-sidebar":t.toggleSidebar},scopedSlots:t._u([{key:"top",fn:function(){return[t._t("sidebar-top")]},proxy:!0},{key:"bottom",fn:function(){return[t._t("sidebar-bottom")]},proxy:!0}],null,!0)}),t._v(" "),t.$page.frontmatter.home?e("Home"):e("Page",{attrs:{"sidebar-items":t.sidebarItems},scopedSlots:t._u([{key:"top",fn:function(){return[t._t("page-top")]},proxy:!0},{key:"bottom",fn:function(){return[t._t("page-bottom")]},proxy:!0}],null,!0)})],1)}),[],!1,null,null,null);e.default=G.exports},316:function(t,e,n){},317:function(t,e,n){},318:function(t,e,n){},319:function(t,e,n){},320:function(t,e,n){},321:function(t,e,n){},322:function(t,e,n){},323:function(t,e){t.exports=function(t){return null==t}},324:function(t,e,n){},325:function(t,e,n){},326:function(t,e,n){},327:function(t,e,n){},328:function(t,e,n){},329:function(t,e,n){},351:function(t,e,n){"use strict";n.r(e);var s=n(294),i={name:"SidebarGroup",components:{DropdownTransition:n(359).a},props:["item","open","collapsable","depth"],beforeCreate(){this.$options.components.SidebarLinks=n(351).default},methods:{isActive:s.e}},a=(n(374),n(13)),r=Object(a.a)(i,(function(){var t=this,e=t._self._c;return e("section",{staticClass:"sidebar-group",class:[{collapsable:t.collapsable,"is-sub-group":0!==t.depth},"depth-"+t.depth]},[t.item.path?e("RouterLink",{staticClass:"sidebar-heading clickable",class:{open:t.open,active:t.isActive(t.$route,t.item.path)},attrs:{to:t.item.path},nativeOn:{click:function(e){return t.$emit("toggle")}}},[e("span",[t._v(t._s(t.item.title))]),t._v(" "),t.collapsable?e("span",{staticClass:"arrow",class:t.open?"down":"right"}):t._e()]):e("p",{staticClass:"sidebar-heading",class:{open:t.open},on:{click:function(e){return t.$emit("toggle")}}},[e("span",[t._v(t._s(t.item.title))]),t._v(" "),t.collapsable?e("span",{staticClass:"arrow",class:t.open?"down":"right"}):t._e()]),t._v(" "),e("DropdownTransition",[t.open||!t.collapsable?e("SidebarLinks",{staticClass:"sidebar-group-items",attrs:{items:t.item.children,"sidebar-depth":t.item.sidebarDepth,"initial-open-group-index":t.item.initialOpenGroupIndex,depth:t.depth+1}}):t._e()],1)],1)}),[],!1,null,null,null).exports;function o(t,e,n,s,i){const a={props:{to:e,activeClass:"",exactActiveClass:""},class:{active:s,"sidebar-link":!0}};return i>2&&(a.style={"padding-left":i+"rem"}),t("RouterLink",a,n)}function l(t,e,n,i,a,r=1){return!e||r>a?null:t("ul",{class:"sidebar-sub-headers"},e.map(e=>{const u=Object(s.e)(i,n+"#"+e.slug);return t("li",{class:"sidebar-sub-header"},[o(t,n+"#"+e.slug,e.title,u,e.level-1),l(t,e.children,n,i,a,r+1)])}))}var u={functional:!0,props:["item","sidebarDepth"],render(t,{parent:{$page:e,$site:n,$route:i,$themeConfig:a,$themeLocaleConfig:r},props:{item:u,sidebarDepth:c}}){const h=Object(s.e)(i,u.path),p="auto"===u.type?h||u.children.some(t=>Object(s.e)(i,u.basePath+"#"+t.slug)):h,d="external"===u.type?function(t,e,n){return t("a",{attrs:{href:e,target:"_blank",rel:"noopener noreferrer"},class:{"sidebar-link":!0}},[n,t("OutboundLink")])}(t,u.path,u.title||u.path):o(t,u.path,u.title||u.path,p),f=[e.frontmatter.sidebarDepth,c,r.sidebarDepth,a.sidebarDepth,1].find(t=>void 0!==t),g=r.displayAllHeaders||a.displayAllHeaders;if("auto"===u.type)return[d,l(t,u.children,u.basePath,i,f)];if((p||g)&&u.headers&&!s.d.test(u.path)){return[d,l(t,Object(s.c)(u.headers),u.path,i,f)]}return d}};n(375);function c(t,e){if("group"===e.type){const n=e.path&&Object(s.e)(t,e.path),i=e.children.some(e=>"group"===e.type?c(t,e):"page"===e.type&&Object(s.e)(t,e.path));return n||i}return!1}var h={name:"SidebarLinks",components:{SidebarGroup:r,SidebarLink:Object(a.a)(u,void 0,void 0,!1,null,null,null).exports},props:["items","depth","sidebarDepth","initialOpenGroupIndex"],data(){return{openGroupIndex:this.initialOpenGroupIndex||0}},watch:{$route(){this.refreshIndex()}},created(){this.refreshIndex()},methods:{refreshIndex(){const t=function(t,e){for(let n=0;n-1&&(this.openGroupIndex=t)},toggleGroup(t){this.openGroupIndex=t===this.openGroupIndex?-1:t},isActive(t){return Object(s.e)(this.$route,t.regularPath)}}},p=Object(a.a)(h,(function(){var t=this,e=t._self._c;return t.items.length?e("ul",{staticClass:"sidebar-links"},t._l(t.items,(function(n,s){return e("li",{key:s},["group"===n.type?e("SidebarGroup",{attrs:{item:n,open:s===t.openGroupIndex,collapsable:n.collapsable||n.collapsible,depth:t.depth},on:{toggle:function(e){return t.toggleGroup(s)}}}):e("SidebarLink",{attrs:{"sidebar-depth":t.sidebarDepth,item:n}})],1)})),0):t._e()}),[],!1,null,null,null);e.default=p.exports},359:function(t,e,n){"use strict";var s={name:"DropdownTransition",methods:{setHeight(t){t.style.height=t.scrollHeight+"px"},unsetHeight(t){t.style.height=""}}},i=(n(366),n(13)),a=Object(i.a)(s,(function(){return(0,this._self._c)("transition",{attrs:{name:"dropdown"},on:{enter:this.setHeight,"after-enter":this.unsetHeight,"before-leave":this.setHeight}},[this._t("default")],2)}),[],!1,null,null,null);e.a=a.exports},363:function(t,e,n){"use strict";n(316)},364:function(t,e,n){"use strict";n(317)},365:function(t,e,n){"use strict";n(318)},366:function(t,e,n){"use strict";n(319)},367:function(t,e,n){"use strict";n(320)},368:function(t,e,n){"use strict";n(321)},369:function(t,e,n){"use strict";n(322)},370:function(t,e,n){"use strict";n(324)},371:function(t,e,n){var s=n(15),i=n(4),a=n(14);t.exports=function(t){return"string"==typeof t||!i(t)&&a(t)&&"[object String]"==s(t)}},372:function(t,e,n){"use strict";n(325)},373:function(t,e,n){"use strict";n(326)},374:function(t,e,n){"use strict";n(327)},375:function(t,e,n){"use strict";n(328)},376:function(t,e,n){"use strict";n(329)}}]); \ No newline at end of file diff --git a/assets/js/10.1e4f52c9.js b/assets/js/10.e1d09130.js similarity index 88% rename from assets/js/10.1e4f52c9.js rename to assets/js/10.e1d09130.js index 0856b6e6..0e1590a4 100644 --- a/assets/js/10.1e4f52c9.js +++ b/assets/js/10.e1d09130.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[10,12,36,38],{284:function(t,e,n){},286:function(t,e,n){},288:function(t,e,n){"use strict";n(284)},290:function(t,e,n){"use strict";n.r(e);n(48);var s={props:{format:{type:String,default:"auto"}},mounted(){(window.adsbygoogle=window.adsbygoogle||[]).push({})}},o=(n(288),n(17)),a=Object(o.a)(s,(function(){return(0,this._self._c)("ins",{staticClass:"adsbygoogle",staticStyle:{display:"block"},attrs:{"data-ad-slot":"3336580675","data-ad-client":"ca-pub-5904323684803247","data-ad-format":this.format,"data-full-width-responsive":"true"}})}),[],!1,null,"18b37b7d",null);e.default=a.exports},292:function(t,e,n){"use strict";n(286)},296:function(t,e,n){"use strict";n.r(e);var s={data(){return{path:this.$route.path,interval:null}},mounted(){this.interval=setInterval(this.hideAds,2e3)},beforeDestroy(){clearInterval(this.interval)},methods:{hideAds(){const t=this.$el.querySelector("#disqus_thread").querySelector("iframe:first-child");null==t||t.style.setProperty("display","none","important")}}},o=(n(292),n(17)),a=Object(o.a)(s,(function(){var t=this._self._c;return t("section",[t("h2",{attrs:{id:"comments"}},[this._v("Comments")]),this._v(" "),t("disqus",{attrs:{identifier:this.path}})],1)}),[],!1,null,"2fa9e9ea",null);e.default=a.exports},300:function(t,e,n){"use strict";n.r(e);var s=n(306),o=n(296),a=n(290),l={props:{noSideAds:Boolean,noComments:Boolean},components:{ParentLayout:s.default,CommentSection:o.default,GoogleAds:a.default}},i=n(17),r=Object(i.a)(l,(function(){var t=this,e=t._self._c;return e("parent-layout",{scopedSlots:t._u([t.noSideAds?null:{key:"sidebar-bottom",fn:function(){return[e("div",{staticClass:"googleads"},[e("google-ads")],1)]},proxy:!0},t.noComments?null:{key:"page-bottom",fn:function(){return[e("google-ads"),t._v(" "),e("comment-section")]},proxy:!0}],null,!0)})}),[],!1,null,null,null);e.default=r.exports},456:function(t,e,n){"use strict";n.r(e);var s={components:{Visnalize:n(300).default}},o=n(17),a=Object(o.a)(s,(function(){return(0,this._self._c)("visnalize",{attrs:{noSideAds:""}})}),[],!1,null,null,null);e.default=a.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[10,12,36,38],{284:function(t,e,n){},286:function(t,e,n){},288:function(t,e,n){"use strict";n(284)},290:function(t,e,n){"use strict";n.r(e);n(48);var s={props:{format:{type:String,default:"auto"}},mounted(){(window.adsbygoogle=window.adsbygoogle||[]).push({})}},o=(n(288),n(13)),a=Object(o.a)(s,(function(){return(0,this._self._c)("ins",{staticClass:"adsbygoogle",staticStyle:{display:"block"},attrs:{"data-ad-slot":"3336580675","data-ad-client":"ca-pub-5904323684803247","data-ad-format":this.format,"data-full-width-responsive":"true"}})}),[],!1,null,"18b37b7d",null);e.default=a.exports},292:function(t,e,n){"use strict";n(286)},296:function(t,e,n){"use strict";n.r(e);var s={data(){return{path:this.$route.path,interval:null}},mounted(){this.interval=setInterval(this.hideAds,2e3)},beforeDestroy(){clearInterval(this.interval)},methods:{hideAds(){const t=this.$el.querySelector("#disqus_thread").querySelector("iframe:first-child");null==t||t.style.setProperty("display","none","important")}}},o=(n(292),n(13)),a=Object(o.a)(s,(function(){var t=this._self._c;return t("section",[t("h2",{attrs:{id:"comments"}},[this._v("Comments")]),this._v(" "),t("disqus",{attrs:{identifier:this.path}})],1)}),[],!1,null,"2fa9e9ea",null);e.default=a.exports},300:function(t,e,n){"use strict";n.r(e);var s=n(306),o=n(296),a=n(290),l={props:{noSideAds:Boolean,noComments:Boolean},components:{ParentLayout:s.default,CommentSection:o.default,GoogleAds:a.default}},i=n(13),r=Object(i.a)(l,(function(){var t=this,e=t._self._c;return e("parent-layout",{scopedSlots:t._u([t.noSideAds?null:{key:"sidebar-bottom",fn:function(){return[e("div",{staticClass:"googleads"},[e("google-ads")],1)]},proxy:!0},t.noComments?null:{key:"page-bottom",fn:function(){return[e("google-ads"),t._v(" "),e("comment-section")]},proxy:!0}],null,!0)})}),[],!1,null,null,null);e.default=r.exports},456:function(t,e,n){"use strict";n.r(e);var s={components:{Visnalize:n(300).default}},o=n(13),a=Object(o.a)(s,(function(){return(0,this._self._c)("visnalize",{attrs:{noSideAds:""}})}),[],!1,null,null,null);e.default=a.exports}}]); \ No newline at end of file diff --git a/assets/js/11.3267f5ba.js b/assets/js/11.984400d8.js similarity index 88% rename from assets/js/11.3267f5ba.js rename to assets/js/11.984400d8.js index 54c418f6..8689c043 100644 --- a/assets/js/11.3267f5ba.js +++ b/assets/js/11.984400d8.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[11,12,36,38],{284:function(t,e,n){},286:function(t,e,n){},288:function(t,e,n){"use strict";n(284)},290:function(t,e,n){"use strict";n.r(e);n(48);var o={props:{format:{type:String,default:"auto"}},mounted(){(window.adsbygoogle=window.adsbygoogle||[]).push({})}},s=(n(288),n(17)),a=Object(s.a)(o,(function(){return(0,this._self._c)("ins",{staticClass:"adsbygoogle",staticStyle:{display:"block"},attrs:{"data-ad-slot":"3336580675","data-ad-client":"ca-pub-5904323684803247","data-ad-format":this.format,"data-full-width-responsive":"true"}})}),[],!1,null,"18b37b7d",null);e.default=a.exports},292:function(t,e,n){"use strict";n(286)},296:function(t,e,n){"use strict";n.r(e);var o={data(){return{path:this.$route.path,interval:null}},mounted(){this.interval=setInterval(this.hideAds,2e3)},beforeDestroy(){clearInterval(this.interval)},methods:{hideAds(){const t=this.$el.querySelector("#disqus_thread").querySelector("iframe:first-child");null==t||t.style.setProperty("display","none","important")}}},s=(n(292),n(17)),a=Object(s.a)(o,(function(){var t=this._self._c;return t("section",[t("h2",{attrs:{id:"comments"}},[this._v("Comments")]),this._v(" "),t("disqus",{attrs:{identifier:this.path}})],1)}),[],!1,null,"2fa9e9ea",null);e.default=a.exports},300:function(t,e,n){"use strict";n.r(e);var o=n(306),s=n(296),a=n(290),l={props:{noSideAds:Boolean,noComments:Boolean},components:{ParentLayout:o.default,CommentSection:s.default,GoogleAds:a.default}},i=n(17),r=Object(i.a)(l,(function(){var t=this,e=t._self._c;return e("parent-layout",{scopedSlots:t._u([t.noSideAds?null:{key:"sidebar-bottom",fn:function(){return[e("div",{staticClass:"googleads"},[e("google-ads")],1)]},proxy:!0},t.noComments?null:{key:"page-bottom",fn:function(){return[e("google-ads"),t._v(" "),e("comment-section")]},proxy:!0}],null,!0)})}),[],!1,null,null,null);e.default=r.exports},457:function(t,e,n){"use strict";n.r(e);var o={components:{Visnalize:n(300).default}},s=n(17),a=Object(s.a)(o,(function(){return(0,this._self._c)("visnalize",{attrs:{noComments:""}})}),[],!1,null,null,null);e.default=a.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[11,12,36,38],{284:function(t,e,n){},286:function(t,e,n){},288:function(t,e,n){"use strict";n(284)},290:function(t,e,n){"use strict";n.r(e);n(48);var o={props:{format:{type:String,default:"auto"}},mounted(){(window.adsbygoogle=window.adsbygoogle||[]).push({})}},s=(n(288),n(13)),a=Object(s.a)(o,(function(){return(0,this._self._c)("ins",{staticClass:"adsbygoogle",staticStyle:{display:"block"},attrs:{"data-ad-slot":"3336580675","data-ad-client":"ca-pub-5904323684803247","data-ad-format":this.format,"data-full-width-responsive":"true"}})}),[],!1,null,"18b37b7d",null);e.default=a.exports},292:function(t,e,n){"use strict";n(286)},296:function(t,e,n){"use strict";n.r(e);var o={data(){return{path:this.$route.path,interval:null}},mounted(){this.interval=setInterval(this.hideAds,2e3)},beforeDestroy(){clearInterval(this.interval)},methods:{hideAds(){const t=this.$el.querySelector("#disqus_thread").querySelector("iframe:first-child");null==t||t.style.setProperty("display","none","important")}}},s=(n(292),n(13)),a=Object(s.a)(o,(function(){var t=this._self._c;return t("section",[t("h2",{attrs:{id:"comments"}},[this._v("Comments")]),this._v(" "),t("disqus",{attrs:{identifier:this.path}})],1)}),[],!1,null,"2fa9e9ea",null);e.default=a.exports},300:function(t,e,n){"use strict";n.r(e);var o=n(306),s=n(296),a=n(290),l={props:{noSideAds:Boolean,noComments:Boolean},components:{ParentLayout:o.default,CommentSection:s.default,GoogleAds:a.default}},i=n(13),r=Object(i.a)(l,(function(){var t=this,e=t._self._c;return e("parent-layout",{scopedSlots:t._u([t.noSideAds?null:{key:"sidebar-bottom",fn:function(){return[e("div",{staticClass:"googleads"},[e("google-ads")],1)]},proxy:!0},t.noComments?null:{key:"page-bottom",fn:function(){return[e("google-ads"),t._v(" "),e("comment-section")]},proxy:!0}],null,!0)})}),[],!1,null,null,null);e.default=r.exports},457:function(t,e,n){"use strict";n.r(e);var o={components:{Visnalize:n(300).default}},s=n(13),a=Object(s.a)(o,(function(){return(0,this._self._c)("visnalize",{attrs:{noComments:""}})}),[],!1,null,null,null);e.default=a.exports}}]); \ No newline at end of file diff --git a/assets/js/12.e97021ff.js b/assets/js/12.f789ecec.js similarity index 89% rename from assets/js/12.e97021ff.js rename to assets/js/12.f789ecec.js index cc699f51..c60c9845 100644 --- a/assets/js/12.e97021ff.js +++ b/assets/js/12.f789ecec.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[12,36,38],{284:function(t,e,n){},286:function(t,e,n){},288:function(t,e,n){"use strict";n(284)},290:function(t,e,n){"use strict";n.r(e);n(48);var o={props:{format:{type:String,default:"auto"}},mounted(){(window.adsbygoogle=window.adsbygoogle||[]).push({})}},s=(n(288),n(17)),a=Object(s.a)(o,(function(){return(0,this._self._c)("ins",{staticClass:"adsbygoogle",staticStyle:{display:"block"},attrs:{"data-ad-slot":"3336580675","data-ad-client":"ca-pub-5904323684803247","data-ad-format":this.format,"data-full-width-responsive":"true"}})}),[],!1,null,"18b37b7d",null);e.default=a.exports},292:function(t,e,n){"use strict";n(286)},296:function(t,e,n){"use strict";n.r(e);var o={data(){return{path:this.$route.path,interval:null}},mounted(){this.interval=setInterval(this.hideAds,2e3)},beforeDestroy(){clearInterval(this.interval)},methods:{hideAds(){const t=this.$el.querySelector("#disqus_thread").querySelector("iframe:first-child");null==t||t.style.setProperty("display","none","important")}}},s=(n(292),n(17)),a=Object(s.a)(o,(function(){var t=this._self._c;return t("section",[t("h2",{attrs:{id:"comments"}},[this._v("Comments")]),this._v(" "),t("disqus",{attrs:{identifier:this.path}})],1)}),[],!1,null,"2fa9e9ea",null);e.default=a.exports},300:function(t,e,n){"use strict";n.r(e);var o=n(306),s=n(296),a=n(290),l={props:{noSideAds:Boolean,noComments:Boolean},components:{ParentLayout:o.default,CommentSection:s.default,GoogleAds:a.default}},i=n(17),r=Object(i.a)(l,(function(){var t=this,e=t._self._c;return e("parent-layout",{scopedSlots:t._u([t.noSideAds?null:{key:"sidebar-bottom",fn:function(){return[e("div",{staticClass:"googleads"},[e("google-ads")],1)]},proxy:!0},t.noComments?null:{key:"page-bottom",fn:function(){return[e("google-ads"),t._v(" "),e("comment-section")]},proxy:!0}],null,!0)})}),[],!1,null,null,null);e.default=r.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[12,36,38],{284:function(t,e,n){},286:function(t,e,n){},288:function(t,e,n){"use strict";n(284)},290:function(t,e,n){"use strict";n.r(e);n(48);var o={props:{format:{type:String,default:"auto"}},mounted(){(window.adsbygoogle=window.adsbygoogle||[]).push({})}},s=(n(288),n(13)),a=Object(s.a)(o,(function(){return(0,this._self._c)("ins",{staticClass:"adsbygoogle",staticStyle:{display:"block"},attrs:{"data-ad-slot":"3336580675","data-ad-client":"ca-pub-5904323684803247","data-ad-format":this.format,"data-full-width-responsive":"true"}})}),[],!1,null,"18b37b7d",null);e.default=a.exports},292:function(t,e,n){"use strict";n(286)},296:function(t,e,n){"use strict";n.r(e);var o={data(){return{path:this.$route.path,interval:null}},mounted(){this.interval=setInterval(this.hideAds,2e3)},beforeDestroy(){clearInterval(this.interval)},methods:{hideAds(){const t=this.$el.querySelector("#disqus_thread").querySelector("iframe:first-child");null==t||t.style.setProperty("display","none","important")}}},s=(n(292),n(13)),a=Object(s.a)(o,(function(){var t=this._self._c;return t("section",[t("h2",{attrs:{id:"comments"}},[this._v("Comments")]),this._v(" "),t("disqus",{attrs:{identifier:this.path}})],1)}),[],!1,null,"2fa9e9ea",null);e.default=a.exports},300:function(t,e,n){"use strict";n.r(e);var o=n(306),s=n(296),a=n(290),l={props:{noSideAds:Boolean,noComments:Boolean},components:{ParentLayout:o.default,CommentSection:s.default,GoogleAds:a.default}},i=n(13),r=Object(i.a)(l,(function(){var t=this,e=t._self._c;return e("parent-layout",{scopedSlots:t._u([t.noSideAds?null:{key:"sidebar-bottom",fn:function(){return[e("div",{staticClass:"googleads"},[e("google-ads")],1)]},proxy:!0},t.noComments?null:{key:"page-bottom",fn:function(){return[e("google-ads"),t._v(" "),e("comment-section")]},proxy:!0}],null,!0)})}),[],!1,null,null,null);e.default=r.exports}}]); \ No newline at end of file diff --git a/assets/js/13.100232ae.js b/assets/js/13.fa116280.js similarity index 98% rename from assets/js/13.100232ae.js rename to assets/js/13.fa116280.js index f36ac49f..4ecd6666 100644 --- a/assets/js/13.100232ae.js +++ b/assets/js/13.fa116280.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[13],{416:function(e,t,s){e.exports=s.p+"assets/img/themestudio-editor.a388d954.png"},417:function(e,t,s){e.exports=s.p+"assets/img/themestudio-explorer.8ddbe036.png"},418:function(e,t,s){e.exports=s.p+"assets/img/getstarted.a0f02f51.png"},419:function(e,t,s){e.exports=s.p+"assets/img/getstarted1.edf5c7b0.png"},420:function(e,t,s){e.exports=s.p+"assets/img/getstarted2.bbedd785.png"},421:function(e,t,s){e.exports=s.p+"assets/img/getstarted3.eb3df6cb.png"},508:function(e,t,s){"use strict";s.r(t);var a=s(17),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("a-social"),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(416),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(417),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(418),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(419),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(420),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(421),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([[13],{416:function(e,t,s){e.exports=s.p+"assets/img/themestudio-editor.a388d954.png"},417:function(e,t,s){e.exports=s.p+"assets/img/themestudio-explorer.8ddbe036.png"},418:function(e,t,s){e.exports=s.p+"assets/img/getstarted.a0f02f51.png"},419:function(e,t,s){e.exports=s.p+"assets/img/getstarted1.edf5c7b0.png"},420:function(e,t,s){e.exports=s.p+"assets/img/getstarted2.bbedd785.png"},421:function(e,t,s){e.exports=s.p+"assets/img/getstarted3.eb3df6cb.png"},508:function(e,t,s){"use strict";s.r(t);var a=s(13),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("a-social"),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(416),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(417),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(418),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(419),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(420),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(421),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/14.5b0bdbea.js b/assets/js/14.0f1e7f55.js similarity index 92% rename from assets/js/14.5b0bdbea.js rename to assets/js/14.0f1e7f55.js index deded44c..f3f2e039 100644 --- a/assets/js/14.5b0bdbea.js +++ b/assets/js/14.0f1e7f55.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[14,30],{304:function(t,e,r){},311:function(t,e,r){"use strict";r(304)},334:function(t,e,r){},354:function(t,e,r){"use strict";r.r(e);var n={props:{href:String},computed:{isExternal(){return this.href.startsWith("http")}}},s=(r(311),r(17)),u=Object(s.a)(n,(function(){var t=this,e=t._self._c;return t.href&&!t.isExternal?e("router-link",{staticClass:"a-button",attrs:{to:t.href}},[t._t("default")],2):t.href&&t.isExternal?e("a",{staticClass:"a-button",attrs:{href:t.href,target:"_blank"}},[t._t("default")],2):e("button",{staticClass:"a-button",on:{click:function(e){return t.$emit("click")}}},[t._t("default")],2)}),[],!1,null,"4ef368cc",null);e.default=u.exports},425:function(t,e,r){"use strict";r(334)},463:function(t,e,r){"use strict";r.r(e);r(48);var n={components:{AButton:r(354).default},data:()=>({errors:[]}),methods:{send({target:t}){let{subject:e,content:r}=t;if(this.errors=[],!e.value)return this.errors.push("subject");if(!r.value)return this.errors.push("content");e=encodeURIComponent(e.value),r=encodeURIComponent(r.value);const n=document.createElement("a");n.href=`mailto:hey@visnalize.com?subject=${e}&body=${r}`,n.target="_blank",n.click(),this.errors=[]}}},s=(r(425),r(17)),u=Object(s.a)(n,(function(){var t=this,e=t._self._c;return e("form",{on:{submit:function(e){return e.preventDefault(),t.send.apply(null,arguments)}}},[e("div",[e("input",{class:{error:t.errors.includes("subject")},attrs:{type:"text",name:"subject",placeholder:"Subject",required:""}})]),t._v(" "),e("div",[e("textarea",{class:{error:t.errors.includes("content")},attrs:{name:"content",placeholder:"Content",required:""}})]),t._v(" "),e("div",[e("a-button",{attrs:{type:"submit"}},[t._v("Send")])],1)])}),[],!1,null,"34ac5d82",null);e.default=u.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[14,30],{304:function(t,e,r){},311:function(t,e,r){"use strict";r(304)},334:function(t,e,r){},354:function(t,e,r){"use strict";r.r(e);var n={props:{href:String},computed:{isExternal(){return this.href.startsWith("http")}}},s=(r(311),r(13)),u=Object(s.a)(n,(function(){var t=this,e=t._self._c;return t.href&&!t.isExternal?e("router-link",{staticClass:"a-button",attrs:{to:t.href}},[t._t("default")],2):t.href&&t.isExternal?e("a",{staticClass:"a-button",attrs:{href:t.href,target:"_blank"}},[t._t("default")],2):e("button",{staticClass:"a-button",on:{click:function(e){return t.$emit("click")}}},[t._t("default")],2)}),[],!1,null,"4ef368cc",null);e.default=u.exports},425:function(t,e,r){"use strict";r(334)},463:function(t,e,r){"use strict";r.r(e);r(48);var n={components:{AButton:r(354).default},data:()=>({errors:[]}),methods:{send({target:t}){let{subject:e,content:r}=t;if(this.errors=[],!e.value)return this.errors.push("subject");if(!r.value)return this.errors.push("content");e=encodeURIComponent(e.value),r=encodeURIComponent(r.value);const n=document.createElement("a");n.href=`mailto:hey@visnalize.com?subject=${e}&body=${r}`,n.target="_blank",n.click(),this.errors=[]}}},s=(r(425),r(13)),u=Object(s.a)(n,(function(){var t=this,e=t._self._c;return e("form",{on:{submit:function(e){return e.preventDefault(),t.send.apply(null,arguments)}}},[e("div",[e("input",{class:{error:t.errors.includes("subject")},attrs:{type:"text",name:"subject",placeholder:"Subject",required:""}})]),t._v(" "),e("div",[e("textarea",{class:{error:t.errors.includes("content")},attrs:{name:"content",placeholder:"Content",required:""}})]),t._v(" "),e("div",[e("a-button",{attrs:{type:"submit"}},[t._v("Send")])],1)])}),[],!1,null,"34ac5d82",null);e.default=u.exports}}]); \ No newline at end of file diff --git a/assets/js/15.cb57cc7e.js b/assets/js/15.9d6073db.js similarity index 94% rename from assets/js/15.cb57cc7e.js rename to assets/js/15.9d6073db.js index 44c01023..45967f87 100644 --- a/assets/js/15.cb57cc7e.js +++ b/assets/js/15.9d6073db.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[15],{339:function(t,s,e){},340:function(t,s,e){},432:function(t,s){t.exports={google:{href:"https://play.google.com/store/apps/dev?id=7119371547095400132",src:"/assets/google-play.png",alt:"Google Play"},youtube:{href:"https://www.youtube.com/c/visnalize",src:"/assets/youtube.png",alt:"Youtube"},github:{href:"https://github.com/Visnalize",src:"/assets/github.png",alt:"Github"},twitter:{href:"https://twitter.com/visnalize",src:"/assets/twitter.png",alt:"Twitter"}}},433:function(t,s,e){"use strict";e(339)},434:function(t,s,e){"use strict";e(340)},466:function(t,s,e){"use strict";e.r(s);var i=e(432),r=e.n(i),n={data:()=>({links:r.a})},o=(e(433),e(434),e(17)),a=Object(o.a)(n,(function(){var t=this._self._c;return t("footer",[t("ul",{staticClass:"link-buttons"},this._l(this.links,(function(s,e){return t("li",{key:e},[t("a",{attrs:{href:s.href,"data-social":e,target:"_blank",rel:"noopener noreferrer"}},[t("img",{attrs:{src:s.src,alt:e,width:"24",height:"24"}})])])})),0),this._v(" "),t("div",[this._v("Copyright © 2021 - present. All Rights Reserved")])])}),[],!1,null,"e20cca60",null);s.default=a.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[15],{339:function(t,s,e){},340:function(t,s,e){},432:function(t,s){t.exports={google:{href:"https://play.google.com/store/apps/dev?id=7119371547095400132",src:"/assets/google-play.png",alt:"Google Play"},youtube:{href:"https://www.youtube.com/c/visnalize",src:"/assets/youtube.png",alt:"Youtube"},github:{href:"https://github.com/Visnalize",src:"/assets/github.png",alt:"Github"},twitter:{href:"https://twitter.com/visnalize",src:"/assets/twitter.png",alt:"Twitter"}}},433:function(t,s,e){"use strict";e(339)},434:function(t,s,e){"use strict";e(340)},466:function(t,s,e){"use strict";e.r(s);var i=e(432),r=e.n(i),n={data:()=>({links:r.a})},o=(e(433),e(434),e(13)),a=Object(o.a)(n,(function(){var t=this._self._c;return t("footer",[t("ul",{staticClass:"link-buttons"},this._l(this.links,(function(s,e){return t("li",{key:e},[t("a",{attrs:{href:s.href,"data-social":e,target:"_blank",rel:"noopener noreferrer"}},[t("img",{attrs:{src:s.src,alt:e,width:"24",height:"24"}})])])})),0),this._v(" "),t("div",[this._v("Copyright © 2021 - present. All Rights Reserved")])])}),[],!1,null,"e20cca60",null);s.default=a.exports}}]); \ No newline at end of file diff --git a/assets/js/16.a84d4024.js b/assets/js/16.02c91c53.js similarity index 96% rename from assets/js/16.a84d4024.js rename to assets/js/16.02c91c53.js index bcf1707e..1547d3b7 100644 --- a/assets/js/16.a84d4024.js +++ b/assets/js/16.02c91c53.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[16],{313:function(t,e,n){"use strict";function s(t,e){var n;return"string"==typeof t?e?(null!==(n=e[t])&&void 0!==n||(e[t]=document.querySelectorAll(t)),t=e[t]):t=document.querySelectorAll(t):t instanceof Element&&(t=[t]),Array.from(t||[])}n.d(e,"a",(function(){return s}))},341:function(t,e,n){},430:function(t,e,n){"use strict";n.d(e,"a",(function(){return s}));const s=t=>"function"==typeof t},435:function(t,e,n){"use strict";n(341)},452:function(t,e,n){"use strict";n.r(e);var s=n(313),o=n(430);const r={any:0,all:1};var i={mounted(){const t=this.$root.$el.querySelector(".navbar");!function(t,e,{root:n,margin:i,amount:c="any"}={}){if("undefined"==typeof IntersectionObserver)return()=>{};const a=Object(s.a)(t),l=new WeakMap,u=new IntersectionObserver(t=>{t.forEach(t=>{const n=l.get(t.target);if(t.isIntersecting!==Boolean(n))if(t.isIntersecting){const n=e(t);Object(o.a)(n)?l.set(t.target,n):u.unobserve(t.target)}else n&&(n(t),l.delete(t.target))})},{root:n,rootMargin:i,threshold:"number"==typeof c?c:r[c]});a.forEach(t=>u.observe(t))}(this.$el,()=>(t.classList.remove("show"),()=>{t.classList.add("show")}))},methods:{scroll(){window.scrollTo({top:this.$el.scrollHeight})}}},c=(n(435),n(17)),a=Object(c.a)(i,(function(){var t=this._self._c;return t("section",[t("button",{on:{click:this.scroll}},[this._m(0),this._v(" "),t("span",[this._v("Visnalize")])]),this._v(" "),this._m(1),this._v(" "),t("button",{staticClass:"indicator",attrs:{"aria-label":"scroll down"},on:{click:this.scroll}})])}),[function(){var t=this._self._c;return t("span",[t("img",{attrs:{src:"/assets/logo.png",alt:"Visnalize"}})])},function(){var t=this._self._c;return t("h1",[this._v("Recreating "),t("b",[this._v("Nostalgia")]),this._v(" for "),t("b",[this._v("Entertainment")])])}],!1,null,"a9ad30d6",null);e.default=a.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[16],{313:function(t,e,n){"use strict";function s(t,e){var n;return"string"==typeof t?e?(null!==(n=e[t])&&void 0!==n||(e[t]=document.querySelectorAll(t)),t=e[t]):t=document.querySelectorAll(t):t instanceof Element&&(t=[t]),Array.from(t||[])}n.d(e,"a",(function(){return s}))},341:function(t,e,n){},430:function(t,e,n){"use strict";n.d(e,"a",(function(){return s}));const s=t=>"function"==typeof t},435:function(t,e,n){"use strict";n(341)},452:function(t,e,n){"use strict";n.r(e);var s=n(313),o=n(430);const r={any:0,all:1};var i={mounted(){const t=this.$root.$el.querySelector(".navbar");!function(t,e,{root:n,margin:i,amount:c="any"}={}){if("undefined"==typeof IntersectionObserver)return()=>{};const a=Object(s.a)(t),l=new WeakMap,u=new IntersectionObserver(t=>{t.forEach(t=>{const n=l.get(t.target);if(t.isIntersecting!==Boolean(n))if(t.isIntersecting){const n=e(t);Object(o.a)(n)?l.set(t.target,n):u.unobserve(t.target)}else n&&(n(t),l.delete(t.target))})},{root:n,rootMargin:i,threshold:"number"==typeof c?c:r[c]});a.forEach(t=>u.observe(t))}(this.$el,()=>(t.classList.remove("show"),()=>{t.classList.add("show")}))},methods:{scroll(){window.scrollTo({top:this.$el.scrollHeight})}}},c=(n(435),n(13)),a=Object(c.a)(i,(function(){var t=this._self._c;return t("section",[t("button",{on:{click:this.scroll}},[this._m(0),this._v(" "),t("span",[this._v("Visnalize")])]),this._v(" "),this._m(1),this._v(" "),t("button",{staticClass:"indicator",attrs:{"aria-label":"scroll down"},on:{click:this.scroll}})])}),[function(){var t=this._self._c;return t("span",[t("img",{attrs:{src:"/assets/logo.png",alt:"Visnalize"}})])},function(){var t=this._self._c;return t("h1",[this._v("Recreating "),t("b",[this._v("Nostalgia")]),this._v(" for "),t("b",[this._v("Entertainment")])])}],!1,null,"a9ad30d6",null);e.default=a.exports}}]); \ No newline at end of file diff --git a/assets/js/17.bf358cab.js b/assets/js/17.02d61573.js similarity index 99% rename from assets/js/17.bf358cab.js rename to assets/js/17.02d61573.js index 3849c8df..9ed447ec 100644 --- a/assets/js/17.bf358cab.js +++ b/assets/js/17.02d61573.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[17],{379:function(e,t,a){e.exports=a.p+"assets/img/ad-networks.647b5d83.png"},380:function(e,t,a){e.exports=a.p+"assets/img/ad-formats-admob.4883adfe.png"},381:function(e,t,a){e.exports=a.p+"assets/img/ad-formats-adsense.457df8d7.png"},382:function(e,t,a){e.exports=a.p+"assets/img/my-ad-formats.1b93ee12.png"},477:function(e,t,a){"use strict";a.r(t);var o=a(17),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(379),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(380),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(381),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("google-ads"),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(382),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([[17],{379:function(e,t,a){e.exports=a.p+"assets/img/ad-networks.647b5d83.png"},380:function(e,t,a){e.exports=a.p+"assets/img/ad-formats-admob.4883adfe.png"},381:function(e,t,a){e.exports=a.p+"assets/img/ad-formats-adsense.457df8d7.png"},382:function(e,t,a){e.exports=a.p+"assets/img/my-ad-formats.1b93ee12.png"},477:function(e,t,a){"use strict";a.r(t);var o=a(13),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(379),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(380),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(381),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("google-ads"),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(382),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/18.2fd4c19a.js b/assets/js/18.89846cbb.js similarity index 88% rename from assets/js/18.2fd4c19a.js rename to assets/js/18.89846cbb.js index e50232ef..a84d1778 100644 --- a/assets/js/18.2fd4c19a.js +++ b/assets/js/18.89846cbb.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[18],{390:function(e,t,a){e.exports=a.p+"assets/img/roms.a020f50d.jpg"},391:function(e,t,a){e.exports=a.p+"assets/img/gamesdb.3f817468.jpg"},392:function(e,t,a){e.exports=a.p+"assets/img/insert-game-data.1bcf0446.jpg"},393:function(e,t,a){e.exports=a.p+"assets/img/insert-game-data2.ae992983.jpg"},484:function(e,t,a){"use strict";a.r(t);var o=a(17),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(390),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(391),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(392),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(393),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([[18],{386:function(e,t,a){e.exports=a.p+"assets/img/roms.a020f50d.jpg"},387:function(e,t,a){e.exports=a.p+"assets/img/gamesdb.3f817468.jpg"},388:function(e,t,a){e.exports=a.p+"assets/img/insert-game-data.1bcf0446.jpg"},389:function(e,t,a){e.exports=a.p+"assets/img/insert-game-data2.ae992983.jpg"},482:function(e,t,a){"use strict";a.r(t);var o=a(13),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(386),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(387),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(388),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(389),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/19.4d563810.js b/assets/js/19.f8195d4e.js similarity index 92% rename from assets/js/19.4d563810.js rename to assets/js/19.f8195d4e.js index d7e89eb4..e8eb3cd6 100644 --- a/assets/js/19.4d563810.js +++ b/assets/js/19.f8195d4e.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[19],{386:function(e,t,o){e.exports=o.p+"assets/img/win7simu-iframe-browser.ddc0ac3e.png"},387:function(e,t,o){e.exports=o.p+"assets/img/iframe-example.2e94f1f8.png"},388:function(e,t,o){e.exports=o.p+"assets/img/install-requestly-edge.b2cce739.png"},389:function(e,t,o){e.exports=o.p+"assets/img/import-win7simu-requestly-rules.a4498b88.png"},482:function(e,t,o){"use strict";o.r(t);var s=o(17),i=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-to-get-iframes-to-load-any-websites"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#how-to-get-iframes-to-load-any-websites"}},[e._v("#")]),e._v(" How to get iframes to load any websites")]),e._v(" "),t("m-blog-meta"),e._v(" "),t("p",[t("img",{attrs:{src:"/assets/covers/load-any-websites-in-iframes.png",alt:"The infinite iframe"}})]),e._v(" "),t("center",[t("a-button",{attrs:{href:"#step-by-step-guide"}},[e._v("Jump to the guide")])],1),e._v(" "),t("p",[e._v("As mentioned in my previous post regarding "),t("RouterLink",{attrs:{to:"/blog/building-win7-simu.html#iframe-issue"}},[e._v("the issue")]),e._v(" that the Win7 Simu's web browsers (using "),t("code",[e._v("iframes")]),e._v(') have been suffering from, I have been trying hard to come up with a way to solve it, from all the "google-ing", digging the source code of potential solutions, to a lot of trials and failures, I have finally come to the solutions that work. These solutions do not dismiss the issue completely, but they just seem to work better, in one way or another, than the earlier approach using a proxy server.')],1),e._v(" "),t("p",[e._v("In this post, I'm gonna share the solution I have come to for the "),t("strong",[e._v("Web")]),e._v(" version of Win7 Simu. The solution for the "),t("strong",[e._v("Android")]),e._v(" platform is different and may be shared in another post.")]),e._v(" "),t("h2",{attrs:{id:"the-scenario"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#the-scenario"}},[e._v("#")]),e._v(" The scenario")]),e._v(" "),t("p",[t("img",{attrs:{src:o(386),alt:"Cannot load website in iframe"}})]),e._v(" "),t("p",[e._v("As I have shared in the previous "),t("RouterLink",{attrs:{to:"/blog/building-win7-simu.html"}},[e._v("blog post")]),e._v(", Win7 Simu is made up of web techs, and "),t("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe",target:"_blank",rel:"noopener noreferrer"}},[e._v("iframe"),t("OutboundLink")],1),e._v(" has been the technique of choice to simulate a web browser's functionalities due to its similar capabilities. To put it simply, iframe is capable of embedding one website into another, allowing controlling the embedded website to some extent. However, due to security risks, the website owners may restrict this capability or not allow the embedding to happen at all, by setting the "),t("code",[e._v("X-Frame-Options")]),e._v(" header to "),t("code",[e._v("sameorigin")]),e._v(" and/or specifying the "),t("code",[e._v("Content-Security-Policy")]),e._v(" header constraint on the response received by requests to load their website.")],1),e._v(" "),t("p",[e._v("For example, if an iframe wants to load a Google search page at "),t("code",[e._v("https://google.com")]),e._v(", it will make a request to that URL, Google will respond to the request with the necessary data to present itself as a web page, including the "),t("code",[e._v("X-Frame-Options")]),e._v(" and/or "),t("code",[e._v("Content-Security-Policy")]),e._v(" headers in the response. If the iframe receives the "),t("code",[e._v("X-Frame-Options")]),e._v(" with the "),t("code",[e._v("sameorigin")]),e._v(" value, or with some cross-origin restriction rules in the "),t("code",[e._v("Content-Security-Policy")]),e._v(", the web page cannot be shown in the iframe.")]),e._v(" "),t("p",[t("img",{attrs:{src:o(387),alt:"Iframe example"}})]),e._v(" "),t("p",[t("em",[e._v("(Illustration poorly crafted using "),t("a",{attrs:{href:"https://excalidraw.com/",target:"_blank",rel:"noopener noreferrer"}},[e._v("Excalidraw"),t("OutboundLink")],1),e._v(")")])]),e._v(" "),t("p",[e._v("And this is a common practice for the majority of websites, they don't owe you anything to let you run loose and potentially cause damage to their business.")]),e._v(" "),t("p",[e._v("So I'm out of luck then? There is no way to simulate a web browser's functionalities in a web environment? Well, more or less. With the problem identified, there is still a chance to come up with a solution, and the solution I have come to is "),t("strong",[e._v("intercepting the response")]),e._v(" to remove these two headers so that the iframe can load any website normally. For this, a browser extension is required as it is the only possible way to intercept requests/responses coming through the user's web browser without much security concern. Follow the below steps to implement this solution on your device.")]),e._v(" "),t("google-ads"),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("div",{staticClass:"custom-block warning"},[t("p",{staticClass:"custom-block-title"},[e._v("Note")]),e._v(" "),t("p",[e._v("This guide is not applicable for Android. If you are using the Android version, skip it to save some minutes of your life 😇")])]),e._v(" "),t("h3",{attrs:{id:"_1-install-requestly-browser-extension"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#_1-install-requestly-browser-extension"}},[e._v("#")]),e._v(" 1. Install Requestly browser extension")]),e._v(" "),t("ul",[t("li",[e._v("Visit "),t("a",{attrs:{href:"https://requestly.io/",target:"_blank",rel:"noopener noreferrer"}},[e._v("Requestly home page"),t("OutboundLink")],1)]),e._v(" "),t("li",[e._v("Download the extension for your browser of choice, eg. pick the Chrome version of the extension if you are using Chrome, Firefox extension for Firefox, Edge add-on for Edge etc.")])]),e._v(" "),t("p",[t("img",{attrs:{src:o(388),alt:"Install Requestly on Edge"}})]),e._v(" "),t("h3",{attrs:{id:"_2-import-the-predefined-rules"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#_2-import-the-predefined-rules"}},[e._v("#")]),e._v(" 2. Import the predefined rules")]),e._v(" "),t("ul",[t("li",[e._v("Download "),t("a",{attrs:{href:"/assets/win7-simu-requestly.json",download:""}},[e._v("this JSON file")]),e._v(" which contains the Requestly rules to make Win7 Simu's web browers capable of loading any websites.")]),e._v(" "),t("li",[e._v("Go to "),t("a",{attrs:{href:"https://app.requestly.io/rules/my-rules",target:"_blank",rel:"noopener noreferrer"}},[e._v("Requestly app page"),t("OutboundLink")],1)]),e._v(" "),t("li",[e._v("Upload the JSON file to import the rules.")])]),e._v(" "),t("p",[t("img",{attrs:{src:o(389),alt:"Import Win7 Simu Requestly rules"}})]),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("There is no step 3. From now on, you should be able to view any websites in Win7 Simu's web browsers without problems.")]),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([[19],{390:function(e,t,o){e.exports=o.p+"assets/img/win7simu-iframe-browser.ddc0ac3e.png"},391:function(e,t,o){e.exports=o.p+"assets/img/iframe-example.2e94f1f8.png"},392:function(e,t,o){e.exports=o.p+"assets/img/install-requestly-edge.b2cce739.png"},393:function(e,t,o){e.exports=o.p+"assets/img/import-win7simu-requestly-rules.a4498b88.png"},483:function(e,t,o){"use strict";o.r(t);var s=o(13),i=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-to-get-iframes-to-load-any-websites"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#how-to-get-iframes-to-load-any-websites"}},[e._v("#")]),e._v(" How to get iframes to load any websites")]),e._v(" "),t("m-blog-meta"),e._v(" "),t("p",[t("img",{attrs:{src:"/assets/covers/load-any-websites-in-iframes.png",alt:"The infinite iframe"}})]),e._v(" "),t("center",[t("a-button",{attrs:{href:"#step-by-step-guide"}},[e._v("Jump to the guide")])],1),e._v(" "),t("p",[e._v("As mentioned in my previous post regarding "),t("RouterLink",{attrs:{to:"/blog/building-win7-simu.html#iframe-issue"}},[e._v("the issue")]),e._v(" that the Win7 Simu's web browsers (using "),t("code",[e._v("iframes")]),e._v(') have been suffering from, I have been trying hard to come up with a way to solve it, from all the "google-ing", digging the source code of potential solutions, to a lot of trials and failures, I have finally come to the solutions that work. These solutions do not dismiss the issue completely, but they just seem to work better, in one way or another, than the earlier approach using a proxy server.')],1),e._v(" "),t("p",[e._v("In this post, I'm gonna share the solution I have come to for the "),t("strong",[e._v("Web")]),e._v(" version of Win7 Simu. The solution for the "),t("strong",[e._v("Android")]),e._v(" platform is different and may be shared in another post.")]),e._v(" "),t("h2",{attrs:{id:"the-scenario"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#the-scenario"}},[e._v("#")]),e._v(" The scenario")]),e._v(" "),t("p",[t("img",{attrs:{src:o(390),alt:"Cannot load website in iframe"}})]),e._v(" "),t("p",[e._v("As I have shared in the previous "),t("RouterLink",{attrs:{to:"/blog/building-win7-simu.html"}},[e._v("blog post")]),e._v(", Win7 Simu is made up of web techs, and "),t("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe",target:"_blank",rel:"noopener noreferrer"}},[e._v("iframe"),t("OutboundLink")],1),e._v(" has been the technique of choice to simulate a web browser's functionalities due to its similar capabilities. To put it simply, iframe is capable of embedding one website into another, allowing controlling the embedded website to some extent. However, due to security risks, the website owners may restrict this capability or not allow the embedding to happen at all, by setting the "),t("code",[e._v("X-Frame-Options")]),e._v(" header to "),t("code",[e._v("sameorigin")]),e._v(" and/or specifying the "),t("code",[e._v("Content-Security-Policy")]),e._v(" header constraint on the response received by requests to load their website.")],1),e._v(" "),t("p",[e._v("For example, if an iframe wants to load a Google search page at "),t("code",[e._v("https://google.com")]),e._v(", it will make a request to that URL, Google will respond to the request with the necessary data to present itself as a web page, including the "),t("code",[e._v("X-Frame-Options")]),e._v(" and/or "),t("code",[e._v("Content-Security-Policy")]),e._v(" headers in the response. If the iframe receives the "),t("code",[e._v("X-Frame-Options")]),e._v(" with the "),t("code",[e._v("sameorigin")]),e._v(" value, or with some cross-origin restriction rules in the "),t("code",[e._v("Content-Security-Policy")]),e._v(", the web page cannot be shown in the iframe.")]),e._v(" "),t("p",[t("img",{attrs:{src:o(391),alt:"Iframe example"}})]),e._v(" "),t("p",[t("em",[e._v("(Illustration poorly crafted using "),t("a",{attrs:{href:"https://excalidraw.com/",target:"_blank",rel:"noopener noreferrer"}},[e._v("Excalidraw"),t("OutboundLink")],1),e._v(")")])]),e._v(" "),t("p",[e._v("And this is a common practice for the majority of websites, they don't owe you anything to let you run loose and potentially cause damage to their business.")]),e._v(" "),t("p",[e._v("So I'm out of luck then? There is no way to simulate a web browser's functionalities in a web environment? Well, more or less. With the problem identified, there is still a chance to come up with a solution, and the solution I have come to is "),t("strong",[e._v("intercepting the response")]),e._v(" to remove these two headers so that the iframe can load any website normally. For this, a browser extension is required as it is the only possible way to intercept requests/responses coming through the user's web browser without much security concern. Follow the below steps to implement this solution on your device.")]),e._v(" "),t("google-ads"),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("div",{staticClass:"custom-block warning"},[t("p",{staticClass:"custom-block-title"},[e._v("Note")]),e._v(" "),t("p",[e._v("This guide is not applicable for Android. If you are using the Android version, skip it to save some minutes of your life 😇")])]),e._v(" "),t("h3",{attrs:{id:"_1-install-requestly-browser-extension"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#_1-install-requestly-browser-extension"}},[e._v("#")]),e._v(" 1. Install Requestly browser extension")]),e._v(" "),t("ul",[t("li",[e._v("Visit "),t("a",{attrs:{href:"https://requestly.io/",target:"_blank",rel:"noopener noreferrer"}},[e._v("Requestly home page"),t("OutboundLink")],1)]),e._v(" "),t("li",[e._v("Download the extension for your browser of choice, eg. pick the Chrome version of the extension if you are using Chrome, Firefox extension for Firefox, Edge add-on for Edge etc.")])]),e._v(" "),t("p",[t("img",{attrs:{src:o(392),alt:"Install Requestly on Edge"}})]),e._v(" "),t("h3",{attrs:{id:"_2-import-the-predefined-rules"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#_2-import-the-predefined-rules"}},[e._v("#")]),e._v(" 2. Import the predefined rules")]),e._v(" "),t("ul",[t("li",[e._v("Download "),t("a",{attrs:{href:"/assets/win7-simu-requestly.json",download:""}},[e._v("this JSON file")]),e._v(" which contains the Requestly rules to make Win7 Simu's web browers capable of loading any websites.")]),e._v(" "),t("li",[e._v("Go to "),t("a",{attrs:{href:"https://app.requestly.io/rules/my-rules",target:"_blank",rel:"noopener noreferrer"}},[e._v("Requestly app page"),t("OutboundLink")],1)]),e._v(" "),t("li",[e._v("Upload the JSON file to import the rules.")])]),e._v(" "),t("p",[t("img",{attrs:{src:o(393),alt:"Import Win7 Simu Requestly rules"}})]),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("There is no step 3. From now on, you should be able to view any websites in Win7 Simu's web browsers without problems.")]),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/20.a6a4da15.js b/assets/js/20.fd61a8b9.js similarity index 99% rename from assets/js/20.a6a4da15.js rename to assets/js/20.fd61a8b9.js index 8b802f87..c519501b 100644 --- a/assets/js/20.a6a4da15.js +++ b/assets/js/20.fd61a8b9.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[20],{412:function(t,s,n){t.exports=n.p+"assets/img/guide1.1c974537.png"},413:function(t,s,n){t.exports=n.p+"assets/img/guide2.9ec5c57e.png"},414:function(t,s,n){t.exports=n.p+"assets/img/guide3.9f0beb50.png"},415:function(t,s,n){t.exports=n.p+"assets/img/guide4.40876874.png"},507:function(t,s,n){"use strict";n.r(s);var e=n(17),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("a-social"),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(412),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(413),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(414),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(415),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("google-ads"),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([[20],{412:function(t,s,n){t.exports=n.p+"assets/img/guide1.1c974537.png"},413:function(t,s,n){t.exports=n.p+"assets/img/guide2.9ec5c57e.png"},414:function(t,s,n){t.exports=n.p+"assets/img/guide3.9f0beb50.png"},415:function(t,s,n){t.exports=n.p+"assets/img/guide4.40876874.png"},507:function(t,s,n){"use strict";n.r(s);var e=n(13),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("a-social"),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(412),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(413),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(414),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(415),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("google-ads"),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.990ec1da.js b/assets/js/21.c81bbf7f.js similarity index 88% rename from assets/js/21.990ec1da.js rename to assets/js/21.c81bbf7f.js index 8c09dcc7..5a46b65f 100644 --- a/assets/js/21.990ec1da.js +++ b/assets/js/21.c81bbf7f.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[21,31],{287:function(t,o,l){},291:function(t,o,l){"use strict";l.r(o);var n={props:{label:String,icon:String}},e=(l(293),l(17)),i=Object(e.a)(n,(function(){var t=this,o=t._self._c;return o("button",{attrs:{"aria-label":t.label,title:t.label},on:{click:function(o){return t.$emit("click")}}},[o("v-icon",{attrs:{name:t.icon}})],1)}),[],!1,null,"0f94617e",null);o.default=i.exports},293:function(t,o,l){"use strict";l(287)},356:function(t,o,l){"use strict";l.r(o);var n={components:{AControl:l(291).default},data:()=>({isScrolling:!1}),mounted(){window.addEventListener("scroll",this.handleScroll)},beforeDestroy(){window.removeEventListener("scroll",this.handleScroll)},methods:{scrollTop(){window.scrollTo({top:0,behavior:"smooth"})},handleScroll(){this.isScrolling=window.scrollY>0}}},e=l(17),i=Object(e.a)(n,(function(){return(0,this._self._c)("a-control",{class:{active:this.isScrolling},attrs:{icon:"arrow-up",label:"Back to top"},on:{click:this.scrollTop}})}),[],!1,null,"f196a1e0",null);o.default=i.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[21,31],{287:function(t,o,l){},291:function(t,o,l){"use strict";l.r(o);var n={props:{label:String,icon:String}},e=(l(293),l(13)),i=Object(e.a)(n,(function(){var t=this,o=t._self._c;return o("button",{attrs:{"aria-label":t.label,title:t.label},on:{click:function(o){return t.$emit("click")}}},[o("v-icon",{attrs:{name:t.icon}})],1)}),[],!1,null,"0f94617e",null);o.default=i.exports},293:function(t,o,l){"use strict";l(287)},356:function(t,o,l){"use strict";l.r(o);var n={components:{AControl:l(291).default},data:()=>({isScrolling:!1}),mounted(){window.addEventListener("scroll",this.handleScroll)},beforeDestroy(){window.removeEventListener("scroll",this.handleScroll)},methods:{scrollTop(){window.scrollTo({top:0,behavior:"smooth"})},handleScroll(){this.isScrolling=window.scrollY>0}}},e=l(13),i=Object(e.a)(n,(function(){return(0,this._self._c)("a-control",{class:{active:this.isScrolling},attrs:{icon:"arrow-up",label:"Back to top"},on:{click:this.scrollTop}})}),[],!1,null,"f196a1e0",null);o.default=i.exports}}]); \ No newline at end of file diff --git a/assets/js/22.89abef91.js b/assets/js/22.da52cca7.js similarity index 88% rename from assets/js/22.89abef91.js rename to assets/js/22.da52cca7.js index ee44d0bb..216ea92e 100644 --- a/assets/js/22.89abef91.js +++ b/assets/js/22.da52cca7.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[22,31],{287:function(t,e,n){},291:function(t,e,n){"use strict";n.r(e);var o={props:{label:String,icon:String}},a=(n(293),n(17)),s=Object(a.a)(o,(function(){var t=this,e=t._self._c;return e("button",{attrs:{"aria-label":t.label,title:t.label},on:{click:function(e){return t.$emit("click")}}},[e("v-icon",{attrs:{name:t.icon}})],1)}),[],!1,null,"0f94617e",null);e.default=s.exports},293:function(t,e,n){"use strict";n(287)},358:function(t,e,n){"use strict";n.r(e);var o={components:{AControl:n(291).default},data:()=>({state:"",isSupported:!0}),computed:{active(){return"playing"===this.state||"resumed"===this.state}},methods:{handleStateChange(t){this.state=t},setSupported(t){this.isSupported=t}}},a=n(17),s=Object(a.a)(o,(function(){var t=this,e=t._self._c;return e("text-to-speech",{on:{statechange:t.handleStateChange,supported:t.setSupported},scopedSlots:t._u([{key:"default",fn:function({toggle:n}){return[e("a-control",{class:{active:t.active},attrs:{icon:t.isSupported?"volume-2":"volume-x",label:"Text to speech"},on:{click:n}})]}}])})}),[],!1,null,"31bedc59",null);e.default=s.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[22,31],{287:function(t,e,n){},291:function(t,e,n){"use strict";n.r(e);var o={props:{label:String,icon:String}},a=(n(293),n(13)),s=Object(a.a)(o,(function(){var t=this,e=t._self._c;return e("button",{attrs:{"aria-label":t.label,title:t.label},on:{click:function(e){return t.$emit("click")}}},[e("v-icon",{attrs:{name:t.icon}})],1)}),[],!1,null,"0f94617e",null);e.default=s.exports},293:function(t,e,n){"use strict";n(287)},358:function(t,e,n){"use strict";n.r(e);var o={components:{AControl:n(291).default},data:()=>({state:"",isSupported:!0}),computed:{active(){return"playing"===this.state||"resumed"===this.state}},methods:{handleStateChange(t){this.state=t},setSupported(t){this.isSupported=t}}},a=n(13),s=Object(a.a)(o,(function(){var t=this,e=t._self._c;return e("text-to-speech",{on:{statechange:t.handleStateChange,supported:t.setSupported},scopedSlots:t._u([{key:"default",fn:function({toggle:n}){return[e("a-control",{class:{active:t.active},attrs:{icon:t.isSupported?"volume-2":"volume-x",label:"Text to speech"},on:{click:n}})]}}])})}),[],!1,null,"31bedc59",null);e.default=s.exports}}]); \ No newline at end of file diff --git a/assets/js/23.c5fb20c7.js b/assets/js/23.64158f90.js similarity index 87% rename from assets/js/23.c5fb20c7.js rename to assets/js/23.64158f90.js index daa547b8..b760f886 100644 --- a/assets/js/23.c5fb20c7.js +++ b/assets/js/23.64158f90.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[23,31],{287:function(t,e,s){},291:function(t,e,s){"use strict";s.r(e);var i={props:{label:String,icon:String}},o=(s(293),s(17)),a=Object(o.a)(i,(function(){var t=this,e=t._self._c;return e("button",{attrs:{"aria-label":t.label,title:t.label},on:{click:function(e){return t.$emit("click")}}},[e("v-icon",{attrs:{name:t.icon}})],1)}),[],!1,null,"0f94617e",null);e.default=a.exports},293:function(t,e,s){"use strict";s(287)},357:function(t,e,s){"use strict";s.r(e);var i={components:{AControl:s(291).default},data:()=>({isDark:!1,label:"Toggle theme"}),mounted(){this.isDark="true"===localStorage.getItem("darkMode"),this.isDark&&this.$root.$el.classList.add("is-dark")},methods:{toggle(){this.$root.$el.classList.toggle("is-dark"),this.isDark=!this.isDark,localStorage.setItem("darkMode",this.isDark)}}},o=s(17),a=Object(o.a)(i,(function(){return(0,this._self._c)("a-control",{attrs:{icon:this.isDark?"moon":"sun",label:"Toggle theme"},on:{click:this.toggle}})}),[],!1,null,"4b3575a2",null);e.default=a.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[23,31],{287:function(t,e,s){},291:function(t,e,s){"use strict";s.r(e);var i={props:{label:String,icon:String}},o=(s(293),s(13)),a=Object(o.a)(i,(function(){var t=this,e=t._self._c;return e("button",{attrs:{"aria-label":t.label,title:t.label},on:{click:function(e){return t.$emit("click")}}},[e("v-icon",{attrs:{name:t.icon}})],1)}),[],!1,null,"0f94617e",null);e.default=a.exports},293:function(t,e,s){"use strict";s(287)},357:function(t,e,s){"use strict";s.r(e);var i={components:{AControl:s(291).default},data:()=>({isDark:!1,label:"Toggle theme"}),mounted(){this.isDark="true"===localStorage.getItem("darkMode"),this.isDark&&this.$root.$el.classList.add("is-dark")},methods:{toggle(){this.$root.$el.classList.toggle("is-dark"),this.isDark=!this.isDark,localStorage.setItem("darkMode",this.isDark)}}},o=s(13),a=Object(o.a)(i,(function(){return(0,this._self._c)("a-control",{attrs:{icon:this.isDark?"moon":"sun",label:"Toggle theme"},on:{click:this.toggle}})}),[],!1,null,"4b3575a2",null);e.default=a.exports}}]); \ No newline at end of file diff --git a/assets/js/24.49527bd5.js b/assets/js/24.44596632.js similarity index 92% rename from assets/js/24.49527bd5.js rename to assets/js/24.44596632.js index 76b93165..4fd06ce9 100644 --- a/assets/js/24.49527bd5.js +++ b/assets/js/24.44596632.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[24],{295:function(t,n,s){},298:function(t,n,s){"use strict";function a(t,n="-"){return t.split(n).map(t=>t.charAt(0).toUpperCase()+t.slice(1)).join(" ")}s.d(n,"a",(function(){return a}))},302:function(t,n,s){"use strict";s(295)},308:function(t,n,s){"use strict";s.r(n);var a=s(298),r={props:{tags:[String,Array],showIcon:Boolean},computed:{_tags(){return Array.isArray(this.tags)?this.tags:[this.tags]}},methods:{pascalize:a.a}},i=(s(302),s(17)),o=Object(i.a)(r,(function(){var t=this,n=t._self._c;return n("div",[t.showIcon?n("v-icon",{attrs:{name:"tag"}}):t._e(),t._v(" "),n("ul",t._l(t._tags,(function(s){return n("li",{key:s},[n("router-link",{attrs:{to:"/blog/tag/"+s}},[t._v("\n "+t._s(t.pascalize(s))+"\n ")])],1)})),0)],1)}),[],!1,null,"451c5fa4",null);n.default=o.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[24],{295:function(t,n,s){},298:function(t,n,s){"use strict";function a(t,n="-"){return t.split(n).map(t=>t.charAt(0).toUpperCase()+t.slice(1)).join(" ")}s.d(n,"a",(function(){return a}))},302:function(t,n,s){"use strict";s(295)},308:function(t,n,s){"use strict";s.r(n);var a=s(298),r={props:{tags:[String,Array],showIcon:Boolean},computed:{_tags(){return Array.isArray(this.tags)?this.tags:[this.tags]}},methods:{pascalize:a.a}},i=(s(302),s(13)),o=Object(i.a)(r,(function(){var t=this,n=t._self._c;return n("div",[t.showIcon?n("v-icon",{attrs:{name:"tag"}}):t._e(),t._v(" "),n("ul",t._l(t._tags,(function(s){return n("li",{key:s},[n("router-link",{attrs:{to:"/blog/tag/"+s}},[t._v("\n "+t._s(t.pascalize(s))+"\n ")])],1)})),0)],1)}),[],!1,null,"451c5fa4",null);n.default=o.exports}}]); \ No newline at end of file diff --git a/assets/js/25.a969c908.js b/assets/js/25.ab19059d.js similarity index 98% rename from assets/js/25.a969c908.js rename to assets/js/25.ab19059d.js index cc4c2a9d..e27fcb99 100644 --- a/assets/js/25.a969c908.js +++ b/assets/js/25.ab19059d.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[25],{394:function(e,t,a){e.exports=a.p+"assets/img/visnalize-com-growth.67fc9dc7.jpg"},395:function(e,t,a){e.exports=a.p+"assets/img/win7-simu-growth.6ba88ded.jpg"},396:function(e,t,a){e.exports=a.p+"assets/img/brick-1100-growth.cd8f231c.jpg"},487:function(e,t,a){"use strict";a.r(t);var r=a(17),i=Object(r.a)({},(function(){var e=this,t=e._self._c;return t("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[t("h1",{attrs:{id:"visnalize-year-in-review-2023"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#visnalize-year-in-review-2023"}},[e._v("#")]),e._v(" Visnalize year in review - 2023")]),e._v(" "),t("m-blog-meta"),e._v(" "),t("p",[t("img",{attrs:{src:"https://images.unsplash.com/photo-1579952775264-625f17561a5d?auto=format&fit=crop&w=740&q=80",alt:"Ho Chi Minh new year firework"}})]),e._v(" "),t("p",[t("em",[e._v("Cover image by Streetwindy via "),t("a",{attrs:{href:"https://unsplash.com/photos/fireworks-display-over-city-buildings-during-night-time-rYIrNpFFilI",target:"_blank",rel:"noopener noreferrer"}},[e._v("Unsplash"),t("OutboundLink")],1)])]),e._v(" "),t("p",[e._v('Last year, I initiated a habit of writing a "year in review" post for '),t("RouterLink",{attrs:{to:"/blog/win7-simu-year-in-review-2022.html"}},[e._v("Win7 Simu")]),e._v(". It was a great way to reflect on the year and see what I have accomplished. I decided to do it again this year, however, this time I will write about Visnalize as a whole, since we now have more than one product, it will probably be more interesting to have a look at a bigger picture.")],1),e._v(" "),t("p",[e._v("Let's not waste any more time and get right into it.")]),e._v(" "),t("h2",{attrs:{id:"the-amazing-numbers"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#the-amazing-numbers"}},[e._v("#")]),e._v(" The amazing numbers")]),e._v(" "),t("h3",{attrs:{id:"visnalize-com"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#visnalize-com"}},[e._v("#")]),e._v(" Visnalize(.com)")]),e._v(" "),t("p",[t("img",{attrs:{src:a(394),alt:"Visnalize.com's growth"}})]),e._v(" "),t("ul",[t("li",[t("strong",[e._v("6")]),e._v(" new blog posts published")]),e._v(" "),t("li",[e._v("An average of "),t("strong",[e._v("800")]),e._v(" daily active users")]),e._v(" "),t("li",[e._v("An average of "),t("strong",[e._v("1700")]),e._v(" daily page views")]),e._v(" "),t("li",[e._v("A total of "),t("strong",[e._v("$950")]),e._v(" in revenue (all from AdSense)")])]),e._v(" "),t("h3",{attrs:{id:"win7-simu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#win7-simu"}},[e._v("#")]),e._v(" "),t("RouterLink",{attrs:{to:"/win7simu/about.html"}},[e._v("Win7 Simu")])],1),e._v(" "),t("p",[t("img",{attrs:{src:a(395),alt:"Win7 Simu's growth"}})]),e._v(" "),t("p",[t("strong",[e._v("Android only")])]),e._v(" "),t("ul",[t("li",[t("strong",[e._v("10.8M")]),e._v(" users downloaded the app from "),t("a",{attrs:{href:"https://play.google.com/store/apps/details?id=com.visnalize.win7simu",target:"_blank",rel:"noopener noreferrer"}},[e._v("Google Play"),t("OutboundLink")],1)]),e._v(" "),t("li",[t("strong",[e._v("670K")]),e._v(" active devices that still have the app installed")]),e._v(" "),t("li",[t("strong",[e._v("42.4K")]),e._v(" users gave an average rating of "),t("strong",[e._v("4.18/5")])]),e._v(" "),t("li",[t("strong",[e._v("20K")]),e._v(" users left a review")])]),e._v(" "),t("p",[t("strong",[e._v("Both versions")])]),e._v(" "),t("ul",[t("li",[e._v("An average of "),t("strong",[e._v("50K")]),e._v(" daily active users")]),e._v(" "),t("li",[e._v("A user spent an average of "),t("strong",[e._v("14 mins")]),e._v(" with the app")]),e._v(" "),t("li",[t("strong",[e._v("2.3M")]),e._v(" accounts created in the app")]),e._v(" "),t("li",[t("strong",[e._v("18")]),e._v(" version updates were released")]),e._v(" "),t("li",[t("strong",[e._v("$9.8K")]),e._v(" gross revenue from ads")]),e._v(" "),t("li",[t("strong",[e._v("$3.1K")]),e._v(" gross revenue from in-app purchases")]),e._v(" "),t("li",[t("strong",[e._v("$303")]),e._v(" gross revenue from partnerships")])]),e._v(" "),t("h3",{attrs:{id:"brick-1100-beta"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#brick-1100-beta"}},[e._v("#")]),e._v(" "),t("RouterLink",{attrs:{to:"/brick1100/about.html"}},[e._v("Brick 1100")]),e._v(" (Beta)")],1),e._v(" "),t("p",[t("img",{attrs:{src:a(396),alt:"Brick 1100's growth"}})]),e._v(" "),t("ul",[t("li",[t("strong",[e._v("9.2K")]),e._v(" users downloaded the app from "),t("a",{attrs:{href:"https://play.google.com/store/apps/details?id=com.visnalize.brick1100",target:"_blank",rel:"noopener noreferrer"}},[e._v("Google Play"),t("OutboundLink")],1)]),e._v(" "),t("li",[t("strong",[e._v("1.8K")]),e._v(" active devices that still have the app installed")]),e._v(" "),t("li",[e._v("An average of "),t("strong",[e._v("200")]),e._v(" daily active users")]),e._v(" "),t("li",[e._v("A user spent an average of "),t("strong",[e._v("7 mins")]),e._v(" with the app")]),e._v(" "),t("li",[t("strong",[e._v("300")]),e._v(" accounts created in the app")]),e._v(" "),t("li",[t("strong",[e._v("8")]),e._v(" version updates were released")]),e._v(" "),t("li",[t("strong",[e._v("$22")]),e._v(" gross revenue from ads")])]),e._v(" "),t("google-ads"),e._v(" "),t("h2",{attrs:{id:"other-accomplishments"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#other-accomplishments"}},[e._v("#")]),e._v(" Other accomplishments")]),e._v(" "),t("h3",{attrs:{id:"a-new-collaborator-for-win7-simu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#a-new-collaborator-for-win7-simu"}},[e._v("#")]),e._v(" A new collaborator for Win7 Simu")]),e._v(" "),t("p",[e._v("Since November of this year, you must have noticed Win7 Simu has been receiving several major UI enhancements and new themes. This is all thanks to "),t("a",{attrs:{href:"https://github.com/hohaicongthuan",target:"_blank",rel:"noopener noreferrer"}},[e._v("Thuan"),t("OutboundLink")],1),e._v(", a new collaborator that I had the pleasure to welcome and onboard to the Win7 Simu project. Thuan is a computer enthusiast, freelance developer and has a special interest in game development. Although he has little experience with the tech stack behind Win7 Simu, he has been able to quickly pick up the pace and contribute to the project without much guidance required. I am more than happy to have him onboard and look forward to continuing our collaboration in the future.")]),e._v(" "),t("h3",{attrs:{id:"new-feedback-channels-for-brick-1100"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#new-feedback-channels-for-brick-1100"}},[e._v("#")]),e._v(" New feedback channels for Brick 1100")]),e._v(" "),t("p",[e._v("With the new beta release of Brick 1100, I have set up a new "),t("a",{attrs:{href:"https://discord.gg/6AQDnZa4Xm",target:"_blank",rel:"noopener noreferrer"}},[e._v("Discord server"),t("OutboundLink")],1),e._v(" for the community to hang out, discuss all things Brick 1100-related, and provide feedback to make Brick 1100 a better app. Additionally, there is also this "),t("a",{attrs:{href:"https://visnalize.com/brick1100/feedback",target:"_blank",rel:"noopener noreferrer"}},[e._v("feedback forum"),t("OutboundLink")],1),e._v(" for those who don't want to use or are not familiar with Discord can provide feedback and suggestions, easily and anonymously without much hassle.")]),e._v(" "),t("h3",{attrs:{id:"a-new-chapter-in-life"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#a-new-chapter-in-life"}},[e._v("#")]),e._v(" A new chapter in life")]),e._v(" "),t("p",[e._v("I don't share my personal identity online much, but this is a big one so I make it an exception. In the early of 2023, I got married to my beautiful wife and later in the year, we welcomed our first child into the world, a healthy and handsome baby boy. It was a life-changing experience and a feeling that I can't describe in words. I am thankful to life for everything that I was given.")]),e._v(" "),t("h2",{attrs:{id:"looking-out-to-2024"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#looking-out-to-2024"}},[e._v("#")]),e._v(" Looking out to 2024")]),e._v(" "),t("p",[e._v("The coming year will be different in many ways, there will be new challenges, busy schedules, trying to balance out the time for family and work, and everything in between. I am unsure how much time I will be able to dedicate to Visnalize, bringing out more cool features and updates for Win7 Simu and launching the first production release of Brick 1100, but I will try my best to keep the projects going and make them better.")]),e._v(" "),t("p",[e._v("As always, I thank you for all your love and support so far, and I hope you will continue your support for me in the future. Happy new year and see you in 2024! 🎉")]),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([[25],{394:function(e,t,a){e.exports=a.p+"assets/img/visnalize-com-growth.67fc9dc7.jpg"},395:function(e,t,a){e.exports=a.p+"assets/img/win7-simu-growth.6ba88ded.jpg"},396:function(e,t,a){e.exports=a.p+"assets/img/brick-1100-growth.cd8f231c.jpg"},486:function(e,t,a){"use strict";a.r(t);var r=a(13),i=Object(r.a)({},(function(){var e=this,t=e._self._c;return t("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[t("h1",{attrs:{id:"visnalize-year-in-review-2023"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#visnalize-year-in-review-2023"}},[e._v("#")]),e._v(" Visnalize year in review - 2023")]),e._v(" "),t("m-blog-meta"),e._v(" "),t("p",[t("img",{attrs:{src:"https://images.unsplash.com/photo-1579952775264-625f17561a5d?auto=format&fit=crop&w=740&q=80",alt:"Ho Chi Minh new year firework"}})]),e._v(" "),t("p",[t("em",[e._v("Cover image by Streetwindy via "),t("a",{attrs:{href:"https://unsplash.com/photos/fireworks-display-over-city-buildings-during-night-time-rYIrNpFFilI",target:"_blank",rel:"noopener noreferrer"}},[e._v("Unsplash"),t("OutboundLink")],1)])]),e._v(" "),t("p",[e._v('Last year, I initiated a habit of writing a "year in review" post for '),t("RouterLink",{attrs:{to:"/blog/win7-simu-year-in-review-2022.html"}},[e._v("Win7 Simu")]),e._v(". It was a great way to reflect on the year and see what I have accomplished. I decided to do it again this year, however, this time I will write about Visnalize as a whole, since we now have more than one product, it will probably be more interesting to have a look at a bigger picture.")],1),e._v(" "),t("p",[e._v("Let's not waste any more time and get right into it.")]),e._v(" "),t("h2",{attrs:{id:"the-amazing-numbers"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#the-amazing-numbers"}},[e._v("#")]),e._v(" The amazing numbers")]),e._v(" "),t("h3",{attrs:{id:"visnalize-com"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#visnalize-com"}},[e._v("#")]),e._v(" Visnalize(.com)")]),e._v(" "),t("p",[t("img",{attrs:{src:a(394),alt:"Visnalize.com's growth"}})]),e._v(" "),t("ul",[t("li",[t("strong",[e._v("6")]),e._v(" new blog posts published")]),e._v(" "),t("li",[e._v("An average of "),t("strong",[e._v("800")]),e._v(" daily active users")]),e._v(" "),t("li",[e._v("An average of "),t("strong",[e._v("1700")]),e._v(" daily page views")]),e._v(" "),t("li",[e._v("A total of "),t("strong",[e._v("$950")]),e._v(" in revenue (all from AdSense)")])]),e._v(" "),t("h3",{attrs:{id:"win7-simu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#win7-simu"}},[e._v("#")]),e._v(" "),t("RouterLink",{attrs:{to:"/win7simu/about.html"}},[e._v("Win7 Simu")])],1),e._v(" "),t("p",[t("img",{attrs:{src:a(395),alt:"Win7 Simu's growth"}})]),e._v(" "),t("p",[t("strong",[e._v("Android only")])]),e._v(" "),t("ul",[t("li",[t("strong",[e._v("10.8M")]),e._v(" users downloaded the app from "),t("a",{attrs:{href:"https://play.google.com/store/apps/details?id=com.visnalize.win7simu",target:"_blank",rel:"noopener noreferrer"}},[e._v("Google Play"),t("OutboundLink")],1)]),e._v(" "),t("li",[t("strong",[e._v("670K")]),e._v(" active devices that still have the app installed")]),e._v(" "),t("li",[t("strong",[e._v("42.4K")]),e._v(" users gave an average rating of "),t("strong",[e._v("4.18/5")])]),e._v(" "),t("li",[t("strong",[e._v("20K")]),e._v(" users left a review")])]),e._v(" "),t("p",[t("strong",[e._v("Both versions")])]),e._v(" "),t("ul",[t("li",[e._v("An average of "),t("strong",[e._v("50K")]),e._v(" daily active users")]),e._v(" "),t("li",[e._v("A user spent an average of "),t("strong",[e._v("14 mins")]),e._v(" with the app")]),e._v(" "),t("li",[t("strong",[e._v("2.3M")]),e._v(" accounts created in the app")]),e._v(" "),t("li",[t("strong",[e._v("18")]),e._v(" version updates were released")]),e._v(" "),t("li",[t("strong",[e._v("$9.8K")]),e._v(" gross revenue from ads")]),e._v(" "),t("li",[t("strong",[e._v("$3.1K")]),e._v(" gross revenue from in-app purchases")]),e._v(" "),t("li",[t("strong",[e._v("$303")]),e._v(" gross revenue from partnerships")])]),e._v(" "),t("h3",{attrs:{id:"brick-1100-beta"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#brick-1100-beta"}},[e._v("#")]),e._v(" "),t("RouterLink",{attrs:{to:"/brick1100/about.html"}},[e._v("Brick 1100")]),e._v(" (Beta)")],1),e._v(" "),t("p",[t("img",{attrs:{src:a(396),alt:"Brick 1100's growth"}})]),e._v(" "),t("ul",[t("li",[t("strong",[e._v("9.2K")]),e._v(" users downloaded the app from "),t("a",{attrs:{href:"https://play.google.com/store/apps/details?id=com.visnalize.brick1100",target:"_blank",rel:"noopener noreferrer"}},[e._v("Google Play"),t("OutboundLink")],1)]),e._v(" "),t("li",[t("strong",[e._v("1.8K")]),e._v(" active devices that still have the app installed")]),e._v(" "),t("li",[e._v("An average of "),t("strong",[e._v("200")]),e._v(" daily active users")]),e._v(" "),t("li",[e._v("A user spent an average of "),t("strong",[e._v("7 mins")]),e._v(" with the app")]),e._v(" "),t("li",[t("strong",[e._v("300")]),e._v(" accounts created in the app")]),e._v(" "),t("li",[t("strong",[e._v("8")]),e._v(" version updates were released")]),e._v(" "),t("li",[t("strong",[e._v("$22")]),e._v(" gross revenue from ads")])]),e._v(" "),t("google-ads"),e._v(" "),t("h2",{attrs:{id:"other-accomplishments"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#other-accomplishments"}},[e._v("#")]),e._v(" Other accomplishments")]),e._v(" "),t("h3",{attrs:{id:"a-new-collaborator-for-win7-simu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#a-new-collaborator-for-win7-simu"}},[e._v("#")]),e._v(" A new collaborator for Win7 Simu")]),e._v(" "),t("p",[e._v("Since November of this year, you must have noticed Win7 Simu has been receiving several major UI enhancements and new themes. This is all thanks to "),t("a",{attrs:{href:"https://github.com/hohaicongthuan",target:"_blank",rel:"noopener noreferrer"}},[e._v("Thuan"),t("OutboundLink")],1),e._v(", a new collaborator that I had the pleasure to welcome and onboard to the Win7 Simu project. Thuan is a computer enthusiast, freelance developer and has a special interest in game development. Although he has little experience with the tech stack behind Win7 Simu, he has been able to quickly pick up the pace and contribute to the project without much guidance required. I am more than happy to have him onboard and look forward to continuing our collaboration in the future.")]),e._v(" "),t("h3",{attrs:{id:"new-feedback-channels-for-brick-1100"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#new-feedback-channels-for-brick-1100"}},[e._v("#")]),e._v(" New feedback channels for Brick 1100")]),e._v(" "),t("p",[e._v("With the new beta release of Brick 1100, I have set up a new "),t("a",{attrs:{href:"https://discord.gg/6AQDnZa4Xm",target:"_blank",rel:"noopener noreferrer"}},[e._v("Discord server"),t("OutboundLink")],1),e._v(" for the community to hang out, discuss all things Brick 1100-related, and provide feedback to make Brick 1100 a better app. Additionally, there is also this "),t("a",{attrs:{href:"https://visnalize.com/brick1100/feedback",target:"_blank",rel:"noopener noreferrer"}},[e._v("feedback forum"),t("OutboundLink")],1),e._v(" for those who don't want to use or are not familiar with Discord can provide feedback and suggestions, easily and anonymously without much hassle.")]),e._v(" "),t("h3",{attrs:{id:"a-new-chapter-in-life"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#a-new-chapter-in-life"}},[e._v("#")]),e._v(" A new chapter in life")]),e._v(" "),t("p",[e._v("I don't share my personal identity online much, but this is a big one so I make it an exception. In the early of 2023, I got married to my beautiful wife and later in the year, we welcomed our first child into the world, a healthy and handsome baby boy. It was a life-changing experience and a feeling that I can't describe in words. I am thankful to life for everything that I was given.")]),e._v(" "),t("h2",{attrs:{id:"looking-out-to-2024"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#looking-out-to-2024"}},[e._v("#")]),e._v(" Looking out to 2024")]),e._v(" "),t("p",[e._v("The coming year will be different in many ways, there will be new challenges, busy schedules, trying to balance out the time for family and work, and everything in between. I am unsure how much time I will be able to dedicate to Visnalize, bringing out more cool features and updates for Win7 Simu and launching the first production release of Brick 1100, but I will try my best to keep the projects going and make them better.")]),e._v(" "),t("p",[e._v("As always, I thank you for all your love and support so far, and I hope you will continue your support for me in the future. Happy new year and see you in 2024! 🎉")]),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/26.919270b6.js b/assets/js/26.800f234b.js similarity index 88% rename from assets/js/26.919270b6.js rename to assets/js/26.800f234b.js index 411a8c4f..e56dee3d 100644 --- a/assets/js/26.919270b6.js +++ b/assets/js/26.800f234b.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[26],{401:function(t,e,r){t.exports=r.p+"assets/img/countries.2365af34.png"},402:function(t,e,r){t.exports=r.p+"assets/img/os.0c06c5c2.png"},403:function(t,e,r){t.exports=r.p+"assets/img/device-categories.73347f28.png"},492:function(t,e,r){"use strict";r.r(e);var a=r(17),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(401),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(402),alt:"operating systems"}})]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[e("img",{attrs:{src:r(403),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([[26],{399:function(t,e,r){t.exports=r.p+"assets/img/countries.2365af34.png"},400:function(t,e,r){t.exports=r.p+"assets/img/os.0c06c5c2.png"},401:function(t,e,r){t.exports=r.p+"assets/img/device-categories.73347f28.png"},489:function(t,e,r){"use strict";r.r(e);var a=r(13),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(399),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(400),alt:"operating systems"}})]),t._v(" "),e("td",{staticStyle:{"text-align":"center"}},[e("img",{attrs:{src:r(401),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/27.f5c69753.js b/assets/js/27.9b8afeca.js similarity index 86% rename from assets/js/27.f5c69753.js rename to assets/js/27.9b8afeca.js index 4c9d7861..cef171b1 100644 --- a/assets/js/27.f5c69753.js +++ b/assets/js/27.9b8afeca.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[27],{348:function(t,e,n){},442:function(t,e,n){"use strict";n(348)},510:function(t,e,n){"use strict";n.r(e);var i={functional:!0,props:{type:{type:String,default:"tip"},text:String,vertical:{type:String,default:"top"}},render:(t,{props:e,slots:n})=>t("span",{class:["badge",e.type],style:{verticalAlign:e.vertical}},e.text||n().default)},p=(n(442),n(17)),l=Object(p.a)(i,void 0,void 0,!1,null,"15b7b770",null);e.default=l.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[27],{348:function(t,e,n){},442:function(t,e,n){"use strict";n(348)},510:function(t,e,n){"use strict";n.r(e);var i={functional:!0,props:{type:{type:String,default:"tip"},text:String,vertical:{type:String,default:"top"}},render:(t,{props:e,slots:n})=>t("span",{class:["badge",e.type],style:{verticalAlign:e.vertical}},e.text||n().default)},p=(n(442),n(13)),l=Object(p.a)(i,void 0,void 0,!1,null,"15b7b770",null);e.default=l.exports}}]); \ No newline at end of file diff --git a/assets/js/28.73c6d0b5.js b/assets/js/28.f1940eeb.js similarity index 88% rename from assets/js/28.73c6d0b5.js rename to assets/js/28.f1940eeb.js index 8e273470..4a85ef0d 100644 --- a/assets/js/28.73c6d0b5.js +++ b/assets/js/28.f1940eeb.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[28],{349:function(t,e,a){},443:function(t,e,a){"use strict";a(349)},473:function(t,e,a){"use strict";a.r(e);var s={name:"CodeBlock",props:{title:{type:String,required:!0},active:{type:Boolean,default:!1}},mounted(){this.$parent&&this.$parent.loadTabs&&this.$parent.loadTabs()}},i=(a(443),a(17)),n=Object(i.a)(s,(function(){return(0,this._self._c)("div",{staticClass:"theme-code-block",class:{"theme-code-block__active":this.active}},[this._t("default")],2)}),[],!1,null,"759a7d02",null);e.default=n.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[28],{349:function(t,e,a){},443:function(t,e,a){"use strict";a(349)},473:function(t,e,a){"use strict";a.r(e);var s={name:"CodeBlock",props:{title:{type:String,required:!0},active:{type:Boolean,default:!1}},mounted(){this.$parent&&this.$parent.loadTabs&&this.$parent.loadTabs()}},i=(a(443),a(13)),n=Object(i.a)(s,(function(){return(0,this._self._c)("div",{staticClass:"theme-code-block",class:{"theme-code-block__active":this.active}},[this._t("default")],2)}),[],!1,null,"759a7d02",null);e.default=n.exports}}]); \ No newline at end of file diff --git a/assets/js/29.fcccc641.js b/assets/js/29.53f850b6.js similarity index 96% rename from assets/js/29.fcccc641.js rename to assets/js/29.53f850b6.js index 7a2e5e4f..a153f6c4 100644 --- a/assets/js/29.fcccc641.js +++ b/assets/js/29.53f850b6.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[29],{350:function(e,t,a){},444:function(e,t,a){"use strict";a(350)},474:function(e,t,a){"use strict";a.r(t);var o={name:"CodeGroup",data:()=>({codeTabs:[],activeCodeTabIndex:-1}),watch:{activeCodeTabIndex(e){this.activateCodeTab(e)}},mounted(){this.loadTabs()},methods:{changeCodeTab(e){this.activeCodeTabIndex=e},loadTabs(){this.codeTabs=(this.$slots.default||[]).filter(e=>Boolean(e.componentOptions)).map((e,t)=>(""===e.componentOptions.propsData.active&&(this.activeCodeTabIndex=t),{title:e.componentOptions.propsData.title,elm:e.elm})),-1===this.activeCodeTabIndex&&this.codeTabs.length>0&&(this.activeCodeTabIndex=0),this.activateCodeTab(0)},activateCodeTab(e){this.codeTabs.forEach(e=>{e.elm&&e.elm.classList.remove("theme-code-block__active")}),this.codeTabs[e].elm&&this.codeTabs[e].elm.classList.add("theme-code-block__active")}}},s=(a(444),a(17)),c=Object(s.a)(o,(function(){var e=this,t=e._self._c;return t("ClientOnly",[t("div",{staticClass:"theme-code-group"},[t("div",{staticClass:"theme-code-group__nav"},[t("ul",{staticClass:"theme-code-group__ul"},e._l(e.codeTabs,(function(a,o){return t("li",{key:a.title,staticClass:"theme-code-group__li"},[t("button",{staticClass:"theme-code-group__nav-tab",class:{"theme-code-group__nav-tab-active":o===e.activeCodeTabIndex},on:{click:function(t){return e.changeCodeTab(o)}}},[e._v("\n "+e._s(a.title)+"\n ")])])})),0)]),e._v(" "),e._t("default"),e._v(" "),e.codeTabs.length<1?t("pre",{staticClass:"pre-blank"},[e._v("// Make sure to add code blocks to your code group")]):e._e()],2)])}),[],!1,null,"deefee04",null);t.default=c.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[29],{350:function(e,t,a){},444:function(e,t,a){"use strict";a(350)},474:function(e,t,a){"use strict";a.r(t);var o={name:"CodeGroup",data:()=>({codeTabs:[],activeCodeTabIndex:-1}),watch:{activeCodeTabIndex(e){this.activateCodeTab(e)}},mounted(){this.loadTabs()},methods:{changeCodeTab(e){this.activeCodeTabIndex=e},loadTabs(){this.codeTabs=(this.$slots.default||[]).filter(e=>Boolean(e.componentOptions)).map((e,t)=>(""===e.componentOptions.propsData.active&&(this.activeCodeTabIndex=t),{title:e.componentOptions.propsData.title,elm:e.elm})),-1===this.activeCodeTabIndex&&this.codeTabs.length>0&&(this.activeCodeTabIndex=0),this.activateCodeTab(0)},activateCodeTab(e){this.codeTabs.forEach(e=>{e.elm&&e.elm.classList.remove("theme-code-block__active")}),this.codeTabs[e].elm&&this.codeTabs[e].elm.classList.add("theme-code-block__active")}}},s=(a(444),a(13)),c=Object(s.a)(o,(function(){var e=this,t=e._self._c;return t("ClientOnly",[t("div",{staticClass:"theme-code-group"},[t("div",{staticClass:"theme-code-group__nav"},[t("ul",{staticClass:"theme-code-group__ul"},e._l(e.codeTabs,(function(a,o){return t("li",{key:a.title,staticClass:"theme-code-group__li"},[t("button",{staticClass:"theme-code-group__nav-tab",class:{"theme-code-group__nav-tab-active":o===e.activeCodeTabIndex},on:{click:function(t){return e.changeCodeTab(o)}}},[e._v("\n "+e._s(a.title)+"\n ")])])})),0)]),e._v(" "),e._t("default"),e._v(" "),e.codeTabs.length<1?t("pre",{staticClass:"pre-blank"},[e._v("// Make sure to add code blocks to your code group")]):e._e()],2)])}),[],!1,null,"deefee04",null);t.default=c.exports}}]); \ No newline at end of file diff --git a/assets/js/3.043f2ab7.js b/assets/js/3.9aaf4d99.js similarity index 91% rename from assets/js/3.043f2ab7.js rename to assets/js/3.9aaf4d99.js index dab6786d..fc598b18 100644 --- a/assets/js/3.043f2ab7.js +++ b/assets/js/3.9aaf4d99.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[3,5,24,32,38,43],{284:function(t,a,e){},288:function(t,a,e){"use strict";e(284)},289:function(t,a,e){},290:function(t,a,e){"use strict";e.r(a);e(48);var s={props:{format:{type:String,default:"auto"}},mounted(){(window.adsbygoogle=window.adsbygoogle||[]).push({})}},n=(e(288),e(17)),r=Object(n.a)(s,(function(){return(0,this._self._c)("ins",{staticClass:"adsbygoogle",staticStyle:{display:"block"},attrs:{"data-ad-slot":"3336580675","data-ad-client":"ca-pub-5904323684803247","data-ad-format":this.format,"data-full-width-responsive":"true"}})}),[],!1,null,"18b37b7d",null);a.default=r.exports},295:function(t,a,e){},297:function(t,a,e){"use strict";e(289)},298:function(t,a,e){"use strict";function s(t,a="-"){return t.split(a).map(t=>t.charAt(0).toUpperCase()+t.slice(1)).join(" ")}e.d(a,"a",(function(){return s}))},299:function(t,a,e){"use strict";e.r(a);var s={props:{date:String},computed:{createdDate(){return this.date||this.$page.firstCreated}}},n=(e(297),e(17)),r=Object(n.a)(s,(function(){var t=this._self._c;return this.createdDate?t("div",{staticClass:"first-created",attrs:{title:"Created date"}},[t("v-icon",{attrs:{name:"clock"}}),this._v(" "),t("span",[this._v(this._s(this.createdDate))])],1):this._e()}),[],!1,null,"026804f3",null);a.default=r.exports},301:function(t,a,e){},302:function(t,a,e){"use strict";e(295)},303:function(t,a,e){},308:function(t,a,e){"use strict";e.r(a);var s=e(298),n={props:{tags:[String,Array],showIcon:Boolean},computed:{_tags(){return Array.isArray(this.tags)?this.tags:[this.tags]}},methods:{pascalize:s.a}},r=(e(302),e(17)),o=Object(r.a)(n,(function(){var t=this,a=t._self._c;return a("div",[t.showIcon?a("v-icon",{attrs:{name:"tag"}}):t._e(),t._v(" "),a("ul",t._l(t._tags,(function(e){return a("li",{key:e},[a("router-link",{attrs:{to:"/blog/tag/"+e}},[t._v("\n "+t._s(t.pascalize(e))+"\n ")])],1)})),0)],1)}),[],!1,null,"451c5fa4",null);a.default=o.exports},309:function(t,a,e){"use strict";e(301)},310:function(t,a,e){"use strict";e(303)},330:function(t,a,e){},352:function(t,a,e){"use strict";e.r(a);var s={props:{current:String,tags:Array}},n=(e(309),e(17)),r=Object(n.a)(s,(function(){var t=this,a=t._self._c;return a("nav",t._l(t.tags,(function(e){return a("router-link",{key:e.path,attrs:{to:e.path}},[t._v("\n "+t._s(e.name)+"\n ")])})),1)}),[],!1,null,"7c5b105f",null);a.default=r.exports},353:function(t,a,e){"use strict";e.r(a);var s=e(299),n=e(308),r={components:{ACreated:s.default,MBlogTagList:n.default},props:{blogs:Array},methods:{getImage(t){var a;return null===(a=t.frontmatter.meta.find(t=>"image"===t.itemprop))||void 0===a?void 0:a.content}}},o=(e(310),e(17)),i=Object(o.a)(r,(function(){var t=this,a=t._self._c;return a("ul",{staticClass:"blog-links"},t._l(t.blogs,(function(e){return a("li",{key:e.key},[a("router-link",{attrs:{to:e.path}},[a("span",{staticClass:"blog-image"},[a("img",{attrs:{src:t.getImage(e),alt:e.title}})]),t._v(" "),a("h2",[t._v(t._s(e.title))]),t._v(" "),a("a-created",{attrs:{date:e.firstCreated}}),t._v(" "),a("p",[t._v(t._s(e.frontmatter.description))])],1),t._v(" "),a("m-blog-tag-list",{attrs:{tags:e.frontmatter.tag}})],1)})),0)}),[],!1,null,"2d2bd041",null);a.default=i.exports},377:function(t,a,e){"use strict";e(330)},454:function(t,a,e){"use strict";e.r(a);var s=e(306),n=e(290),r=e(352),o=e(353),i=e(298),l={components:{ParentLayout:s.default,GoogleAds:n.default,MBlogTagNav:r.default,MBlogLinks:o.default},computed:{tags(){return[{path:"/blog/",name:"All"},...this.$tag.list.map(t=>({path:t.path,name:Object(i.a)(t.name)}))]},blogs(){return(this.$currentTag?this.$currentTag.pages:this.$site.pages.filter(({path:t})=>/blog\/.+/.test(t)&&!/blog\/tag/.test(t))).sort((t,a)=>a.firstCreatedTimestamp-t.firstCreatedTimestamp)}}},u=(e(377),e(17)),c=Object(u.a)(l,(function(){var t=this,a=t._self._c;return a("parent-layout",{scopedSlots:t._u([{key:"page-top",fn:function(){return[a("div",{staticClass:"theme-default-content content__default"},[a("h1",[t._v("📝 Blog")]),t._v(" "),a("m-blog-tag-nav",{attrs:{tags:t.tags}}),t._v(" "),a("google-ads",{attrs:{format:"horizontal"}}),t._v(" "),a("m-blog-links",{attrs:{blogs:t.blogs}}),t._v(" "),a("google-ads")],1)]},proxy:!0}])})}),[],!1,null,"44afb3e7",null);a.default=c.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[3,5,24,32,38,43],{284:function(t,a,e){},288:function(t,a,e){"use strict";e(284)},289:function(t,a,e){},290:function(t,a,e){"use strict";e.r(a);e(48);var s={props:{format:{type:String,default:"auto"}},mounted(){(window.adsbygoogle=window.adsbygoogle||[]).push({})}},n=(e(288),e(13)),r=Object(n.a)(s,(function(){return(0,this._self._c)("ins",{staticClass:"adsbygoogle",staticStyle:{display:"block"},attrs:{"data-ad-slot":"3336580675","data-ad-client":"ca-pub-5904323684803247","data-ad-format":this.format,"data-full-width-responsive":"true"}})}),[],!1,null,"18b37b7d",null);a.default=r.exports},295:function(t,a,e){},297:function(t,a,e){"use strict";e(289)},298:function(t,a,e){"use strict";function s(t,a="-"){return t.split(a).map(t=>t.charAt(0).toUpperCase()+t.slice(1)).join(" ")}e.d(a,"a",(function(){return s}))},299:function(t,a,e){"use strict";e.r(a);var s={props:{date:String},computed:{createdDate(){return this.date||this.$page.firstCreated}}},n=(e(297),e(13)),r=Object(n.a)(s,(function(){var t=this._self._c;return this.createdDate?t("div",{staticClass:"first-created",attrs:{title:"Created date"}},[t("v-icon",{attrs:{name:"clock"}}),this._v(" "),t("span",[this._v(this._s(this.createdDate))])],1):this._e()}),[],!1,null,"026804f3",null);a.default=r.exports},301:function(t,a,e){},302:function(t,a,e){"use strict";e(295)},303:function(t,a,e){},308:function(t,a,e){"use strict";e.r(a);var s=e(298),n={props:{tags:[String,Array],showIcon:Boolean},computed:{_tags(){return Array.isArray(this.tags)?this.tags:[this.tags]}},methods:{pascalize:s.a}},r=(e(302),e(13)),o=Object(r.a)(n,(function(){var t=this,a=t._self._c;return a("div",[t.showIcon?a("v-icon",{attrs:{name:"tag"}}):t._e(),t._v(" "),a("ul",t._l(t._tags,(function(e){return a("li",{key:e},[a("router-link",{attrs:{to:"/blog/tag/"+e}},[t._v("\n "+t._s(t.pascalize(e))+"\n ")])],1)})),0)],1)}),[],!1,null,"451c5fa4",null);a.default=o.exports},309:function(t,a,e){"use strict";e(301)},310:function(t,a,e){"use strict";e(303)},330:function(t,a,e){},352:function(t,a,e){"use strict";e.r(a);var s={props:{current:String,tags:Array}},n=(e(309),e(13)),r=Object(n.a)(s,(function(){var t=this,a=t._self._c;return a("nav",t._l(t.tags,(function(e){return a("router-link",{key:e.path,attrs:{to:e.path}},[t._v("\n "+t._s(e.name)+"\n ")])})),1)}),[],!1,null,"7c5b105f",null);a.default=r.exports},353:function(t,a,e){"use strict";e.r(a);var s=e(299),n=e(308),r={components:{ACreated:s.default,MBlogTagList:n.default},props:{blogs:Array},methods:{getImage(t){var a;return null===(a=t.frontmatter.meta.find(t=>"image"===t.itemprop))||void 0===a?void 0:a.content}}},o=(e(310),e(13)),i=Object(o.a)(r,(function(){var t=this,a=t._self._c;return a("ul",{staticClass:"blog-links"},t._l(t.blogs,(function(e){return a("li",{key:e.key},[a("router-link",{attrs:{to:e.path}},[a("span",{staticClass:"blog-image"},[a("img",{attrs:{src:t.getImage(e),alt:e.title}})]),t._v(" "),a("h2",[t._v(t._s(e.title))]),t._v(" "),a("a-created",{attrs:{date:e.firstCreated}}),t._v(" "),a("p",[t._v(t._s(e.frontmatter.description))])],1),t._v(" "),a("m-blog-tag-list",{attrs:{tags:e.frontmatter.tag}})],1)})),0)}),[],!1,null,"2d2bd041",null);a.default=i.exports},377:function(t,a,e){"use strict";e(330)},454:function(t,a,e){"use strict";e.r(a);var s=e(306),n=e(290),r=e(352),o=e(353),i=e(298),l={components:{ParentLayout:s.default,GoogleAds:n.default,MBlogTagNav:r.default,MBlogLinks:o.default},computed:{tags(){return[{path:"/blog/",name:"All"},...this.$tag.list.map(t=>({path:t.path,name:Object(i.a)(t.name)}))]},blogs(){return(this.$currentTag?this.$currentTag.pages:this.$site.pages.filter(({path:t})=>/blog\/.+/.test(t)&&!/blog\/tag/.test(t))).sort((t,a)=>a.firstCreatedTimestamp-t.firstCreatedTimestamp)}}},u=(e(377),e(13)),c=Object(u.a)(l,(function(){var t=this,a=t._self._c;return a("parent-layout",{scopedSlots:t._u([{key:"page-top",fn:function(){return[a("div",{staticClass:"theme-default-content content__default"},[a("h1",[t._v("📝 Blog")]),t._v(" "),a("m-blog-tag-nav",{attrs:{tags:t.tags}}),t._v(" "),a("google-ads",{attrs:{format:"horizontal"}}),t._v(" "),a("m-blog-links",{attrs:{blogs:t.blogs}}),t._v(" "),a("google-ads")],1)]},proxy:!0}])})}),[],!1,null,"44afb3e7",null);a.default=c.exports}}]); \ No newline at end of file diff --git a/assets/js/30.7d692a37.js b/assets/js/30.b1176015.js similarity index 90% rename from assets/js/30.7d692a37.js rename to assets/js/30.b1176015.js index ed44782d..ab790649 100644 --- a/assets/js/30.7d692a37.js +++ b/assets/js/30.b1176015.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[30],{304:function(t,n,r){},311:function(t,n,r){"use strict";r(304)},354:function(t,n,r){"use strict";r.r(n);var e={props:{href:String},computed:{isExternal(){return this.href.startsWith("http")}}},s=(r(311),r(17)),a=Object(s.a)(e,(function(){var t=this,n=t._self._c;return t.href&&!t.isExternal?n("router-link",{staticClass:"a-button",attrs:{to:t.href}},[t._t("default")],2):t.href&&t.isExternal?n("a",{staticClass:"a-button",attrs:{href:t.href,target:"_blank"}},[t._t("default")],2):n("button",{staticClass:"a-button",on:{click:function(n){return t.$emit("click")}}},[t._t("default")],2)}),[],!1,null,"4ef368cc",null);n.default=a.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[30],{304:function(t,n,r){},311:function(t,n,r){"use strict";r(304)},354:function(t,n,r){"use strict";r.r(n);var e={props:{href:String},computed:{isExternal(){return this.href.startsWith("http")}}},s=(r(311),r(13)),a=Object(s.a)(e,(function(){var t=this,n=t._self._c;return t.href&&!t.isExternal?n("router-link",{staticClass:"a-button",attrs:{to:t.href}},[t._t("default")],2):t.href&&t.isExternal?n("a",{staticClass:"a-button",attrs:{href:t.href,target:"_blank"}},[t._t("default")],2):n("button",{staticClass:"a-button",on:{click:function(n){return t.$emit("click")}}},[t._t("default")],2)}),[],!1,null,"4ef368cc",null);n.default=a.exports}}]); \ No newline at end of file diff --git a/assets/js/31.ffd1f41a.js b/assets/js/31.ff10ab21.js similarity index 86% rename from assets/js/31.ffd1f41a.js rename to assets/js/31.ff10ab21.js index 0bf763af..47682bd1 100644 --- a/assets/js/31.ffd1f41a.js +++ b/assets/js/31.ff10ab21.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[31],{287:function(n,t,i){},291:function(n,t,i){"use strict";i.r(t);var c={props:{label:String,icon:String}},e=(i(293),i(17)),l=Object(e.a)(c,(function(){var n=this,t=n._self._c;return t("button",{attrs:{"aria-label":n.label,title:n.label},on:{click:function(t){return n.$emit("click")}}},[t("v-icon",{attrs:{name:n.icon}})],1)}),[],!1,null,"0f94617e",null);t.default=l.exports},293:function(n,t,i){"use strict";i(287)}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[31],{287:function(n,t,i){},291:function(n,t,i){"use strict";i.r(t);var c={props:{label:String,icon:String}},e=(i(293),i(13)),l=Object(e.a)(c,(function(){var n=this,t=n._self._c;return t("button",{attrs:{"aria-label":n.label,title:n.label},on:{click:function(t){return n.$emit("click")}}},[t("v-icon",{attrs:{name:n.icon}})],1)}),[],!1,null,"0f94617e",null);t.default=l.exports},293:function(n,t,i){"use strict";i(287)}}]); \ No newline at end of file diff --git a/assets/js/32.5992aa8e.js b/assets/js/32.162091b0.js similarity index 88% rename from assets/js/32.5992aa8e.js rename to assets/js/32.162091b0.js index b26fd685..0b70e767 100644 --- a/assets/js/32.5992aa8e.js +++ b/assets/js/32.162091b0.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[32],{289:function(t,e,s){},297:function(t,e,s){"use strict";s(289)},299:function(t,e,s){"use strict";s.r(e);var a={props:{date:String},computed:{createdDate(){return this.date||this.$page.firstCreated}}},i=(s(297),s(17)),r=Object(i.a)(a,(function(){var t=this._self._c;return this.createdDate?t("div",{staticClass:"first-created",attrs:{title:"Created date"}},[t("v-icon",{attrs:{name:"clock"}}),this._v(" "),t("span",[this._v(this._s(this.createdDate))])],1):this._e()}),[],!1,null,"026804f3",null);e.default=r.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[32],{289:function(t,e,s){},297:function(t,e,s){"use strict";s(289)},299:function(t,e,s){"use strict";s.r(e);var a={props:{date:String},computed:{createdDate(){return this.date||this.$page.firstCreated}}},i=(s(297),s(13)),r=Object(i.a)(a,(function(){var t=this._self._c;return this.createdDate?t("div",{staticClass:"first-created",attrs:{title:"Created date"}},[t("v-icon",{attrs:{name:"clock"}}),this._v(" "),t("span",[this._v(this._s(this.createdDate))])],1):this._e()}),[],!1,null,"026804f3",null);e.default=r.exports}}]); \ No newline at end of file diff --git a/assets/js/33.b1bbf1a3.js b/assets/js/33.d25369e4.js similarity index 87% rename from assets/js/33.b1bbf1a3.js rename to assets/js/33.d25369e4.js index 7b8f7f1e..3f239858 100644 --- a/assets/js/33.b1bbf1a3.js +++ b/assets/js/33.d25369e4.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[33],{305:function(t,n,i){},312:function(t,n,i){"use strict";i(305)},355:function(t,n,i){"use strict";i.r(n);var s={props:{hideCommentCount:Boolean,hideShareLinks:Boolean}},e=(i(312),i(17)),o=Object(e.a)(s,(function(){var t=this._self._c;return t("div",{staticClass:"social"},[this.hideCommentCount?this._e():t("comment-count"),this._v(" "),this.hideShareLinks?this._e():t("social-share")],1)}),[],!1,null,"514878b4",null);n.default=o.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[33],{305:function(t,n,i){},312:function(t,n,i){"use strict";i(305)},355:function(t,n,i){"use strict";i.r(n);var s={props:{hideCommentCount:Boolean,hideShareLinks:Boolean}},e=(i(312),i(13)),o=Object(e.a)(s,(function(){var t=this._self._c;return t("div",{staticClass:"social"},[this.hideCommentCount?this._e():t("comment-count"),this._v(" "),this.hideShareLinks?this._e():t("social-share")],1)}),[],!1,null,"514878b4",null);n.default=o.exports}}]); \ No newline at end of file diff --git a/assets/js/34.ac335fe6.js b/assets/js/34.d927dbf4.js similarity index 87% rename from assets/js/34.ac335fe6.js rename to assets/js/34.d927dbf4.js index ba06103e..aad5a292 100644 --- a/assets/js/34.ac335fe6.js +++ b/assets/js/34.d927dbf4.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[34],{332:function(t,s,a){},423:function(t,s,a){"use strict";a(332)},461:function(t,s,a){"use strict";a.r(s);var i={},e=(a(423),a(17)),n=Object(e.a)(i,(function(){var t=this._self._c;return t("div",{staticClass:"page-edit"},[t("div",{staticClass:"last-updated"},[t("span",{staticClass:"prefix"},[this._v("Last Updated:")]),this._v(" "),t("span",{staticClass:"time"},[this._v(this._s(this.$page.lastUpdated))])])])}),[],!1,null,"d53989e8",null);s.default=n.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[34],{332:function(t,s,a){},423:function(t,s,a){"use strict";a(332)},461:function(t,s,a){"use strict";a.r(s);var i={},e=(a(423),a(13)),n=Object(e.a)(i,(function(){var t=this._self._c;return t("div",{staticClass:"page-edit"},[t("div",{staticClass:"last-updated"},[t("span",{staticClass:"prefix"},[this._v("Last Updated:")]),this._v(" "),t("span",{staticClass:"time"},[this._v(this._s(this.$page.lastUpdated))])])])}),[],!1,null,"d53989e8",null);s.default=n.exports}}]); \ No newline at end of file diff --git a/assets/js/35.2420d9c6.js b/assets/js/35.1810d325.js similarity index 91% rename from assets/js/35.2420d9c6.js rename to assets/js/35.1810d325.js index 359ad71c..9423c99b 100644 --- a/assets/js/35.2420d9c6.js +++ b/assets/js/35.1810d325.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[35],{333:function(s,t,n){},424:function(s,t,n){"use strict";n(333)},462:function(s,t,n){"use strict";n.r(t);var i={data(){return{id:this.$route.path}},mounted(){const s=document.createElement("script");s.id="dsq-count-scr",s.src="//visnalize.disqus.com/count.js",s.async=!0,document.body.appendChild(s)}},c=(n(424),n(17)),a=Object(c.a)(i,(function(){var s=this._self._c;return s("a",{staticClass:"social-comment",attrs:{href:"#comments"}},[s("img",{attrs:{src:"https://c.disquscdn.com/next/ef5ca81/marketing/assets/img/brand/disqus-social-icon-dark.svg",alt:"disqus"}}),this._v(" "),s("span",{staticClass:"disqus-comment-count",attrs:{"data-disqus-identifier":this.id}})])}),[],!1,null,"511946ae",null);t.default=a.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[35],{333:function(s,t,n){},424:function(s,t,n){"use strict";n(333)},462:function(s,t,n){"use strict";n.r(t);var i={data(){return{id:this.$route.path}},mounted(){const s=document.createElement("script");s.id="dsq-count-scr",s.src="//visnalize.disqus.com/count.js",s.async=!0,document.body.appendChild(s)}},c=(n(424),n(13)),a=Object(c.a)(i,(function(){var s=this._self._c;return s("a",{staticClass:"social-comment",attrs:{href:"#comments"}},[s("img",{attrs:{src:"https://c.disquscdn.com/next/ef5ca81/marketing/assets/img/brand/disqus-social-icon-dark.svg",alt:"disqus"}}),this._v(" "),s("span",{staticClass:"disqus-comment-count",attrs:{"data-disqus-identifier":this.id}})])}),[],!1,null,"511946ae",null);t.default=a.exports}}]); \ No newline at end of file diff --git a/assets/js/36.529e9f75.js b/assets/js/36.5401ee64.js similarity index 91% rename from assets/js/36.529e9f75.js rename to assets/js/36.5401ee64.js index ca94a73b..f1463008 100644 --- a/assets/js/36.529e9f75.js +++ b/assets/js/36.5401ee64.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[36],{286:function(t,e,s){},292:function(t,e,s){"use strict";s(286)},296:function(t,e,s){"use strict";s.r(e);var i={data(){return{path:this.$route.path,interval:null}},mounted(){this.interval=setInterval(this.hideAds,2e3)},beforeDestroy(){clearInterval(this.interval)},methods:{hideAds(){const t=this.$el.querySelector("#disqus_thread").querySelector("iframe:first-child");null==t||t.style.setProperty("display","none","important")}}},n=(s(292),s(17)),r=Object(n.a)(i,(function(){var t=this._self._c;return t("section",[t("h2",{attrs:{id:"comments"}},[this._v("Comments")]),this._v(" "),t("disqus",{attrs:{identifier:this.path}})],1)}),[],!1,null,"2fa9e9ea",null);e.default=r.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[36],{286:function(t,e,s){},292:function(t,e,s){"use strict";s(286)},296:function(t,e,s){"use strict";s.r(e);var i={data(){return{path:this.$route.path,interval:null}},mounted(){this.interval=setInterval(this.hideAds,2e3)},beforeDestroy(){clearInterval(this.interval)},methods:{hideAds(){const t=this.$el.querySelector("#disqus_thread").querySelector("iframe:first-child");null==t||t.style.setProperty("display","none","important")}}},n=(s(292),s(13)),r=Object(n.a)(i,(function(){var t=this._self._c;return t("section",[t("h2",{attrs:{id:"comments"}},[this._v("Comments")]),this._v(" "),t("disqus",{attrs:{identifier:this.path}})],1)}),[],!1,null,"2fa9e9ea",null);e.default=r.exports}}]); \ No newline at end of file diff --git a/assets/js/37.b8546ac6.js b/assets/js/37.fac87816.js similarity index 93% rename from assets/js/37.b8546ac6.js rename to assets/js/37.fac87816.js index 044a238f..f09b2a27 100644 --- a/assets/js/37.b8546ac6.js +++ b/assets/js/37.fac87816.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[37],{335:function(t,e,n){},428:function(t,e,n){"use strict";n(335)},464:function(t,e,n){"use strict";n.r(e);var o=n(426),a=(n(427),{data:()=>({toast:null}),mounted(){this.toast=Object(o.b)({draggable:!1,timeout:!1,position:o.a.BOTTOM_LEFT})},methods:{getContent(){const t=this.$createElement;return t("a",{attrs:{href:"https://www.gamezop.com/?id=4032",target:"_blank"},style:"display: flex; align-items: center; color: #fff; text-align: center;"},[t("img",{attrs:{src:"/assets/gz-icon.gif",alt:"Gamezop",width:"48"},style:"margin-right: 8px"}),t("span",["Bored? Check out some fun games!",t("i",{style:"margin-top: 4px; display: block; font-size: 0.8em; color: #aaa"},["(From our partner ",t("span",{style:"color: #fff"},["Gamezop"]),")"])])])}}}),s=(n(428),n(17)),i=Object(s.a)(a,(function(){return(0,this._self._c)("div")}),[],!1,null,null,null);e.default=i.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[37],{335:function(t,e,n){},428:function(t,e,n){"use strict";n(335)},464:function(t,e,n){"use strict";n.r(e);var o=n(426),a=(n(427),{data:()=>({toast:null}),mounted(){this.toast=Object(o.b)({draggable:!1,timeout:!1,position:o.a.BOTTOM_LEFT})},methods:{getContent(){const t=this.$createElement;return t("a",{attrs:{href:"https://www.gamezop.com/?id=4032",target:"_blank"},style:"display: flex; align-items: center; color: #fff; text-align: center;"},[t("img",{attrs:{src:"/assets/gz-icon.gif",alt:"Gamezop",width:"48"},style:"margin-right: 8px"}),t("span",["Bored? Check out some fun games!",t("i",{style:"margin-top: 4px; display: block; font-size: 0.8em; color: #aaa"},["(From our partner ",t("span",{style:"color: #fff"},["Gamezop"]),")"])])])}}}),s=(n(428),n(13)),i=Object(s.a)(a,(function(){return(0,this._self._c)("div")}),[],!1,null,null,null);e.default=i.exports}}]); \ No newline at end of file diff --git a/assets/js/38.c5547cb2.js b/assets/js/38.eaca4635.js similarity index 89% rename from assets/js/38.c5547cb2.js rename to assets/js/38.eaca4635.js index 8db9c321..76c93f52 100644 --- a/assets/js/38.c5547cb2.js +++ b/assets/js/38.eaca4635.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[38],{284:function(t,a,o){},288:function(t,a,o){"use strict";o(284)},290:function(t,a,o){"use strict";o.r(a);o(48);var s={props:{format:{type:String,default:"auto"}},mounted(){(window.adsbygoogle=window.adsbygoogle||[]).push({})}},n=(o(288),o(17)),d=Object(n.a)(s,(function(){return(0,this._self._c)("ins",{staticClass:"adsbygoogle",staticStyle:{display:"block"},attrs:{"data-ad-slot":"3336580675","data-ad-client":"ca-pub-5904323684803247","data-ad-format":this.format,"data-full-width-responsive":"true"}})}),[],!1,null,"18b37b7d",null);a.default=d.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[38],{284:function(t,a,o){},288:function(t,a,o){"use strict";o(284)},290:function(t,a,o){"use strict";o.r(a);o(48);var s={props:{format:{type:String,default:"auto"}},mounted(){(window.adsbygoogle=window.adsbygoogle||[]).push({})}},n=(o(288),o(13)),d=Object(n.a)(s,(function(){return(0,this._self._c)("ins",{staticClass:"adsbygoogle",staticStyle:{display:"block"},attrs:{"data-ad-slot":"3336580675","data-ad-client":"ca-pub-5904323684803247","data-ad-format":this.format,"data-full-width-responsive":"true"}})}),[],!1,null,"18b37b7d",null);a.default=d.exports}}]); \ No newline at end of file diff --git a/assets/js/39.072d729e.js b/assets/js/39.dfbbd6cf.js similarity index 87% rename from assets/js/39.072d729e.js rename to assets/js/39.dfbbd6cf.js index 3d3d42f7..f2d07c39 100644 --- a/assets/js/39.072d729e.js +++ b/assets/js/39.dfbbd6cf.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[39],{342:function(t,s,i){},436:function(t,s,i){"use strict";i(342)},467:function(t,s,i){"use strict";i.r(s);var r={props:{src:String,title:String},computed:{isUrl(){return this.src.startsWith("https://")}}},c=(i(436),i(17)),e=Object(c.a)(r,(function(){var t=this._self._c;return this.isUrl?t("div",[t("iframe",{attrs:{title:this.title,src:this.src}})]):t("img",{attrs:{src:this.src,alt:this.title,width:"180",height:"180"}})}),[],!1,null,"1cdbdade",null);s.default=e.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[39],{342:function(t,s,i){},436:function(t,s,i){"use strict";i(342)},467:function(t,s,i){"use strict";i.r(s);var r={props:{src:String,title:String},computed:{isUrl(){return this.src.startsWith("https://")}}},c=(i(436),i(13)),e=Object(c.a)(r,(function(){var t=this._self._c;return this.isUrl?t("div",[t("iframe",{attrs:{title:this.title,src:this.src}})]):t("img",{attrs:{src:this.src,alt:this.title,width:"180",height:"180"}})}),[],!1,null,"1cdbdade",null);s.default=e.exports}}]); \ No newline at end of file diff --git a/assets/js/40.a7116048.js b/assets/js/40.244c8b53.js similarity index 98% rename from assets/js/40.a7116048.js rename to assets/js/40.244c8b53.js index abe7fff9..9b494847 100644 --- a/assets/js/40.a7116048.js +++ b/assets/js/40.244c8b53.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[40],{343:function(e,t,o){},437:function(e,t,o){"use strict";o(343)},468:function(e,t,o){"use strict";o.r(t);const a=[{image:"https://play-lh.googleusercontent.com/a-/ALV-UjXB4VKtTl-B8FXhulUUDaEhgh9zMqzH85KctsnEMZQYPyc=s50",author:"Cip",date:"September 23, 2023",content:"That's what I call a real Windows Simulator, it is exactly like Windows 7 but on mobile! I really like it and I gave 5 STARS beacuse of it! I hope you make really awesome updates on this game without no doubt! Thanks for reading this!"},{image:"https://play-lh.googleusercontent.com/a-/ALV-UjV7c71QQ1XkrJlnWZl7hzOqvajsFWmWUUum2rSYmunD5Vo=s50",author:"Aldree Syafiq",date:"March 24, 2023",content:"Best Windows Simulator ever! If you want to change from a phone to a PC then this app is for you. It has more than just Windows 7, it also has Win8, Win8.1, WinXp, Win11, Win10, WinVista, Win95, Win3.1, Win2000, and MacOS. There are ads but they don't really pop out too often which makes things better. There are some features that requires ads to unlock but its ok. In overall, 10/10."},{image:"https://play-lh.googleusercontent.com/a-/ALV-UjXbYQwGITwYMZ6Qp032fAolpeeiolVEZDtx7jB0IVlS8A=s50",author:"Leox",date:"January 14, 2022",content:'Omg! It works!!! Thank you so much for bringing our childhood memories back! 🥺💓🙏 I really like the game "Purble Place". A huge respect for giving us strong nostalgia vibes about our childhood so much!.💖💓💖😁 Thank you so much guys~!💖💖💖💖💖💖💖💖'},{image:"https://play-lh.googleusercontent.com/a-/ALV-UjVdAXU2dB_gSdXh1xnHhR6U_vW6bzibXPnU_rWBe1paAbc=s50",author:"The Gaelic gladiator",date:"December 16, 2021",content:"I actually posted a review on this about a year back but the app has changed a lot it's gone from 4* - 5* originally it was very minimal and you couldn't really do anything but now it's full of features and the themes are brilliant in fact you should just call it windows simulator cause with just the click of a button you have a different windows version."},{image:"https://play-lh.googleusercontent.com/a-/ALV-UjUQK3pNlNqOycbRStQThmjHxaoYfUcvWPpT0PTvx9hPgX4=s50",author:"Jephe Mendoza",date:"August 20, 2021",content:"I absolutely love this game. Nice animations, good amount of programs, able to play .mp4 files, 2 browsers, and the childhood games!"},{image:"https://play-lh.googleusercontent.com/a-/ALV-UjVwH0ozTDkOMR1kNBxQ8QUBB8yCtQSzJhcZMGp8YSLo8B0=s50",author:"Railey Dean Tiamson",date:"November 7, 2020",content:"I love this simulator! This app made me feel the best experience of Windows 7! My computer is Windows 10, but no need to downgrade, I will use this app to use Windows 7. It has the cool programs like Games, Internet Explorer, Paint, Notepad, Calculator, Snipping Tool and Windows Media Player, I recommend u to download this!"}];var n={data:()=>({reviews:a})},s=(o(437),o(17)),i=Object(s.a)(n,(function(){var e=this,t=e._self._c;return t("ul",e._l(e.reviews,(function(o,a){return t("li",{key:a},[t("div",{staticClass:"content"},[e._v(e._s(o.content))]),e._v(" "),t("figure",[t("img",{attrs:{src:o.image,alt:o.author}}),e._v(" "),t("figcaption",[t("div",{staticClass:"author"},[e._v(e._s(o.author))]),e._v(" "),t("div",{staticClass:"date"},[e._v(e._s(o.date))])])])])})),0)}),[],!1,null,"54340155",null);t.default=i.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[40],{343:function(e,t,o){},437:function(e,t,o){"use strict";o(343)},468:function(e,t,o){"use strict";o.r(t);const a=[{image:"https://play-lh.googleusercontent.com/a-/ALV-UjXB4VKtTl-B8FXhulUUDaEhgh9zMqzH85KctsnEMZQYPyc=s50",author:"Cip",date:"September 23, 2023",content:"That's what I call a real Windows Simulator, it is exactly like Windows 7 but on mobile! I really like it and I gave 5 STARS beacuse of it! I hope you make really awesome updates on this game without no doubt! Thanks for reading this!"},{image:"https://play-lh.googleusercontent.com/a-/ALV-UjV7c71QQ1XkrJlnWZl7hzOqvajsFWmWUUum2rSYmunD5Vo=s50",author:"Aldree Syafiq",date:"March 24, 2023",content:"Best Windows Simulator ever! If you want to change from a phone to a PC then this app is for you. It has more than just Windows 7, it also has Win8, Win8.1, WinXp, Win11, Win10, WinVista, Win95, Win3.1, Win2000, and MacOS. There are ads but they don't really pop out too often which makes things better. There are some features that requires ads to unlock but its ok. In overall, 10/10."},{image:"https://play-lh.googleusercontent.com/a-/ALV-UjXbYQwGITwYMZ6Qp032fAolpeeiolVEZDtx7jB0IVlS8A=s50",author:"Leox",date:"January 14, 2022",content:'Omg! It works!!! Thank you so much for bringing our childhood memories back! 🥺💓🙏 I really like the game "Purble Place". A huge respect for giving us strong nostalgia vibes about our childhood so much!.💖💓💖😁 Thank you so much guys~!💖💖💖💖💖💖💖💖'},{image:"https://play-lh.googleusercontent.com/a-/ALV-UjVdAXU2dB_gSdXh1xnHhR6U_vW6bzibXPnU_rWBe1paAbc=s50",author:"The Gaelic gladiator",date:"December 16, 2021",content:"I actually posted a review on this about a year back but the app has changed a lot it's gone from 4* - 5* originally it was very minimal and you couldn't really do anything but now it's full of features and the themes are brilliant in fact you should just call it windows simulator cause with just the click of a button you have a different windows version."},{image:"https://play-lh.googleusercontent.com/a-/ALV-UjUQK3pNlNqOycbRStQThmjHxaoYfUcvWPpT0PTvx9hPgX4=s50",author:"Jephe Mendoza",date:"August 20, 2021",content:"I absolutely love this game. Nice animations, good amount of programs, able to play .mp4 files, 2 browsers, and the childhood games!"},{image:"https://play-lh.googleusercontent.com/a-/ALV-UjVwH0ozTDkOMR1kNBxQ8QUBB8yCtQSzJhcZMGp8YSLo8B0=s50",author:"Railey Dean Tiamson",date:"November 7, 2020",content:"I love this simulator! This app made me feel the best experience of Windows 7! My computer is Windows 10, but no need to downgrade, I will use this app to use Windows 7. It has the cool programs like Games, Internet Explorer, Paint, Notepad, Calculator, Snipping Tool and Windows Media Player, I recommend u to download this!"}];var n={data:()=>({reviews:a})},s=(o(437),o(13)),i=Object(s.a)(n,(function(){var e=this,t=e._self._c;return t("ul",e._l(e.reviews,(function(o,a){return t("li",{key:a},[t("div",{staticClass:"content"},[e._v(e._s(o.content))]),e._v(" "),t("figure",[t("img",{attrs:{src:o.image,alt:o.author}}),e._v(" "),t("figcaption",[t("div",{staticClass:"author"},[e._v(e._s(o.author))]),e._v(" "),t("div",{staticClass:"date"},[e._v(e._s(o.date))])])])])})),0)}),[],!1,null,"54340155",null);t.default=i.exports}}]); \ No newline at end of file diff --git a/assets/js/41.e3704ea3.js b/assets/js/41.6ac88f94.js similarity index 83% rename from assets/js/41.e3704ea3.js rename to assets/js/41.6ac88f94.js index a8ed825e..63a5bf03 100644 --- a/assets/js/41.e3704ea3.js +++ b/assets/js/41.6ac88f94.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[41],{344:function(t,n,s){},438:function(t,n,s){"use strict";s(344)},469:function(t,n,s){"use strict";s.r(n);var i={props:{layout:String}},u=(s(438),s(17)),o=Object(u.a)(i,(function(){var t=this._self._c;return t("section",{class:this.layout},[t("div",[this._t("default")],2)])}),[],!1,null,"0f75b1de",null);n.default=o.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[41],{344:function(t,n,s){},438:function(t,n,s){"use strict";s(344)},469:function(t,n,s){"use strict";s.r(n);var i={props:{layout:String}},u=(s(438),s(13)),o=Object(u.a)(i,(function(){var t=this._self._c;return t("section",{class:this.layout},[t("div",[this._t("default")],2)])}),[],!1,null,"0f75b1de",null);n.default=o.exports}}]); \ No newline at end of file diff --git a/assets/js/42.1c70a71c.js b/assets/js/42.a42d0cc3.js similarity index 93% rename from assets/js/42.1c70a71c.js rename to assets/js/42.a42d0cc3.js index c0084ed1..f14a0445 100644 --- a/assets/js/42.1c70a71c.js +++ b/assets/js/42.a42d0cc3.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[42],{345:function(t,s,e){},439:function(t,s,e){"use strict";e(345)},470:function(t,s,e){"use strict";e.r(s);const i=new URLSearchParams({key:"AIzaSyDdLD0KGCsVWEu0cx6NrxllWT2qkFhfNg8",playlistId:"UUUq46NBY_oz46QLmyuCPxGQ",part:"snippet",maxResults:9});var a={data:()=>({videos:[]}),async mounted(){const t=await fetch("https://www.googleapis.com/youtube/v3/playlistItems?"+i).then(t=>t.json());this.videos=t.items.map(t=>({title:t.snippet.title,thumbnail:t.snippet.thumbnails.high.url,url:"https://youtu.be/"+t.snippet.resourceId.videoId}))}},n=(e(439),e(17)),l=Object(n.a)(a,(function(){var t=this,s=t._self._c;return s("ul",t._l(t.videos,(function(e,i){return s("li",{key:i},[s("a",{attrs:{href:e.url,target:"_blank",title:e.title}},[s("span",{staticClass:"thumbnail"},[s("img",{attrs:{src:e.thumbnail,alt:e.title}})]),t._v(" "),s("span",[t._v(t._s(e.title))])])])})),0)}),[],!1,null,"3a5a9ccf",null);s.default=l.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[42],{345:function(t,s,e){},439:function(t,s,e){"use strict";e(345)},470:function(t,s,e){"use strict";e.r(s);const i=new URLSearchParams({key:"AIzaSyDdLD0KGCsVWEu0cx6NrxllWT2qkFhfNg8",playlistId:"UUUq46NBY_oz46QLmyuCPxGQ",part:"snippet",maxResults:9});var a={data:()=>({videos:[]}),async mounted(){const t=await fetch("https://www.googleapis.com/youtube/v3/playlistItems?"+i).then(t=>t.json());this.videos=t.items.map(t=>({title:t.snippet.title,thumbnail:t.snippet.thumbnails.high.url,url:"https://youtu.be/"+t.snippet.resourceId.videoId}))}},n=(e(439),e(13)),l=Object(n.a)(a,(function(){var t=this,s=t._self._c;return s("ul",t._l(t.videos,(function(e,i){return s("li",{key:i},[s("a",{attrs:{href:e.url,target:"_blank",title:e.title}},[s("span",{staticClass:"thumbnail"},[s("img",{attrs:{src:e.thumbnail,alt:e.title}})]),t._v(" "),s("span",[t._v(t._s(e.title))])])])})),0)}),[],!1,null,"3a5a9ccf",null);s.default=l.exports}}]); \ No newline at end of file diff --git a/assets/js/43.bd31020b.js b/assets/js/43.3d328da7.js similarity index 86% rename from assets/js/43.bd31020b.js rename to assets/js/43.3d328da7.js index 2def53a6..21ad110b 100644 --- a/assets/js/43.bd31020b.js +++ b/assets/js/43.3d328da7.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[43],{301:function(n,t,r){},309:function(n,t,r){"use strict";r(301)},352:function(n,t,r){"use strict";r.r(t);var s={props:{current:String,tags:Array}},u=(r(309),r(17)),a=Object(u.a)(s,(function(){var n=this,t=n._self._c;return t("nav",n._l(n.tags,(function(r){return t("router-link",{key:r.path,attrs:{to:r.path}},[n._v("\n "+n._s(r.name)+"\n ")])})),1)}),[],!1,null,"7c5b105f",null);t.default=a.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[43],{301:function(n,t,r){},309:function(n,t,r){"use strict";r(301)},352:function(n,t,r){"use strict";r.r(t);var s={props:{current:String,tags:Array}},u=(r(309),r(13)),a=Object(u.a)(s,(function(){var n=this,t=n._self._c;return t("nav",n._l(n.tags,(function(r){return t("router-link",{key:r.path,attrs:{to:r.path}},[n._v("\n "+n._s(r.name)+"\n ")])})),1)}),[],!1,null,"7c5b105f",null);t.default=a.exports}}]); \ No newline at end of file diff --git a/assets/js/44.9c66132e.js b/assets/js/44.4ae85495.js similarity index 90% rename from assets/js/44.9c66132e.js rename to assets/js/44.4ae85495.js index 81f85a51..a1022bff 100644 --- a/assets/js/44.9c66132e.js +++ b/assets/js/44.4ae85495.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[44],{347:function(t,e,r){},441:function(t,e,r){"use strict";r(347)},472: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(441),r(17)),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([[44],{347:function(t,e,r){},441:function(t,e,r){"use strict";r(347)},472: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(441),r(13)),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/45.94cfe345.js b/assets/js/45.2ae39d61.js similarity index 99% rename from assets/js/45.94cfe345.js rename to assets/js/45.2ae39d61.js index 55f524d9..08164792 100644 --- a/assets/js/45.94cfe345.js +++ b/assets/js/45.2ae39d61.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[45],{384:function(e,t,a){e.exports=a.p+"assets/img/win7-simu-dau.3e6d196c.png"},385:function(e,t,a){e.exports=a.p+"assets/img/homepage-dau.e246c522.png"},481:function(e,t,a){"use strict";a.r(t);var o=a(17),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(384),alt:"Win7 Simu's daily active users stats"}})]),e._v(" "),t("google-ads"),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(385),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("google-ads"),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([[45],{384:function(e,t,a){e.exports=a.p+"assets/img/win7-simu-dau.3e6d196c.png"},385:function(e,t,a){e.exports=a.p+"assets/img/homepage-dau.e246c522.png"},480:function(e,t,a){"use strict";a.r(t);var o=a(13),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(384),alt:"Win7 Simu's daily active users stats"}})]),e._v(" "),t("google-ads"),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(385),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("google-ads"),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/46.9caec567.js b/assets/js/46.446ebc06.js similarity index 99% rename from assets/js/46.9caec567.js rename to assets/js/46.446ebc06.js index 7bc8e50a..02f471ee 100644 --- a/assets/js/46.9caec567.js +++ b/assets/js/46.446ebc06.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[46],{397:function(e,t,o){e.exports=o.p+"assets/img/win7-simu-computer.b9265f50.png"},398:function(e,t,o){e.exports=o.p+"assets/img/win7-simu-indexeddb.f8841da2.png"},488:function(e,t,o){"use strict";o.r(t);var i=o(17),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(397),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("google-ads"),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(398),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([[46],{397:function(e,t,o){e.exports=o.p+"assets/img/win7-simu-computer.b9265f50.png"},398:function(e,t,o){e.exports=o.p+"assets/img/win7-simu-indexeddb.f8841da2.png"},488:function(e,t,o){"use strict";o.r(t);var i=o(13),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(397),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("google-ads"),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(398),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/47.6e893ca2.js b/assets/js/47.c4792bb2.js similarity index 91% rename from assets/js/47.6e893ca2.js rename to assets/js/47.c4792bb2.js index ff4f472b..24ecebb2 100644 --- a/assets/js/47.6e893ca2.js +++ b/assets/js/47.c4792bb2.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[47],{399:function(e,t,s){e.exports=s.p+"assets/img/safari-share.cb037921.png"},400:function(e,t,s){e.exports=s.p+"assets/img/add-to-home-screen.5611989b.png"},489:function(e,t,s){"use strict";s.r(t);var a=s(17),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(399),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(400),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([[47],{402:function(e,t,s){e.exports=s.p+"assets/img/safari-share.cb037921.png"},403:function(e,t,s){e.exports=s.p+"assets/img/add-to-home-screen.5611989b.png"},490:function(e,t,s){"use strict";s.r(t);var a=s(13),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(402),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(403),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/48.d36dd319.js b/assets/js/48.7f0101ea.js similarity index 99% rename from assets/js/48.d36dd319.js rename to assets/js/48.7f0101ea.js index e7ad4298..6c947ea4 100644 --- a/assets/js/48.d36dd319.js +++ b/assets/js/48.7f0101ea.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[48],{383:function(e,t,a){e.exports=a.p+"assets/img/vuepress.35aa8722.png"},478:function(e,t,a){"use strict";a.r(t);var s=a(17),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(383),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("google-ads"),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([[48],{383:function(e,t,a){e.exports=a.p+"assets/img/vuepress.35aa8722.png"},478:function(e,t,a){"use strict";a.r(t);var s=a(13),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(383),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("google-ads"),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/49.c6658b0c.js b/assets/js/49.508cb150.js similarity index 97% rename from assets/js/49.c6658b0c.js rename to assets/js/49.508cb150.js index ab68ab48..20075025 100644 --- a/assets/js/49.c6658b0c.js +++ b/assets/js/49.508cb150.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[49],{422:function(e,t,s){e.exports=s.p+"assets/img/themestudio.e11eee24.jpg"},509:function(e,t,s){"use strict";s.r(t);var o=s(17),a=Object(o.a)({},(function(){var e=this,t=e._self._c;return t("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[t("h1",{attrs:{id:"theme-studio"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#theme-studio"}},[e._v("#")]),e._v(" Theme Studio")]),e._v(" "),t("a-social"),e._v(" "),t("p",[t("img",{attrs:{src:s(422),alt:"Theme Studio"}})]),e._v(" "),t("p",[t("strong",[e._v("Theme Studio")]),e._v(" is a unique extension application of "),t("RouterLink",{attrs:{to:"/win7simu/about.html"}},[e._v("Win7 Simu")]),e._v(", offering you the capability to create your own custom themes and turn the Windows 7 simulator into whatever system that only bounds to your creativity.")],1),e._v(" "),t("m-features"),e._v(" "),t("p",[e._v("With Theme Studio, you are able to:")]),e._v(" "),t("ul",[t("li",[e._v("Hand-craft your own themes using "),t("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/CSS",target:"_blank",rel:"noopener noreferrer"}},[e._v("CSS"),t("OutboundLink")],1),e._v(", a stylesheet language with a simple syntax that has been beautifying the internet since 1996). As you play with CSS while creating your themes, you get to learn and practice it in the progress.")]),e._v(" "),t("li",[e._v("Apply your themes to turn a Windows 7 simulator into any system as far as your skills and creativity may reach. You can also publish them and share with your fellow Win7ers.")]),e._v(" "),t("li",[e._v("Access those themes that are published and shared publicly from the community, pull them locally to view, edit, and save the source, and to enjoy the appearance, the uniqueness of the themes made by others.")])]),e._v(" "),t("p",[e._v("Check out the video series below to see how it works, or learn and start crafting your own theme from the "),t("RouterLink",{attrs:{to:"/win7simu/themestudio/quick-guide.html"}},[e._v("Quick Start guide")]),e._v(".")],1),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/https://youtube.com/playlist?list=PLztkJSxlj5P6lUgP806gAnAvgnCaSumsC",frameborder:"0",webkitallowfullscreen:"",mozallowfullscreen:"",allowfullscreen:""}})]),t("p")],1)}),[],!1,null,null,null);t.default=a.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[49],{422:function(e,t,s){e.exports=s.p+"assets/img/themestudio.e11eee24.jpg"},509:function(e,t,s){"use strict";s.r(t);var o=s(13),a=Object(o.a)({},(function(){var e=this,t=e._self._c;return t("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[t("h1",{attrs:{id:"theme-studio"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#theme-studio"}},[e._v("#")]),e._v(" Theme Studio")]),e._v(" "),t("a-social"),e._v(" "),t("p",[t("img",{attrs:{src:s(422),alt:"Theme Studio"}})]),e._v(" "),t("p",[t("strong",[e._v("Theme Studio")]),e._v(" is a unique extension application of "),t("RouterLink",{attrs:{to:"/win7simu/about.html"}},[e._v("Win7 Simu")]),e._v(", offering you the capability to create your own custom themes and turn the Windows 7 simulator into whatever system that only bounds to your creativity.")],1),e._v(" "),t("m-features"),e._v(" "),t("p",[e._v("With Theme Studio, you are able to:")]),e._v(" "),t("ul",[t("li",[e._v("Hand-craft your own themes using "),t("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/CSS",target:"_blank",rel:"noopener noreferrer"}},[e._v("CSS"),t("OutboundLink")],1),e._v(", a stylesheet language with a simple syntax that has been beautifying the internet since 1996). As you play with CSS while creating your themes, you get to learn and practice it in the progress.")]),e._v(" "),t("li",[e._v("Apply your themes to turn a Windows 7 simulator into any system as far as your skills and creativity may reach. You can also publish them and share with your fellow Win7ers.")]),e._v(" "),t("li",[e._v("Access those themes that are published and shared publicly from the community, pull them locally to view, edit, and save the source, and to enjoy the appearance, the uniqueness of the themes made by others.")])]),e._v(" "),t("p",[e._v("Check out the video series below to see how it works, or learn and start crafting your own theme from the "),t("RouterLink",{attrs:{to:"/win7simu/themestudio/quick-guide.html"}},[e._v("Quick Start guide")]),e._v(".")],1),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/https://youtube.com/playlist?list=PLztkJSxlj5P6lUgP806gAnAvgnCaSumsC",frameborder:"0",webkitallowfullscreen:"",mozallowfullscreen:"",allowfullscreen:""}})]),t("p")],1)}),[],!1,null,null,null);t.default=a.exports}}]); \ No newline at end of file diff --git a/assets/js/5.e382e002.js b/assets/js/5.38e10f2e.js similarity index 91% rename from assets/js/5.e382e002.js rename to assets/js/5.38e10f2e.js index 8cdf51a2..e56ca0e6 100644 --- a/assets/js/5.e382e002.js +++ b/assets/js/5.38e10f2e.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[5,24,32],{289:function(t,e,s){},295:function(t,e,s){},297:function(t,e,s){"use strict";s(289)},298:function(t,e,s){"use strict";function a(t,e="-"){return t.split(e).map(t=>t.charAt(0).toUpperCase()+t.slice(1)).join(" ")}s.d(e,"a",(function(){return a}))},299:function(t,e,s){"use strict";s.r(e);var a={props:{date:String},computed:{createdDate(){return this.date||this.$page.firstCreated}}},r=(s(297),s(17)),n=Object(r.a)(a,(function(){var t=this._self._c;return this.createdDate?t("div",{staticClass:"first-created",attrs:{title:"Created date"}},[t("v-icon",{attrs:{name:"clock"}}),this._v(" "),t("span",[this._v(this._s(this.createdDate))])],1):this._e()}),[],!1,null,"026804f3",null);e.default=n.exports},302:function(t,e,s){"use strict";s(295)},303:function(t,e,s){},308:function(t,e,s){"use strict";s.r(e);var a=s(298),r={props:{tags:[String,Array],showIcon:Boolean},computed:{_tags(){return Array.isArray(this.tags)?this.tags:[this.tags]}},methods:{pascalize:a.a}},n=(s(302),s(17)),i=Object(n.a)(r,(function(){var t=this,e=t._self._c;return e("div",[t.showIcon?e("v-icon",{attrs:{name:"tag"}}):t._e(),t._v(" "),e("ul",t._l(t._tags,(function(s){return e("li",{key:s},[e("router-link",{attrs:{to:"/blog/tag/"+s}},[t._v("\n "+t._s(t.pascalize(s))+"\n ")])],1)})),0)],1)}),[],!1,null,"451c5fa4",null);e.default=i.exports},310:function(t,e,s){"use strict";s(303)},353:function(t,e,s){"use strict";s.r(e);var a=s(299),r=s(308),n={components:{ACreated:a.default,MBlogTagList:r.default},props:{blogs:Array},methods:{getImage(t){var e;return null===(e=t.frontmatter.meta.find(t=>"image"===t.itemprop))||void 0===e?void 0:e.content}}},i=(s(310),s(17)),o=Object(i.a)(n,(function(){var t=this,e=t._self._c;return e("ul",{staticClass:"blog-links"},t._l(t.blogs,(function(s){return e("li",{key:s.key},[e("router-link",{attrs:{to:s.path}},[e("span",{staticClass:"blog-image"},[e("img",{attrs:{src:t.getImage(s),alt:s.title}})]),t._v(" "),e("h2",[t._v(t._s(s.title))]),t._v(" "),e("a-created",{attrs:{date:s.firstCreated}}),t._v(" "),e("p",[t._v(t._s(s.frontmatter.description))])],1),t._v(" "),e("m-blog-tag-list",{attrs:{tags:s.frontmatter.tag}})],1)})),0)}),[],!1,null,"2d2bd041",null);e.default=o.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[5,24,32],{289:function(t,e,s){},295:function(t,e,s){},297:function(t,e,s){"use strict";s(289)},298:function(t,e,s){"use strict";function a(t,e="-"){return t.split(e).map(t=>t.charAt(0).toUpperCase()+t.slice(1)).join(" ")}s.d(e,"a",(function(){return a}))},299:function(t,e,s){"use strict";s.r(e);var a={props:{date:String},computed:{createdDate(){return this.date||this.$page.firstCreated}}},r=(s(297),s(13)),n=Object(r.a)(a,(function(){var t=this._self._c;return this.createdDate?t("div",{staticClass:"first-created",attrs:{title:"Created date"}},[t("v-icon",{attrs:{name:"clock"}}),this._v(" "),t("span",[this._v(this._s(this.createdDate))])],1):this._e()}),[],!1,null,"026804f3",null);e.default=n.exports},302:function(t,e,s){"use strict";s(295)},303:function(t,e,s){},308:function(t,e,s){"use strict";s.r(e);var a=s(298),r={props:{tags:[String,Array],showIcon:Boolean},computed:{_tags(){return Array.isArray(this.tags)?this.tags:[this.tags]}},methods:{pascalize:a.a}},n=(s(302),s(13)),i=Object(n.a)(r,(function(){var t=this,e=t._self._c;return e("div",[t.showIcon?e("v-icon",{attrs:{name:"tag"}}):t._e(),t._v(" "),e("ul",t._l(t._tags,(function(s){return e("li",{key:s},[e("router-link",{attrs:{to:"/blog/tag/"+s}},[t._v("\n "+t._s(t.pascalize(s))+"\n ")])],1)})),0)],1)}),[],!1,null,"451c5fa4",null);e.default=i.exports},310:function(t,e,s){"use strict";s(303)},353:function(t,e,s){"use strict";s.r(e);var a=s(299),r=s(308),n={components:{ACreated:a.default,MBlogTagList:r.default},props:{blogs:Array},methods:{getImage(t){var e;return null===(e=t.frontmatter.meta.find(t=>"image"===t.itemprop))||void 0===e?void 0:e.content}}},i=(s(310),s(13)),o=Object(i.a)(n,(function(){var t=this,e=t._self._c;return e("ul",{staticClass:"blog-links"},t._l(t.blogs,(function(s){return e("li",{key:s.key},[e("router-link",{attrs:{to:s.path}},[e("span",{staticClass:"blog-image"},[e("img",{attrs:{src:t.getImage(s),alt:s.title}})]),t._v(" "),e("h2",[t._v(t._s(s.title))]),t._v(" "),e("a-created",{attrs:{date:s.firstCreated}}),t._v(" "),e("p",[t._v(t._s(s.frontmatter.description))])],1),t._v(" "),e("m-blog-tag-list",{attrs:{tags:s.frontmatter.tag}})],1)})),0)}),[],!1,null,"2d2bd041",null);e.default=o.exports}}]); \ No newline at end of file diff --git a/assets/js/51.c0924c4f.js b/assets/js/51.83754830.js similarity index 90% rename from assets/js/51.c0924c4f.js rename to assets/js/51.83754830.js index 2ebb1c77..74430d14 100644 --- a/assets/js/51.c0924c4f.js +++ b/assets/js/51.83754830.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[51],{453:function(t,e,s){"use strict";s.r(e);const o=["There's nothing here.","How did we get here?","That's a Four-Oh-Four.","Looks like we've got some broken links."];var n={methods:{getMsg:()=>o[Math.floor(Math.random()*o.length)]}},h=s(17),i=Object(h.a)(n,(function(){var t=this._self._c;return t("div",{staticClass:"theme-container"},[t("div",{staticClass:"theme-default-content"},[t("h1",[this._v("404")]),this._v(" "),t("blockquote",[this._v(this._s(this.getMsg()))]),this._v(" "),t("RouterLink",{attrs:{to:"/"}},[this._v("\n Take me home.\n ")])],1)])}),[],!1,null,null,null);e.default=i.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[51],{453:function(t,e,s){"use strict";s.r(e);const o=["There's nothing here.","How did we get here?","That's a Four-Oh-Four.","Looks like we've got some broken links."];var n={methods:{getMsg:()=>o[Math.floor(Math.random()*o.length)]}},h=s(13),i=Object(h.a)(n,(function(){var t=this._self._c;return t("div",{staticClass:"theme-container"},[t("div",{staticClass:"theme-default-content"},[t("h1",[this._v("404")]),this._v(" "),t("blockquote",[this._v(this._s(this.getMsg()))]),this._v(" "),t("RouterLink",{attrs:{to:"/"}},[this._v("\n Take me home.\n ")])],1)])}),[],!1,null,null,null);e.default=i.exports}}]); \ No newline at end of file diff --git a/assets/js/52.c6e1ed27.js b/assets/js/52.ee14066d.js similarity index 95% rename from assets/js/52.c6e1ed27.js rename to assets/js/52.ee14066d.js index 7e66597d..4d868414 100644 --- a/assets/js/52.c6e1ed27.js +++ b/assets/js/52.ee14066d.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[52],{475:function(e,t,i){"use strict";i.r(t);var s={name:"vue-disqus",props:{shortname:{type:String,required:!0},identifier:{type:String,required:!1},url:{type:String,required:!1},title:{type:String,required:!1},remote_auth_s3:{type:String,required:!1},api_key:{type:String,required:!1},sso_config:{type:Object,required:!1},language:{type:String,required:!1}},mounted(){window.DISQUS?this.reset(window.DISQUS):this.init()},methods:{reset(e){const t=this;e.reset({reload:!0,config:function(){t.setBaseConfig(this)}})},init(){const e=this;window.disqus_config=function(){e.setBaseConfig(this)},setTimeout(()=>{let e=document,t=e.createElement("script");t.setAttribute("id","embed-disqus"),t.setAttribute("data-timestamp",+new Date),t.type="text/javascript",t.async=!0,t.src=`//${this.shortname}.disqus.com/embed.js`,(e.head||e.body).appendChild(t)},0)},setBaseConfig(e){e.page.identifier=this.identifier||this.$route.path||window.location.pathname,e.page.url=this.url||this.$el.baseURI,this.title&&(e.page.title=this.title),this.remote_auth_s3&&(e.page.remote_auth_s3=this.remote_auth_s3),this.api_key&&(e.page.api_key=this.api_key),this.sso_config&&(e.sso=this.sso_config),this.language&&(e.language=this.language),e.callbacks.onReady=[()=>{this.$emit("ready")}],e.callbacks.onNewComment=[e=>{this.$emit("new-comment",e)}]}}},n=i(17),a=Object(n.a)(s,(function(){return(0,this._self._c)("div",{attrs:{id:"disqus_thread"}})}),[],!1,null,null,null);t.default=a.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[52],{475:function(e,t,i){"use strict";i.r(t);var s={name:"vue-disqus",props:{shortname:{type:String,required:!0},identifier:{type:String,required:!1},url:{type:String,required:!1},title:{type:String,required:!1},remote_auth_s3:{type:String,required:!1},api_key:{type:String,required:!1},sso_config:{type:Object,required:!1},language:{type:String,required:!1}},mounted(){window.DISQUS?this.reset(window.DISQUS):this.init()},methods:{reset(e){const t=this;e.reset({reload:!0,config:function(){t.setBaseConfig(this)}})},init(){const e=this;window.disqus_config=function(){e.setBaseConfig(this)},setTimeout(()=>{let e=document,t=e.createElement("script");t.setAttribute("id","embed-disqus"),t.setAttribute("data-timestamp",+new Date),t.type="text/javascript",t.async=!0,t.src=`//${this.shortname}.disqus.com/embed.js`,(e.head||e.body).appendChild(t)},0)},setBaseConfig(e){e.page.identifier=this.identifier||this.$route.path||window.location.pathname,e.page.url=this.url||this.$el.baseURI,this.title&&(e.page.title=this.title),this.remote_auth_s3&&(e.page.remote_auth_s3=this.remote_auth_s3),this.api_key&&(e.page.api_key=this.api_key),this.sso_config&&(e.sso=this.sso_config),this.language&&(e.language=this.language),e.callbacks.onReady=[()=>{this.$emit("ready")}],e.callbacks.onNewComment=[e=>{this.$emit("new-comment",e)}]}}},n=i(13),a=Object(n.a)(s,(function(){return(0,this._self._c)("div",{attrs:{id:"disqus_thread"}})}),[],!1,null,null,null);t.default=a.exports}}]); \ No newline at end of file diff --git a/assets/js/53.63eaffef.js b/assets/js/53.4d1a0347.js similarity index 95% rename from assets/js/53.63eaffef.js rename to assets/js/53.4d1a0347.js index e079123c..1556e1c6 100644 --- a/assets/js/53.63eaffef.js +++ b/assets/js/53.4d1a0347.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[53],{511:function(t,e,s){"use strict";s.r(e);var i={props:{selector:{type:String,default:".content__default"},content:{type:String}},data:()=>({isSupported:!0,isPlaying:!1,isPaused:!1}),watch:{$route(t,e){t.path!==e.path&&speechSynthesis.cancel()}},beforeDestroy(){speechSynthesis.cancel()},mounted(){this.isSupported="speechSynthesis"in window,this.$emit("supported",this.isSupported),this.emit("stopped")},methods:{getContent(){if(this.content)return this.content;const t=this.selector+" "+["h1","h2","h3","h4","h5","h6","p","li"].join(`,${this.selector} `),e=this.$root.$el.querySelectorAll(t);return Array.from(e).map(t=>t.textContent).join(". ")},toggle(){if(!this.isSupported)return;if(this.isPlaying&&!this.isPaused)return void speechSynthesis.pause();if(!this.isPlaying&&this.isPaused)return void speechSynthesis.resume();const t=new SpeechSynthesisUtterance(this.getContent());t.onstart=()=>{this.isPlaying=!0,this.emit("playing")},t.onend=()=>{this.isPlaying=!1,this.emit("stopped")},t.onpause=()=>{this.isPaused=!0,this.isPlaying=!1,this.emit("paused")},t.onresume=()=>{this.isPaused=!1,this.isPlaying=!0,this.emit("resumed")},speechSynthesis.cancel(),speechSynthesis.speak(t)},emit(t){this.$emit("statechange",t)}},render(){return this.$scopedSlots.default({toggle:this.toggle})}},n=s(17),h=Object(n.a)(i,void 0,void 0,!1,null,null,null);e.default=h.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[53],{511:function(t,e,s){"use strict";s.r(e);var i={props:{selector:{type:String,default:".content__default"},content:{type:String}},data:()=>({isSupported:!0,isPlaying:!1,isPaused:!1}),watch:{$route(t,e){t.path!==e.path&&speechSynthesis.cancel()}},beforeDestroy(){speechSynthesis.cancel()},mounted(){this.isSupported="speechSynthesis"in window,this.$emit("supported",this.isSupported),this.emit("stopped")},methods:{getContent(){if(this.content)return this.content;const t=this.selector+" "+["h1","h2","h3","h4","h5","h6","p","li"].join(`,${this.selector} `),e=this.$root.$el.querySelectorAll(t);return Array.from(e).map(t=>t.textContent).join(". ")},toggle(){if(!this.isSupported)return;if(this.isPlaying&&!this.isPaused)return void speechSynthesis.pause();if(!this.isPlaying&&this.isPaused)return void speechSynthesis.resume();const t=new SpeechSynthesisUtterance(this.getContent());t.onstart=()=>{this.isPlaying=!0,this.emit("playing")},t.onend=()=>{this.isPlaying=!1,this.emit("stopped")},t.onpause=()=>{this.isPaused=!0,this.isPlaying=!1,this.emit("paused")},t.onresume=()=>{this.isPaused=!1,this.isPlaying=!0,this.emit("resumed")},speechSynthesis.cancel(),speechSynthesis.speak(t)},emit(t){this.$emit("statechange",t)}},render(){return this.$scopedSlots.default({toggle:this.toggle})}},n=s(13),h=Object(n.a)(i,void 0,void 0,!1,null,null,null);e.default=h.exports}}]); \ No newline at end of file diff --git a/assets/js/54.0de9779f.js b/assets/js/54.3137a2df.js similarity index 83% rename from assets/js/54.0de9779f.js rename to assets/js/54.3137a2df.js index fb7486dd..7538c341 100644 --- a/assets/js/54.0de9779f.js +++ b/assets/js/54.3137a2df.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[54],{458:function(t,i,n){"use strict";n.r(i);var s={props:{path:String},computed:{link(){return"https://brick1100.visnalize.com/#"+this.path}}},r=n(17),e=Object(r.a)(s,(function(){var t=this._self._c;return t("a",{attrs:{href:this.link}},[t("code",[this._v(this._s(this.link))])])}),[],!1,null,null,null);i.default=e.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[54],{458:function(t,i,n){"use strict";n.r(i);var s={props:{path:String},computed:{link(){return"https://brick1100.visnalize.com/#"+this.path}}},r=n(13),e=Object(r.a)(s,(function(){var t=this._self._c;return t("a",{attrs:{href:this.link}},[t("code",[this._v(this._s(this.link))])])}),[],!1,null,null,null);i.default=e.exports}}]); \ No newline at end of file diff --git a/assets/js/55.809f433e.js b/assets/js/55.77c7e5ef.js similarity index 82% rename from assets/js/55.809f433e.js rename to assets/js/55.77c7e5ef.js index a5cc2ea6..35e62dca 100644 --- a/assets/js/55.809f433e.js +++ b/assets/js/55.77c7e5ef.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[55],{459:function(s,t,n){"use strict";n.r(t);var e={props:{s:String},computed:{src(){return"/assets/keys/"+this.s+".png"}}},r=n(17),i=Object(r.a)(e,(function(){return(0,this._self._c)("img",{attrs:{src:this.src,alt:"key "+this.s,height:"20",width:"auto"}})}),[],!1,null,null,null);t.default=i.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[55],{459:function(s,t,n){"use strict";n.r(t);var e={props:{s:String},computed:{src(){return"/assets/keys/"+this.s+".png"}}},r=n(13),i=Object(r.a)(e,(function(){return(0,this._self._c)("img",{attrs:{src:this.src,alt:"key "+this.s,height:"20",width:"auto"}})}),[],!1,null,null,null);t.default=i.exports}}]); \ No newline at end of file diff --git a/assets/js/56.1213c22c.js b/assets/js/56.16320812.js similarity index 79% rename from assets/js/56.1213c22c.js rename to assets/js/56.16320812.js index 2c7df9aa..c8c2b0ab 100644 --- a/assets/js/56.1213c22c.js +++ b/assets/js/56.16320812.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[56],{460:function(t,e,n){"use strict";n.r(e);var o={props:{to:{type:String,required:!0}},beforeMount(){document.location.replace(this.to)}},r=n(17),u=Object(r.a)(o,(function(){return(0,this._self._c)("div")}),[],!1,null,null,null);e.default=u.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[56],{460:function(t,e,n){"use strict";n.r(e);var o={props:{to:{type:String,required:!0}},beforeMount(){document.location.replace(this.to)}},r=n(13),u=Object(r.a)(o,(function(){return(0,this._self._c)("div")}),[],!1,null,null,null);e.default=u.exports}}]); \ No newline at end of file diff --git a/assets/js/57.23ce4c5f.js b/assets/js/57.3a3e093c.js similarity index 98% rename from assets/js/57.23ce4c5f.js rename to assets/js/57.3a3e093c.js index d53be694..554f6b7f 100644 --- a/assets/js/57.23ce4c5f.js +++ b/assets/js/57.3a3e093c.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[57],{476:function(e,t,o){"use strict";o.r(t);var a=o(17),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:"🙋‍♂️-about-me"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#🙋‍♂️-about-me"}},[e._v("#")]),e._v(" 🙋‍♂️ About Me")]),e._v(" "),t("p",[e._v("Howdy, glad to see that you are interested to know about me. I am a "),t("strong",[e._v("full-time software developer")]),e._v(" and a "),t("strong",[e._v("free-time app maker")]),e._v(". 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.")]),e._v(" "),t("p",[e._v("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: "),t("strong",[e._v("to build apps for entertainment")]),e._v(". If you would like, follow me on "),t("RouterLink",{attrs:{to:"/blog/"}},[e._v("my journey")]),e._v(" to contribute to the world in my own way.")],1),e._v(" "),t("p",[e._v("Tools I use:")]),e._v(" "),t("ul",[t("li",[e._v("1 cheap laptop, 1 used monitor and 1 low-end mobile device")]),e._v(" "),t("li",[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("a",{attrs:{href:"https://developer.android.com/studio",target:"_blank",rel:"noopener noreferrer"}},[e._v("Android Studio"),t("OutboundLink")],1)]),e._v(" "),t("li",[t("a",{attrs:{href:"https://github.com/",target:"_blank",rel:"noopener noreferrer"}},[e._v("Github"),t("OutboundLink")],1)]),e._v(" "),t("li",[t("a",{attrs:{href:"https://www.adobe.com/sea/products/photoshop.html",target:"_blank",rel:"noopener noreferrer"}},[e._v("Photoshop"),t("OutboundLink")],1)]),e._v(" "),t("li",[t("a",{attrs:{href:"https://www.figma.com/",target:"_blank",rel:"noopener noreferrer"}},[e._v("Figma"),t("OutboundLink")],1)]),e._v(" "),t("li",[t("a",{attrs:{href:"https://www.screenpresso.com/",target:"_blank",rel:"noopener noreferrer"}},[e._v("Screenpresso"),t("OutboundLink")],1)])]),e._v(" "),t("h2",{attrs:{id:"visnalize"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#visnalize"}},[e._v("#")]),e._v(" Visnalize")]),e._v(" "),t("p",[t("strong",[e._v("Visnalize")]),e._v(" is "),t("strong",[e._v("Visualize")]),e._v(" (not "),t("em",[e._v("Visnalize")]),e._v(") with the letter "),t("strong",[e._v("u")]),e._v(" 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 "),t("strong",[e._v("u")]),e._v(" upside down was a small intentional touch that has luckily helped me stand out from the crowd in terms of "),t("a",{attrs:{href:"https://www.google.com/search?q=visnalize",target:"_blank",rel:"noopener noreferrer"}},[e._v("search engine results"),t("OutboundLink")],1),e._v(".")]),e._v(" "),t("p",[e._v("The logo is also shamelessly created by myself using MS Paint and eventually on Figma.")]),e._v(" "),t("h2",{attrs:{id:"contact"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#contact"}},[e._v("#")]),e._v(" Contact")]),e._v(" "),t("p",[e._v("I am not actively available via direct messaging or chat apps like Discord, WhatsApp etc. You can reach me via email at "),t("a",{attrs:{href:"mailto:hey@visnalize.com"}},[e._v("hey@visnalize.com")]),e._v(" or with a little help from the form below:")]),e._v(" "),t("email-sender")],1)}),[],!1,null,null,null);t.default=r.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[57],{476:function(e,t,o){"use strict";o.r(t);var a=o(13),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:"🙋‍♂️-about-me"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#🙋‍♂️-about-me"}},[e._v("#")]),e._v(" 🙋‍♂️ About Me")]),e._v(" "),t("p",[e._v("Howdy, glad to see that you are interested to know about me. I am a "),t("strong",[e._v("full-time software developer")]),e._v(" and a "),t("strong",[e._v("free-time app maker")]),e._v(". 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.")]),e._v(" "),t("p",[e._v("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: "),t("strong",[e._v("to build apps for entertainment")]),e._v(". If you would like, follow me on "),t("RouterLink",{attrs:{to:"/blog/"}},[e._v("my journey")]),e._v(" to contribute to the world in my own way.")],1),e._v(" "),t("p",[e._v("Tools I use:")]),e._v(" "),t("ul",[t("li",[e._v("1 cheap laptop, 1 used monitor and 1 low-end mobile device")]),e._v(" "),t("li",[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("a",{attrs:{href:"https://developer.android.com/studio",target:"_blank",rel:"noopener noreferrer"}},[e._v("Android Studio"),t("OutboundLink")],1)]),e._v(" "),t("li",[t("a",{attrs:{href:"https://github.com/",target:"_blank",rel:"noopener noreferrer"}},[e._v("Github"),t("OutboundLink")],1)]),e._v(" "),t("li",[t("a",{attrs:{href:"https://www.adobe.com/sea/products/photoshop.html",target:"_blank",rel:"noopener noreferrer"}},[e._v("Photoshop"),t("OutboundLink")],1)]),e._v(" "),t("li",[t("a",{attrs:{href:"https://www.figma.com/",target:"_blank",rel:"noopener noreferrer"}},[e._v("Figma"),t("OutboundLink")],1)]),e._v(" "),t("li",[t("a",{attrs:{href:"https://www.screenpresso.com/",target:"_blank",rel:"noopener noreferrer"}},[e._v("Screenpresso"),t("OutboundLink")],1)])]),e._v(" "),t("h2",{attrs:{id:"visnalize"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#visnalize"}},[e._v("#")]),e._v(" Visnalize")]),e._v(" "),t("p",[t("strong",[e._v("Visnalize")]),e._v(" is "),t("strong",[e._v("Visualize")]),e._v(" (not "),t("em",[e._v("Visnalize")]),e._v(") with the letter "),t("strong",[e._v("u")]),e._v(" 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 "),t("strong",[e._v("u")]),e._v(" upside down was a small intentional touch that has luckily helped me stand out from the crowd in terms of "),t("a",{attrs:{href:"https://www.google.com/search?q=visnalize",target:"_blank",rel:"noopener noreferrer"}},[e._v("search engine results"),t("OutboundLink")],1),e._v(".")]),e._v(" "),t("p",[e._v("The logo is also shamelessly created by myself using MS Paint and eventually on Figma.")]),e._v(" "),t("h2",{attrs:{id:"contact"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#contact"}},[e._v("#")]),e._v(" Contact")]),e._v(" "),t("p",[e._v("I am not actively available via direct messaging or chat apps like Discord, WhatsApp etc. You can reach me via email at "),t("a",{attrs:{href:"mailto:hey@visnalize.com"}},[e._v("hey@visnalize.com")]),e._v(" or with a little help from the form below:")]),e._v(" "),t("email-sender")],1)}),[],!1,null,null,null);t.default=r.exports}}]); \ No newline at end of file diff --git a/assets/js/58.b91beeb1.js b/assets/js/58.865910d1.js similarity index 99% rename from assets/js/58.b91beeb1.js rename to assets/js/58.865910d1.js index 80fe8678..dfa2fd3d 100644 --- a/assets/js/58.b91beeb1.js +++ b/assets/js/58.865910d1.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[58],{479:function(e,t,a){"use strict";a.r(t);var o=a(17),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:"how-i-built-win7-simu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#how-i-built-win7-simu"}},[e._v("#")]),e._v(" How I built Win7 Simu")]),e._v(" "),t("m-blog-meta"),e._v(" "),t("p",[t("img",{attrs:{src:"/assets/covers/building-win7-simu.jpg",alt:"Win7 Simu screenshot"}})]),e._v(" "),t("p",[e._v("Today is October 10, 2022, "),t("RouterLink",{attrs:{to:"/win7simu/about.html"}},[e._v("Win7 Simu")]),e._v(" has nearly reached "),t("strong",[e._v("5M downloads")]),e._v(" on "),t("a",{attrs:{href:"https://play.google.com/store/apps/details?id=com.visnalize.win7simu",target:"_blank",rel:"noopener noreferrer"}},[e._v("Play Store"),t("OutboundLink")],1),e._v(" ever since it was released on February 13, 2020 (4.4M to be exact, but who cares). As an early celebration of this success (in silence, as I have always been), I decided to write another blog post, to have a reflection on my journey with it so far, and to share my experience, my lessons learned, and some boring technical stuff that you may find somewhat interesting and useful, or not. So sit tight, read through my journey, and hope you will enjoy it.")],1),e._v(" "),t("h2",{attrs:{id:"how-it-all-started"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#how-it-all-started"}},[e._v("#")]),e._v(" How it all started")]),e._v(" "),t("p",[e._v("As an average guy growing up in a developing country, I did not get to know about computer science or software development at an early age. It was not until I finished high school that I started to learn about software. But reckon that's not something big to complain about, though I've gotta say, it has never been easy to walk down this path, and I guess many people reading this, who are also working in this field would perceive that well. There are times that I wanted to quit and find another job to do, something else that would unstrain my brain, not having to keep trying to get up to speed with the crazy tech world, even if it comes with less income. However, considering the fact that there are always people who are not as lucky as I am, the opportunities they were given in life may be very limited, therefore, the hardship I am facing barely means anything. In the end, I still managed to find my passion in software, which lies with "),t("em",[e._v("front-end development")]),e._v('. For those who are unfamiliar with the term "front-end", it\'s an aspect of software development, involving more on the ability to create beautiful interfaces and tailor the experience for the users.')]),e._v(" "),t("p",[e._v("So what does that have anything to do with Win7 Simu you may ask? Well, everything. Front-end development is something that I learned all by myself, so at the time, I needed to build something to familiarize myself into the basics and concepts. And oddly enough, rather than picking something that most people do to practice, probably an e-commerce website or some Twitter/Facebook/Netflix clones, out of the ideas that could not seem to be more impractical, I picked an OS clone. And there goes this "),t("strong",[e._v("Win7 Simu")]),e._v(", my very first pet project which I have been nourishing and is growing.")]),e._v(" "),t("h3",{attrs:{id:"the-goal"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#the-goal"}},[e._v("#")]),e._v(" The goal")]),e._v(" "),t("p",[e._v("As mentioned, I started the project with the goal to practice and learn more about front-end. The idea of cloning an operating system on the web is pretty unique (due to the fact that it's time-consuming and impractical, or rather...useless), but apparently, it has so much potential in what I could learn and achieve just from using the web techs. Like, imagine having a calculator and a text editor opening side by side, or switching between nostalgic themes, just in a single website. It's like a super app containing several child apps, built from one single codebase, you get to train your brain to think about how to structure the project in a maintainable and scalable way, and all the different and various web techs you could apply to expand your knowledge. Sounds ideal, doesn't it? Unfortunately, people's minds don't work the same way, even my close friend called it a stupid app that is of no use. But I didn't give up on the idea and kept nourishing it. As a result, I did learn a lot about software/app making, a whole process from prioritization, implementation, testing, deployment to maintenance and user feedback collection. Even better, it has become a side hustle that I could earn a bit from the "),t("RouterLink",{attrs:{to:"/blog/about-the-ads.html"}},[e._v("advertisements")]),e._v(" I placed within the app.")],1),e._v(" "),t("div",{staticClass:"custom-block tip"},[t("p",{staticClass:"custom-block-title"},[e._v('"It\'s like an interactive resource to learn about Windows 7, or computer in general."')]),e._v(" "),t("p",[e._v("— User reviews on Google Play")])]),e._v(" "),t("p",[e._v("Starting with such a simple goal, I didn't think far ahead and intended to drop this project at some point in the future when there's not much else to learn. However, I have been receiving a lot of positive feedback and encouragement from my users (my fellow Windows lovers), reviews and comments telling me that Win7 Simu has been serving them well in teaching or learning about computers, where computers and devices are "),t("strong",[e._v("not easily accessible")]),e._v(" for people in some countries. Such feedback literally has been making my days, making me realize that my silly project has helped people in some ways that I could have never thought of. Therefore, I decided to dedicate more of my time over the weekend and keep improving it, bringing forth more useful (though only basic) features and functionalities based on user suggestions, with love and appreciation.")]),e._v(" "),t("google-ads"),e._v(" "),t("h3",{attrs:{id:"the-tech-stack"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#the-tech-stack"}},[e._v("#")]),e._v(" The tech stack")]),e._v(" "),t("p",[e._v("In summary:")]),e._v(" "),t("ul",[t("li",[e._v("HTML, CSS, JavaScript, Java")]),e._v(" "),t("li",[t("a",{attrs:{href:"https://sass-lang.com/",target:"_blank",rel:"noopener noreferrer"}},[e._v("Sass"),t("OutboundLink")],1)]),e._v(" "),t("li",[t("a",{attrs:{href:"https://v2.vuejs.org/",target:"_blank",rel:"noopener noreferrer"}},[e._v("Vue 2"),t("OutboundLink")],1)]),e._v(" "),t("li",[t("a",{attrs:{href:"https://vuex.vuejs.org/",target:"_blank",rel:"noopener noreferrer"}},[e._v("Vuex"),t("OutboundLink")],1)]),e._v(" "),t("li",[t("a",{attrs:{href:"https://kazupon.github.io/vue-i18n/",target:"_blank",rel:"noopener noreferrer"}},[e._v("Vue-i18n"),t("OutboundLink")],1)]),e._v(" "),t("li",[t("a",{attrs:{href:"https://firebase.google.com/",target:"_blank",rel:"noopener noreferrer"}},[e._v("Firebase"),t("OutboundLink")],1)]),e._v(" "),t("li",[t("a",{attrs:{href:"https://capacitorjs.com/",target:"_blank",rel:"noopener noreferrer"}},[e._v("Capacitor"),t("OutboundLink")],1)])]),e._v(" "),t("p",[e._v("There are several more open-sourced packages I used to build Win7 Simu, but the main tech stack is there. So yep, that may be to your surprise, despite being an Android app, the project was built from the ground using entirely web technologies, from the most fundamental stuff like HTML, CSS, JS to something a little more advanced such as Vue or Sass.")]),e._v(" "),t("p",[t("strong",[e._v("Vue")]),e._v(" has been such an elegant and developer-friendly framework to use, saved me a bunch of time from all the code structuring, refactoring, and scaling. "),t("strong",[e._v("Firebase")]),e._v(" is extremely useful for people who lack the interest and skillset in database/back-end development like me to easily deal with that stuff and integrate into the project with minimal effort. To transform a web app to an Android app, prior to knowing about "),t("strong",[e._v("Capacitor")]),e._v(", I tended to a rough technique called "),t("strong",[e._v("Hybrid app development")]),e._v(" and wrote my own JS interfaces in Java to bridge the web codebase with the Android native environment. It worked, but as an amateur, there were so many flaws and room for improvement in my code, then after knowing of Capacitor's existence, which is basically of the same principle but better in possible many ways, I transitioned into using Capacitor in no time, and the app has been working and growing with fewer problems.")]),e._v(" "),t("a",{attrs:{id:"iframe-issue"}}),e._v(" "),t("p",[e._v("I would also like to take this chance to unveil some technical difficulties related to an issue that a lot of users have been complaining about, which I included with the "),t("RouterLink",{attrs:{to:"/win7simu/faq.html"}},[e._v("FAQs")]),e._v(": "),t("strong",[e._v("the unstable web browsers")]),e._v(". As you have known, Win7 Simu is composed of web techs, it is ultimately just a website/web app that runs inside a web browser/Webview, at this point, it is not possible for me to come up with a way to implement something like a web browser that runs inside your web browser/Webview without the help of an "),t("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe",target:"_blank",rel:"noopener noreferrer"}},[e._v("iframe"),t("OutboundLink")],1),e._v(", but due to security concerns, iframes are blocked from accessing the majority of websites. Therefore, I have to host and run a server that pulls website content and injects it into the iframe every time a user uses the simulator's browser. As a result, all requests are bottlenecked to this server and may become overloaded anytime when the number of simultaneous users is way too high. This is a limitation of either the web techs, or even my skillset, but I'm afraid to say, it is what it is. If you happen to know a better solution, I'm more than happy to learn about it.")],1),e._v(" "),t("h2",{attrs:{id:"it-s-come-a-long-way"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#it-s-come-a-long-way"}},[e._v("#")]),e._v(" It's come a long way")]),e._v(" "),t("p",[e._v("Looking back, the Windows 7 simulator certainly has come a long way. Being the first pet project that I started when taking my very first steps into the field of front-end, it has grown a lot since then. "),t("a",{attrs:{href:"https://www.sololearn.com/compiler-playground/W0jzR96Id2Bw/",target:"_blank",rel:"noopener noreferrer"}},[e._v("The early prototype"),t("OutboundLink")],1),e._v(" you can still find on "),t("strong",[e._v("Sololearn")]),e._v(", a platform that helped me get into web development back then (the code looks like a huge mess now LOL). "),t("a",{attrs:{href:"https://khang-nd.github.io/win7/",target:"_blank",rel:"noopener noreferrer"}},[e._v("The next iteration"),t("OutboundLink")],1),e._v(" was basically pulled off from there and still used the same tech stuff, though with some improvements it still barely looked decent. Later on, I rewrote the project completely using the tech stack I mentioned above and released the first version on Android, you can still get a glimpse of it from the below video:")]),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/OarDV_dEkcY",frameborder:"0",webkitallowfullscreen:"",mozallowfullscreen:"",allowfullscreen:""}})]),t("p"),e._v(" "),t("p",[e._v("From here on, the simulator has been receiving updates regularly and strives for becoming a high-quality app with more cool features introduced in every update. In summary, here is a timeline of some milestones up until now, for your reference:")]),e._v(" "),t("ul",[t("li",[e._v("July 29, 2019 - "),t("a",{attrs:{href:"https://www.sololearn.com/compiler-playground/W0jzR96Id2Bw",target:"_blank",rel:"noopener noreferrer"}},[e._v("an early prototype"),t("OutboundLink")],1),e._v(" called "),t("strong",[e._v("Windows 7 Simulation")]),e._v(" on Sololearn.")]),e._v(" "),t("li",[e._v("September 21, 2019 - "),t("a",{attrs:{href:"https://khang-nd.github.io/win7/",target:"_blank",rel:"noopener noreferrer"}},[e._v("the next iteration"),t("OutboundLink")],1),e._v(" of Windows 7 Simulation.")]),e._v(" "),t("li",[e._v("January 28, 2020 - "),t("a",{attrs:{href:"https://youtu.be/OarDV_dEkcY",target:"_blank",rel:"noopener noreferrer"}},[e._v("the first release"),t("OutboundLink")],1),e._v(" to Google Play under the name "),t("strong",[e._v("Windows 7 Simulator")]),e._v(".")]),e._v(" "),t("li",[e._v("February 4, 2020 - Google Play suspended and removed Windows 7 Simulator.")]),e._v(" "),t("li",[e._v("February 13, 2020 - "),t("a",{attrs:{href:"https://youtu.be/F6vtQUS0X6o",target:"_blank",rel:"noopener noreferrer"}},[e._v("a re-release"),t("OutboundLink")],1),e._v(" to Google Play under the name "),t("strong",[e._v("Win7 Simu")]),e._v(".")]),e._v(" "),t("li",[e._v("October 10, 2022 - celebrating 5M downloads of Win7 Simu 🥳🎉")])]),e._v(" "),t("h2",{attrs:{id:"what-s-next"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#what-s-next"}},[e._v("#")]),e._v(" What's next")]),e._v(" "),t("p",[e._v("Win7 Simu has been undergoing several changes and updates from time to time to become what it is today. There are apparently still so many things that can be added to the simulator, and a lot of improvements to be done on the quality side, I mean, seriously, the teams at Microsoft spent literally years building and releasing a historic product such as the Windows 7 operating system, how would you expect a nobody to recreate it flawlessly in a short time, even if it's just a simulator.")]),e._v(" "),t("p",[e._v("As the project has been showing potential since, there are a couple of things I have had in mind in order to keep it growing and turn into something even more beneficial for the users, rather than blindly doing the development as I please, for your information:")]),e._v(" "),t("ul",{staticClass:"contains-task-list"},[t("li",{staticClass:"task-list-item"},[t("input",{staticClass:"task-list-item-checkbox",attrs:{checked:"",disabled:"",type:"checkbox"}}),e._v(" Regularly check out user reviews and feedback from several sources (Google Play reviews, emails, comments etc.) for feature prioritization.")]),e._v(" "),t("li",{staticClass:"task-list-item"},[t("input",{staticClass:"task-list-item-checkbox",attrs:{checked:"",disabled:"",type:"checkbox"}}),e._v(" Provide some ways for users to participate in translating the interface → "),t("a",{attrs:{href:"https://crowdin.com/project/win7simu",target:"_blank",rel:"noopener noreferrer"}},[e._v("Crowdin"),t("OutboundLink")],1)]),e._v(" "),t("li",{staticClass:"task-list-item"},[t("input",{staticClass:"task-list-item-checkbox",attrs:{checked:"",disabled:"",type:"checkbox"}}),e._v(" Keep users informed about the new changes for every update → "),t("RouterLink",{attrs:{to:"/win7simu/changelog.html"}},[e._v("Changelog")])],1),e._v(" "),t("li",{staticClass:"task-list-item"},[t("input",{staticClass:"task-list-item-checkbox",attrs:{disabled:"",type:"checkbox"}}),e._v(" Implement the suggested features from the users according to the assigned priorities.")]),e._v(" "),t("li",{staticClass:"task-list-item"},[t("input",{staticClass:"task-list-item-checkbox",attrs:{disabled:"",type:"checkbox"}}),e._v(" Implement some unique features that enhance the purpose of learning through the simulator.")]),e._v(" "),t("li",{staticClass:"task-list-item"},[t("input",{staticClass:"task-list-item-checkbox",attrs:{disabled:"",type:"checkbox"}}),e._v(" Integrate CI and incorporate automation tests to ensure the quality of every release.")]),e._v(" "),t("li",{staticClass:"task-list-item"},[t("input",{staticClass:"task-list-item-checkbox",attrs:{disabled:"",type:"checkbox"}}),e._v(" Public the source code at some point for various benefits.")])]),e._v(" "),t("p",[e._v("With all that said, I'm making no promise that I would be able to implement all the features that have been suggested so far, or that I would be able to achieve any of the dot points above in a short span of time. If anything, I may only assure you that I will keep working on this project as long as I can. And if I may ask you, please keep accompanying me in my journey and stay tuned for future updates of Win7 Simu or any future products that I will be able to bring forward.")]),e._v(" "),t("p",[t("em",[e._v("Thank you for being part of my journey. Sincerely.")])]),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([[58],{479:function(e,t,a){"use strict";a.r(t);var o=a(13),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:"how-i-built-win7-simu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#how-i-built-win7-simu"}},[e._v("#")]),e._v(" How I built Win7 Simu")]),e._v(" "),t("m-blog-meta"),e._v(" "),t("p",[t("img",{attrs:{src:"/assets/covers/building-win7-simu.jpg",alt:"Win7 Simu screenshot"}})]),e._v(" "),t("p",[e._v("Today is October 10, 2022, "),t("RouterLink",{attrs:{to:"/win7simu/about.html"}},[e._v("Win7 Simu")]),e._v(" has nearly reached "),t("strong",[e._v("5M downloads")]),e._v(" on "),t("a",{attrs:{href:"https://play.google.com/store/apps/details?id=com.visnalize.win7simu",target:"_blank",rel:"noopener noreferrer"}},[e._v("Play Store"),t("OutboundLink")],1),e._v(" ever since it was released on February 13, 2020 (4.4M to be exact, but who cares). As an early celebration of this success (in silence, as I have always been), I decided to write another blog post, to have a reflection on my journey with it so far, and to share my experience, my lessons learned, and some boring technical stuff that you may find somewhat interesting and useful, or not. So sit tight, read through my journey, and hope you will enjoy it.")],1),e._v(" "),t("h2",{attrs:{id:"how-it-all-started"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#how-it-all-started"}},[e._v("#")]),e._v(" How it all started")]),e._v(" "),t("p",[e._v("As an average guy growing up in a developing country, I did not get to know about computer science or software development at an early age. It was not until I finished high school that I started to learn about software. But reckon that's not something big to complain about, though I've gotta say, it has never been easy to walk down this path, and I guess many people reading this, who are also working in this field would perceive that well. There are times that I wanted to quit and find another job to do, something else that would unstrain my brain, not having to keep trying to get up to speed with the crazy tech world, even if it comes with less income. However, considering the fact that there are always people who are not as lucky as I am, the opportunities they were given in life may be very limited, therefore, the hardship I am facing barely means anything. In the end, I still managed to find my passion in software, which lies with "),t("em",[e._v("front-end development")]),e._v('. For those who are unfamiliar with the term "front-end", it\'s an aspect of software development, involving more on the ability to create beautiful interfaces and tailor the experience for the users.')]),e._v(" "),t("p",[e._v("So what does that have anything to do with Win7 Simu you may ask? Well, everything. Front-end development is something that I learned all by myself, so at the time, I needed to build something to familiarize myself into the basics and concepts. And oddly enough, rather than picking something that most people do to practice, probably an e-commerce website or some Twitter/Facebook/Netflix clones, out of the ideas that could not seem to be more impractical, I picked an OS clone. And there goes this "),t("strong",[e._v("Win7 Simu")]),e._v(", my very first pet project which I have been nourishing and is growing.")]),e._v(" "),t("h3",{attrs:{id:"the-goal"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#the-goal"}},[e._v("#")]),e._v(" The goal")]),e._v(" "),t("p",[e._v("As mentioned, I started the project with the goal to practice and learn more about front-end. The idea of cloning an operating system on the web is pretty unique (due to the fact that it's time-consuming and impractical, or rather...useless), but apparently, it has so much potential in what I could learn and achieve just from using the web techs. Like, imagine having a calculator and a text editor opening side by side, or switching between nostalgic themes, just in a single website. It's like a super app containing several child apps, built from one single codebase, you get to train your brain to think about how to structure the project in a maintainable and scalable way, and all the different and various web techs you could apply to expand your knowledge. Sounds ideal, doesn't it? Unfortunately, people's minds don't work the same way, even my close friend called it a stupid app that is of no use. But I didn't give up on the idea and kept nourishing it. As a result, I did learn a lot about software/app making, a whole process from prioritization, implementation, testing, deployment to maintenance and user feedback collection. Even better, it has become a side hustle that I could earn a bit from the "),t("RouterLink",{attrs:{to:"/blog/about-the-ads.html"}},[e._v("advertisements")]),e._v(" I placed within the app.")],1),e._v(" "),t("div",{staticClass:"custom-block tip"},[t("p",{staticClass:"custom-block-title"},[e._v('"It\'s like an interactive resource to learn about Windows 7, or computer in general."')]),e._v(" "),t("p",[e._v("— User reviews on Google Play")])]),e._v(" "),t("p",[e._v("Starting with such a simple goal, I didn't think far ahead and intended to drop this project at some point in the future when there's not much else to learn. However, I have been receiving a lot of positive feedback and encouragement from my users (my fellow Windows lovers), reviews and comments telling me that Win7 Simu has been serving them well in teaching or learning about computers, where computers and devices are "),t("strong",[e._v("not easily accessible")]),e._v(" for people in some countries. Such feedback literally has been making my days, making me realize that my silly project has helped people in some ways that I could have never thought of. Therefore, I decided to dedicate more of my time over the weekend and keep improving it, bringing forth more useful (though only basic) features and functionalities based on user suggestions, with love and appreciation.")]),e._v(" "),t("google-ads"),e._v(" "),t("h3",{attrs:{id:"the-tech-stack"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#the-tech-stack"}},[e._v("#")]),e._v(" The tech stack")]),e._v(" "),t("p",[e._v("In summary:")]),e._v(" "),t("ul",[t("li",[e._v("HTML, CSS, JavaScript, Java")]),e._v(" "),t("li",[t("a",{attrs:{href:"https://sass-lang.com/",target:"_blank",rel:"noopener noreferrer"}},[e._v("Sass"),t("OutboundLink")],1)]),e._v(" "),t("li",[t("a",{attrs:{href:"https://v2.vuejs.org/",target:"_blank",rel:"noopener noreferrer"}},[e._v("Vue 2"),t("OutboundLink")],1)]),e._v(" "),t("li",[t("a",{attrs:{href:"https://vuex.vuejs.org/",target:"_blank",rel:"noopener noreferrer"}},[e._v("Vuex"),t("OutboundLink")],1)]),e._v(" "),t("li",[t("a",{attrs:{href:"https://kazupon.github.io/vue-i18n/",target:"_blank",rel:"noopener noreferrer"}},[e._v("Vue-i18n"),t("OutboundLink")],1)]),e._v(" "),t("li",[t("a",{attrs:{href:"https://firebase.google.com/",target:"_blank",rel:"noopener noreferrer"}},[e._v("Firebase"),t("OutboundLink")],1)]),e._v(" "),t("li",[t("a",{attrs:{href:"https://capacitorjs.com/",target:"_blank",rel:"noopener noreferrer"}},[e._v("Capacitor"),t("OutboundLink")],1)])]),e._v(" "),t("p",[e._v("There are several more open-sourced packages I used to build Win7 Simu, but the main tech stack is there. So yep, that may be to your surprise, despite being an Android app, the project was built from the ground using entirely web technologies, from the most fundamental stuff like HTML, CSS, JS to something a little more advanced such as Vue or Sass.")]),e._v(" "),t("p",[t("strong",[e._v("Vue")]),e._v(" has been such an elegant and developer-friendly framework to use, saved me a bunch of time from all the code structuring, refactoring, and scaling. "),t("strong",[e._v("Firebase")]),e._v(" is extremely useful for people who lack the interest and skillset in database/back-end development like me to easily deal with that stuff and integrate into the project with minimal effort. To transform a web app to an Android app, prior to knowing about "),t("strong",[e._v("Capacitor")]),e._v(", I tended to a rough technique called "),t("strong",[e._v("Hybrid app development")]),e._v(" and wrote my own JS interfaces in Java to bridge the web codebase with the Android native environment. It worked, but as an amateur, there were so many flaws and room for improvement in my code, then after knowing of Capacitor's existence, which is basically of the same principle but better in possible many ways, I transitioned into using Capacitor in no time, and the app has been working and growing with fewer problems.")]),e._v(" "),t("a",{attrs:{id:"iframe-issue"}}),e._v(" "),t("p",[e._v("I would also like to take this chance to unveil some technical difficulties related to an issue that a lot of users have been complaining about, which I included with the "),t("RouterLink",{attrs:{to:"/win7simu/faq.html"}},[e._v("FAQs")]),e._v(": "),t("strong",[e._v("the unstable web browsers")]),e._v(". As you have known, Win7 Simu is composed of web techs, it is ultimately just a website/web app that runs inside a web browser/Webview, at this point, it is not possible for me to come up with a way to implement something like a web browser that runs inside your web browser/Webview without the help of an "),t("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe",target:"_blank",rel:"noopener noreferrer"}},[e._v("iframe"),t("OutboundLink")],1),e._v(", but due to security concerns, iframes are blocked from accessing the majority of websites. Therefore, I have to host and run a server that pulls website content and injects it into the iframe every time a user uses the simulator's browser. As a result, all requests are bottlenecked to this server and may become overloaded anytime when the number of simultaneous users is way too high. This is a limitation of either the web techs, or even my skillset, but I'm afraid to say, it is what it is. If you happen to know a better solution, I'm more than happy to learn about it.")],1),e._v(" "),t("h2",{attrs:{id:"it-s-come-a-long-way"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#it-s-come-a-long-way"}},[e._v("#")]),e._v(" It's come a long way")]),e._v(" "),t("p",[e._v("Looking back, the Windows 7 simulator certainly has come a long way. Being the first pet project that I started when taking my very first steps into the field of front-end, it has grown a lot since then. "),t("a",{attrs:{href:"https://www.sololearn.com/compiler-playground/W0jzR96Id2Bw/",target:"_blank",rel:"noopener noreferrer"}},[e._v("The early prototype"),t("OutboundLink")],1),e._v(" you can still find on "),t("strong",[e._v("Sololearn")]),e._v(", a platform that helped me get into web development back then (the code looks like a huge mess now LOL). "),t("a",{attrs:{href:"https://khang-nd.github.io/win7/",target:"_blank",rel:"noopener noreferrer"}},[e._v("The next iteration"),t("OutboundLink")],1),e._v(" was basically pulled off from there and still used the same tech stuff, though with some improvements it still barely looked decent. Later on, I rewrote the project completely using the tech stack I mentioned above and released the first version on Android, you can still get a glimpse of it from the below video:")]),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/OarDV_dEkcY",frameborder:"0",webkitallowfullscreen:"",mozallowfullscreen:"",allowfullscreen:""}})]),t("p"),e._v(" "),t("p",[e._v("From here on, the simulator has been receiving updates regularly and strives for becoming a high-quality app with more cool features introduced in every update. In summary, here is a timeline of some milestones up until now, for your reference:")]),e._v(" "),t("ul",[t("li",[e._v("July 29, 2019 - "),t("a",{attrs:{href:"https://www.sololearn.com/compiler-playground/W0jzR96Id2Bw",target:"_blank",rel:"noopener noreferrer"}},[e._v("an early prototype"),t("OutboundLink")],1),e._v(" called "),t("strong",[e._v("Windows 7 Simulation")]),e._v(" on Sololearn.")]),e._v(" "),t("li",[e._v("September 21, 2019 - "),t("a",{attrs:{href:"https://khang-nd.github.io/win7/",target:"_blank",rel:"noopener noreferrer"}},[e._v("the next iteration"),t("OutboundLink")],1),e._v(" of Windows 7 Simulation.")]),e._v(" "),t("li",[e._v("January 28, 2020 - "),t("a",{attrs:{href:"https://youtu.be/OarDV_dEkcY",target:"_blank",rel:"noopener noreferrer"}},[e._v("the first release"),t("OutboundLink")],1),e._v(" to Google Play under the name "),t("strong",[e._v("Windows 7 Simulator")]),e._v(".")]),e._v(" "),t("li",[e._v("February 4, 2020 - Google Play suspended and removed Windows 7 Simulator.")]),e._v(" "),t("li",[e._v("February 13, 2020 - "),t("a",{attrs:{href:"https://youtu.be/F6vtQUS0X6o",target:"_blank",rel:"noopener noreferrer"}},[e._v("a re-release"),t("OutboundLink")],1),e._v(" to Google Play under the name "),t("strong",[e._v("Win7 Simu")]),e._v(".")]),e._v(" "),t("li",[e._v("October 10, 2022 - celebrating 5M downloads of Win7 Simu 🥳🎉")])]),e._v(" "),t("h2",{attrs:{id:"what-s-next"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#what-s-next"}},[e._v("#")]),e._v(" What's next")]),e._v(" "),t("p",[e._v("Win7 Simu has been undergoing several changes and updates from time to time to become what it is today. There are apparently still so many things that can be added to the simulator, and a lot of improvements to be done on the quality side, I mean, seriously, the teams at Microsoft spent literally years building and releasing a historic product such as the Windows 7 operating system, how would you expect a nobody to recreate it flawlessly in a short time, even if it's just a simulator.")]),e._v(" "),t("p",[e._v("As the project has been showing potential since, there are a couple of things I have had in mind in order to keep it growing and turn into something even more beneficial for the users, rather than blindly doing the development as I please, for your information:")]),e._v(" "),t("ul",{staticClass:"contains-task-list"},[t("li",{staticClass:"task-list-item"},[t("input",{staticClass:"task-list-item-checkbox",attrs:{checked:"",disabled:"",type:"checkbox"}}),e._v(" Regularly check out user reviews and feedback from several sources (Google Play reviews, emails, comments etc.) for feature prioritization.")]),e._v(" "),t("li",{staticClass:"task-list-item"},[t("input",{staticClass:"task-list-item-checkbox",attrs:{checked:"",disabled:"",type:"checkbox"}}),e._v(" Provide some ways for users to participate in translating the interface → "),t("a",{attrs:{href:"https://crowdin.com/project/win7simu",target:"_blank",rel:"noopener noreferrer"}},[e._v("Crowdin"),t("OutboundLink")],1)]),e._v(" "),t("li",{staticClass:"task-list-item"},[t("input",{staticClass:"task-list-item-checkbox",attrs:{checked:"",disabled:"",type:"checkbox"}}),e._v(" Keep users informed about the new changes for every update → "),t("RouterLink",{attrs:{to:"/win7simu/changelog.html"}},[e._v("Changelog")])],1),e._v(" "),t("li",{staticClass:"task-list-item"},[t("input",{staticClass:"task-list-item-checkbox",attrs:{disabled:"",type:"checkbox"}}),e._v(" Implement the suggested features from the users according to the assigned priorities.")]),e._v(" "),t("li",{staticClass:"task-list-item"},[t("input",{staticClass:"task-list-item-checkbox",attrs:{disabled:"",type:"checkbox"}}),e._v(" Implement some unique features that enhance the purpose of learning through the simulator.")]),e._v(" "),t("li",{staticClass:"task-list-item"},[t("input",{staticClass:"task-list-item-checkbox",attrs:{disabled:"",type:"checkbox"}}),e._v(" Integrate CI and incorporate automation tests to ensure the quality of every release.")]),e._v(" "),t("li",{staticClass:"task-list-item"},[t("input",{staticClass:"task-list-item-checkbox",attrs:{disabled:"",type:"checkbox"}}),e._v(" Public the source code at some point for various benefits.")])]),e._v(" "),t("p",[e._v("With all that said, I'm making no promise that I would be able to implement all the features that have been suggested so far, or that I would be able to achieve any of the dot points above in a short span of time. If anything, I may only assure you that I will keep working on this project as long as I can. And if I may ask you, please keep accompanying me in my journey and stay tuned for future updates of Win7 Simu or any future products that I will be able to bring forward.")]),e._v(" "),t("p",[t("em",[e._v("Thank you for being part of my journey. Sincerely.")])]),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/59.9bd86a1e.js b/assets/js/59.ffcd6f23.js similarity index 99% rename from assets/js/59.9bd86a1e.js rename to assets/js/59.ffcd6f23.js index 50dc8073..ab7e9de6 100644 --- a/assets/js/59.9bd86a1e.js +++ b/assets/js/59.ffcd6f23.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[59],{480:function(t,a,s){"use strict";s.r(a);var e=s(17),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("google-ads"),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([[59],{481:function(t,a,s){"use strict";s.r(a);var e=s(13),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("google-ads"),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/6.109e1dd3.js b/assets/js/6.3361311e.js similarity index 88% rename from assets/js/6.109e1dd3.js rename to assets/js/6.3361311e.js index 31be85d9..0693745c 100644 --- a/assets/js/6.109e1dd3.js +++ b/assets/js/6.3361311e.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[6,12,36,38],{284:function(t,e,n){},286:function(t,e,n){},288:function(t,e,n){"use strict";n(284)},290:function(t,e,n){"use strict";n.r(e);n(48);var o={props:{format:{type:String,default:"auto"}},mounted(){(window.adsbygoogle=window.adsbygoogle||[]).push({})}},s=(n(288),n(17)),a=Object(s.a)(o,(function(){return(0,this._self._c)("ins",{staticClass:"adsbygoogle",staticStyle:{display:"block"},attrs:{"data-ad-slot":"3336580675","data-ad-client":"ca-pub-5904323684803247","data-ad-format":this.format,"data-full-width-responsive":"true"}})}),[],!1,null,"18b37b7d",null);e.default=a.exports},292:function(t,e,n){"use strict";n(286)},296:function(t,e,n){"use strict";n.r(e);var o={data(){return{path:this.$route.path,interval:null}},mounted(){this.interval=setInterval(this.hideAds,2e3)},beforeDestroy(){clearInterval(this.interval)},methods:{hideAds(){const t=this.$el.querySelector("#disqus_thread").querySelector("iframe:first-child");null==t||t.style.setProperty("display","none","important")}}},s=(n(292),n(17)),a=Object(s.a)(o,(function(){var t=this._self._c;return t("section",[t("h2",{attrs:{id:"comments"}},[this._v("Comments")]),this._v(" "),t("disqus",{attrs:{identifier:this.path}})],1)}),[],!1,null,"2fa9e9ea",null);e.default=a.exports},300:function(t,e,n){"use strict";n.r(e);var o=n(306),s=n(296),a=n(290),i={props:{noSideAds:Boolean,noComments:Boolean},components:{ParentLayout:o.default,CommentSection:s.default,GoogleAds:a.default}},l=n(17),r=Object(l.a)(i,(function(){var t=this,e=t._self._c;return e("parent-layout",{scopedSlots:t._u([t.noSideAds?null:{key:"sidebar-bottom",fn:function(){return[e("div",{staticClass:"googleads"},[e("google-ads")],1)]},proxy:!0},t.noComments?null:{key:"page-bottom",fn:function(){return[e("google-ads"),t._v(" "),e("comment-section")]},proxy:!0}],null,!0)})}),[],!1,null,null,null);e.default=r.exports},331:function(t,e,n){},378:function(t,e,n){"use strict";n(331)},455:function(t,e,n){"use strict";n.r(e);var o={components:{Visnalize:n(300).default}},s=(n(378),n(17)),a=Object(s.a)(o,(function(){return(0,this._self._c)("visnalize")}),[],!1,null,"20ccf1a2",null);e.default=a.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[6,12,36,38],{284:function(t,e,n){},286:function(t,e,n){},288:function(t,e,n){"use strict";n(284)},290:function(t,e,n){"use strict";n.r(e);n(48);var o={props:{format:{type:String,default:"auto"}},mounted(){(window.adsbygoogle=window.adsbygoogle||[]).push({})}},s=(n(288),n(13)),a=Object(s.a)(o,(function(){return(0,this._self._c)("ins",{staticClass:"adsbygoogle",staticStyle:{display:"block"},attrs:{"data-ad-slot":"3336580675","data-ad-client":"ca-pub-5904323684803247","data-ad-format":this.format,"data-full-width-responsive":"true"}})}),[],!1,null,"18b37b7d",null);e.default=a.exports},292:function(t,e,n){"use strict";n(286)},296:function(t,e,n){"use strict";n.r(e);var o={data(){return{path:this.$route.path,interval:null}},mounted(){this.interval=setInterval(this.hideAds,2e3)},beforeDestroy(){clearInterval(this.interval)},methods:{hideAds(){const t=this.$el.querySelector("#disqus_thread").querySelector("iframe:first-child");null==t||t.style.setProperty("display","none","important")}}},s=(n(292),n(13)),a=Object(s.a)(o,(function(){var t=this._self._c;return t("section",[t("h2",{attrs:{id:"comments"}},[this._v("Comments")]),this._v(" "),t("disqus",{attrs:{identifier:this.path}})],1)}),[],!1,null,"2fa9e9ea",null);e.default=a.exports},300:function(t,e,n){"use strict";n.r(e);var o=n(306),s=n(296),a=n(290),i={props:{noSideAds:Boolean,noComments:Boolean},components:{ParentLayout:o.default,CommentSection:s.default,GoogleAds:a.default}},l=n(13),r=Object(l.a)(i,(function(){var t=this,e=t._self._c;return e("parent-layout",{scopedSlots:t._u([t.noSideAds?null:{key:"sidebar-bottom",fn:function(){return[e("div",{staticClass:"googleads"},[e("google-ads")],1)]},proxy:!0},t.noComments?null:{key:"page-bottom",fn:function(){return[e("google-ads"),t._v(" "),e("comment-section")]},proxy:!0}],null,!0)})}),[],!1,null,null,null);e.default=r.exports},331:function(t,e,n){},378:function(t,e,n){"use strict";n(331)},455:function(t,e,n){"use strict";n.r(e);var o={components:{Visnalize:n(300).default}},s=(n(378),n(13)),a=Object(s.a)(o,(function(){return(0,this._self._c)("visnalize")}),[],!1,null,"20ccf1a2",null);e.default=a.exports}}]); \ No newline at end of file diff --git a/assets/js/60.5d40199f.js b/assets/js/60.e465b120.js similarity index 54% rename from assets/js/60.5d40199f.js rename to assets/js/60.e465b120.js index 29e9f8ef..26230ef7 100644 --- a/assets/js/60.5d40199f.js +++ b/assets/js/60.e465b120.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[60],{485:function(t,n,s){"use strict";s.r(n);var e=s(17),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([[60],{484:function(t,n,s){"use strict";s.r(n);var e=s(13),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/61.80801009.js b/assets/js/61.ed54b48a.js similarity index 97% rename from assets/js/61.80801009.js rename to assets/js/61.ed54b48a.js index a6528159..81ddc168 100644 --- a/assets/js/61.80801009.js +++ b/assets/js/61.ed54b48a.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[61],{483:function(e,t,a){"use strict";a.r(t);var i=a(17),o=Object(i.a)({},(function(){var e=this,t=e._self._c;return t("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[t("h1",{attrs:{id:"simulators-and-emulators-what-s-the-difference"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#simulators-and-emulators-what-s-the-difference"}},[e._v("#")]),e._v(" Simulators and Emulators: What's the difference?")]),e._v(" "),t("m-blog-meta"),e._v(" "),t("p",[t("img",{attrs:{src:"/assets/covers/simulators-vs-emulators.png",alt:"Simulators vs Emulators"}})]),e._v(" "),t("p",[e._v("Oftentimes, I get asked to implement in "),t("RouterLink",{attrs:{to:"/win7simu/about.html"}},[e._v("Win7 Simu")]),e._v(" the capability to run Windows executable programs. This is one of the most common requests, and sometimes, the app even gets low ratings just because people are confused about the difference between a simulator and an emulator. Therefore, in this article, the differences between the two will be explained and what they mean in the context of Win7 Simu.")],1),e._v(" "),t("h2",{attrs:{id:"what-is-an-emulator"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#what-is-an-emulator"}},[e._v("#")]),e._v(" What is an Emulator?")]),e._v(" "),t("div",{staticClass:"custom-block tip"},[t("p",{staticClass:"custom-block-title"},[e._v("Definition")]),e._v(" "),t("p",[e._v("An emulator can "),t("em",[e._v("replace")]),e._v(" the original for real use.")])]),e._v(" "),t("ul",[t("li",[e._v("You can play GameBoy games on a computer using a GameBoy emulator, e.g. VisualBoyAdvance, mGBA.")]),e._v(" "),t("li",[e._v("You can run Android apps on a computer using an Android emulator, e.g. BlueStacks, Genymotion.")]),e._v(" "),t("li",[e._v("You can run Windows programs on a Mac device using a Windows emulator, e.g. Parallels Desktop, VMware.")]),e._v(" "),t("li",[e._v("You can test websites on different devices using a browser emulator, e.g. BrowserStack, LambdaTest.")])]),e._v(" "),t("p",[e._v("In other words, with an emulator, you can run or use the original software on different devices or platforms, with the behavior and performance nearly identical to the original.")]),e._v(" "),t("h2",{attrs:{id:"what-is-a-simulator"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#what-is-a-simulator"}},[e._v("#")]),e._v(" What is a Simulator?")]),e._v(" "),t("div",{staticClass:"custom-block tip"},[t("p",{staticClass:"custom-block-title"},[e._v("Definition")]),e._v(" "),t("p",[e._v("A simulator is a "),t("em",[e._v("model")]),e._v(" for study and analysis.")])]),e._v(" "),t("ul",[t("li",[e._v("You can simulate the flight of an airplane using a flight simulator, e.g. Microsoft Flight Simulator, X-Plane.")]),e._v(" "),t("li",[e._v("You can simulate the behavior of a circuit using a circuit simulator, e.g. LTspice, TINA-TI.")]),e._v(" "),t("li",[e._v("You can simulate the behavior of a robot using a robot simulator, e.g. Webots, Gazebo.")])]),e._v(" "),t("p",[e._v("In other words, a simulator aims to provide a similar environment to the original, mainly for study, training and analysis purposes.")]),e._v(" "),t("h2",{attrs:{id:"what-about-win7-simu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#what-about-win7-simu"}},[e._v("#")]),e._v(" What about Win7 Simu?")]),e._v(" "),t("p",[e._v("Win7 Simu, as the name suggests, is a "),t("strong",[e._v("simulator")]),e._v(". It only simulates the Windows 7 environment by providing a similar look and feel. It is not capable of running Windows executable programs. This is because Win7 Simu is built using "),t("RouterLink",{attrs:{to:"/blog/building-win7-simu.html#the-tech-stack"}},[e._v("web techs")]),e._v(", which can only mimic the functionality and behavior of the system to a certain extent.")],1),e._v(" "),t("p",[e._v("What you can do with Win7 Simu is entirely up to the web techs it uses (and of course, my skillset). For example, File Explorer in Win7 Simu relies on the "),t("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API",target:"_blank",rel:"noopener noreferrer"}},[e._v("IndexedDB API"),t("OutboundLink")],1),e._v(", Paint is implemented with the capabilities of the "),t("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API",target:"_blank",rel:"noopener noreferrer"}},[e._v("Canvas API"),t("OutboundLink")],1),e._v(", Chrome/Internet Explorer is powered by "),t("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe",target:"_blank",rel:"noopener noreferrer"}},[e._v("iframe"),t("OutboundLink")],1),e._v(" with some flawed workarounds, etc.")]),e._v(" "),t("hr"),e._v(" "),t("p",[e._v("In conclusion, I hope the article has clarified the differences between simulators and emulators in an easy-to-understand way, and that you now have a better understanding of what Win7 Simu should be capable of. If you have any questions or suggestions, feel free to leave a comment below.")]),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([[61],{485:function(e,t,a){"use strict";a.r(t);var i=a(13),o=Object(i.a)({},(function(){var e=this,t=e._self._c;return t("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[t("h1",{attrs:{id:"simulators-and-emulators-what-s-the-difference"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#simulators-and-emulators-what-s-the-difference"}},[e._v("#")]),e._v(" Simulators and Emulators: What's the difference?")]),e._v(" "),t("m-blog-meta"),e._v(" "),t("p",[t("img",{attrs:{src:"/assets/covers/simulators-vs-emulators.png",alt:"Simulators vs Emulators"}})]),e._v(" "),t("p",[e._v("Oftentimes, I get asked to implement in "),t("RouterLink",{attrs:{to:"/win7simu/about.html"}},[e._v("Win7 Simu")]),e._v(" the capability to run Windows executable programs. This is one of the most common requests, and sometimes, the app even gets low ratings just because people are confused about the difference between a simulator and an emulator. Therefore, in this article, the differences between the two will be explained and what they mean in the context of Win7 Simu.")],1),e._v(" "),t("h2",{attrs:{id:"what-is-an-emulator"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#what-is-an-emulator"}},[e._v("#")]),e._v(" What is an Emulator?")]),e._v(" "),t("div",{staticClass:"custom-block tip"},[t("p",{staticClass:"custom-block-title"},[e._v("Definition")]),e._v(" "),t("p",[e._v("An emulator can "),t("em",[e._v("replace")]),e._v(" the original for real use.")])]),e._v(" "),t("ul",[t("li",[e._v("You can play GameBoy games on a computer using a GameBoy emulator, e.g. VisualBoyAdvance, mGBA.")]),e._v(" "),t("li",[e._v("You can run Android apps on a computer using an Android emulator, e.g. BlueStacks, Genymotion.")]),e._v(" "),t("li",[e._v("You can run Windows programs on a Mac device using a Windows emulator, e.g. Parallels Desktop, VMware.")]),e._v(" "),t("li",[e._v("You can test websites on different devices using a browser emulator, e.g. BrowserStack, LambdaTest.")])]),e._v(" "),t("p",[e._v("In other words, with an emulator, you can run or use the original software on different devices or platforms, with the behavior and performance nearly identical to the original.")]),e._v(" "),t("h2",{attrs:{id:"what-is-a-simulator"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#what-is-a-simulator"}},[e._v("#")]),e._v(" What is a Simulator?")]),e._v(" "),t("div",{staticClass:"custom-block tip"},[t("p",{staticClass:"custom-block-title"},[e._v("Definition")]),e._v(" "),t("p",[e._v("A simulator is a "),t("em",[e._v("model")]),e._v(" for study and analysis.")])]),e._v(" "),t("ul",[t("li",[e._v("You can simulate the flight of an airplane using a flight simulator, e.g. Microsoft Flight Simulator, X-Plane.")]),e._v(" "),t("li",[e._v("You can simulate the behavior of a circuit using a circuit simulator, e.g. LTspice, TINA-TI.")]),e._v(" "),t("li",[e._v("You can simulate the behavior of a robot using a robot simulator, e.g. Webots, Gazebo.")])]),e._v(" "),t("p",[e._v("In other words, a simulator aims to provide a similar environment to the original, mainly for study, training and analysis purposes.")]),e._v(" "),t("h2",{attrs:{id:"what-about-win7-simu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#what-about-win7-simu"}},[e._v("#")]),e._v(" What about Win7 Simu?")]),e._v(" "),t("p",[e._v("Win7 Simu, as the name suggests, is a "),t("strong",[e._v("simulator")]),e._v(". It only simulates the Windows 7 environment by providing a similar look and feel. It is not capable of running Windows executable programs. This is because Win7 Simu is built using "),t("RouterLink",{attrs:{to:"/blog/building-win7-simu.html#the-tech-stack"}},[e._v("web techs")]),e._v(", which can only mimic the functionality and behavior of the system to a certain extent.")],1),e._v(" "),t("p",[e._v("What you can do with Win7 Simu is entirely up to the web techs it uses (and of course, my skillset). For example, File Explorer in Win7 Simu relies on the "),t("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API",target:"_blank",rel:"noopener noreferrer"}},[e._v("IndexedDB API"),t("OutboundLink")],1),e._v(", Paint is implemented with the capabilities of the "),t("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API",target:"_blank",rel:"noopener noreferrer"}},[e._v("Canvas API"),t("OutboundLink")],1),e._v(", Chrome/Internet Explorer is powered by "),t("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe",target:"_blank",rel:"noopener noreferrer"}},[e._v("iframe"),t("OutboundLink")],1),e._v(" with some flawed workarounds, etc.")]),e._v(" "),t("hr"),e._v(" "),t("p",[e._v("In conclusion, I hope the article has clarified the differences between simulators and emulators in an easy-to-understand way, and that you now have a better understanding of what Win7 Simu should be capable of. If you have any questions or suggestions, feel free to leave a comment below.")]),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/62.0434ae3c.js b/assets/js/62.3884150f.js similarity index 98% rename from assets/js/62.0434ae3c.js rename to assets/js/62.3884150f.js index cf4a7614..bc5d4d19 100644 --- a/assets/js/62.0434ae3c.js +++ b/assets/js/62.3884150f.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[62],{486:function(t,e,o){"use strict";o.r(e);var a=o(17),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([[62],{487:function(t,e,o){"use strict";o.r(e);var a=o(13),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/63.2dfb341f.js b/assets/js/63.f257c693.js similarity index 98% rename from assets/js/63.2dfb341f.js rename to assets/js/63.f257c693.js index 9de6d74b..1d6a2da1 100644 --- a/assets/js/63.2dfb341f.js +++ b/assets/js/63.f257c693.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[63],{490:function(e,t,o){"use strict";o.r(t);var n=o(17),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("google-ads"),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("
    - +
    Last Updated: 11/11/2023, 4:58:27 PM

    Comments

    + diff --git a/blog/building-visnalize-com.html b/blog/building-visnalize-com.html index abe2355f..99a65d95 100644 --- a/blog/building-visnalize-com.html +++ b/blog/building-visnalize-com.html @@ -16,7 +16,7 @@ - + @@ -35,7 +35,7 @@ - + @@ -123,7 +123,7 @@

  • Customize the project with available configuration options as documented in VuePress docs (opens new window).

  • Build the source code into static HTML with the command:

    npm run build

  • Finally, deploy the site to a host using Github Pages (opens new window)

    • The source code I made public in this branch (opens new window) of the repository, you can explore or dissect however you like.

    Last Updated: 8/15/2023, 11:58:00 AM

    Comments

    - +
    Last Updated: 8/15/2023, 11:58:00 AM

    Comments

    + diff --git a/blog/building-win7-simu.html b/blog/building-win7-simu.html index 5eb9dff7..19ca40ed 100644 --- a/blog/building-win7-simu.html +++ b/blog/building-win7-simu.html @@ -16,7 +16,7 @@ - + @@ -35,7 +35,7 @@ - + @@ -117,7 +117,7 @@ Sharing
  • Technical -
    • Last Updated: 8/15/2023, 11:58:00 AM

    Comments

    - +
    Last Updated: 8/15/2023, 11:58:00 AM

    Comments

    + diff --git a/blog/from-codepen-to-app.html b/blog/from-codepen-to-app.html index 4a16a481..cb3f2f2d 100644 --- a/blog/from-codepen-to-app.html +++ b/blog/from-codepen-to-app.html @@ -16,7 +16,7 @@ - + @@ -35,7 +35,7 @@ - + @@ -195,7 +195,7 @@ Sharing
  • Technical -
    • Last Updated: 1/31/2024, 4:36:19 AM

    Comments

    - +
    Last Updated: 1/31/2024, 4:36:19 AM

    Comments

    + diff --git a/blog/from-side-project-to-side-hustle.html b/blog/from-side-project-to-side-hustle.html index 7883a7fe..a723a3b3 100644 --- a/blog/from-side-project-to-side-hustle.html +++ b/blog/from-side-project-to-side-hustle.html @@ -16,7 +16,7 @@ - + @@ -35,7 +35,7 @@ - + @@ -119,7 +119,7 @@ Tips
  • Win7 Simu -
    • Last Updated: 11/11/2023, 5:05:22 PM

    Comments

    - +
    Last Updated: 11/11/2023, 5:05:22 PM

    Comments

    + diff --git a/blog/game-stick-lite-4k-adding-games.html b/blog/game-stick-lite-4k-adding-games.html index 966b56d5..a1a748d4 100644 --- a/blog/game-stick-lite-4k-adding-games.html +++ b/blog/game-stick-lite-4k-adding-games.html @@ -16,7 +16,7 @@ - + @@ -35,7 +35,7 @@ - + @@ -115,7 +115,7 @@ Tips
  • Random -
    • Last Updated: 3/10/2024, 8:28:45 AM

    Comments

    - +
    Last Updated: 3/10/2024, 8:28:45 AM

    Comments

    + diff --git a/blog/index.html b/blog/index.html index a0bad005..a6ff5e54 100644 --- a/blog/index.html +++ b/blog/index.html @@ -16,7 +16,7 @@ - + @@ -31,7 +31,7 @@ - + @@ -121,10 +121,10 @@ Brick 1100 Random - - Tools Review + + Tools
    Last Updated: 10/17/2022, 9:53:46 AM
    - +
    Last Updated: 10/17/2022, 9:53:46 AM
    + diff --git a/blog/load-any-websites-in-iframes.html b/blog/load-any-websites-in-iframes.html index 3050ba97..59541c3a 100644 --- a/blog/load-any-websites-in-iframes.html +++ b/blog/load-any-websites-in-iframes.html @@ -16,7 +16,7 @@ - + @@ -35,7 +35,7 @@ - + @@ -117,7 +117,7 @@ Technical
  • Win7 Simu -
    • Last Updated: 8/15/2023, 11:58:00 AM

    Comments

    - +
    Last Updated: 8/15/2023, 11:58:00 AM

    Comments

    + diff --git a/blog/simulator-vs-emulator.html b/blog/simulator-vs-emulator.html index 55b25a9d..2c9697f0 100644 --- a/blog/simulator-vs-emulator.html +++ b/blog/simulator-vs-emulator.html @@ -16,7 +16,7 @@ - + @@ -35,7 +35,7 @@ - + @@ -117,7 +117,7 @@ Sharing
  • Win7 Simu -
    • Last Updated: 2/21/2024, 11:02:25 AM

    Comments

    - +
    Last Updated: 2/21/2024, 11:02:25 AM

    Comments

    + diff --git a/blog/tag/brick-1100/index.html b/blog/tag/brick-1100/index.html index f1f2baf1..69e68459 100644 --- a/blog/tag/brick-1100/index.html +++ b/blog/tag/brick-1100/index.html @@ -16,7 +16,7 @@ - + @@ -31,7 +31,7 @@ - + @@ -121,10 +121,10 @@ Brick 1100 Random - - Tools Review + + Tools
    - +
    + diff --git a/blog/tag/index.html b/blog/tag/index.html index 5ee1610b..ecadbbad 100644 --- a/blog/tag/index.html +++ b/blog/tag/index.html @@ -16,7 +16,7 @@ - + @@ -31,7 +31,7 @@ - + @@ -121,10 +121,10 @@ Brick 1100 Random - - Tools Review + + Tools
    - +
    + diff --git a/blog/tag/random/index.html b/blog/tag/random/index.html index 67eaae3a..f0958f18 100644 --- a/blog/tag/random/index.html +++ b/blog/tag/random/index.html @@ -16,7 +16,7 @@ - + @@ -31,7 +31,7 @@ - + @@ -121,15 +121,15 @@ Brick 1100 Random - - Tools Review + + Tools
    - +
    + diff --git a/blog/tag/review/index.html b/blog/tag/review/index.html index efd7ca62..6f3b1c69 100644 --- a/blog/tag/review/index.html +++ b/blog/tag/review/index.html @@ -16,7 +16,7 @@ - + @@ -31,7 +31,7 @@ - + @@ -121,10 +121,10 @@ Brick 1100 Random - - Tools Review + + Tools
    - +
    + diff --git a/blog/tag/sharing/index.html b/blog/tag/sharing/index.html index 7495325f..71ac4d41 100644 --- a/blog/tag/sharing/index.html +++ b/blog/tag/sharing/index.html @@ -16,7 +16,7 @@ - + @@ -31,7 +31,7 @@ - + @@ -121,10 +121,10 @@ Brick 1100 Random - - Tools Review + + Tools
    - +
    + diff --git a/blog/tag/technical/index.html b/blog/tag/technical/index.html index aa7619c3..e6502728 100644 --- a/blog/tag/technical/index.html +++ b/blog/tag/technical/index.html @@ -16,7 +16,7 @@ - + @@ -31,7 +31,7 @@ - + @@ -121,10 +121,10 @@ Brick 1100 Random - - Tools Review + + Tools
    - +
    + diff --git a/blog/tag/tips/index.html b/blog/tag/tips/index.html index c8d20563..8e14f04f 100644 --- a/blog/tag/tips/index.html +++ b/blog/tag/tips/index.html @@ -16,7 +16,7 @@ - + @@ -31,7 +31,7 @@ - + @@ -121,10 +121,10 @@ Brick 1100 Random - - Tools Review + + Tools
    - +
    + diff --git a/blog/tag/tools/index.html b/blog/tag/tools/index.html index 073d2cf5..dd02065e 100644 --- a/blog/tag/tools/index.html +++ b/blog/tag/tools/index.html @@ -16,7 +16,7 @@ - + @@ -31,7 +31,7 @@ - + @@ -121,10 +121,10 @@ Brick 1100 Random - - Tools Review + + Tools
    - +
    + diff --git a/blog/tag/win7-simu/index.html b/blog/tag/win7-simu/index.html index f069aea6..a0aad75c 100644 --- a/blog/tag/win7-simu/index.html +++ b/blog/tag/win7-simu/index.html @@ -16,7 +16,7 @@ - + @@ -31,7 +31,7 @@ - + @@ -121,10 +121,10 @@ Brick 1100 Random - - Tools Review + + Tools
    - +
    + diff --git a/blog/visnalize-year-in-review-2023.html b/blog/visnalize-year-in-review-2023.html index ab790f8c..0f9e6b44 100644 --- a/blog/visnalize-year-in-review-2023.html +++ b/blog/visnalize-year-in-review-2023.html @@ -16,7 +16,7 @@ - + @@ -35,7 +35,7 @@ - + @@ -117,7 +117,7 @@ Brick 1100
  • Review -
    • Last Updated: 1/1/2024, 2:18:12 AM

    Comments

    - +
    Last Updated: 1/1/2024, 2:18:12 AM

    Comments

    + diff --git a/blog/win7-icons-viewer-downloader.html b/blog/win7-icons-viewer-downloader.html index 5771f518..3442328a 100644 --- a/blog/win7-icons-viewer-downloader.html +++ b/blog/win7-icons-viewer-downloader.html @@ -16,7 +16,7 @@ - + @@ -35,7 +35,7 @@ - + @@ -119,7 +119,7 @@ Technical
  • Tools -
    • Last Updated: 6/26/2023, 12:53:04 PM

    Comments

    - +
    Last Updated: 6/26/2023, 12:53:04 PM

    Comments

    + diff --git a/blog/win7-simu-file-explorer.html b/blog/win7-simu-file-explorer.html index 7327135d..8c72bd9b 100644 --- a/blog/win7-simu-file-explorer.html +++ b/blog/win7-simu-file-explorer.html @@ -16,7 +16,7 @@ - + @@ -35,7 +35,7 @@ - + @@ -136,7 +136,7 @@ Win7 Simu
  • Technical -
    • Last Updated: 1/31/2024, 4:36:19 AM

    Comments

    - +
    Last Updated: 1/31/2024, 4:36:19 AM

    Comments

    + diff --git a/blog/win7-simu-mobile-devices.html b/blog/win7-simu-mobile-devices.html index 0be81047..5b0a8d0c 100644 --- a/blog/win7-simu-mobile-devices.html +++ b/blog/win7-simu-mobile-devices.html @@ -16,7 +16,7 @@ - + @@ -35,7 +35,7 @@ - + @@ -115,7 +115,7 @@ Win7 Simu
  • Tips -
    • Last Updated: 6/26/2023, 12:53:04 PM

    Comments

    - +
    Last Updated: 6/26/2023, 12:53:04 PM

    Comments

    + diff --git a/blog/win7-simu-year-in-review-2022.html b/blog/win7-simu-year-in-review-2022.html index 64b79be0..521193cf 100644 --- a/blog/win7-simu-year-in-review-2022.html +++ b/blog/win7-simu-year-in-review-2022.html @@ -16,7 +16,7 @@ - + @@ -35,7 +35,7 @@ - + @@ -115,7 +115,7 @@ Win7 Simu
  • Review -
    • Last Updated: 6/26/2023, 12:53:04 PM

    Comments

    - +
    Last Updated: 6/26/2023, 12:53:04 PM

    Comments

    + diff --git a/blog/win7-ui-introduction.html b/blog/win7-ui-introduction.html index 832f335b..c01f69bd 100644 --- a/blog/win7-ui-introduction.html +++ b/blog/win7-ui-introduction.html @@ -16,7 +16,7 @@ - + @@ -35,7 +35,7 @@ - + @@ -129,7 +129,7 @@ Technical
  • Tools -
    • Last Updated: 8/21/2023, 4:12:36 AM

    Comments

    - +
    Last Updated: 8/21/2023, 4:12:36 AM

    Comments

    + diff --git a/blog/windows-resources.html b/blog/windows-resources.html index ab063272..3aadfc68 100644 --- a/blog/windows-resources.html +++ b/blog/windows-resources.html @@ -16,7 +16,7 @@ - + @@ -35,7 +35,7 @@ - + @@ -116,7 +116,7 @@ Win7 Simu
  • Tips -
    • Last Updated: 8/15/2023, 11:58:00 AM

    Comments

    - +
    Last Updated: 8/15/2023, 11:58:00 AM

    Comments

    + diff --git a/brick1100/about.html b/brick1100/about.html index 35fdd700..38859ec7 100644 --- a/brick1100/about.html +++ b/brick1100/about.html @@ -16,7 +16,7 @@ - + @@ -35,7 +35,7 @@ - + @@ -111,7 +111,7 @@ Github (opens new window)
  • Twitter - (opens new window)

    • # 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 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: 1/29/2024, 10:13:43 AM

    Comments

    - + (opens new window)

    # 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 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: 1/29/2024, 10:13:43 AM

    Comments

    + diff --git a/brick1100/changelog.html b/brick1100/changelog.html index f2854084..096a7841 100644 --- a/brick1100/changelog.html +++ b/brick1100/changelog.html @@ -16,7 +16,7 @@ - + @@ -31,7 +31,7 @@ - + @@ -107,7 +107,7 @@ Github (opens new window)
  • Twitter - (opens new window)

    • # Changelog

    # Beta versions

    # 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: 1/31/2024, 4:36:19 AM
    - + (opens new window)

    # Changelog

    # Beta versions

    # 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: 1/31/2024, 4:36:19 AM
    + diff --git a/brick1100/deep-links.html b/brick1100/deep-links.html index 9c7b8d70..77815826 100644 --- a/brick1100/deep-links.html +++ b/brick1100/deep-links.html @@ -16,7 +16,7 @@ - + @@ -31,7 +31,7 @@ - + @@ -107,7 +107,7 @@ Github (opens new window)
  • Twitter - (opens new window)

    • # 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: 11/7/2023, 12:57:20 PM

    Comments

    - + (opens new window)

    # 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: 11/7/2023, 12:57:20 PM

    Comments

    + diff --git a/brick1100/games.html b/brick1100/games.html index 201775ac..1cf78301 100644 --- a/brick1100/games.html +++ b/brick1100/games.html @@ -16,7 +16,7 @@ - + @@ -35,7 +35,7 @@ - + @@ -134,7 +134,7 @@
  • key navi / key 5 - toggle cell fill
  • key aste - toggle cell hints (shows the number of filled cells in the row/column)
  • key 0 - reset the grid -
    • Last Updated: 11/7/2023, 12:57:20 PM

    Comments

    - +
    Last Updated: 11/7/2023, 12:57:20 PM

    Comments

    + diff --git a/brick1100/index.html b/brick1100/index.html index 2a89c7d3..1415ffa7 100644 --- a/brick1100/index.html +++ b/brick1100/index.html @@ -16,7 +16,7 @@ - + @@ -31,7 +31,7 @@ - + @@ -107,7 +107,7 @@ Github (opens new window)
  • Twitter - (opens new window)

    Last Updated: 11/2/2023, 5:52:36 PM
    - + (opens new window)

    Last Updated: 11/2/2023, 5:52:36 PM
    + diff --git a/brick1100/privacy.html b/brick1100/privacy.html index d2b3dcbd..a7ff6136 100644 --- a/brick1100/privacy.html +++ b/brick1100/privacy.html @@ -16,7 +16,7 @@ - + @@ -31,7 +31,7 @@ - + @@ -107,7 +107,7 @@ Github (opens new window)
  • Twitter - (opens new window)

    • # Privacy Policy

    Last Updated: 10/30/2023, 3:59:21 PM

    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: 10/30/2023, 3:59:21 PM
    - + (opens new window)

    # Privacy Policy

    Last Updated: 10/30/2023, 3:59:21 PM

    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: 10/30/2023, 3:59:21 PM
    + diff --git a/contact.html b/contact.html index c3589f2c..ef3aa9af 100644 --- a/contact.html +++ b/contact.html @@ -16,7 +16,7 @@ - + @@ -31,7 +31,7 @@ - + @@ -107,7 +107,7 @@ Github (opens new window)
  • Twitter - (opens new window)
    • Last Updated: 11/2/2023, 5:52:36 PM
    - + (opens new window)
    Last Updated: 11/2/2023, 5:52:36 PM
    + diff --git a/feed.atom b/feed.atom index d2d62b88..7aa70a19 100644 --- a/feed.atom +++ b/feed.atom @@ -2,7 +2,7 @@ https://visnalize.com Visnalize - 2024-03-10T08:29:29.881Z + 2024-03-24T03:34:20.454Z https://github.com/webmasterish/vuepress-plugin-feed @@ -11,7 +11,7 @@ https://visnalize.com/blog/about-the-ads.html - 2024-03-10T08:29:29.877Z + 2024-03-24T03:34:20.418Z @@ -19,7 +19,7 @@ https://visnalize.com/blog/building-visnalize-com.html - 2024-03-10T08:29:29.877Z + 2024-03-24T03:34:20.418Z @@ -27,86 +27,94 @@ https://visnalize.com/blog/building-win7-simu.html - 2024-03-10T08:29:29.877Z + 2024-03-24T03:34:20.419Z + + <![CDATA[Turning my side project into a side hustle]]> + https://visnalize.com/blog/from-side-project-to-side-hustle.html + + + 2024-03-24T03:34:20.419Z + + <![CDATA[Turning my CodePen into an actual app]]> https://visnalize.com/blog/from-codepen-to-app.html - 2024-03-10T08:29:29.877Z + 2024-03-24T03:34:20.419Z - <![CDATA[Turning my side project into a side hustle]]> - https://visnalize.com/blog/from-side-project-to-side-hustle.html - + <![CDATA[How to add more games to Game Stick Lite 4K]]> + https://visnalize.com/blog/game-stick-lite-4k-adding-games.html + - 2024-03-10T08:29:29.878Z - + 2024-03-24T03:34:20.419Z + <![CDATA[How to get iframes to load any websites]]> https://visnalize.com/blog/load-any-websites-in-iframes.html - 2024-03-10T08:29:29.878Z + 2024-03-24T03:34:20.420Z + + <![CDATA[📝 Blog]]> + https://visnalize.com/blog/ + + + 2024-03-24T03:34:20.420Z + <![CDATA[Simulators and Emulators: What's the difference?]]> https://visnalize.com/blog/simulator-vs-emulator.html - 2024-03-10T08:29:29.878Z + 2024-03-24T03:34:20.420Z - <![CDATA[How to add more games to Game Stick Lite 4K]]> - https://visnalize.com/blog/game-stick-lite-4k-adding-games.html - - - 2024-03-10T08:29:29.878Z - - - - <![CDATA[📝 Blog]]> - https://visnalize.com/blog/ - + <![CDATA[Visnalize year in review - 2023]]> + https://visnalize.com/blog/visnalize-year-in-review-2023.html + - 2024-03-10T08:29:29.878Z + 2024-03-24T03:34:20.420Z + <![CDATA[Windows 7 icon Viewer/Downloader]]> https://visnalize.com/blog/win7-icons-viewer-downloader.html - 2024-03-10T08:29:29.878Z + 2024-03-24T03:34:20.420Z - - <![CDATA[Visnalize year in review - 2023]]> - https://visnalize.com/blog/visnalize-year-in-review-2023.html - - - 2024-03-10T08:29:29.878Z - - <![CDATA[Implementing File Explorer in Win7 Simu]]> https://visnalize.com/blog/win7-simu-file-explorer.html - 2024-03-10T08:29:29.878Z + 2024-03-24T03:34:20.420Z + + <![CDATA[Win7 Simu year in review - 2022]]> + https://visnalize.com/blog/win7-simu-year-in-review-2022.html + + + 2024-03-24T03:34:20.420Z + + <![CDATA[Win7 Simu versus mobile devices]]> https://visnalize.com/blog/win7-simu-mobile-devices.html - 2024-03-10T08:29:29.878Z + 2024-03-24T03:34:20.420Z @@ -114,7 +122,7 @@ https://visnalize.com/blog/win7-ui-introduction.html - 2024-03-10T08:29:29.878Z + 2024-03-24T03:34:20.420Z @@ -122,15 +130,7 @@ https://visnalize.com/blog/windows-resources.html - 2024-03-10T08:29:29.878Z + 2024-03-24T03:34:20.421Z - - <![CDATA[Win7 Simu year in review - 2022]]> - https://visnalize.com/blog/win7-simu-year-in-review-2022.html - - - 2024-03-10T08:29:29.878Z - - \ No newline at end of file diff --git a/feed.json b/feed.json index da46d533..54cff342 100644 --- a/feed.json +++ b/feed.json @@ -10,7 +10,7 @@ "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-03-10T08:29:29.877Z" + "date_modified": "2024-03-24T03:34:20.418Z" }, { "id": "https://visnalize.com/blog/building-visnalize-com.html", @@ -18,7 +18,7 @@ "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-03-10T08:29:29.877Z" + "date_modified": "2024-03-24T03:34:20.418Z" }, { "id": "https://visnalize.com/blog/building-win7-simu.html", @@ -26,7 +26,15 @@ "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-03-10T08:29:29.877Z" + "date_modified": "2024-03-24T03:34:20.419Z" + }, + { + "id": "https://visnalize.com/blog/from-side-project-to-side-hustle.html", + "url": "https://visnalize.com/blog/from-side-project-to-side-hustle.html", + "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-03-24T03:34:20.419Z" }, { "id": "https://visnalize.com/blog/from-codepen-to-app.html", @@ -34,15 +42,15 @@ "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-03-10T08:29:29.877Z" + "date_modified": "2024-03-24T03:34:20.419Z" }, { - "id": "https://visnalize.com/blog/from-side-project-to-side-hustle.html", - "url": "https://visnalize.com/blog/from-side-project-to-side-hustle.html", - "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-03-10T08:29:29.878Z" + "id": "https://visnalize.com/blog/game-stick-lite-4k-adding-games.html", + "url": "https://visnalize.com/blog/game-stick-lite-4k-adding-games.html", + "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-03-24T03:34:20.419Z" }, { "id": "https://visnalize.com/blog/load-any-websites-in-iframes.html", @@ -50,7 +58,13 @@ "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-03-10T08:29:29.878Z" + "date_modified": "2024-03-24T03:34:20.420Z" + }, + { + "id": "https://visnalize.com/blog/", + "url": "https://visnalize.com/blog/", + "title": "📝 Blog", + "date_modified": "2024-03-24T03:34:20.420Z" }, { "id": "https://visnalize.com/blog/simulator-vs-emulator.html", @@ -58,21 +72,15 @@ "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-03-10T08:29:29.878Z" - }, - { - "id": "https://visnalize.com/blog/game-stick-lite-4k-adding-games.html", - "url": "https://visnalize.com/blog/game-stick-lite-4k-adding-games.html", - "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-03-10T08:29:29.878Z" + "date_modified": "2024-03-24T03:34:20.420Z" }, { - "id": "https://visnalize.com/blog/", - "url": "https://visnalize.com/blog/", - "title": "📝 Blog", - "date_modified": "2024-03-10T08:29:29.878Z" + "id": "https://visnalize.com/blog/visnalize-year-in-review-2023.html", + "url": "https://visnalize.com/blog/visnalize-year-in-review-2023.html", + "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-03-24T03:34:20.420Z" }, { "id": "https://visnalize.com/blog/win7-icons-viewer-downloader.html", @@ -80,15 +88,7 @@ "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-03-10T08:29:29.878Z" - }, - { - "id": "https://visnalize.com/blog/visnalize-year-in-review-2023.html", - "url": "https://visnalize.com/blog/visnalize-year-in-review-2023.html", - "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-03-10T08:29:29.878Z" + "date_modified": "2024-03-24T03:34:20.420Z" }, { "id": "https://visnalize.com/blog/win7-simu-file-explorer.html", @@ -96,7 +96,15 @@ "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-03-10T08:29:29.878Z" + "date_modified": "2024-03-24T03:34:20.420Z" + }, + { + "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-03-24T03:34:20.420Z" }, { "id": "https://visnalize.com/blog/win7-simu-mobile-devices.html", @@ -104,7 +112,7 @@ "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-03-10T08:29:29.878Z" + "date_modified": "2024-03-24T03:34:20.420Z" }, { "id": "https://visnalize.com/blog/win7-ui-introduction.html", @@ -112,7 +120,7 @@ "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-03-10T08:29:29.878Z" + "date_modified": "2024-03-24T03:34:20.420Z" }, { "id": "https://visnalize.com/blog/windows-resources.html", @@ -120,15 +128,7 @@ "title": "How to get Windows resources", "summary": "Ways that you can retrieve Windows resources such as wallpapers, icons, audio files etc.", "image": "https://images.unsplash.com/photo-1624571409108-e9a41746af53?auto=format&fit=crop&w=740&q=80", - "date_modified": "2024-03-10T08:29:29.878Z" - }, - { - "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-03-10T08:29:29.878Z" + "date_modified": "2024-03-24T03:34:20.421Z" } ] } \ No newline at end of file diff --git a/index.html b/index.html index 5547dc1c..f03ccae5 100644 --- a/index.html +++ b/index.html @@ -16,7 +16,7 @@ - + @@ -30,7 +30,7 @@ - + @@ -112,7 +112,7 @@ built out of pure joy and nostalgia for the sake of reliving the good old time with the elegant Aero and Glassy interface.

    Brick 1100

    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.

    💬 What the users say

    • That's what I call a real Windows Simulator, it is exactly like Windows 7 but on mobile! I really like it and I gave 5 STARS beacuse of it! I hope you make really awesome updates on this game without no doubt! Thanks for reading this!
      Cip
      Cip
      September 23, 2023
    • Best Windows Simulator ever! If you want to change from a phone to a PC then this app is for you. It has more than just Windows 7, it also has Win8, Win8.1, WinXp, Win11, Win10, WinVista, Win95, Win3.1, Win2000, and MacOS. There are ads but they don't really pop out too often which makes things better. There are some features that requires ads to unlock but its ok. In overall, 10/10.
      Aldree Syafiq
      Aldree Syafiq
      March 24, 2023
    • Omg! It works!!! Thank you so much for bringing our childhood memories back! 🥺💓🙏 I really like the game "Purble Place". A huge respect for giving us strong nostalgia vibes about our childhood so much!.💖💓💖😁 Thank you so much guys~!💖💖💖💖💖💖💖💖
      Leox
      Leox
      January 14, 2022
    • I actually posted a review on this about a year back but the app has changed a lot it's gone from 4* - 5* originally it was very minimal and you couldn't really do anything but now it's full of features and the themes are brilliant in fact you should just call it windows simulator cause with just the click of a button you have a different windows version.
      The Gaelic gladiator
      The Gaelic gladiator
      December 16, 2021
    • I absolutely love this game. Nice animations, good amount of programs, able to play .mp4 files, 2 browsers, and the childhood games!
      Jephe Mendoza
      Jephe Mendoza
      August 20, 2021
    • I love this simulator! This app made me feel the best experience of Windows 7! My computer is Windows 10, but no need to downgrade, I will use this app to use Windows 7. It has the cool programs like Games, Internet Explorer, Paint, Notepad, Calculator, Snipping Tool and Windows Media Player, I recommend u to download this!
      Railey Dean Tiamson
      Railey Dean Tiamson
      November 7, 2020
    • google
    • youtube
    • github
    • twitter
    Copyright © 2021 - present. All Rights Reserved
    - + and features from one of the most durable phones.

    💬 What the users say

    • That's what I call a real Windows Simulator, it is exactly like Windows 7 but on mobile! I really like it and I gave 5 STARS beacuse of it! I hope you make really awesome updates on this game without no doubt! Thanks for reading this!
      Cip
      Cip
      September 23, 2023
    • Best Windows Simulator ever! If you want to change from a phone to a PC then this app is for you. It has more than just Windows 7, it also has Win8, Win8.1, WinXp, Win11, Win10, WinVista, Win95, Win3.1, Win2000, and MacOS. There are ads but they don't really pop out too often which makes things better. There are some features that requires ads to unlock but its ok. In overall, 10/10.
      Aldree Syafiq
      Aldree Syafiq
      March 24, 2023
    • Omg! It works!!! Thank you so much for bringing our childhood memories back! 🥺💓🙏 I really like the game "Purble Place". A huge respect for giving us strong nostalgia vibes about our childhood so much!.💖💓💖😁 Thank you so much guys~!💖💖💖💖💖💖💖💖
      Leox
      Leox
      January 14, 2022
    • I actually posted a review on this about a year back but the app has changed a lot it's gone from 4* - 5* originally it was very minimal and you couldn't really do anything but now it's full of features and the themes are brilliant in fact you should just call it windows simulator cause with just the click of a button you have a different windows version.
      The Gaelic gladiator
      The Gaelic gladiator
      December 16, 2021
    • I absolutely love this game. Nice animations, good amount of programs, able to play .mp4 files, 2 browsers, and the childhood games!
      Jephe Mendoza
      Jephe Mendoza
      August 20, 2021
    • I love this simulator! This app made me feel the best experience of Windows 7! My computer is Windows 10, but no need to downgrade, I will use this app to use Windows 7. It has the cool programs like Games, Internet Explorer, Paint, Notepad, Calculator, Snipping Tool and Windows Media Player, I recommend u to download this!
      Railey Dean Tiamson
      Railey Dean Tiamson
      November 7, 2020
    • google
    • youtube
    • github
    • twitter
    Copyright © 2021 - present. All Rights Reserved
    + diff --git a/rss.xml b/rss.xml index bedeaa32..f356f5dd 100644 --- a/rss.xml +++ b/rss.xml @@ -4,7 +4,7 @@ Visnalize https://visnalize.com - Sun, 10 Mar 2024 08:29:29 GMT + Sun, 24 Mar 2024 03:34:20 GMT http://blogs.law.harvard.edu/tech/rss https://github.com/webmasterish/vuepress-plugin-feed @@ -12,7 +12,7 @@ <![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 - Sun, 10 Mar 2024 08:29:29 GMT + Sun, 24 Mar 2024 03:34:20 GMT @@ -21,7 +21,7 @@ <![CDATA[How I built visnalize.com]]> https://visnalize.com/blog/building-visnalize-com.html https://visnalize.com/blog/building-visnalize-com.html - Sun, 10 Mar 2024 08:29:29 GMT + Sun, 24 Mar 2024 03:34:20 GMT @@ -30,94 +30,103 @@ <![CDATA[How I built Win7 Simu]]> https://visnalize.com/blog/building-win7-simu.html https://visnalize.com/blog/building-win7-simu.html - Sun, 10 Mar 2024 08:29:29 GMT + Sun, 24 Mar 2024 03:34:20 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 + Sun, 24 Mar 2024 03:34:20 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 - Sun, 10 Mar 2024 08:29:29 GMT + Sun, 24 Mar 2024 03:34:20 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 - Sun, 10 Mar 2024 08:29:29 GMT - - + <![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 + Sun, 24 Mar 2024 03:34:20 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 - Sun, 10 Mar 2024 08:29:29 GMT + Sun, 24 Mar 2024 03:34:20 GMT + + <![CDATA[📝 Blog]]> + https://visnalize.com/blog/ + https://visnalize.com/blog/ + Sun, 24 Mar 2024 03:34:20 GMT + <![CDATA[Simulators and Emulators: What's the difference?]]> https://visnalize.com/blog/simulator-vs-emulator.html https://visnalize.com/blog/simulator-vs-emulator.html - Sun, 10 Mar 2024 08:29:29 GMT + Sun, 24 Mar 2024 03:34:20 GMT - <![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 - Sun, 10 Mar 2024 08:29:29 GMT - - + <![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 + Sun, 24 Mar 2024 03:34:20 GMT + + - - <![CDATA[📝 Blog]]> - https://visnalize.com/blog/ - https://visnalize.com/blog/ - Sun, 10 Mar 2024 08:29:29 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 - Sun, 10 Mar 2024 08:29:29 GMT + Sun, 24 Mar 2024 03:34:20 GMT - - <![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 - Sun, 10 Mar 2024 08:29:29 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 - Sun, 10 Mar 2024 08:29:29 GMT + Sun, 24 Mar 2024 03:34:20 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 + Sun, 24 Mar 2024 03:34:20 GMT + + + + <![CDATA[Win7 Simu versus mobile devices]]> https://visnalize.com/blog/win7-simu-mobile-devices.html https://visnalize.com/blog/win7-simu-mobile-devices.html - Sun, 10 Mar 2024 08:29:29 GMT + Sun, 24 Mar 2024 03:34:20 GMT @@ -126,7 +135,7 @@ <![CDATA[Introducing Win7 UI]]> https://visnalize.com/blog/win7-ui-introduction.html https://visnalize.com/blog/win7-ui-introduction.html - Sun, 10 Mar 2024 08:29:29 GMT + Sun, 24 Mar 2024 03:34:20 GMT @@ -135,19 +144,10 @@ <![CDATA[How to get Windows resources]]> https://visnalize.com/blog/windows-resources.html https://visnalize.com/blog/windows-resources.html - Sun, 10 Mar 2024 08:29:29 GMT + Sun, 24 Mar 2024 03:34:20 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 - Sun, 10 Mar 2024 08:29:29 GMT - - - - \ No newline at end of file diff --git a/sitemap.xml b/sitemap.xml index 24749f30..036a03fc 100644 --- a/sitemap.xml +++ b/sitemap.xml @@ -1 +1 @@ -https://visnalize.com/about.html2023-10-31T07:27:50.000Zdailyhttps://visnalize.com/blog/about-the-ads.html2023-11-11T16:58:27.000Zdailyhttps://visnalize.com/blog/building-visnalize-com.html2023-08-15T11:58:00.000Zdailyhttps://visnalize.com/blog/building-win7-simu.html2023-08-15T11:58:00.000Zdailyhttps://visnalize.com/blog/from-codepen-to-app.html2024-01-31T04:36:19.000Zdailyhttps://visnalize.com/blog/from-side-project-to-side-hustle.html2023-11-11T17:05:22.000Zdailyhttps://visnalize.com/blog/load-any-websites-in-iframes.html2023-08-15T11:58:00.000Zdailyhttps://visnalize.com/blog/simulator-vs-emulator.html2024-02-21T11:02:25.000Zdailyhttps://visnalize.com/blog/game-stick-lite-4k-adding-games.html2024-03-10T08:28:45.000Zdailyhttps://visnalize.com/blog/2022-10-17T09:53:46.000Zdailyhttps://visnalize.com/blog/win7-icons-viewer-downloader.html2023-06-26T12:53:04.000Zdailyhttps://visnalize.com/blog/visnalize-year-in-review-2023.html2024-01-01T02:18:12.000Zdailyhttps://visnalize.com/blog/win7-simu-file-explorer.html2024-01-31T04:36:19.000Zdailyhttps://visnalize.com/blog/win7-simu-mobile-devices.html2023-06-26T12:53:04.000Zdailyhttps://visnalize.com/blog/win7-ui-introduction.html2023-08-21T04:12:36.000Zdailyhttps://visnalize.com/blog/windows-resources.html2023-08-15T11:58:00.000Zdailyhttps://visnalize.com/blog/win7-simu-year-in-review-2022.html2023-06-26T12:53:04.000Zdailyhttps://visnalize.com/brick1100/about.html2024-01-29T10:13:43.000Zdailyhttps://visnalize.com/brick1100/changelog.html2024-01-31T04:36:19.000Zdailyhttps://visnalize.com/brick1100/games.html2023-11-07T12:57:20.000Zdailyhttps://visnalize.com/brick1100/deep-links.html2023-11-07T12:57:20.000Zdailyhttps://visnalize.com/brick1100/privacy.html2023-10-30T15:59:21.000Zdailyhttps://visnalize.com/brick1100/2023-11-02T17:52:36.000Zdailyhttps://visnalize.com/contact.html2023-11-02T17:52:36.000Zdailyhttps://visnalize.com/2023-10-31T07:27:50.000Zdailyhttps://visnalize.com/win7simu/about.html2024-02-02T09:21:09.000Zdailyhttps://visnalize.com/win7simu/faq.html2024-01-31T04:36:19.000Zdailyhttps://visnalize.com/win7simu/changelog.html2024-01-31T04:36:19.000Zdailyhttps://visnalize.com/win7simu/2023-11-02T17:52:36.000Zdailyhttps://visnalize.com/win7simu/privacy.html2023-10-30T15:59:21.000Zdailyhttps://visnalize.com/win7simu/themestudio/changelog.html2024-01-31T04:36:19.000Zdailyhttps://visnalize.com/win7simu/themestudio/in-depth-guide.html2023-12-27T16:53:54.000Zdailyhttps://visnalize.com/win7simu/themestudio/quick-guide.html2023-06-26T12:53:04.000Zdailyhttps://visnalize.com/win7simu/themestudio/2023-12-27T16:53:54.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/brick-1100/dailyhttps://visnalize.com/blog/tag/random/dailyhttps://visnalize.com/blog/tag/tools/dailyhttps://visnalize.com/blog/tag/review/daily \ No newline at end of file +https://visnalize.com/about.html2023-10-31T07:27:50.000Zdailyhttps://visnalize.com/blog/about-the-ads.html2023-11-11T16:58:27.000Zdailyhttps://visnalize.com/blog/building-visnalize-com.html2023-08-15T11:58:00.000Zdailyhttps://visnalize.com/blog/building-win7-simu.html2023-08-15T11:58:00.000Zdailyhttps://visnalize.com/blog/from-side-project-to-side-hustle.html2023-11-11T17:05:22.000Zdailyhttps://visnalize.com/blog/from-codepen-to-app.html2024-01-31T04:36:19.000Zdailyhttps://visnalize.com/blog/game-stick-lite-4k-adding-games.html2024-03-10T08:28:45.000Zdailyhttps://visnalize.com/blog/load-any-websites-in-iframes.html2023-08-15T11:58:00.000Zdailyhttps://visnalize.com/blog/2022-10-17T09:53:46.000Zdailyhttps://visnalize.com/blog/simulator-vs-emulator.html2024-02-21T11:02:25.000Zdailyhttps://visnalize.com/blog/visnalize-year-in-review-2023.html2024-01-01T02:18:12.000Zdailyhttps://visnalize.com/blog/win7-icons-viewer-downloader.html2023-06-26T12:53:04.000Zdailyhttps://visnalize.com/blog/win7-simu-file-explorer.html2024-01-31T04:36:19.000Zdailyhttps://visnalize.com/blog/win7-simu-year-in-review-2022.html2023-06-26T12:53:04.000Zdailyhttps://visnalize.com/blog/win7-simu-mobile-devices.html2023-06-26T12:53:04.000Zdailyhttps://visnalize.com/blog/win7-ui-introduction.html2023-08-21T04:12:36.000Zdailyhttps://visnalize.com/blog/windows-resources.html2023-08-15T11:58:00.000Zdailyhttps://visnalize.com/brick1100/changelog.html2024-01-31T04:36:19.000Zdailyhttps://visnalize.com/brick1100/about.html2024-01-29T10:13:43.000Zdailyhttps://visnalize.com/brick1100/deep-links.html2023-11-07T12:57:20.000Zdailyhttps://visnalize.com/brick1100/games.html2023-11-07T12:57:20.000Zdailyhttps://visnalize.com/brick1100/2023-11-02T17:52:36.000Zdailyhttps://visnalize.com/brick1100/privacy.html2023-10-30T15:59:21.000Zdailyhttps://visnalize.com/2023-10-31T07:27:50.000Zdailyhttps://visnalize.com/contact.html2023-11-02T17:52:36.000Zdailyhttps://visnalize.com/win7simu/about.html2024-02-02T09:21:09.000Zdailyhttps://visnalize.com/win7simu/changelog.html2024-01-31T04:36:19.000Zdailyhttps://visnalize.com/win7simu/faq.html2024-01-31T04:36:19.000Zdailyhttps://visnalize.com/win7simu/privacy.html2023-10-30T15:59:21.000Zdailyhttps://visnalize.com/win7simu/themestudio/changelog.html2024-01-31T04:36:19.000Zdailyhttps://visnalize.com/win7simu/2023-11-02T17:52:36.000Zdailyhttps://visnalize.com/win7simu/themestudio/in-depth-guide.html2023-12-27T16:53:54.000Zdailyhttps://visnalize.com/win7simu/themestudio/quick-guide.html2023-06-26T12:53:04.000Zdailyhttps://visnalize.com/win7simu/themestudio/2023-12-27T16:53:54.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/brick-1100/dailyhttps://visnalize.com/blog/tag/random/dailyhttps://visnalize.com/blog/tag/review/dailyhttps://visnalize.com/blog/tag/tools/daily \ No newline at end of file diff --git a/win7simu/about.html b/win7simu/about.html index c5758036..3dfab4a8 100644 --- a/win7simu/about.html +++ b/win7simu/about.html @@ -16,7 +16,7 @@ - + @@ -35,7 +35,7 @@ - + @@ -111,7 +111,7 @@ Github (opens new window)
  • Twitter - (opens new window)

    • # win7simu 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 Store Web 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.

    # Web version

    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.

    # Translations Crowdin (opens new window)

    Win7 Simu supports several languages. However, most of the translations are done via machine, therefore, the accuracy may be off or not correct whatsoever. If you wish to contribute to your language, please find the translation project on Crowdin (opens new window).

    # 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: 2/2/2024, 9:21:09 AM

    Comments

    - + (opens new window)

    # win7simu 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 Store Web 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.

    # Web version

    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.

    # Translations Crowdin (opens new window)

    Win7 Simu supports several languages. However, most of the translations are done via machine, therefore, the accuracy may be off or not correct whatsoever. If you wish to contribute to your language, please find the translation project on Crowdin (opens new window).

    # 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: 2/2/2024, 9:21:09 AM

    Comments

    + diff --git a/win7simu/changelog.html b/win7simu/changelog.html index a0d09238..afeff4f7 100644 --- a/win7simu/changelog.html +++ b/win7simu/changelog.html @@ -16,7 +16,7 @@ - + @@ -31,7 +31,7 @@ - + @@ -112,7 +112,7 @@
    • Folder management (create, delete, copy/paste)
    • File management (view, create, edit, rename, copy/paste)
    • Item's context menu (right click/hold your finger)
    • (Now you need to double-tap on an item to open)
  • Fully functional Recycle Bin
  • Improved file opening/saving mechanism across several simulator programs (Notepad, Paint, Wordpad, etc.)
  • 💥 BREAKING CHANGE: desktop shortcuts are wiped out due to the structural changes of File Explorer (no Android/system files are harmed) - please take a screenshot of your desktop as a backup measure before updating.

    • Web

    • Fixed the issue with Safari where right-click (hold finger on touch devices) was not working
    • Fixed some other styling issues on Safari

    # 2.28.0 (Apr 5, 2023)

    Core

    • Added Comfy Cakes
    • Minor bugfixes and improvements

    Web

    # 2.27.0 (Mar 13, 2023)

    Core

    • Added Winver
    • Added Programs and Features
    • Updated Theme Studio v1.1.0
    • Fixed the issue with account picture

    Android

    • Added device's push notification as system notification

    # 2.26.2 (Feb 24, 2023)

    • Fixed missing desktop background & icons

    # 2.26.1 (Feb 23, 2023)

    • Added Window mode for Snipping Tool
    • Fixed the Leaked_Taskbar BSOD issue for Windows 11 theme
    • Fixed broken Windows 10 Start menu

    # 2.26.0 (Feb 19, 2023)

    • Added Theme Studio
    • Fixed screensaver not working for user accounts
    • Improved Snipping Tool's quality

    # 2022

    # 2.25.0 (Dec 29, 2022)

    • Desktop shortcuts are now moveable (you now need to double tap on a shortcut to open)
    • Added macOS boot + login screen
    • Added shutdown button on Windows 7/Vista login screen
    • Improved translation accuracy
    • Fixed an issue with the Shutdown menu commands not working in Win2k and Win95 themes

    # 2.24.0 (Nov 19, 2022)

    Core

    • Added Magnifier
    • Improved visual accuracy of Windows elements (buttons, window controls, toolbar, context menu etc.)

    Android

    • Fixed an issue with some games not loading

    # 2.23.1 (Sep 30, 2022)

    Core

    • Added MacOS launchpad animation

    Android

    • Revoked QUERY_ALL_PACKAGES permission to comply with Google Play policy. Note that this has an impact on the Start Menu as it won't show all the apps available on your device if you are using Android 12 or later.
    • Improved user experience with ads (ask for a confirmation before showing ads)

    Web

    • Added Assistive Control to support some external interactions.
    • Improved user experience with ads (removed the giant banner ad)
    • Fixed button color on Safari

    # 2.23.2 (Oct 15, 2022)

    • Improved web browsers (IE, Chrome) behavior

    # 2.23.0 (Sep 25, 2022)

    Core

    • Added MacOS theme
    • Added some window animations (open, close, minimize)
    • Added language support for: Chinese Simplified
    • Improved taskbar tray icons

    Android

    • Fixed the watermark issue as it still appears when subscription has already been purchased
    • Fixed an issue on Android 12+ not showing all packages/apps in Start Menu

    Web

    • Fixed right click (hold gesture) issue on Safari

    # 2.22.2 (Sep 10, 2022)

    Core

    Android

    • Fixed fullscreen issue when the keyboard is visible
    • Fixed some other crash issues

    # 2.22.1 (Aug 6, 2022)

    Android

    • Black screen hotfix.

    # 2.22.0 (Aug 6, 2022)

    Core

    • Added language support for: Catalan

    Android

    • Added monthly subscription to remove ads

    # 2.21.0 (Jun 10, 2022)

    • You can now change theme color (Windows 7 aero themes only)
    • Added dummy Windows Installer
    • Improved translations for: Japanese, Polish, Portuguese and Russian. Huge thanks to the contributors
    • Fixed account creation issue

    # 2.20.0 (Jan 4, 2022)

    • Major improvements for My Computer
    • You can now browse location to save file
    • You can download the file (web version only)
    • You can now create folders and text documents on desktop
    • Added language support for: Japanese
    • Added several Online games

    # 2021

    # 2.19.0 (Nov 7, 2021)

    • Added new theme: Windows 3.1
    • Added language support for: French
    • BSOD is now theme-compliant

    # 2.18.0 (Oct 15, 2021)

    • Added Run
    • Added Task Manager
    • Added Taskbar properties

    # 2.17.0 (Oct 3, 2021)

    • Added WordPad
    • Added language support for: Thai

    # 2.16.0 (Sep 18, 2021)

    • Added BIOS setup
    • Boot animation, logon screen can now be changed via BIOS
    • Shutdown screen is now associated with account's theme

    # 2.15.0 (Sep 8, 2021)

    • Added Sound Recorder
    • Added new theme: Windows 95
    • Improved Windows 11 start menu

    # 2.14.0 (Aug 28, 2021)

    • Added Sticky Notes
    • Added Camera
    • My Computer can now open audio and video files from Android.

    # 2.13.0 (Aug 18, 2021)

    • Added Screensaver
    • Added new gadget: Battery
    • Improved window's behavior (added active state, removed resizing frame, fixed several bugs)
    • Fixed some issues with Windows Media Player

    # 2.12.0 (Aug 7, 2021)

    • You can now pin programs to taskbar.
    • Added new game: Solitaire
    • Added new CMD commands: shutdown, start, color

    # 2.11.1 (Jul 27, 2021)

    • Home/launcher setting is disabled from the app due to instability.

    # 2.11.0 (Jul 23, 2021)

    • Added new theme: Windows 11
    • You can now zoom the display for a better experience
    • You can now switch the launcher directly from Control Panel

    # 2.10.0 (Jul 4, 2021)

    • You can now use the simulator as a home/launcher app (beta)
    • Added new theme: Windows 2000
    • Added right click menu for Start Menu programs
    • Added easter egg: Chrome dino game
    • Added easter egg: bring Control Panel to desktop

    # 2.9.0 (Jun 21, 2021)

    • Added option to create desktop shortcuts
    • Added new gadget: Weather
    • Added more BSOD triggers

    # 2.8.0 (Jun 10, 2021)

    • Added Chrome
    • Added new game: Classic Tetris
    • Added new gadget: Currency

    # 2.7.0 (May 23, 2021)

    • Added language support for: Spanish
    • Desktop background is now customizable
    • My Computer can now access files from Android (photos, text)
    • Addressed the issue with IE unable to access the internet

    # 2.6.0 (May 14, 2021)

    • Added Windows Gadgets: Clock, Calendar
    • Improved Taskbar's Calendar
    • Improved Desktop Menu interface
    • Optimized app's launch time

    # 2.5.0 (Apr 29, 2021)

    • Added Mouse
    • Fixed battery missing from taskbar

    # 2.4.0 (Apr 15, 2021)

    • Added Purble Shop

    # 2020

    # 2.3.3 (Aug 18, 2020)

    • Fixed issue with Windows Media Player

    # 2.3.2 (Aug 16, 2020)

    • Added new theme: Windows Vista
    • Fixed display scaling issue on different screen sizes

    # 2.3.1 (Jul 31, 2020)

    • Added language support for: Turkish, Polish and Ukrainian
    • Fixed theme not persisting on Guest account
    • Fixed Comfy Cakes being displayed (the game is still in development)

    # 2.3 (Jul 22, 2020)

    • Added language support for: German, Portuguese, Russian, Vietnamese
      • The display language is automatically selected based on device's language.

    # 2.2 (Jul 11, 2020)

    • Added Paint
    • Added an account creation option

    # 2.1 (Jun 13, 2020)

    • Screen orientation is locked to landscape to provide the best experience and reduce display issues on different screen sizes.
    • Text files, screen captures can now be saved
    • Notepad settings are sync with user account
    • Added new theme: Windows XP
    • Added Shutdown screen

    # 2.0 (May 30, 2020)

    • Added online user accounts
      • Create and log on/off with user account
      • Sync your settings, themes and more
      • Manage your account in Control Panel
    • Added new themes -
      • Windows 8 with the unique Start Screen
      • Windows 8.1, Windows 10 with the brand new looks

    # 1.2.2 (May 9, 2020)

    • Addressed the black screen issue on Android 6.0 and earlier

    # 1.2.1 (May 3, 2020)

    • Adjusted the size of UI elements
    • Fixed and enhanced Internet Explorer
    • Allow screen orientation (excluding Games which will remain locked for the best experience)

    # 1.2 (Apr 16, 2020)

    • Added Minesweeper
    • Added Purble Place (Purble Pairs)
    • Selected theme is now cached
    • Screen orientation is locked to portrait to prevent unexpected behavior

    # 1.1 (Feb 27, 2020)

    • Added Command Prompt
    • Added Control Panel
    • Added Shutdown + Restart options

    # 1.0 (Feb 16, 2020)

    First release with the basic Windows GUI and functionalities:

    • Interactive desktop, windows, start menu, taskbar
    • Personalization
    • Calculator
    • Internet Explorer
    • Notepad
    • Snipping Tool
    • Media Player
    Last Updated: 1/31/2024, 4:36:19 AM
    - +
    • Windows 8 with the unique Start Screen
    • Windows 8.1, Windows 10 with the brand new looks

    # 1.2.2 (May 9, 2020)

    • Addressed the black screen issue on Android 6.0 and earlier

    # 1.2.1 (May 3, 2020)

    • Adjusted the size of UI elements
    • Fixed and enhanced Internet Explorer
    • Allow screen orientation (excluding Games which will remain locked for the best experience)

    # 1.2 (Apr 16, 2020)

    • Added Minesweeper
    • Added Purble Place (Purble Pairs)
    • Selected theme is now cached
    • Screen orientation is locked to portrait to prevent unexpected behavior

    # 1.1 (Feb 27, 2020)

    • Added Command Prompt
    • Added Control Panel
    • Added Shutdown + Restart options

    # 1.0 (Feb 16, 2020)

    First release with the basic Windows GUI and functionalities:

    • Interactive desktop, windows, start menu, taskbar
    • Personalization
    • Calculator
    • Internet Explorer
    • Notepad
    • Snipping Tool
    • Media Player
    Last Updated: 1/31/2024, 4:36:19 AM
    + diff --git a/win7simu/faq.html b/win7simu/faq.html index 2a03088c..bdc449b1 100644 --- a/win7simu/faq.html +++ b/win7simu/faq.html @@ -16,7 +16,7 @@ - + @@ -31,7 +31,7 @@ - + @@ -107,7 +107,7 @@ Github (opens new window)
  • Twitter - (opens new window)

    • # 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: 1/31/2024, 4:36:19 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: 1/31/2024, 4:36:19 AM

    Comments

    - + (opens new window)

    # 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: 1/31/2024, 4:36:19 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: 1/31/2024, 4:36:19 AM

    Comments

    + diff --git a/win7simu/index.html b/win7simu/index.html index 98bd6644..dfe6414b 100644 --- a/win7simu/index.html +++ b/win7simu/index.html @@ -16,7 +16,7 @@ - + @@ -31,7 +31,7 @@ - + @@ -107,7 +107,7 @@ Github (opens new window)
  • Twitter - (opens new window)
    • Last Updated: 11/2/2023, 5:52:36 PM
    - + (opens new window)
    Last Updated: 11/2/2023, 5:52:36 PM
    + diff --git a/win7simu/privacy.html b/win7simu/privacy.html index b8d15d76..ccccc523 100644 --- a/win7simu/privacy.html +++ b/win7simu/privacy.html @@ -16,7 +16,7 @@ - + @@ -31,7 +31,7 @@ - + @@ -107,7 +107,7 @@ Github (opens new window)
  • Twitter - (opens new window)

    • # Privacy Policy

    Last Updated: 10/30/2023, 3:59:21 PM

    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: 10/30/2023, 3:59:21 PM
    - + (opens new window)

    # Privacy Policy

    Last Updated: 10/30/2023, 3:59:21 PM

    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: 10/30/2023, 3:59:21 PM
    + diff --git a/win7simu/themestudio/changelog.html b/win7simu/themestudio/changelog.html index 5b0381ef..10b616fd 100644 --- a/win7simu/themestudio/changelog.html +++ b/win7simu/themestudio/changelog.html @@ -16,7 +16,7 @@ - + @@ -31,7 +31,7 @@ - + @@ -107,7 +107,7 @@ Github (opens new window)
  • Twitter - (opens new window)

    • # Theme Studio Changelog

    # All versions

    # 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: 1/31/2024, 4:36:19 AM
    - + (opens new window)

    # Theme Studio Changelog

    # All versions

    # 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: 1/31/2024, 4:36:19 AM
    + diff --git a/win7simu/themestudio/in-depth-guide.html b/win7simu/themestudio/in-depth-guide.html index 1238c758..da136a3b 100644 --- a/win7simu/themestudio/in-depth-guide.html +++ b/win7simu/themestudio/in-depth-guide.html @@ -16,7 +16,7 @@ - + @@ -35,7 +35,7 @@ - + @@ -295,7 +295,7 @@ Changelog → -

    Comments

    - +

    Comments

    + diff --git a/win7simu/themestudio/index.html b/win7simu/themestudio/index.html index fe63c6a2..ca6a0d7c 100644 --- a/win7simu/themestudio/index.html +++ b/win7simu/themestudio/index.html @@ -16,7 +16,7 @@ - + @@ -35,7 +35,7 @@ - + @@ -115,7 +115,7 @@ Getting started → -

    Comments

    - +

    Comments

    + diff --git a/win7simu/themestudio/quick-guide.html b/win7simu/themestudio/quick-guide.html index c0e68501..c1df161c 100644 --- a/win7simu/themestudio/quick-guide.html +++ b/win7simu/themestudio/quick-guide.html @@ -16,7 +16,7 @@ - + @@ -35,7 +35,7 @@ - + @@ -119,7 +119,7 @@ In-depth guide → -

    Comments

    - +

    Comments

    +