From 45819f9c01eb89c03087049108006570c008f8e1 Mon Sep 17 00:00:00 2001 From: Khang Date: Sat, 10 Aug 2024 14:02:01 +0000 Subject: [PATCH] Updates --- 404.html | 4 +- about.html | 4 +- assets/js/{13.ae45d962.js => 13.531b5c54.js} | 2 +- assets/js/{18.7e367f0a.js => 18.a5eb1b76.js} | 2 +- assets/js/{19.a4e6b85c.js => 19.10b20bcd.js} | 2 +- assets/js/{20.4ebbe46b.js => 20.38e66efe.js} | 2 +- assets/js/{45.91c071f7.js => 45.0d7f59f4.js} | 2 +- assets/js/{46.869038c4.js => 46.1b5bc492.js} | 2 +- assets/js/{47.2ae91bcb.js => 47.d89f8c05.js} | 2 +- assets/js/{49.797aa11f.js => 49.5053d0eb.js} | 2 +- assets/js/{50.7703b6fb.js => 50.e3be17b6.js} | 2 +- assets/js/{59.681801af.js => 59.6769dd6d.js} | 2 +- assets/js/{60.ef59dd47.js => 60.a3c1289c.js} | 2 +- assets/js/{61.aecb01a9.js => 61.3c62b94f.js} | 2 +- assets/js/{64.1f583d89.js => 64.20dc6109.js} | 2 +- assets/js/{65.d6caa23b.js => 65.c9065c38.js} | 2 +- assets/js/{67.b8aedcc0.js => 67.f88e95b0.js} | 2 +- assets/js/68.05e58926.js | 1 - assets/js/68.44ab72cd.js | 1 + assets/js/{70.42d24d28.js => 70.4db35364.js} | 2 +- assets/js/{71.f0b10e51.js => 71.80779522.js} | 2 +- assets/js/{79.2a66f333.js => 79.a1eca327.js} | 2 +- assets/js/{9.dfddafbe.js => 9.b48627ff.js} | 2 +- .../js/{app.713ee824.js => app.92569294.js} | 4 +- blog/about-the-ads.html | 4 +- blog/building-visnalize-com.html | 4 +- blog/building-win7-simu.html | 4 +- blog/from-codepen-to-app.html | 4 +- blog/from-side-project-to-side-hustle.html | 4 +- blog/game-stick-lite-4k-adding-games.html | 4 +- blog/index.html | 8 +- blog/load-any-websites-in-iframes.html | 4 +- blog/simulator-vs-emulator.html | 4 +- blog/tag/brick-1100/index.html | 8 +- blog/tag/index.html | 8 +- blog/tag/random/index.html | 8 +- blog/tag/review/index.html | 8 +- blog/tag/sharing/index.html | 8 +- blog/tag/technical/index.html | 8 +- blog/tag/tips/index.html | 8 +- blog/tag/tools/index.html | 8 +- blog/tag/win7-simu/index.html | 8 +- blog/visnalize-year-in-review-2023.html | 4 +- blog/why-side-hustle.html | 4 +- blog/win7-icons-viewer-downloader.html | 4 +- blog/win7-simu-file-explorer.html | 4 +- blog/win7-simu-mobile-devices.html | 4 +- blog/win7-simu-windows-media-center.html | 4 +- blog/win7-simu-year-in-review-2022.html | 4 +- blog/win7-ui-introduction.html | 4 +- blog/windows-resources.html | 4 +- brick1100/about.html | 4 +- brick1100/changelog.html | 6 +- brick1100/deep-links.html | 4 +- brick1100/games.html | 4 +- brick1100/index.html | 4 +- brick1100/privacy.html | 4 +- contact.html | 4 +- feed.atom | 94 ++++++++-------- feed.json | 92 ++++++++-------- index.html | 4 +- rss.xml | 102 +++++++++--------- sitemap.xml | 2 +- win7simu/about.html | 4 +- win7simu/changelog.html | 4 +- win7simu/faq.html | 4 +- win7simu/index.html | 4 +- win7simu/privacy.html | 4 +- win7simu/themestudio/changelog.html | 4 +- win7simu/themestudio/in-depth-guide.html | 4 +- win7simu/themestudio/index.html | 4 +- win7simu/themestudio/quick-guide.html | 4 +- 72 files changed, 280 insertions(+), 280 deletions(-) rename assets/js/{13.ae45d962.js => 13.531b5c54.js} (80%) rename assets/js/{18.7e367f0a.js => 18.a5eb1b76.js} (90%) rename assets/js/{19.a4e6b85c.js => 19.10b20bcd.js} (92%) rename assets/js/{20.4ebbe46b.js => 20.38e66efe.js} (97%) rename assets/js/{45.91c071f7.js => 45.0d7f59f4.js} (99%) rename assets/js/{46.869038c4.js => 46.1b5bc492.js} (99%) rename assets/js/{47.2ae91bcb.js => 47.d89f8c05.js} (98%) rename assets/js/{49.797aa11f.js => 49.5053d0eb.js} (99%) rename assets/js/{50.7703b6fb.js => 50.e3be17b6.js} (92%) rename assets/js/{59.681801af.js => 59.6769dd6d.js} (99%) rename assets/js/{60.ef59dd47.js => 60.a3c1289c.js} (99%) rename assets/js/{61.aecb01a9.js => 61.3c62b94f.js} (77%) rename assets/js/{64.1f583d89.js => 64.20dc6109.js} (99%) rename assets/js/{65.d6caa23b.js => 65.c9065c38.js} (99%) rename assets/js/{67.b8aedcc0.js => 67.f88e95b0.js} (98%) delete mode 100644 assets/js/68.05e58926.js create mode 100644 assets/js/68.44ab72cd.js rename assets/js/{70.42d24d28.js => 70.4db35364.js} (81%) rename assets/js/{71.f0b10e51.js => 71.80779522.js} (99%) rename assets/js/{79.2a66f333.js => 79.a1eca327.js} (96%) rename assets/js/{9.dfddafbe.js => 9.b48627ff.js} (99%) rename assets/js/{app.713ee824.js => app.92569294.js} (69%) diff --git a/404.html b/404.html index b7c1f369..5710efcd 100644 --- a/404.html +++ b/404.html @@ -20,13 +20,13 @@ - +

404

