Outside of the holy web dev trio, what other languages would you consider an asset to a developer's arsenal for internet-related endeavours?

lea 🙂

Hi! I've been making websites for a long time, too long really. It's great! If you want to start your own personal site, let's use this thread to give each other tips or support.

I'll be checking in every day at least, so if you have a question, or need any tips, please feel free to ask!

Initial starting resources:

Development programs
On PC: https://code.visualstudio.com/download
In browser: https://vscode.dev

Starter guide
HTML: https://blog.hubspot.com/website/html

Sites to host on:
Github pages: https://pages.github.com

If you've never ever made an HTML document ever, hubspot's guide looks pretty good. It goes over the basics of opening a file, editing, and previewing it. Once you have it looking how you want locally, hosting it is the next step.

VSCode is a great starter IDE (or, text editor) that gets a lot of the basics right. Actually, I use VSCode for pretty much everything.

Here is the code for the countdown timer that displays on this site on Switch consoles!

It uses the localStorage property of the browser to store the start time and date when the page is first visited. This occurs right after the DNS connects, when using browseDNS. Then it calculates the difference between the current time and the start time, subtracts that from 20 minutes, then displays it.

function startTimer() { // check if a start time has been previously noted if (window.localStorage.getItem('startTime') == null) { // Local storage isn't persisted between sessions, so if we don't have // a start time, we're likely in a new session. Set the start time to now. window.localStorage.setItem('startTime', new Date().getTime()); } // grab that start time var startTime = window.localStorage.getItem('startTime'); // and the current time var presentTime = new Date().getTime() // calculate the difference between the two, and that's how long our session has been var diff = presentTime - startTime; // 20 minutes is 1200000 milliseconds (20 * 60 * 1000) var maxSessionLength = 1200000; // subtract the time difference from the max session length to get the remaining time var timeRemaining = maxSessionLength - diff; // if the remaining time is negative, just set it to 0 if (timeRemaining < 0) { timeRemaining = 0; } // convert the remaining time to minutes and seconds var minutes = Math.floor((timeRemaining % (1000 * 60 * 60)) / (1000 * 60)); var seconds = Math.floor((timeRemaining % (1000 * 60)) / 1000); // update the display span with the remaining time, and pad the seconds with a 0 if needed document.getElementById("timer").innerHTML = minutes + ":" + (seconds < 10 ? '0' : '') + seconds; } // run the timer logic once, and then repeat every second (1000 ms) startTimer(); setInterval(startTimer, 1000);

This function runs every 1000ms (that's what setInterval does). When it hits 0, nothing actually happens, but after the browser does time out, the localStorage info is wiped, and the countdown will start fresh on the next launch.

Since it uses the wall time, this will persist across other sites on the Internet upon returning to browsedns. However, this also means it will become inaccurate when sleeping the console, leaving, and returning, which does not tick down Nintendo's counter.

So, I created a reddit account sometime in June, and haven't used it since August. Rarely used it, and I was going to change something on the account. Then I saw this in my reddit inbox:

Your account has been permanently suspended from Reddit

WTF?! I looked to see when the message was sent. T was sent a month ago. Haven't used the f*****g account since August and they decide to ban me. Like what the f**k?! I checked all my posts, none violated the rules. Checked over the rules, haven't violated them. very su. What's more suspicious is how they didn't give a reason why.

Should I contact reddit and see what the f**k happened or what?

💀

idk it was in my youtube recs for some reason and all i look up is music videos xD

so... here u go: the horror computer

The information in this thread is what Nintendo provided to further enhance your web projects on the WiiU, however this information has since been pulled from the internet so i took the liberty of tracking it down in the wayback machine and converting to Markdown for anyone that is looking to web design with a WiiU in mind.

Internet Browser - Extended Functionality

With the Wii U Internet Browser, by using specialized JavaScript, it is possible to obtain button states of the GamePad or controlling how video and images (JPEG) are displayed.

Sample page to obtain values from the Wii U GamePad. - Wii U Internet Browser required

Nintendo provides this information as a courtesy and does not offer support on this extension function.

Developer Mode

This feature available is for Wii U System version 4.0.0U and above

Change user agent:

Changes can be made from the Wii U console's Internet Browser > Start Page > Settings.

Enable developer tools:

The developer tools can be enabled from the Wii U console's Internet Browser> Start Page > Settings.

Once enabled, you can use a browser on a PC on the same local network to inspect the code of any web page.

The developer tools work with Chrome [ver.30.0.1599.101m] and Safari [ver.6.0.3] and above.

Changing the user agent and enabling developer tools will be disabled once the Wii U console's Internet Browser is closed.

Enhanced Video Playback Function

Embedded play (inline) on a webpage:

The Wii U console's Internet Browser generally plays video full screen. However, if text, pictures or other elements need to be included with the video while it plays, embedding an inline video player can be done on the page by using the methods below.

Insert "webkit-playsinline" into the video tag.

Example: < video webkit-playsinline controls >

While holding down on a video tag the option "Play video on web page" from the menu will be displayed.

This button is only enabled when a video tag is found.

Please note that, since September 30, 2013, embedded inline video play can only be done on updated systems.

Suppression of autoplay:

Since the Wii U console's Internet Browser is unable to play 2 or more videos simultaneously, autoplay is suppressed. Suppression conditions are as follows.

Video tag autoplay elements Play () order by operation of non-user using JavaScript timer etc. Using +Control Pad buttons to focus

Focus movement rule:

Focus moves to the first element found (anchor element link, tab index, etc.) when moving in the direction of the +Control Pad button pressed. If no element is found in that direction, focus is not moved, but scrolls for a determined quantity.

Control method:

You can call up a "preventDefault" method for the target element node's "keydown" event, or hide focus by returning "false".

window.wiiu. gamepad Object

Method

Method Name Parameters Return Value Description update() None GamePad State Object Get information on the current state<br />of the GamePad. An object holding<br />that information will be returned.

Properties

Name Description isEnabled Return 1 if the GamePad is connected. isDataValid Return 1 if the data stored in the object is valid. tpTouch Return 1 if the touchscreen is currently being touched. tpValidity Depending on the validity of the touch position data (contentX, contentY), the following values are assigned.<br />Both X and Y coordinates are valid: 0<br />X coordinate is invalid: 1<br />Y coordinate is invalid: 2<br />Both X and Y coordinates are invalid: 3 contentX<br />contentY With the upper left of the content being the origin (0, 0), this value represents the touch position within the content area. <br />The value has a range of 0 ≤ contentX < Content Width, 0 ≤ contentY < Content Height. If for example, the touch event occured on the address bar, or anywhere else outside the area of the content, the value will indicate it was out of range. lStickX<br/>lStickY This represents the tilt direction of the left stick. The value range is -1.0 ≤ lStickX ≤ +1.0, -1.0 ≤ lStickY ≤ +1.0. The Up and Right direction represents a positive value. rStickX<br />rStickY This represents the tilt direction of the right stick.<br />The value range is -1.0 ≤ rStickX ≤ +1.0, -1.0 ≤ rStickY ≤ +1.0. The Up and Right direction represents a positive value. hold While a button is held down, the flag for that button will be set. Multiple buttons that are held down can be detected by looking for that particular flag. See Button Flags Table. accX<br />accY<br />accZ Represents the accelerometer values.<br />X value points in the left direction of the GamePad screen<br />Y value is the front side of the GamePad screen<br />Z value is coming out from the top face of the GamePad<br />These are all in the positive direction and the values are fractional value with 1G being +1.0. gyroX<br />gyroY<br />gyroZ Represents gyrosensor (angular speed) values. <br />Referencing the same axes of the accelerometer, positive values indicate a clockwise rotation with 360 dps (degrees per second) being 1.0. angleX<br />angleY<br />angleZ Represents the amount of rotation for each axis, which is calculated from the gyrosensor value. dirXx<br />dirXy<br />dirXz<br />dirYx<br />dirYy<br />dirYz<br />dirZx<br />dirZy<br />dirZz A 3x3 matrix representing the 3 dimensional orientation of the GamePad.

Button Flags Table

Input Flag +Control Pad - UP 0x00000200 +Control Pad - DOWN 0x00000100 +Control Pad - LEFT 0x00000800 +Control Pad - RIGHT 0x00000400 A button 0x00008000 B button 0x00004000 X button 0x00002000 Y button 0x00001000 L button 0x00000020 R button 0x00000010 ZL button 0x00000080 ZR button 0x00000040 - button 0x00000004 + button 0x00000008 LStick - UP 0x10000000 LStick - DOWN 0x08000000 LStick - LEFT 0x40000000 LStick - RIGHT 0x20000000 RStick - UP 0x01000000 RStick - DOWN 0x00800000 RStick - LEFT 0x04000000 RStick - RIGHT 0x02000000 LStick Button 0x00040000 RStick Button 0x00020000 window.wiiu.videoplayer Object

Method

Method name Parameters Return Value Description end() None Success or failure (Boolean) Terminate the video player

Property

Name Description viewMode The following integers are used to describe the state of GamePad display while a video is playing back.<br/>Video playback screen: 0<br/>Browser screen: 1<br/>Also, by changing this value, it is possible change the GamePad state while video is being played back.

Related Events

Name Description wiiu_videoplayer_end Call to terminate video player. window.wiiu.imageview Object

Methods

Method Name Parameters Return Value Description end() None Success or failure (Boolean) Terminate the image viewer getErrorCode() None Error Code (Number) Returns the error code of the most recent error that occurred. If no error has occurred, it will return -1.

Property

Name Description viewMode The following integers are used to describe the state of GamePad display while an image is being viewed.<br/>Image viewer screen: 0 <br/>Browser screen: 1<br/>Also, by changing this value, it is possible change the GamePad state while an image is being viewed.

Error Code Table

Number Description 202 Unsupported format 202 Either the width or height of the image is too large 204 The file size of the image is too large 205 The image is a progressive format JPEG and the pixel count is too large

Related Events

Name Description wiiu_imageview_start Call to start image viewer. wiiu_imageview_end Call to terminate image viewer. wiiu_imageview_change_viewmode Call to change image viewer display mode. wiiu_imageview_change_content Call to change image viewer content. wiiu_imageview_error Call when there is an error with the image viewer.

Key codes obtained from KeyEvents on Wii U GamePad

Key Code +Control Pad - UP 38 +Control Pad - DOWN 40 +Control Pad - LEFT 37 +Control Pad - RIGHT 39 A Button 13

Not sure if this is off topic, but ive noticed that videos sent through the dm feature on twitter are able to play , with minimal issue on the switch browser. Does anyone know why this is, and if it n be put to use?

In Google Chrome and other Chromium-based browsers it's possible to add custom device information to the developer console, in order to make it easier to design websites for irregular devices.

For instance, for the Switch, you can bring up the inspector, go to Settings -> Devices, and then add a new device with the following User Agent: "Mozilla/5.0 (Nintendo Switch; WifiWebAuthApplet) AppleWebKit/606.4 (KHTML, like Gecko) NF/6.0.1.19.3 NintendoBrowser/5.1.0.21761" and 1280x720 dimensions.

add device image

And then clicking the Device Mode button will show the Switch's screen dimensions and the target website will view you as visiting from a Switch. This makes development a bit easier / quicker if you have a site that does different logic on different devices, or need certain screen elements to fit.

Hey Everyone, I opened a key testing website (https://keyboard-test.space/) in the PS5 Internet Browser via messages and found out that for some reason, Some of the controllers buttons are registered as function keys. Here is the Table I made of all the buttons that work.

D-PAD: Arrow Keys
Triangle: F1
Circle: ESC
Cross: Click
Square: F2
Left Stick: Mouse
Right Stick: Mouse Wheel
L3: F9
R3: F10
L2: F7
R2: F8
L1: F5
R1: F6
F3: OPTIONS
Unbindable as of 29 April: Touchpad, Touchpad Tap/Click, Mute Button, PS Button, CREATE Button.

If you test this out via the link it should work. This could be really cool and useful for games on the PS5 Internet Browser

If you've never made a simple web page before, it's not that hard!

You can sign up over at Github.com for an account, and follow their Quickstart Github Pages guide to create your own web page at <username>.github.io. As you grow more experienced, you can then hook it up to a real .com domain or something else.

This thread can be used for support if you're interested in trying this out and need some assistance. I think for the most part you can do this all from the Switch and browser UI, including even editing the code.

My first website was on freewebs (now called webs.com), which is a less technical option. Learning how to make basic websites on my own time was more useful than most other things learned that I learned while in school. (But I was not a great student, so I'm not the best example).

My current Github pages site is at http://vgmoose.github.io and it isn't much special, just an aggregation of blog posts I've had throughout the years.

SO IM FINISHING MY WEBSITE and i wanna add those lil profile gif things.What are they called?
Lea

On the Wii U, if you open the browser and go to the Settings, there's an option to "Enable Developer Tools". This starts an http server which you can visit from a computer on the same network, and view web inspector information about pages being rendered by the Wii U browser.

Example output from Google Chrome on PC after visiting the IP that the Wii U gives you in its browser settings:

Screen Shot 2022-03-05 at 10.42.54 PM.png

Here we can debug and see the full error that the Wii U webkit instance hit when trying to render the page. In this case, it does not support the let keyword, which was introduced in ES6 in around 2015. Previously this part of the page was broken, but with this information, this bug is able to be addressed.

It's a pretty cool feature tucked away in settings, and would love to have something similar for the Switch browser.