Share your repls and programming experiences

← Back to all posts
How To Python Website
h
CodingCactus (2435)

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)
Commentshotnewtop
IreTheKID (274)

Impressive as always! 👏

IreTheKID (274)

@CodingCactus this will get you 2000 cycles for sure, congrats! 🎉🎉

ChezCoder (1458)

make a "scroll to top" btn :)

CodingCactus (2435)

@ChezCoder ok, I was thinking of, but I didn't, i'll do it now :)

ChezCoder (1458)

@CodingCactus nice, looks like the upvote button xD. Can u make it gradually scroll to top? It seems like it is teleporting to the top

ChezCoder (1458)

@CodingCactus its simple :) just add this to the "to top" button:
onclick="window.scrollTo({top:0,behavior:'smooth'})"

AdCharity (1287)

@ChezCoder or you could just set the body scroll to smooth in the css file

CodingCactus (2435)

@AdCharity I forgot to ping you when it was done, but you seen it anyway, do you like it?

DannyIsCoding (484)

Lovely! I love this websites simple design!

JonahMorgan1 (14)

You used swap to make google fonts load faster! Great! Nice job correctly using meta tags too! Nice css usage!

studentAlfredAl (387)

You will be remembered as a legend. Your projects are really, really good!

mamamia5x (68)

Please center the "By CodingCactus" text!!!

CodingCactus (2435)

@mamamia5x why? I like it like that :)

BobNeo (39)

Because un-centered stuff is annoying lol @CodingCactus

mamamia5x (68)

What you should do is make the website a theme for others to use. (Basically allow people to use the css and stuff.) I've been working on an html5 tutorial thing, just like this, but I haven't styled it that good. This would be perfect to use (not gonna use it, unless I really have to and with permission).

Bookie0 (2600)

Lovely use of aesthetic colors I love it!

xrksvi (1)

This is great! I'm planning on learning python, and this will help a lot! Thank you!

HahaYes (903)

Yo Mr(or whoever you are) Cactus, are you willing to make a guess your number game with me? Thanks, HahaYesssssss

HahaYes (903)

@CodingCactus Alright I will be sending you this through multiplayer, I'm just getting the stuff spread out right now

StudentFires (327)

I just noticed you never used the Python image.

StudentFires (327)

@CodingCactus Oh, I'm used to looking out for the standard favicon.ico, but I see it now.

HahaYes (903)

finally, actually projects that aren't made by cycle farmers

HahaYes (903)

pretty good... I mean really good... I mean perfect

HahaYes (903)

@CodingCactus Lol I'm back alive... I was gone from repl for like 2 weeks

CodingCactus (2435)

@HahaYes I was wondering where you were lol

HahaYes (903)

@CodingCactus Lol, I guess schoolwork has been keeping me busy

ipastrano (238)

Beautifi, informative, and polished! :)

DJWang (1124)

He does it again! :) Congrats on 2000 cycles!

CodingCactus (2435)

@DJWang thanks, 2000 cycles is kinda cool too i guess

brotime1 (0)

Классно!!! - Cool!!!

bigchungusmc (79)

This is amazing. It even has a feature every website should have: DARK MODE.

StudentFires (327)

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 (2435)

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

StudentFires (327)

@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 (98)

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

MatReiner (98)

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

StudentFires (327)

@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 (327)

@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 (327)

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

MatReiner (98)

@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 (98)

@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 (98)

@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 (327)

@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 (327)

@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 (98)

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

StudentFires (327)

@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 (98)

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

StudentFires (327)

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

MatReiner (98)

@StudentFires it's already done, check it

StudentFires (327)

@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 (327)

@MatReiner Should I go even further and use WASM?

MatReiner (98)

@StudentFires have you ever heard of simplicity or minimalism?

MatReiner (98)

@StudentFires

Should I go even further and use WASM?

NO

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

MatReiner (98)

@StudentFires Oh, and, you got the wrong file

you need to do it all over again

StudentFires (327)

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

MatReiner (98)

@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 (98)

@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 (98)

@StudentFires

You just added that.

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

StudentFires (327)

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

:)

StudentFires (327)

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

syflexer (467)

Hey bro this is sick i wish i could program website stuff like this most of the website stuff i do is lame

CodingCactus (2435)

@syflexer well, this is actually my first proper website, so if you think it is good, that really makes me happy :)

StudentFires (327)

@syflexer Program website stuff? HTML isn't a programming language.

syflexer (467)

@CodingCactus ya i am pretty much still a beginner with makinging websites and i think this is sick

syflexer (467)

@StudentFires Hyper text markup language that makes html a programing language i mean it has language in the name

CodingCactus (2435)

@syflexer it is a markup language, not a programming language, it is in the name

StudentFires (327)

@syflexer It has markup in it's name too, JavaScript is more of a programming language, CSS even.

syflexer (467)

@CodingCactus so what is a markup language then and whats the differnce between a programing language and a markup language

StudentFires (327)

@syflexer You know Python! Python is a programming language, it can manipulate data, it's not just for making things looks good, that's all HTML is for, nothing else. And you know what? CSS does all of the styling, not HTML. HTML is an attempt at making text files readable by a computer. JavaScript is a programming/scripting language, JS can manipulate data, wait on events, cause change, HTML is static, it stay's the same, it never moves. JavaScript is the life of a page.

StudentFires (327)

@syflexer When you begin to make websites (if you do), good luck!

KrishyABob (5)

sorry, not notorious street fighters, street shooters xD

KrishyABob (5)

@CodingCactus can you help me with my notorious street fighters project? all I need you to do is add difficulty modes. the higher the difficulty is, the faster the enemies come.

Milky_Developer (0)

Wow! Amazing website. You should try using Bootstrap + Shards.

matthewproskils (263)

@codingcactus Is this just saying I have a horrible website?

matthewproskils (263)

@matthewproskils Also, when using integers, use int() around a varible when adding, subtracting, multiplying, dividing, etc inputs (it took me like 1 hour to find out)

CodingCactus (2435)

Is this just saying I have a horrible website?

@matthewproskils what do you mean?

matthewproskils (263)

@CodingCactus sorry lol, i read it wrong, i thought it was how to make a website

sugarfi (493)

Cool! Python has a lot more than 5 types though.

CodingCactus (2435)

@sugarfi hmmmmmm...... What are they?

Remember, this is just the basics, so I have only added the 5 main ones

sugarfi (493)

@CodingCactus there's list, tuple, range, type, function, complex, long, dict, etc.

BobNeo (39)

You should add classes and functions.

[deleted]

Thx for the Libraries tutorial! :-P

Wilke000 (345)

Wow @CodingCactus, this will help my brother, @WilkeWyoming, code better at python! Also, he created his account today! I finnaly convinced him!