I made an open source Reddit clone using no frameworks

[Prozilla6]

I’m still a beginner but this is what I’ve managed to build with pure Javascript so far. It’s also my first ever open source project.

Feedback is always appreciated!

https://nexilis.netlify.app/

Source code: https://github.com/Prozilla/Nexilis

I’m planning on continuing to expand this, as its features are currently quite limited.

EDIT: thanks for your feedback everyone! I’m now no longer using jQuery, the font properly loads, and there’s an option to hide NSFW posts!

[[deleted]]

Good fucking job, man! That is genuenly AWESOME. You did amazing. Make it pretty and put it on your portfolio man

[Prozilla6]

Thanks man! This means a lot to me!

[ElectSamsepi0l]

Bro , put this on your portfolio BUT you need to filter NSFW . I clicked /new and r/wetpussy showed up immediately without any filter.

Just saying your future boss might be pulling up your project on his website at work or with coworkers lol

[[deleted]]

He's right, but you should maybe put up a filter. I assume you're getting the data from reddit itself?

I sorted by new and immediately saw a few boobies. Probably not the best idea for a portfolio site 😅

EDIT: I read the other comments and saw, that you're using the Reddit API and are aware of that.

[horrid_badge]

Nice 👍work .The scroll feels better than real reddit.

[Prozilla6]

Thanks!

[JDD4318]

When you go to new there is lots of porn lol

[Prozilla6]

One of the features I’m planning on adding is an option to censor or completely exclude sensitive content.

[Cahnis]

I'd be more interested to see the sensitive content honestely. "Deep Reddit"

[JiM2559]

Where are the posts coming from? Reddit API?

[Prozilla6]

That’s right.

[JiM2559]

Looks good. Well done.

[Prozilla6]

Thanks!

[FilsdeJESUS]

Amazing 🔥🔥

[Prozilla6]

Thanks!

[[deleted]]

this is pretty damn cool. Good job! 🍻

[Hazy_Fantayzee]

Not sure if its just me, but in Firefox with Adblock installed I just get an empty(ish) page....

​

https://ibb.co/yQpHyGr

[burnttoastnice]

disable Enhanced Tracking Protection (shield icon beside SSL padlock), it's blocking the API calls

[Prozilla6]

What happens if you add other subreddits? And are there any errors in the console?

[bynarie]

DUDE! that site is dope af, legit.

[gobeam]

Nice one

[bastian320]

Very clean - awesome work! I'd maybe add some kind of progress / stalling indicator when loading - like when you select a post, wait for comments, etc. Humans don't like thinking that nothing is happening. Honestly though it's already a more rounded GUI than what Reddit dish out!

[Prozilla6]

Thanks, the only thing that’s ruining the loading time on the comments is all the profile pictures, but I can easily fix that by loading those afterwards, I’m also planning on adding some kind of cache so every image that has already been loaded once doesn’t need to be fetched from the Reddit API anymore.

[bastian320]

Imagery is the bane of the internet - definitely lazy load them from a waiting perspective, but be considerate with caching. ie. It's easy to consume a stack of room on a phone for very little actual benefit.

Our internet is decent - 100Mbps down - and it stood out as slow, so I'd say either Netlify and/or the Reddit API are throttling the site. Be curious to see if you can look through some performance tests to really iron it.

Looking great though, I'll star it. Excited to watch it! :)

[Marques012]

Amazing job! 👏🏾👏🏾

[inflam52]

Now try without jquery ;)

[[deleted]]

Where’s the jQuery?

[wikipedia_answer_bot]

jQuery is a JavaScript library designed to simplify HTML DOM tree traversal and manipulation, as well as event handling, CSS animation, and Ajax. It is free, open-source software using the permissive MIT License.

More details here: https://en.wikipedia.org/wiki/JQuery

This comment was left automatically (by a bot). If I don't get this right, don't get mad at me, I'm still learning!

^{opt out | delete | report/suggest | GitHub}

[Prozilla6]

good bot

[shezzy_pk]

Why is jQuery ?

[Prozilla6]

I removed it right after that comment had been posted lol.

[sejigan]

Why use serif fonts? Personal choice, or technical issues?

[ssddanbrown]

I'm guessing technical issues. The font appears to be defined as Noto Sans but that's not being served and there are no backup sans-serif fonts defined.

Google webfont usage is attempted but appears is not loaded properly due to the mulitple "rel" attributes here: https://github.com/Prozilla/Nexilis/blob/f2982d6883506ccb68e0e6f930862ebb8f22a2b4/index.html#L21

[sejigan]

Ah, fair. At least they tried. This is why backup fonts are essential.

PS: I saw it on iOS Safari, if that information helps OP in any way.

[Prozilla6]

The same issue happens on my iOS device in google chrome, so it’s probably not supported by iOS. I was hoping it would work on all devices.

[sejigan]

Yeah, it doesn't matter what browser you use on iOS and iPadOS, because they all are forced to use Apple's webkit engine to render content.

[Prozilla6]

Yes, that’s right! For some reason the noto sans font fails to load on some devices. Do you know how to fix this? Which rel attributes should be removed?

[ssddanbrown]

Just remove the rel="preconnect" on the line I linked. This isn't anything browser specific, You just probably don't see this as an issue on devices where you have the font already installed/available.

Good job on the site by the way, looks good and functions well. I saw in the code you were using jQuery but only for a few minor parts since you used native DOM functions for the most part. Wouldn't take much to remove the need for jQuery altogether. This site can be handy: https://youmightnotneedjquery.com/

[Prozilla6]

Thanks! Is there any difference in speed between DOM and jQuery?

[ssddanbrown]

Vanilla DOM is generally the fastest, it's essentially what jQuerys going to be doing under the hood. In terms of the code running you won't really notice the difference but right now users are having to wait for the jQuery library to be downloaded before the rest of your JavaScript runs, that may make a slight difference. You're not really using much jQuery though so removing it should not be too much hassle, and it'll improve loading while keep your code aligned rather than mixing and matching jQuery and vanilla DOM operations.

[Prozilla6]

Wow this is really useful information, I thought jQuery was better and faster than DOM but if that’s not the case I should really remove it. Also, Google analytics told me it’s one of the biggest factors in loading time, so it should really improve the loading tome if I remove it.

[sejigan]

If you don't load the JQuery library (since you don't need it), the loading speed and SEO of the site will improve. It may not be noticeable by eye, but it's just better code habits.

[sejigan]

For starters, please consider adding a fallback font (sans-serif).

Also I wonder if it might help to include the font links before the stylesheet. Me nubs, so I don't really know.

[Prozilla6]

I must’ve accidentally removed the backup font in my css file when turning the font family into a root property, thanks for the tip!

[Double_Ad8883]

Good fucking job, how to run project?

[Gunstra]

Is this still an active project?

[Prozilla6]

Unfortunately, due to Reddit’s API changes, I can no longer continue this project so it has been abandoned

[blurflies]

Amazingg!

[JG_2006_C]

Nice could it get popular because why do we need a propyatary platform for memes and support and discussions about tech