There's nothing here.
Take me home.
- + diff --git a/about.html b/about.html index 6ee31e00..7a4ccca1 100644 --- a/about.html +++ b/about.html @@ -35,7 +35,7 @@ - + @@ -112,6 +112,6 @@ (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: 6/1/2024, 6:49:33 AM
    - + diff --git a/assets/js/13.ae45d962.js b/assets/js/13.531b5c54.js similarity index 80% rename from assets/js/13.ae45d962.js rename to assets/js/13.531b5c54.js index 13e20af0..463803af 100644 --- a/assets/js/13.ae45d962.js +++ b/assets/js/13.531b5c54.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[13],{423:function(e,t,s){e.exports=s.p+"assets/img/themestudio-editor.a388d954.png"},424:function(e,t,s){e.exports=s.p+"assets/img/themestudio-explorer.8ddbe036.png"},425:function(e,t,s){e.exports=s.p+"assets/img/getstarted.a0f02f51.png"},426:function(e,t,s){e.exports=s.p+"assets/img/getstarted1.edf5c7b0.png"},427:function(e,t,s){e.exports=s.p+"assets/img/getstarted2.bbedd785.png"},428:function(e,t,s){e.exports=s.p+"assets/img/getstarted3.eb3df6cb.png"},513: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(423),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(424),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(425),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(426),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(427),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(428),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],{419:function(e,t,s){e.exports=s.p+"assets/img/themestudio-editor.a388d954.png"},420:function(e,t,s){e.exports=s.p+"assets/img/themestudio-explorer.8ddbe036.png"},421:function(e,t,s){e.exports=s.p+"assets/img/getstarted.a0f02f51.png"},422:function(e,t,s){e.exports=s.p+"assets/img/getstarted1.edf5c7b0.png"},423:function(e,t,s){e.exports=s.p+"assets/img/getstarted2.bbedd785.png"},424:function(e,t,s){e.exports=s.p+"assets/img/getstarted3.eb3df6cb.png"},511: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(419),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(420),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(421),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(422),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(423),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(424),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/18.7e367f0a.js b/assets/js/18.a5eb1b76.js similarity index 90% rename from assets/js/18.7e367f0a.js rename to assets/js/18.a5eb1b76.js index d1ff138b..1e54300f 100644 --- a/assets/js/18.7e367f0a.js +++ b/assets/js/18.a5eb1b76.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(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(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],{394:function(e,t,a){e.exports=a.p+"assets/img/roms.a020f50d.jpg"},395:function(e,t,a){e.exports=a.p+"assets/img/gamesdb.3f817468.jpg"},396:function(e,t,a){e.exports=a.p+"assets/img/insert-game-data.1bcf0446.jpg"},397:function(e,t,a){e.exports=a.p+"assets/img/insert-game-data2.ae992983.jpg"},485: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(394),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(395),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(396),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(397),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.a4e6b85c.js b/assets/js/19.10b20bcd.js similarity index 92% rename from assets/js/19.a4e6b85c.js rename to assets/js/19.10b20bcd.js index 0bc7d981..2612ba6c 100644 --- a/assets/js/19.a4e6b85c.js +++ b/assets/js/19.10b20bcd.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[19],{394:function(e,t,o){e.exports=o.p+"assets/img/win7simu-iframe-browser.ddc0ac3e.png"},395:function(e,t,o){e.exports=o.p+"assets/img/iframe-example.2e94f1f8.png"},396:function(e,t,o){e.exports=o.p+"assets/img/install-requestly-edge.b2cce739.png"},397:function(e,t,o){e.exports=o.p+"assets/img/import-win7simu-requestly-rules.a4498b88.png"},486: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(394),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(395),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(396),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 ("),t("em",[e._v("file last updated: June 12, 2024")]),e._v(")")]),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(397),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"},484: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 ("),t("em",[e._v("file last updated: June 12, 2024")]),e._v(")")]),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.4ebbe46b.js b/assets/js/20.38e66efe.js similarity index 97% rename from assets/js/20.4ebbe46b.js rename to assets/js/20.38e66efe.js index e2301a34..0809d74a 100644 --- a/assets/js/20.4ebbe46b.js +++ b/assets/js/20.38e66efe.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[20],{418:function(t,s,n){t.exports=n.p+"assets/img/guide1.1c974537.png"},419:function(t,s,n){t.exports=n.p+"assets/img/guide2.9ec5c57e.png"},420:function(t,s,n){t.exports=n.p+"assets/img/guide3.9f0beb50.png"},421:function(t,s,n){t.exports=n.p+"assets/img/guide4.40876874.png"},511: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(418),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(419),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(420),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(421),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],{425:function(t,s,n){t.exports=n.p+"assets/img/guide1.1c974537.png"},426:function(t,s,n){t.exports=n.p+"assets/img/guide2.9ec5c57e.png"},427:function(t,s,n){t.exports=n.p+"assets/img/guide3.9f0beb50.png"},428:function(t,s,n){t.exports=n.p+"assets/img/guide4.40876874.png"},512: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(425),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(426),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(427),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(428),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/45.91c071f7.js b/assets/js/45.0d7f59f4.js similarity index 99% rename from assets/js/45.91c071f7.js rename to assets/js/45.0d7f59f4.js index d635d040..7fe7d0e5 100644 --- a/assets/js/45.91c071f7.js +++ b/assets/js/45.0d7f59f4.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[45],{388:function(e,t,a){e.exports=a.p+"assets/img/win7-simu-dau.3e6d196c.png"},389:function(e,t,a){e.exports=a.p+"assets/img/homepage-dau.e246c522.png"},482: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(388),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(389),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],{388:function(e,t,a){e.exports=a.p+"assets/img/win7-simu-dau.3e6d196c.png"},389: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(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(388),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(389),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.869038c4.js b/assets/js/46.1b5bc492.js similarity index 99% rename from assets/js/46.869038c4.js rename to assets/js/46.1b5bc492.js index 5bb393db..8096a7a6 100644 --- a/assets/js/46.869038c4.js +++ b/assets/js/46.1b5bc492.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[46],{401:function(e,t,o){e.exports=o.p+"assets/img/win7-simu-computer.b9265f50.png"},402:function(e,t,o){e.exports=o.p+"assets/img/win7-simu-indexeddb.f8841da2.png"},491: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(401),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(402),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],{401:function(e,t,o){e.exports=o.p+"assets/img/win7-simu-computer.b9265f50.png"},402:function(e,t,o){e.exports=o.p+"assets/img/win7-simu-indexeddb.f8841da2.png"},490: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(401),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(402),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.2ae91bcb.js b/assets/js/47.d89f8c05.js similarity index 98% rename from assets/js/47.2ae91bcb.js rename to assets/js/47.d89f8c05.js index b282f197..a6e1709f 100644 --- a/assets/js/47.2ae91bcb.js +++ b/assets/js/47.d89f8c05.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[47],{403:function(e,t,s){e.exports=s.p+"assets/img/safari-share.cb037921.png"},404:function(e,t,s){e.exports=s.p+"assets/img/add-to-home-screen.5611989b.png"},492: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(403),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(404),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],{403:function(e,t,s){e.exports=s.p+"assets/img/safari-share.cb037921.png"},404:function(e,t,s){e.exports=s.p+"assets/img/add-to-home-screen.5611989b.png"},491: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(403),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(404),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/49.797aa11f.js b/assets/js/49.5053d0eb.js similarity index 99% rename from assets/js/49.797aa11f.js rename to assets/js/49.5053d0eb.js index be87252e..6e6228a0 100644 --- a/assets/js/49.797aa11f.js +++ b/assets/js/49.5053d0eb.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[49],{387:function(e,t,a){e.exports=a.p+"assets/img/vuepress.35aa8722.png"},481: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(387),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([[49],{387:function(e,t,a){e.exports=a.p+"assets/img/vuepress.35aa8722.png"},480: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(387),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/50.7703b6fb.js b/assets/js/50.e3be17b6.js similarity index 92% rename from assets/js/50.7703b6fb.js rename to assets/js/50.e3be17b6.js index 5b7a1b04..c431eb80 100644 --- a/assets/js/50.7703b6fb.js +++ b/assets/js/50.e3be17b6.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[50],{422:function(e,t,s){e.exports=s.p+"assets/img/themestudio.e11eee24.jpg"},512: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 +(window.webpackJsonp=window.webpackJsonp||[]).push([[50],{418:function(e,t,s){e.exports=s.p+"assets/img/themestudio.e11eee24.jpg"},510: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(418),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/59.681801af.js b/assets/js/59.6769dd6d.js similarity index 99% rename from assets/js/59.681801af.js rename to assets/js/59.6769dd6d.js index cdee5b85..f28d1afe 100644 --- a/assets/js/59.681801af.js +++ b/assets/js/59.6769dd6d.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[59],{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:"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([[59],{483: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/60.ef59dd47.js b/assets/js/60.a3c1289c.js similarity index 99% rename from assets/js/60.ef59dd47.js rename to assets/js/60.a3c1289c.js index 6e9529a8..1797aa35 100644 --- a/assets/js/60.ef59dd47.js +++ b/assets/js/60.a3c1289c.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[60],{483: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 +(window.webpackJsonp=window.webpackJsonp||[]).push([[60],{482: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/61.aecb01a9.js b/assets/js/61.3c62b94f.js similarity index 77% rename from assets/js/61.aecb01a9.js rename to assets/js/61.3c62b94f.js index e4540853..8e6c4133 100644 --- a/assets/js/61.aecb01a9.js +++ b/assets/js/61.3c62b94f.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[61],{485: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 +(window.webpackJsonp=window.webpackJsonp||[]).push([[61],{486: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/64.1f583d89.js b/assets/js/64.20dc6109.js similarity index 99% rename from assets/js/64.1f583d89.js rename to assets/js/64.20dc6109.js index f0e0917e..7c500abc 100644 --- a/assets/js/64.1f583d89.js +++ b/assets/js/64.20dc6109.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[64],{490: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 +(window.webpackJsonp=window.webpackJsonp||[]).push([[64],{492: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/65.d6caa23b.js b/assets/js/65.c9065c38.js similarity index 99% rename from assets/js/65.d6caa23b.js rename to assets/js/65.c9065c38.js index 3d682ef5..ece5fc8d 100644 --- a/assets/js/65.d6caa23b.js +++ b/assets/js/65.c9065c38.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[65],{495:function(e,t,o){"use strict";o.r(t);var n=o(13),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("
    - + diff --git a/blog/building-visnalize-com.html b/blog/building-visnalize-com.html index 6b89dfdc..c7d293ba 100644 --- a/blog/building-visnalize-com.html +++ b/blog/building-visnalize-com.html @@ -35,7 +35,7 @@ - + @@ -124,6 +124,6 @@

  • 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

    - + diff --git a/blog/building-win7-simu.html b/blog/building-win7-simu.html index 651f61bd..f8cca5e5 100644 --- a/blog/building-win7-simu.html +++ b/blog/building-win7-simu.html @@ -35,7 +35,7 @@ - + @@ -118,6 +118,6 @@
  • Technical
    • 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 2b52dde6..3efff79c 100644 --- a/blog/from-codepen-to-app.html +++ b/blog/from-codepen-to-app.html @@ -35,7 +35,7 @@ - + @@ -196,6 +196,6 @@
  • Technical
    • 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 e25d6e1e..96cd9020 100644 --- a/blog/from-side-project-to-side-hustle.html +++ b/blog/from-side-project-to-side-hustle.html @@ -35,7 +35,7 @@ - + @@ -120,6 +120,6 @@
  • Win7 Simu
    • 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 2deea536..4527599b 100644 --- a/blog/game-stick-lite-4k-adding-games.html +++ b/blog/game-stick-lite-4k-adding-games.html @@ -35,7 +35,7 @@ - + @@ -116,6 +116,6 @@
  • Random
    • Last Updated: 3/10/2024, 8:28:45 AM

    Comments

    - + diff --git a/blog/index.html b/blog/index.html index 73b026d3..c9a6086e 100644 --- a/blog/index.html +++ b/blog/index.html @@ -35,7 +35,7 @@ - + @@ -117,10 +117,10 @@ Tips Sharing - - Win7 Simu Technical + + Win7 Simu Brick 1100 @@ -212,6 +212,6 @@
  • Tips
    • Last Updated: 6/1/2024, 6:55:54 AM
    • google
    • youtube
    • github
    • twitter
    Copyright Β© 2021 - present. All Rights Reserved
    - + diff --git a/blog/load-any-websites-in-iframes.html b/blog/load-any-websites-in-iframes.html index 4e9b7c63..1a1c0d2f 100644 --- a/blog/load-any-websites-in-iframes.html +++ b/blog/load-any-websites-in-iframes.html @@ -35,7 +35,7 @@ - + @@ -118,6 +118,6 @@
  • Win7 Simu
    • Last Updated: 6/12/2024, 4:14:41 PM

    Comments

    - + diff --git a/blog/simulator-vs-emulator.html b/blog/simulator-vs-emulator.html index 9271af9d..04f3a9d5 100644 --- a/blog/simulator-vs-emulator.html +++ b/blog/simulator-vs-emulator.html @@ -35,7 +35,7 @@ - + @@ -118,6 +118,6 @@
  • Win7 Simu
    • 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 4ef6062f..cbe2fafb 100644 --- a/blog/tag/brick-1100/index.html +++ b/blog/tag/brick-1100/index.html @@ -31,7 +31,7 @@ - + @@ -113,10 +113,10 @@ Tips Sharing - - Win7 Simu Technical + + Win7 Simu Brick 1100 @@ -138,6 +138,6 @@
  • Technical
    • google
    • youtube
    • github
    • twitter
    Copyright Β© 2021 - present. All Rights Reserved
    - + diff --git a/blog/tag/index.html b/blog/tag/index.html index d396103e..f64b4254 100644 --- a/blog/tag/index.html +++ b/blog/tag/index.html @@ -31,7 +31,7 @@ - + @@ -113,10 +113,10 @@ Tips Sharing - - Win7 Simu Technical + + Win7 Simu Brick 1100 @@ -208,6 +208,6 @@
  • Tips
    • google
    • youtube
    • github
    • twitter
    Copyright Β© 2021 - present. All Rights Reserved
    - + diff --git a/blog/tag/random/index.html b/blog/tag/random/index.html index e09299e8..99282183 100644 --- a/blog/tag/random/index.html +++ b/blog/tag/random/index.html @@ -31,7 +31,7 @@ - + @@ -113,10 +113,10 @@ Tips Sharing - - Win7 Simu Technical + + Win7 Simu Brick 1100 @@ -130,6 +130,6 @@
  • Random
    • google
    • youtube
    • github
    • twitter
    Copyright Β© 2021 - present. All Rights Reserved
    - + diff --git a/blog/tag/review/index.html b/blog/tag/review/index.html index d9cd32f5..6bd041f3 100644 --- a/blog/tag/review/index.html +++ b/blog/tag/review/index.html @@ -31,7 +31,7 @@ - + @@ -113,10 +113,10 @@ Tips Sharing - - Win7 Simu Technical + + Win7 Simu Brick 1100 @@ -136,6 +136,6 @@
  • Review
    • google
    • youtube
    • github
    • twitter
    Copyright Β© 2021 - present. All Rights Reserved
    - + diff --git a/blog/tag/sharing/index.html b/blog/tag/sharing/index.html index 8d19586b..fd96652b 100644 --- a/blog/tag/sharing/index.html +++ b/blog/tag/sharing/index.html @@ -31,7 +31,7 @@ - + @@ -113,10 +113,10 @@ Tips Sharing - - Win7 Simu Technical + + Win7 Simu Brick 1100 @@ -170,6 +170,6 @@
  • Sharing
    • google
    • youtube
    • github
    • twitter
    Copyright Β© 2021 - present. All Rights Reserved
    - + diff --git a/blog/tag/technical/index.html b/blog/tag/technical/index.html index 6fdb7924..c3aa8c7e 100644 --- a/blog/tag/technical/index.html +++ b/blog/tag/technical/index.html @@ -31,7 +31,7 @@ - + @@ -113,10 +113,10 @@ Tips Sharing - - Win7 Simu Technical + + Win7 Simu Brick 1100 @@ -166,6 +166,6 @@
  • How I built visnalize.com

    How I built visnalize.com

    5/21/2022, 5:21:07 AM

    Read about the progress and how I built the visnalize.com website for my own brand
    • google
    • youtube
    • github
    • twitter
    Copyright Β© 2021 - present. All Rights Reserved
    - + diff --git a/blog/tag/tips/index.html b/blog/tag/tips/index.html index d16f10bf..98aae271 100644 --- a/blog/tag/tips/index.html +++ b/blog/tag/tips/index.html @@ -31,7 +31,7 @@ - + @@ -113,10 +113,10 @@ Tips Sharing - - Win7 Simu Technical + + Win7 Simu Brick 1100 @@ -164,6 +164,6 @@
  • Tips
    • google
    • youtube
    • github
    • twitter
    Copyright Β© 2021 - present. All Rights Reserved
    - + diff --git a/blog/tag/tools/index.html b/blog/tag/tools/index.html index 3c8a1091..a69ac0cd 100644 --- a/blog/tag/tools/index.html +++ b/blog/tag/tools/index.html @@ -31,7 +31,7 @@ - + @@ -113,10 +113,10 @@ Tips Sharing - - Win7 Simu Technical + + Win7 Simu Brick 1100 @@ -134,6 +134,6 @@
  • Tools
    • google
    • youtube
    • github
    • twitter
    Copyright Β© 2021 - present. All Rights Reserved
    - + diff --git a/blog/tag/win7-simu/index.html b/blog/tag/win7-simu/index.html index d6a25c27..5ad327fd 100644 --- a/blog/tag/win7-simu/index.html +++ b/blog/tag/win7-simu/index.html @@ -31,7 +31,7 @@ - + @@ -113,10 +113,10 @@ Tips Sharing - - Win7 Simu Technical + + Win7 Simu Brick 1100 @@ -180,6 +180,6 @@
  • Tips
    • google
    • youtube
    • github
    • twitter
    Copyright Β© 2021 - present. All Rights Reserved
    - + diff --git a/blog/visnalize-year-in-review-2023.html b/blog/visnalize-year-in-review-2023.html index 3698601c..6f0b5be1 100644 --- a/blog/visnalize-year-in-review-2023.html +++ b/blog/visnalize-year-in-review-2023.html @@ -35,7 +35,7 @@ - + @@ -118,6 +118,6 @@
  • Review
    • Last Updated: 1/1/2024, 2:18:12 AM

    Comments

    - + diff --git a/blog/why-side-hustle.html b/blog/why-side-hustle.html index 9a191b00..5aa7b248 100644 --- a/blog/why-side-hustle.html +++ b/blog/why-side-hustle.html @@ -35,7 +35,7 @@ - + @@ -116,6 +116,6 @@
  • Tips
    • Last Updated: 7/14/2024, 7:25:04 AM

    Comments

    - + diff --git a/blog/win7-icons-viewer-downloader.html b/blog/win7-icons-viewer-downloader.html index b28ffd40..c897f0a3 100644 --- a/blog/win7-icons-viewer-downloader.html +++ b/blog/win7-icons-viewer-downloader.html @@ -35,7 +35,7 @@ - + @@ -120,6 +120,6 @@
  • Tools
    • 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 bbaf19e0..fb644823 100644 --- a/blog/win7-simu-file-explorer.html +++ b/blog/win7-simu-file-explorer.html @@ -35,7 +35,7 @@ - + @@ -137,6 +137,6 @@
  • Technical
    • 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 4d3211bf..5f8b75bd 100644 --- a/blog/win7-simu-mobile-devices.html +++ b/blog/win7-simu-mobile-devices.html @@ -35,7 +35,7 @@ - + @@ -116,6 +116,6 @@
  • Tips
    • Last Updated: 6/26/2023, 12:53:04 PM

    Comments

    - + diff --git a/blog/win7-simu-windows-media-center.html b/blog/win7-simu-windows-media-center.html index fa41329b..c6b33cec 100644 --- a/blog/win7-simu-windows-media-center.html +++ b/blog/win7-simu-windows-media-center.html @@ -35,7 +35,7 @@ - + @@ -136,6 +136,6 @@
  • Technical
    • Last Updated: 4/15/2024, 12:21:04 PM

    Comments

    - + diff --git a/blog/win7-simu-year-in-review-2022.html b/blog/win7-simu-year-in-review-2022.html index 165f060f..96432a5b 100644 --- a/blog/win7-simu-year-in-review-2022.html +++ b/blog/win7-simu-year-in-review-2022.html @@ -35,7 +35,7 @@ - + @@ -116,6 +116,6 @@
  • Review
    • 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 76f44887..b13e64a5 100644 --- a/blog/win7-ui-introduction.html +++ b/blog/win7-ui-introduction.html @@ -35,7 +35,7 @@ - + @@ -130,6 +130,6 @@
  • Tools
    • Last Updated: 8/21/2023, 4:12:36 AM

    Comments

    - + diff --git a/blog/windows-resources.html b/blog/windows-resources.html index 16ed3374..b6381e5b 100644 --- a/blog/windows-resources.html +++ b/blog/windows-resources.html @@ -35,7 +35,7 @@ - + @@ -117,6 +117,6 @@
  • Tips
    • Last Updated: 8/15/2023, 11:58:00 AM

    Comments

    - + diff --git a/brick1100/about.html b/brick1100/about.html index 7e184f7c..be4d27c1 100644 --- a/brick1100/about.html +++ b/brick1100/about.html @@ -35,7 +35,7 @@ - + @@ -112,6 +112,6 @@ (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: 6/1/2024, 6:49:33 AM

    Comments

    - + diff --git a/brick1100/changelog.html b/brick1100/changelog.html index b0437490..3c64ccb7 100644 --- a/brick1100/changelog.html +++ b/brick1100/changelog.html @@ -35,7 +35,7 @@ - + @@ -111,7 +111,7 @@ Github (opens new window)
  • Twitter - (opens new window)

    • # Changelog

    # Beta versions

    # 0.0.9 (Jun 24, 2024)

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

    # 0.0.8 (Dec 2, 2023)

    Minor bug fixes.

    # 0.0.7 (Nov 4, 2023)

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

    # 0.0.6 (Oct 16, 2023)

    Minor bug fixes.

    # 0.0.5 (Sep 30, 2023)

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

    # 0.0.4 (Sep 27, 2023)

    Minor bug fixes.

    # 0.0.3 (Sep 26, 2023)

    Minor bug fixes.

    # 0.0.2 (Sep 26, 2023)

    Minor bug fixes.

    # 0.0.1 (Sep 26, 2023)

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

    • A pixelated interface (fonts and icons) with a functional keypad.
    • Contacts management (add, delete, edit contacts)
    • Tones management (play and save tones, adjust keypad volume)
    • Settings (change phone color)
    • Reminders (add, delete, edit reminders)
    • Built-in Games (Snake, Brick Breaker)
    • Built-in Extras/Apps (Calculator, Stopwatch, Countdown Timer, Flashlight)
    • An Online Apps section with curated apps for the Brick 1100
    Last Updated: 6/24/2024, 12:27:03 PM
    - + (opens new window)

    # Changelog

    # Beta versions

    # 0.0.10 (Aug 10, 2024)

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

    # 0.0.9 (Jun 24, 2024)

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

    # 0.0.8 (Dec 2, 2023)

    Minor bug fixes.

    # 0.0.7 (Nov 4, 2023)

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

    # 0.0.6 (Oct 16, 2023)

    Minor bug fixes.

    # 0.0.5 (Sep 30, 2023)

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

    # 0.0.4 (Sep 27, 2023)

    Minor bug fixes.

    # 0.0.3 (Sep 26, 2023)

    Minor bug fixes.

    # 0.0.2 (Sep 26, 2023)

    Minor bug fixes.

    # 0.0.1 (Sep 26, 2023)

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

    • A pixelated interface (fonts and icons) with a functional keypad.
    • Contacts management (add, delete, edit contacts)
    • Tones management (play and save tones, adjust keypad volume)
    • Settings (change phone color)
    • Reminders (add, delete, edit reminders)
    • Built-in Games (Snake, Brick Breaker)
    • Built-in Extras/Apps (Calculator, Stopwatch, Countdown Timer, Flashlight)
    • An Online Apps section with curated apps for the Brick 1100
    Last Updated: 8/10/2024, 2:00:59 PM
    + diff --git a/brick1100/deep-links.html b/brick1100/deep-links.html index 34302a77..0cbaf467 100644 --- a/brick1100/deep-links.html +++ b/brick1100/deep-links.html @@ -35,7 +35,7 @@ - + @@ -112,6 +112,6 @@ (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: 6/1/2024, 6:49:33 AM

    Comments

    - + diff --git a/brick1100/games.html b/brick1100/games.html index 92dd53fb..8eb9b6b3 100644 --- a/brick1100/games.html +++ b/brick1100/games.html @@ -35,7 +35,7 @@ - + @@ -135,6 +135,6 @@
  • key aste - toggle cell hints (shows the number of filled cells in the row/column)
  • key 0 - reset the grid
    • Last Updated: 6/1/2024, 6:49:33 AM

    Comments

    - + diff --git a/brick1100/index.html b/brick1100/index.html index d027a8b4..7bb81a8c 100644 --- a/brick1100/index.html +++ b/brick1100/index.html @@ -31,7 +31,7 @@ - + @@ -108,6 +108,6 @@ (opens new window)
  • Twitter (opens new window)

    Last Updated: 11/2/2023, 5:52:36 PM
    - + diff --git a/brick1100/privacy.html b/brick1100/privacy.html index 608a0ad3..e7bd9b72 100644 --- a/brick1100/privacy.html +++ b/brick1100/privacy.html @@ -35,7 +35,7 @@ - + @@ -112,6 +112,6 @@ (opens new window)
  • Twitter (opens new window)

    • # Privacy Policy

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

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

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

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

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

    # Information Collection and Use

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

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

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

    # Log Data

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

    # Cookies

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

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

    # Service Providers

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

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

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

    # Security

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

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

    # Children's Privacy

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

    # Changes to This Privacy Policy

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

    # Contact Us

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

    Last Updated: 6/1/2024, 6:49:33 AM
    - + diff --git a/contact.html b/contact.html index 271dae2b..c63fa4d8 100644 --- a/contact.html +++ b/contact.html @@ -31,7 +31,7 @@ - + @@ -108,6 +108,6 @@ (opens new window)
  • Twitter (opens new window)
    • Last Updated: 11/2/2023, 5:52:36 PM
    - + diff --git a/feed.atom b/feed.atom index e94e35ba..e7bb60e9 100644 --- a/feed.atom +++ b/feed.atom @@ -2,7 +2,7 @@ https://visnalize.com Visnalize - 2024-08-01T04:59:36.257Z + 2024-08-10T14:02:00.370Z https://github.com/webmasterish/vuepress-plugin-feed @@ -11,23 +11,15 @@ https://visnalize.com/blog/about-the-ads.html - 2024-08-01T04:59:36.252Z + 2024-08-10T14:02:00.365Z - - <![CDATA[How I built Win7 Simu]]> - https://visnalize.com/blog/building-win7-simu.html - - - 2024-08-01T04:59:36.253Z - - <![CDATA[How I built visnalize.com]]> https://visnalize.com/blog/building-visnalize-com.html - 2024-08-01T04:59:36.253Z + 2024-08-10T14:02:00.365Z @@ -35,7 +27,7 @@ https://visnalize.com/blog/from-side-project-to-side-hustle.html - 2024-08-01T04:59:36.253Z + 2024-08-10T14:02:00.366Z @@ -43,15 +35,31 @@ https://visnalize.com/blog/from-codepen-to-app.html - 2024-08-01T04:59:36.253Z + 2024-08-10T14:02:00.366Z + + <![CDATA[How I built Win7 Simu]]> + https://visnalize.com/blog/building-win7-simu.html + + + 2024-08-10T14:02:00.366Z + + + + <![CDATA[How to get iframes to load any websites]]> + https://visnalize.com/blog/load-any-websites-in-iframes.html + + + 2024-08-10T14:02:00.366Z + + <![CDATA[How to add more games to Game Stick Lite 4K]]> https://visnalize.com/blog/game-stick-lite-4k-adding-games.html - 2024-08-01T04:59:36.253Z + 2024-08-10T14:02:00.366Z @@ -59,22 +67,14 @@ https://visnalize.com/blog/ - 2024-08-01T04:59:36.253Z - - - <![CDATA[How to get iframes to load any websites]]> - https://visnalize.com/blog/load-any-websites-in-iframes.html - - - 2024-08-01T04:59:36.253Z - + 2024-08-10T14:02:00.366Z <![CDATA[Simulators and Emulators: What's the difference?]]> https://visnalize.com/blog/simulator-vs-emulator.html - 2024-08-01T04:59:36.253Z + 2024-08-10T14:02:00.367Z @@ -82,7 +82,7 @@ https://visnalize.com/blog/visnalize-year-in-review-2023.html - 2024-08-01T04:59:36.254Z + 2024-08-10T14:02:00.367Z @@ -90,23 +90,15 @@ https://visnalize.com/blog/why-side-hustle.html - 2024-08-01T04:59:36.254Z + 2024-08-10T14:02:00.367Z - - <![CDATA[Windows 7 icon Viewer/Downloader]]> - https://visnalize.com/blog/win7-icons-viewer-downloader.html - - - 2024-08-01T04:59:36.254Z - - <![CDATA[Implementing File Explorer in Win7 Simu]]> https://visnalize.com/blog/win7-simu-file-explorer.html - 2024-08-01T04:59:36.254Z + 2024-08-10T14:02:00.367Z @@ -114,15 +106,23 @@ https://visnalize.com/blog/win7-simu-mobile-devices.html - 2024-08-01T04:59:36.254Z + 2024-08-10T14:02:00.367Z + + <![CDATA[Windows 7 icon Viewer/Downloader]]> + https://visnalize.com/blog/win7-icons-viewer-downloader.html + + + 2024-08-10T14:02:00.367Z + + <![CDATA[Implementing Windows Media Center in Win7 Simu]]> https://visnalize.com/blog/win7-simu-windows-media-center.html - 2024-08-01T04:59:36.254Z + 2024-08-10T14:02:00.367Z @@ -130,23 +130,23 @@ https://visnalize.com/blog/win7-simu-year-in-review-2022.html - 2024-08-01T04:59:36.254Z + 2024-08-10T14:02:00.367Z - - <![CDATA[Introducing Win7 UI]]> - https://visnalize.com/blog/win7-ui-introduction.html - - - 2024-08-01T04:59:36.254Z - - <![CDATA[How to get Windows resources]]> https://visnalize.com/blog/windows-resources.html - 2024-08-01T04:59:36.254Z + 2024-08-10T14:02:00.367Z + + <![CDATA[Introducing Win7 UI]]> + https://visnalize.com/blog/win7-ui-introduction.html + + + 2024-08-10T14:02:00.367Z + + \ No newline at end of file diff --git a/feed.json b/feed.json index a206870c..59502f23 100644 --- a/feed.json +++ b/feed.json @@ -10,15 +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-08-01T04:59:36.252Z" - }, - { - "id": "https://visnalize.com/blog/building-win7-simu.html", - "url": "https://visnalize.com/blog/building-win7-simu.html", - "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-08-01T04:59:36.253Z" + "date_modified": "2024-08-10T14:02:00.365Z" }, { "id": "https://visnalize.com/blog/building-visnalize-com.html", @@ -26,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-08-01T04:59:36.253Z" + "date_modified": "2024-08-10T14:02:00.365Z" }, { "id": "https://visnalize.com/blog/from-side-project-to-side-hustle.html", @@ -34,7 +26,7 @@ "title": "Turning my side project into a side hustle", "summary": "From a side project for learning to a side hustle with recurring revenue, read about how I did it, the process, the tools, the tips and tricks.", "image": "https://media.istockphoto.com/id/1349329446/photo/dollars-cash-money-and-paper-note-with-text-written-extra-income-concept-of-financial.jpg?s=1024x1024&w=is&k=20&c=RXsEpU41u0Yke-ol53PoirkXHTOliHGfvijnYipidtQ=", - "date_modified": "2024-08-01T04:59:36.253Z" + "date_modified": "2024-08-10T14:02:00.366Z" }, { "id": "https://visnalize.com/blog/from-codepen-to-app.html", @@ -42,7 +34,23 @@ "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-08-01T04:59:36.253Z" + "date_modified": "2024-08-10T14:02:00.366Z" + }, + { + "id": "https://visnalize.com/blog/building-win7-simu.html", + "url": "https://visnalize.com/blog/building-win7-simu.html", + "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-08-10T14:02:00.366Z" + }, + { + "id": "https://visnalize.com/blog/load-any-websites-in-iframes.html", + "url": "https://visnalize.com/blog/load-any-websites-in-iframes.html", + "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-08-10T14:02:00.366Z" }, { "id": "https://visnalize.com/blog/game-stick-lite-4k-adding-games.html", @@ -50,22 +58,14 @@ "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-08-01T04:59:36.253Z" + "date_modified": "2024-08-10T14:02:00.366Z" }, { "id": "https://visnalize.com/blog/", "url": "https://visnalize.com/blog/", "title": "πŸ“ Blog", "image": "https://image.social/get?url=visnalize.com/blog/", - "date_modified": "2024-08-01T04:59:36.253Z" - }, - { - "id": "https://visnalize.com/blog/load-any-websites-in-iframes.html", - "url": "https://visnalize.com/blog/load-any-websites-in-iframes.html", - "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-08-01T04:59:36.253Z" + "date_modified": "2024-08-10T14:02:00.366Z" }, { "id": "https://visnalize.com/blog/simulator-vs-emulator.html", @@ -73,7 +73,7 @@ "title": "Simulators and Emulators: What's the difference?", "summary": "Understand the differences between simulators and emulators, what they mean for Win7 Simu.", "image": "https://visnalize.com/assets/covers/simulators-vs-emulators.png", - "date_modified": "2024-08-01T04:59:36.253Z" + "date_modified": "2024-08-10T14:02:00.367Z" }, { "id": "https://visnalize.com/blog/visnalize-year-in-review-2023.html", @@ -81,7 +81,7 @@ "title": "Visnalize year in review - 2023", "summary": "Look back at some amazing achievements from Visnalize in 2023.", "image": "https://images.unsplash.com/photo-1579952775264-625f17561a5d?auto=format&fit=crop&w=740&q=80", - "date_modified": "2024-08-01T04:59:36.254Z" + "date_modified": "2024-08-10T14:02:00.367Z" }, { "id": "https://visnalize.com/blog/why-side-hustle.html", @@ -89,15 +89,7 @@ "title": "Why you should have a side hustle", "summary": "Some personal sharing about reasons and benefits of having a side hustle.", "image": "https://visnalize.com/assets/covers/why-side-hustle.jpg", - "date_modified": "2024-08-01T04:59:36.254Z" - }, - { - "id": "https://visnalize.com/blog/win7-icons-viewer-downloader.html", - "url": "https://visnalize.com/blog/win7-icons-viewer-downloader.html", - "title": "Windows 7 icon Viewer/Downloader", - "summary": "A simple tool to view and download Windows 7 icon collection.", - "image": "https://visnalize.com/assets/covers/win7-icons-viewer-downloader.jpg", - "date_modified": "2024-08-01T04:59:36.254Z" + "date_modified": "2024-08-10T14:02:00.367Z" }, { "id": "https://visnalize.com/blog/win7-simu-file-explorer.html", @@ -105,7 +97,7 @@ "title": "Implementing File Explorer in Win7 Simu", "summary": "Some key points to share about how Win7 Simu's File Explorer is implemented.", "image": "https://images.unsplash.com/photo-1544396821-4dd40b938ad3?auto=format&fit=crop&w=740&q=80", - "date_modified": "2024-08-01T04:59:36.254Z" + "date_modified": "2024-08-10T14:02:00.367Z" }, { "id": "https://visnalize.com/blog/win7-simu-mobile-devices.html", @@ -113,7 +105,15 @@ "title": "Win7 Simu versus mobile devices", "summary": "How to install Win7 Simu on mobile devices without downloading from any App Stores.", "image": "https://images.unsplash.com/photo-1616353071855-2c045c4458ae?auto=format&fit=crop&w=740&q=80", - "date_modified": "2024-08-01T04:59:36.254Z" + "date_modified": "2024-08-10T14:02:00.367Z" + }, + { + "id": "https://visnalize.com/blog/win7-icons-viewer-downloader.html", + "url": "https://visnalize.com/blog/win7-icons-viewer-downloader.html", + "title": "Windows 7 icon Viewer/Downloader", + "summary": "A simple tool to view and download Windows 7 icon collection.", + "image": "https://visnalize.com/assets/covers/win7-icons-viewer-downloader.jpg", + "date_modified": "2024-08-10T14:02:00.367Z" }, { "id": "https://visnalize.com/blog/win7-simu-windows-media-center.html", @@ -121,7 +121,7 @@ "title": "Implementing Windows Media Center in Win7 Simu", "summary": "Sharing on how Windows Media Center was implemented in Win7 Simu.", "image": "https://visnalize.com/assets/covers/win7-simu-windows-media-center.jpg", - "date_modified": "2024-08-01T04:59:36.254Z" + "date_modified": "2024-08-10T14:02:00.367Z" }, { "id": "https://visnalize.com/blog/win7-simu-year-in-review-2022.html", @@ -129,15 +129,7 @@ "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-08-01T04:59:36.254Z" - }, - { - "id": "https://visnalize.com/blog/win7-ui-introduction.html", - "url": "https://visnalize.com/blog/win7-ui-introduction.html", - "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-08-01T04:59:36.254Z" + "date_modified": "2024-08-10T14:02:00.367Z" }, { "id": "https://visnalize.com/blog/windows-resources.html", @@ -145,7 +137,15 @@ "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-08-01T04:59:36.254Z" + "date_modified": "2024-08-10T14:02:00.367Z" + }, + { + "id": "https://visnalize.com/blog/win7-ui-introduction.html", + "url": "https://visnalize.com/blog/win7-ui-introduction.html", + "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-08-10T14:02:00.367Z" } ] } \ No newline at end of file diff --git a/index.html b/index.html index 723ec105..7d67e8da 100644 --- a/index.html +++ b/index.html @@ -34,7 +34,7 @@ - + @@ -117,6 +117,6 @@ 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
    - + diff --git a/rss.xml b/rss.xml index 25024980..cc79a84d 100644 --- a/rss.xml +++ b/rss.xml @@ -4,7 +4,7 @@ Visnalize https://visnalize.com - Thu, 01 Aug 2024 04:59:36 GMT + Sat, 10 Aug 2024 14:02:00 GMT http://blogs.law.harvard.edu/tech/rss https://github.com/webmasterish/vuepress-plugin-feed @@ -12,25 +12,16 @@ <![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 - Thu, 01 Aug 2024 04:59:36 GMT + Sat, 10 Aug 2024 14:02:00 GMT - - <![CDATA[How I built Win7 Simu]]> - https://visnalize.com/blog/building-win7-simu.html - https://visnalize.com/blog/building-win7-simu.html - Thu, 01 Aug 2024 04:59:36 GMT - - - - <![CDATA[How I built visnalize.com]]> https://visnalize.com/blog/building-visnalize-com.html https://visnalize.com/blog/building-visnalize-com.html - Thu, 01 Aug 2024 04:59:36 GMT + Sat, 10 Aug 2024 14:02:00 GMT @@ -39,7 +30,7 @@ <![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 - Thu, 01 Aug 2024 04:59:36 GMT + Sat, 10 Aug 2024 14:02:00 GMT @@ -48,16 +39,34 @@ <![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 - Thu, 01 Aug 2024 04:59:36 GMT + Sat, 10 Aug 2024 14:02:00 GMT + + <![CDATA[How I built Win7 Simu]]> + https://visnalize.com/blog/building-win7-simu.html + https://visnalize.com/blog/building-win7-simu.html + Sat, 10 Aug 2024 14:02:00 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 + Sat, 10 Aug 2024 14:02:00 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 - Thu, 01 Aug 2024 04:59:36 GMT + Sat, 10 Aug 2024 14:02:00 GMT @@ -66,24 +75,15 @@ <![CDATA[πŸ“ Blog]]> https://visnalize.com/blog/ https://visnalize.com/blog/ - Thu, 01 Aug 2024 04:59:36 GMT + Sat, 10 Aug 2024 14:02:00 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 - Thu, 01 Aug 2024 04:59:36 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 - Thu, 01 Aug 2024 04:59:36 GMT + Sat, 10 Aug 2024 14:02:00 GMT @@ -92,7 +92,7 @@ <![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 - Thu, 01 Aug 2024 04:59:36 GMT + Sat, 10 Aug 2024 14:02:00 GMT @@ -101,25 +101,16 @@ <![CDATA[Why you should have a side hustle]]> https://visnalize.com/blog/why-side-hustle.html https://visnalize.com/blog/why-side-hustle.html - Thu, 01 Aug 2024 04:59:36 GMT + Sat, 10 Aug 2024 14:02:00 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 - Thu, 01 Aug 2024 04:59:36 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 - Thu, 01 Aug 2024 04:59:36 GMT + Sat, 10 Aug 2024 14:02:00 GMT @@ -128,16 +119,25 @@ <![CDATA[Win7 Simu versus mobile devices]]> https://visnalize.com/blog/win7-simu-mobile-devices.html https://visnalize.com/blog/win7-simu-mobile-devices.html - Thu, 01 Aug 2024 04:59:36 GMT + Sat, 10 Aug 2024 14:02:00 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 + Sat, 10 Aug 2024 14:02:00 GMT + + + + <![CDATA[Implementing Windows Media Center in Win7 Simu]]> https://visnalize.com/blog/win7-simu-windows-media-center.html https://visnalize.com/blog/win7-simu-windows-media-center.html - Thu, 01 Aug 2024 04:59:36 GMT + Sat, 10 Aug 2024 14:02:00 GMT @@ -146,28 +146,28 @@ <![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 - Thu, 01 Aug 2024 04:59:36 GMT + Sat, 10 Aug 2024 14:02:00 GMT - - <![CDATA[Introducing Win7 UI]]> - https://visnalize.com/blog/win7-ui-introduction.html - https://visnalize.com/blog/win7-ui-introduction.html - Thu, 01 Aug 2024 04:59:36 GMT - - - - <![CDATA[How to get Windows resources]]> https://visnalize.com/blog/windows-resources.html https://visnalize.com/blog/windows-resources.html - Thu, 01 Aug 2024 04:59:36 GMT + Sat, 10 Aug 2024 14:02:00 GMT + + <![CDATA[Introducing Win7 UI]]> + https://visnalize.com/blog/win7-ui-introduction.html + https://visnalize.com/blog/win7-ui-introduction.html + Sat, 10 Aug 2024 14:02:00 GMT + + + + \ No newline at end of file diff --git a/sitemap.xml b/sitemap.xml index 99e9ab34..2a5dbcbb 100644 --- a/sitemap.xml +++ b/sitemap.xml @@ -1 +1 @@ -https://visnalize.com/about.html2024-06-01T06:49:33.000Zdailyhttps://visnalize.com/blog/about-the-ads.html2023-11-11T16:58:27.000Zdailyhttps://visnalize.com/blog/building-win7-simu.html2023-08-15T11:58:00.000Zdailyhttps://visnalize.com/blog/building-visnalize-com.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/2024-06-01T06:55:54.000Zdailyhttps://visnalize.com/blog/load-any-websites-in-iframes.html2024-06-12T16:14:41.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/why-side-hustle.html2024-07-14T07:25:04.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-mobile-devices.html2023-06-26T12:53:04.000Zdailyhttps://visnalize.com/blog/win7-simu-windows-media-center.html2024-04-15T12:21:04.000Zdailyhttps://visnalize.com/blog/win7-simu-year-in-review-2022.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/about.html2024-06-01T06:49:33.000Zdailyhttps://visnalize.com/brick1100/changelog.html2024-06-24T12:27:03.000Zdailyhttps://visnalize.com/brick1100/deep-links.html2024-06-01T06:49:33.000Zdailyhttps://visnalize.com/brick1100/2023-11-02T17:52:36.000Zdailyhttps://visnalize.com/brick1100/privacy.html2024-06-01T06:49:33.000Zdailyhttps://visnalize.com/brick1100/games.html2024-06-01T06:49:33.000Zdailyhttps://visnalize.com/contact.html2023-11-02T17:52:36.000Zdailyhttps://visnalize.com/2024-06-30T05:48:57.000Zdailyhttps://visnalize.com/win7simu/changelog.html2024-06-20T16:38:02.000Zdailyhttps://visnalize.com/win7simu/about.html2024-06-30T05:48:57.000Zdailyhttps://visnalize.com/win7simu/faq.html2024-06-01T06:49:33.000Zdailyhttps://visnalize.com/win7simu/2023-11-02T17:52:36.000Zdailyhttps://visnalize.com/win7simu/privacy.html2024-06-01T06:49:33.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/2023-12-27T16:53:54.000Zdailyhttps://visnalize.com/win7simu/themestudio/quick-guide.html2023-06-26T12:53:04.000Zdailyhttps://visnalize.com/blog/tag/dailyhttps://visnalize.com/blog/tag/tips/dailyhttps://visnalize.com/blog/tag/sharing/dailyhttps://visnalize.com/blog/tag/win7-simu/dailyhttps://visnalize.com/blog/tag/technical/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 +https://visnalize.com/about.html2024-06-01T06:49:33.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/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/building-win7-simu.html2023-08-15T11:58:00.000Zdailyhttps://visnalize.com/blog/load-any-websites-in-iframes.html2024-06-12T16:14:41.000Zdailyhttps://visnalize.com/blog/game-stick-lite-4k-adding-games.html2024-03-10T08:28:45.000Zdailyhttps://visnalize.com/blog/2024-06-01T06:55:54.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/why-side-hustle.html2024-07-14T07:25:04.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-icons-viewer-downloader.html2023-06-26T12:53:04.000Zdailyhttps://visnalize.com/blog/win7-simu-windows-media-center.html2024-04-15T12:21:04.000Zdailyhttps://visnalize.com/blog/win7-simu-year-in-review-2022.html2023-06-26T12:53:04.000Zdailyhttps://visnalize.com/brick1100/about.html2024-06-01T06:49:33.000Zdailyhttps://visnalize.com/blog/windows-resources.html2023-08-15T11:58:00.000Zdailyhttps://visnalize.com/blog/win7-ui-introduction.html2023-08-21T04:12:36.000Zdailyhttps://visnalize.com/brick1100/changelog.html2024-08-10T14:00:59.000Zdailyhttps://visnalize.com/brick1100/deep-links.html2024-06-01T06:49:33.000Zdailyhttps://visnalize.com/brick1100/games.html2024-06-01T06:49:33.000Zdailyhttps://visnalize.com/brick1100/2023-11-02T17:52:36.000Zdailyhttps://visnalize.com/brick1100/privacy.html2024-06-01T06:49:33.000Zdailyhttps://visnalize.com/contact.html2023-11-02T17:52:36.000Zdailyhttps://visnalize.com/2024-06-30T05:48:57.000Zdailyhttps://visnalize.com/win7simu/changelog.html2024-06-20T16:38:02.000Zdailyhttps://visnalize.com/win7simu/about.html2024-06-30T05:48:57.000Zdailyhttps://visnalize.com/win7simu/faq.html2024-06-01T06:49:33.000Zdailyhttps://visnalize.com/win7simu/2023-11-02T17:52:36.000Zdailyhttps://visnalize.com/win7simu/privacy.html2024-06-01T06:49:33.000Zdailyhttps://visnalize.com/win7simu/themestudio/2023-12-27T16:53:54.000Zdailyhttps://visnalize.com/win7simu/themestudio/quick-guide.html2023-06-26T12:53:04.000Zdailyhttps://visnalize.com/win7simu/themestudio/in-depth-guide.html2023-12-27T16:53:54.000Zdailyhttps://visnalize.com/win7simu/themestudio/changelog.html2024-01-31T04:36:19.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 0a56f020..e91782f0 100644 --- a/win7simu/about.html +++ b/win7simu/about.html @@ -35,7 +35,7 @@ - + @@ -112,6 +112,6 @@ (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.

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

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

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

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

    # Pricing

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

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

    # A bit of the history

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

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

    Last Updated: 6/30/2024, 5:48:57 AM

    Comments

    - + diff --git a/win7simu/changelog.html b/win7simu/changelog.html index 63e3c8bf..1751e882 100644 --- a/win7simu/changelog.html +++ b/win7simu/changelog.html @@ -35,7 +35,7 @@ - + @@ -120,6 +120,6 @@
    • 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: 6/20/2024, 4:38:02 PM
    - + diff --git a/win7simu/faq.html b/win7simu/faq.html index 04a54db9..b8a05ee8 100644 --- a/win7simu/faq.html +++ b/win7simu/faq.html @@ -35,7 +35,7 @@ - + @@ -112,6 +112,6 @@ (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: 6/1/2024, 6:49:33 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: 6/1/2024, 6:49:33 AM

    Comments

    - + diff --git a/win7simu/index.html b/win7simu/index.html index c0f8054a..f2cc6035 100644 --- a/win7simu/index.html +++ b/win7simu/index.html @@ -31,7 +31,7 @@ - + @@ -108,6 +108,6 @@ (opens new window)
  • Twitter (opens new window)
    • Last Updated: 11/2/2023, 5:52:36 PM
    - + diff --git a/win7simu/privacy.html b/win7simu/privacy.html index 930b0604..0e428a79 100644 --- a/win7simu/privacy.html +++ b/win7simu/privacy.html @@ -35,7 +35,7 @@ - + @@ -112,6 +112,6 @@ (opens new window)
  • Twitter (opens new window)

    • # Privacy Policy

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

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

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

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

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

    # Information Collection and Use

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

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

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

    # Log Data

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

    # Cookies

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

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

    # Service Providers

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

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

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

    # Security

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

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

    # Children's Privacy

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

    # Changes to This Privacy Policy

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

    # Contact Us

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

    Last Updated: 6/1/2024, 6:49:33 AM
    - + diff --git a/win7simu/themestudio/changelog.html b/win7simu/themestudio/changelog.html index 162c8e96..6ac0bdbd 100644 --- a/win7simu/themestudio/changelog.html +++ b/win7simu/themestudio/changelog.html @@ -31,7 +31,7 @@ - + @@ -108,6 +108,6 @@ (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
    - + diff --git a/win7simu/themestudio/in-depth-guide.html b/win7simu/themestudio/in-depth-guide.html index 78db3ef4..32504544 100644 --- a/win7simu/themestudio/in-depth-guide.html +++ b/win7simu/themestudio/in-depth-guide.html @@ -35,7 +35,7 @@ - + @@ -296,6 +296,6 @@ β†’

    Comments

    - + diff --git a/win7simu/themestudio/index.html b/win7simu/themestudio/index.html index 86b78dce..8edf49ee 100644 --- a/win7simu/themestudio/index.html +++ b/win7simu/themestudio/index.html @@ -35,7 +35,7 @@ - + @@ -116,6 +116,6 @@ β†’

    Comments

    - + diff --git a/win7simu/themestudio/quick-guide.html b/win7simu/themestudio/quick-guide.html index aad19b8d..1593875d 100644 --- a/win7simu/themestudio/quick-guide.html +++ b/win7simu/themestudio/quick-guide.html @@ -35,7 +35,7 @@ - + @@ -120,6 +120,6 @@ β†’

    Comments

    - +