Frequently Asked Questions

Don't see your question answered here? Contact me on Discord - my username is SKCro.

General

Who made this project?

SKCro, nitrate92, and a few other people.

What exactly is this project? What are its goals?

WebTV HD is a web-based recreation of Microsoft's WebTV (later MSN TV) service, which initially launched in 1996. The goal of this project is to provide an accurate but scalable recreation of the box and service. Right now, there's no backend to power functionality like mail or chat, but that might change in the future. Don't get your hopes up though :P

What encouraged you to create this?

WebTV HD started as a simple port of a few WebTV pages to modern browsers (namely the settings page).
Back when I started this project, it was known as "WebTV-CSS-Remake" (rolls right off the tongue, I know) and was only targetting Samsung Smart TVs (particularly the one in my living room).
When others in the WebTV Discord noticed my work, they encouraged me to open up a GitHub repo. From there, the project became a full-on website theme, and now, what is basically a front-end concept.

This looks awesome! Can I use this code for my own project?

Of course, as long as you credit me! The code is freely available on the GitHub repo if you want to take a look at it. Be warned: my code kinda sucks and my coding style is... unique, to say the least. WHERE IS THE SPACING WHERE IS THE SPACING WHERE IS THE SPACING

Can I translate this project into another language?

Yes, translations would be gladly appreciated! If you're fluent in both English and your favorite language, you can help translate WebTV HD into other languages. Right now, I don't have a language system in place, so it might be best to keep a fork maintained. The translation does not have to be perfect by any means. Mistakes are perfectly okay (as long as they aren't atrocious) - they can always be fixed later. If you have created a translation and you'd like me to list it in the readme, let me know!

Did you use a JS library of some kind to make this?

Nope! No jQuery, no Angular.js, none of that. Just pure, vanilla JavaScript... although my coding style in JS is pretty terrible - there's a mishmash of old and new JS functions everywhere :P

Functionality and code

What kind of box does WebTV HD try to replicate?

In terms of functionality, WebTV HD simulates a WebTV Plus unit (as evidenced by the TV Home page and pip window functionality).

How do I go to TV Home?

Click the status bar to open the options menu. Click "view" to change to TV Mode. Other than the sick flip transition, it isn't very interesting - it's just an embedded YouTube video with a mostly-nonfunctional UI.

Are there any known issues with this project?

Not really, but do expect general bugginess in some places since this project isn't really too polished. If you do hit a snag, and you can easily replicate it (and describe how to do so), please let me know with a bug report.

What happened to the save button?

The save button can't be reimplemented due to browser restrictions. If you'd like to save a page for later, press Ctrl+D or click the star on the address bar to create a bookmark.

What about the Favorites page? Can't you save pages there?

No, for two reasons:
  1. There's no backend to handle storage of favorites. Cookies/Local Storage can't be used either since those are too volatile.
  2. I can't read the URL, favicon, or content of cross-origin pages - any page that isn't a part of WebTV HD is cross-origin, so this defeats the entire purpose of the feature.

What settings can I change?

You can change the startup logo and the internet name used for the home pages on this page. That's... about it, sorry. Do note that these settings are stored with cookies, so if you clear 'em, your settings will reset to their defaults.

Why doesn't (x feature) work right?

There are a few reasons why a feature might not work as you'd expect:
  1. It's impossible due to the way modern browsers work (eg. save button).
  2. Its functionality is possible to implement, but not in a WebTV-accurate way (eg. send/view buttons).
  3. It's impossible to reimplement with my current skillset.
When a feature can't be implemented accurately, I usually provide a reasonable (read: "close enough") alternative or explain why the feature can't be implemented.

Why can't I send mail, edit favorites, or change settings?

Most of these require multiple types of backend servers.
Examples of features that require a backend:
  • Accounts - this would require both an authentication server and a database server.
  • Mail - this would obviously require an email server.
  • Page Builder - this would require a backend HTTP server.
  • Settings - this would require a database server to store the settings. (Note that everything on the Other settings page are exceptions - I used cookies since it was simple enough)

Can't you just make a backend?

It's not that simple. Handling all that would not only require me to rent out a VPS (or run my computer 24/7), which I don't have the money for, but also require me to learn to become a backend developer, which just isn't something I can do right now.
GitHub Pages also doesn't support server-side languages like PHP, meaning I can't sidestep the requirement for a dedicated server.
As a reminder, I am only a teenager and I simply don't have the time or skill to do all that. I work on this for fun - I'm not planning to make it a fully-featured WebTV replacement.

Design and Styling

What fonts does WebTV HD use?

WebTV HD uses the same fonts that original WebTV used whenever possible.
    General fonts:
  • Helvetica* - General font. Used for pretty much everything, from UI to pages.
  • Monaco - Monospace font. Used for input fields.

    • Other fonts:
  • Bodoni - Logo font. Used for the "webtv" text on the logo. Example:
  • Bank Gothic** - Logo font. Used for the "PLUS"/"NETWORKS" text on some variations of the WebTV logo. Example:

    The "HD" text uses Bank Gothic. This isn't an official example, but I guess it counts for now.
*Technically speaking, original WebTV used a slightly modified version of Helvetica that improved display on low-resolution TVs of the time, but I don't have the skill to recreate it, so regular Helvetica should be fine.
**This may not be accurate, but Bank Gothic was the closest match we could find.

What colors does WebTV HD use?

WebTV HD uses the same colors that original WebTV did, whenever possible. If you want to know the background color of a specific element, Inspect Element is your friend. Common colors are also defined at the top of style.css.

Why is (x element) inaccurate?

I try my best to make things look as accurate as possible, whenever possible, however, some things might slip through the cracks due to my rather basic skillset. If you are able to recreate something more accurately than I could, then please share the code with me. You'll get your name in the credits and on the repo's contributors list.

Advanced/Other

How do I show alert dialogs?

Simple! Type javascript:alert('Your text here') into the go to panel. Make sure you don't forget the parentheses between the text.

An example of an alert dialog, with the message 'Your text here' being shown.
To create a showAlert dialog (one that uses the WebTV logo rather than the warning triangle), use javascript:showAlert('Your text here') instead. You can use HTML and CSS (via <style>) in your alert text.

An example of a WebTV-styled alert dialog, with the message 'Your text here' being shown with the WebTV logo off to the side.
If you're into advanced customization, you can use showCustomAlert() instead.
It takes 4 arguments: text content (which can include HTML), a custom alert image, a custom button label, and a snippet of JavaScript to execute after the button is clicked.
Use the string none if you don't want to specify a certain attribute (in which case the default will be used). Example usage:
javascript:showCustomAlert('<h1>beans</h1>','https://www.recipetineats.com/wp-content/uploads/2014/05/Homemade-Heinz-Baked-Beans_0-SQ.jpg','beans','none')

I noticed that I can't use WebTV HD by opening index.html directly from disk. Why?

WebTV HD works best when you use server software (eg. Apache) to host it, since the code expects a server to be in place. A lot of weird cross-origin problems occur when running it directly from disk, which can't be fixed unless you use a server. More info on this is available on the wiki article.

Why do you suck at coding?

I just do okay

Terms and Jargon

What are HTML, CSS, and JS?

All 3 of these terms are common web development terms.
  • HTML, short for Hyper-Text Markup Language, is the base structure of a website. Think of it like the foundation and walls of a house.
  • CSS, short for Cascading Style Sheets, is used for styling a website. Think of it like the coat of paint and furniture arrangement of a house.
  • JS, short for JavaScript, is the main programming language of the internet. Think of it like the actions that happen inside of a house.

What's an "iframe"?

An iframe, pronounced eye-frame and short for inline frame, is an HTML element that allows embedding of another page or website. WebTV HD uses an iframe to embed other pages, like the one you're reading right now! Most popular websites prevent themselves from being embedded for security reasons, which is why some sites doesn't work in WebTV HD. See below for details.

What does "cross-origin" mean and why does it prevent so many features from working as expected?

The term cross-origin is usually used to refer to pages that aren't a part of WebTV HD (ie. external websites). It's called that because the page isn't from the same origin (the origin, in this case, being WebTV HD).
Cross-origin restrictions are a security measure put in place by your web browser to prevent a malicious site from, say, embedding your bank website in an iframe, tricking you into logging in, and stealing your login data through the iframe. The page with the iframe on it (the parent page) cannot access what's in the iframe if its contents aren't from the same place. These restrictions prevent WebTV HD from easily reading details like the page name or modifying things on the page, such as the selection box or sidebar.

What are classes and IDs?

In web development, classes are sort of like common nicknames that can be attached to multiple elements. IDs are meant to identify one element in particular. Classes are often used for CSS styling, while IDs are often used for scripting purposes.