How To Python Website
h
CodingCactus (2074)

HELLO


This is my first proper html/css/js project that I have done by all by myself (mostly)


Thanks to @MatReiner for teaching me some stuff and major proof reading!


Hope this helps people with their python!!!

Upvote if you like, because this took me quite a bit of time to make (and learn)
You are viewing a single comment. View All
StudentFires (279)

Some HTML, CSS, and JS tips for future reference:

The long list of <li>s at the start, help's a user naviagate your page, right? That's ususally where we'd ought to use the naviagation tag: <nav>, and use CSS to make it dsiplay like a list using CSS display property, I'd reccommend something like this:

nav > a {
	display: list-item
}

Where your HTML would look something like:

<nav>
  <a href="#print">The Print Function</a>
  <a href="#comment">Comments</a>
  <a href="...">...</a>
</nav>

For your JS, it's best to never use var or ==, use let, and === respectively. those are 2 outdated pieces of JavaScript which have unfortunately survived to today, and still prey opun unknowing coders, like yourself.

And since your variable "themes" should never change, it's best to use const, instead of let or var.

lastly, It seems like it would've made more sense to use one stylesheet and manipulate CSS variables, as opposed to using whole different stylesheets, but, seeing as you already did it, it would probably be too much work, but after all, it's your choice.

Don't get me wrong, regardless of what I've said, this is still a great website, keep up the good work!

CodingCactus (2074)

@StudentFires thanks for the <li> tips, the js wasn't actually me, that was @MatReiner who told me how to do that

StudentFires (279)

@CodingCactus If you even need any JS help, just ask. I'll be able to give you some code to help you out, while explaining how it works, what's best practice, and how it fits into the structure of everything else at the same time.

MatReiner (93)

@StudentFires separate stylesheet is neater. Plus, it's better supported than CSS variables

MatReiner (93)

@StudentFires if you want, I will use window.theme = 0
In fact, it's far more efficient than var, let or const

StudentFires (279)

@MatReiner Do you have any proof to support it's efficiency? Also, yeah, your right, IE still doesn't support CSS variables: CSS Variable Support, are you using IE? I doubt it.

Also, I'd prefer an explicit Object.define.

The window should be only more efficient in defining it, nothing else. It should be much more inefficient to look up and modify the property if it's attached to window.

StudentFires (279)

@MatReiner Separate style-sheet isn't any neater, it's also much more inefficient. It requires indexing an array, updating a variable, modifying the DOM, and downloading 4 whole style-sheets. Also, every style-sheet swap requires a whole page update.

StudentFires (279)

@MatReiner Also, you aren't the one who recommended using itm.innerHTML, are you?

MatReiner (93)

@StudentFires you're probably right but let is definitely out of the window, and probably const and var too cuz they use up resources with the context-thingy

MatReiner (93)

@StudentFires yea, i'd probably put them in <style> elements (inline style would be too messy) but most courses out there tell you to put it in separate files and I don't want to mess up CodingCactus' work

MatReiner (93)

@StudentFires that's an unfinished part I couldn't be bothered putting a for loop. And yes, I need to change the html, what's wrong with that? :/

StudentFires (279)

@MatReiner You should only change the HTML once, just having that code still there running every time is bad for performance and safety.

Like it's okay, just run it once and copy the modifications that it makes.

StudentFires (279)

@MatReiner Well, const isn't helpful for a counter, let is a much better option. Also, we're talking minuscule optimizations at that point. less than a 100th of a millisecond.

MatReiner (93)

@StudentFires yes but those will make a big difference when I need to run the code 9007199254740992 times

StudentFires (279)

@MatReiner If you sit there spamming change theme, it won't add up, also, have you nothing better to do in life? I can easily get more speed improvements by simply freezing the array.

Code right, let the compiler do the optimizations.

MatReiner (93)

@StudentFires fine, tell @CodingCactus to change it from var to let and const.

StudentFires (279)

@MatReiner When he's online, I'll try to point him in the right direction, before it's too late.

MatReiner (93)

@StudentFires it's already done, check it

StudentFires (279)

@MatReiner That code's still extremely inefficient, using query selector every single run?
How about this:

"use strict";

{
	let themeNum = 0;

	const { freeze } = Object,
	[
		themes,
		styleSheet
		bodySelector
	] = [
		[
			`style.css`,
			`dark.css`,
			`style-1.css`,
			`dark-1.css`
		],
		document.head.querySelector(`link[href\$=".css"][rel="stylesheet"][type="text/css"]`),
		document.body.querySelector.bind(document)
	].map(freeze);

	bodySelector(`nav`)
	.addEventListener(`click`,
		freeze(
			() =>
			{
				if(++themeNum === themes.length)
					themeNum = 0;

				styleSheet.href = themes[themeNum];
			}
		)
	);

	document.body.querySelectorAll(`div.code > code`)
	.forEach(
		freeze(
			itm => {
				itm.innerHTML =
				itm.textContent
				.replace(/(\"([^\"]|(?<=\\)\")*\")/g,
				`<span class='str'>\$1</span>`)
				.replace(/(\d+(\.\d*)?|\.\d+)/g,
				`<span class='num'>\$1</span>`)
				.replace(/(\#[^\n]*)/g,
				`<span class='comment'>\$1</span>`)
				.replace(/(?<!\w)(print|False|await|else|import|pass|None|break|except|in|raise|True|class|finally|is|return|and|continue|for|lambda|try|as|def|from|nonlocal|while|assert|del|global|not|with|async|elif|if|or|yield)(?!(?:\w|\=))/g,
				`<span class='key'>\$1</span>`);
			}
		)
	);

	bodySelector(`script`).remove();
}

That's far more efficient, localized, modern JS. Takes advantage of modern strict mode and garbage collection.

We can go further and make this into <script type="module"> and then remove the "use strict directive" at the top of the Js for maximum performance and minimal size.

StudentFires (279)

@MatReiner Should I go even further and use WASM?

MatReiner (93)

@StudentFires have you ever heard of simplicity or minimalism?

MatReiner (93)

@StudentFires

Should I go even further and use WASM?

NO

tell the user to download a plugin and do it in c++.

MatReiner (93)

@StudentFires Oh, and, you got the wrong file

you need to do it all over again

StudentFires (279)

@MatReiner This is the correct file, and the size doesn't matter after the initialization.

MatReiner (93)

@StudentFires in the file there is a function called hl, where is that in your revision?
https://how-to-python.codingcactus.repl.co/script.js

MatReiner (93)

@StudentFires

This is the correct file, and the size doesn't matter after the initialization.

If you ever find yourself in a low-reception area, I hope you're not busy, it'll take a few houres to download.

MatReiner (93)

@StudentFires

You just added that.

CodingCactus added that a few houres ago, way before you posted your revision, check the repl.it history

StudentFires (279)

@MatReiner I'll do it tomorrow, I gotta go to sleep. Also, the 4 whole CSS files will take longer.

:)

StudentFires (279)

@MatReiner That's JS brainfuck! You crashed my browser.