Share your repls and programming experiences

← Back to all posts
A Frontend Developer’s Website? [CSS Code Injecting Website!]
h
RayhanADev (1393)

OMG TRENDING YAY! This is a kewl little website (and my personal portfolio) that has a very quirky “setup” if you will. Consider checking it out:

A Frontend Developer’s Website? [CSS Code Injecting Website!]

Check out the website in fullscreen here

Hiya, it’s Ray! Recently I signed up (or in other words created a pull request) to get a .is-a.dev subdomain. I really wanted a personal website with a kewl domain hack, but this seemed to be an even better option!

While I was creating my website, I realized Dang, how lame. Static websites are just so reused and there isn’t much special about nav-bars, pagination, and whatnot. I really wanted my website to be unique and quirky, yet still reflect me in some way.

That’s when I stumbled across pen#PwLXXP, an interesting website that injects it’s CSS character by character into a style tag. Of course it was written in CoffeeScript so I decided to transpile it back into Javascript! It was pretty easy and after revising the code some bit, I felt really proud of how the site worked. I also used my new REPLAPI.it package (coming out later this week after I finish documentation!) to get some of my profile data and template that with EJS.

The end product is really amazing and I absolutely love it! I’m still adding more stuff but I decided to publish it because I really like it! I should be getting a subdomain later this week, but for now I named my repl its because it sounds awfully nice to say! Ciao.

Update: YAY I got my domain! https://ray.is-a.dev

Comments
hotnewtop
Coder100 (15676)

very pog now do it in coffeescript @RayhanADev

RayhanADev (1393)

@Coder100 buh, buh the other guy did it in coffeescript and I transpiled it back to javascript...

Coder100 (15676)

untranspile your transpile then transpile it back so you can transpile it again to coffeescript @RayhanADev

RayhanADev (1393)

@Coder100 bren feels bad, pretend I did it thanks mark as correct bai!

Coder100 (15676)

sorry i discovered imgflip last one

@RayhanADev

RayhanADev (1393)

@Coder100 bootiful memes
and ofc the one pog boi would win easy clap xD.

RayhanADev (1393)

@JBYT27 AWESOME!
Been a while since I’ve been there! Glad to be back xD

RayhanADev (1393)

@JBYT27 wanna know something funny?
I have a picture of every time I trended or broke a certain amount of cycles
and every trending pic of me has a different profile pic xD

HarperframeInc (439)

Not so transparent, eh?

(where da semicolon)
RayhanADev (1393)

@HarperframeInc it’s interesting that was there from when I transpiled it from Coffeescript and for some reason it throws the script adding in a semicolon ƪ(˘⌣˘)ʃ
I’ll mess around and see if I can fix it but it bugs me too.

elipie (373)

wowwww bootiful!!!

i use python

ok....(me looks at the last time in python: Syntax Errors Galore) lmao

Ok i have to say, someone has to give a CSS GOD Role, and this would so go to you

RayhanADev

the one im totally not jealous of because he has a custom domain...

Stats: CSS GOD * 2, so he is larger than a god(titan?)

also... maybe make a site like it has multiple pages, and one of the NAVBARS would have a button saying INJECT, then they would see this.

also plz teach me CSS idk how to.
TL;DR

Kthxbai

RayhanADev (1393)

@elipie
1. lmao thanks fren.
2. lmao wanna create a change.org to get me a CSS GOD repl xD
3. Good idea 🤔
4. Hmmmmmm, CSS Tutorial 2020

elipie (373)

@RayhanADev

  1. yay
  2. yes. lol
  3. THONK
  4. yes plz i only know the basics..
AJDevelopment (128)

@elipie
1. goto 1 and goto 3
3. goto 1
(3 -> 1 -> 1 -> 3, basically a dumb you reposted in the wrong neighborhood reference)

realTronsi (907)

nice, now make a website builder :D

RayhanADev (1393)

@realTronsi lmao actually 🤔 interesting idea...
also I can help with your thing!

realTronsi (907)

@RayhanADev alright cool, I still have ~50min of class but we're just reviewing rn, I'll be on the rpel

badst (667)

o_o wow, looks great

badst (667)

@RayhanADev also, join repldash rn i got to ask you something

GrantDeibler (2)

This is sooooo cool!

DynamicSquid (4567)

Yo that's insane!! This is one of the coolest sites ever! I need to learn how to make this!!

RayhanADev (1393)

@DynamicSquid YAYAYAYAYayYAYAYAYAY THANK YOU!

RayhanADev (1393)

@BobTheTomatoPie thank you!
(ˊᗜˋ)/ᵗᑋᵃᐢᵏ ᵞᵒᵘ*

KobeFF (1292)

WOWWWWW!!!! how do you sign up for like a special domain like is-a.dev???

BTW i love ur website its aMaZiNg

RayhanADev (1393)

@KobeFF thank you!
if you have GitHub, it’s pretty simple just go to https://www.is-a.dev

Kookiez (327)

@RayhanADev do you know any other "free/special" domains?
btw its really cool

KobeFF (1292)

@RayhanADev Ok, either the instructions are very confusing or im just stupid (probably both) but how the heck do u 'pull a request' and how does it work

RayhanADev (1393)

@Kookiez thanks (^_−)−☆
and no ;-; sadly I do not

KobeFF (1292)

ahhh after 1000 hours i finally figured it out... lmao @RayhanADev I don't really use github, but i just have an account 'cos its "essential to your average programmer"... but anyway i got a pull request! is it ok if i use ur idea like how to people see ur website code itself??

RayhanADev (1393)

@KobeFF yeah sure, it’s MIT licensed so as long as you follow it and attribute me it’s kewl!

KobeFF (1292)

@RayhanADev Okay sounds good! ill add that guy, wuthizname? Jake albaugh? and urs

KobeFF (1292)

yasssss i got my domain :)

KobeFF (1292)

@RayhanADev yeah now i can finally start building my site :)

RayhanADev (1393)

@KobeFF nice!
I bet the poor dude is wondering why so many site’s like mine are showing up xD

KobeFF (1292)

@RayhanADev yep hes probably like 'omg im getting spammed with the same sites!!!'

also how did you find out how many comments you have??? did u count every single one lmao

RayhanADev (1393)

@KobeFF i have data from before, I used the Replit API to get them all!

KobeFF (1292)

@RayhanADev Cool! Did you make the repl.it api urself??

RayhanADev (1393)

@KobeFF no xD
but I made a package that gets data from the API

RayhanADev (1393)

@AverseABFun thank you! (ˊᗜˋ)/ᵗᑋᵃᐢᵏ ᵞᵒᵘ*

Highwayman (1459)

This is so satisfying! It's like when you make your bed or something it feels so good

zplusfour (879)

OH SO YOU MADE THE replit-api NPM PACKAGE!
if you need some help, I may help!

RayhanADev (1393)

@ZDev1 YEP, I publish the first major version earlier this week and am writing doc for it now!

RayhanADev (1393)

@ZDev1 no thanks, I’m basically done with it, but if you have an idea feel free to open an issue on GitHub :D

zplusfour (879)

AWESOME!
i dont wanna write the same comment, in the vidtube idk "pog"

Whippingdot (419)

This is the best thing I have every seen. POG

GEISTCODER (21)

Im confused about what this is

RayhanADev (1393)

@GEISTCODER it’s basically a website that’s creating it’s CSS as its being displayed!

RayhanADev (1393)

@GEISTCODER okay
CSS is what makes a website pretty, it’s the style of the website.
It’s basically a coding language so it’s typed in words
What I do here is type each character 1 by 1 to the screen and also type it to a <style> tag in the HTML code which is where the CSS goes to make websites look pretty.
I hope that made somewhat decent sense xD

GEISTCODER (21)

THAT IS COOWL. IT MADE A FARE AMOUNT ON SENSE. @RayhanADev

NoNameByProgram (197)

Creative!
I also like how you made those keywords :D

RayhanADev (1393)

@NoNameByProgram :D
Thank you! I really wanted something unique yet reflective of my frontend appreciation!

mesquite2234 (258)

I retracted my upvote to make it 30 again. But its stonks!

Kookiez (327)

well did you just forget a semicolon?

RayhanADev (1393)

@Kookiez no, I saw that too it was from when I transpiled the coffeescript version and it throws the whole script to add a colon ƪ(˘⌣˘)ʃ
It bothers me so I’m tryna fix it xD

AJDevelopment (128)

@Kookiez sometimes i just dont add semicolons to annoy people i put them in later tho

XanderK20 (7)

oh my god this is amazing and really creative, your obviously a big expert at coding!

mesquite2234 (258)

@XanderK20 31 = prime number Y DID YOU DO THIS TO ME

RayhanADev (1393)

@XanderK20 thank you xD! I’m not a big expert but I appreciate it :D!

mesquite2234 (258)

@RayhanADev Me wondering when it becomes 31 and someone breaks the nice divisibility:

mesquite2234 (258)

@RayhanADev NOOOOOOOOOOOOOOOOOOOOOOOOOO ITS 31 UPVOTES.

xxpertHacker (782)

Swear among the first things that I ever did with CSS was playing with runtime CSS injection, it's still a pretty cool thing to do.

And then you went and pulled that off, looks great!

Btw:

* I use HTML, CSS, JS.

* I use Python.

* I use JavaScript.

So... what's the JS stand for?

RayhanADev (1393)

@xxpertHacker thank you!

and okay, okay the content is rendered using profile data from Repl.it (from a package that I created!). HTML, CSS, JS is a repl and Javascript is a (secret) repl.

xxpertHacker (782)

@RayhanADev Well, it's just that it says JS and JavaScript.

Also, I already checked the GitHub, how secret can it be?

RayhanADev (1393)

@xxpertHacker yeah ik, i could take effort and fix it but I like rendering with the data
Oh you found the GitHub xD. It’s not supposed to be a secret and I’m planning on releasing it this week after I finish docs.

xxpertHacker (782)

@RayhanADev Wait wait what I'm getting is that you... need help fixing the duplicate language?
In that case you need to invite me over to do it!

lmao

xxpertHacker (782)

@RayhanADev
Well, WebAIM doesn't say anything good:

And your site uses dangerous technology such as innerHTML.

Did you know that I am an expert when working with (modern) HTML, XHTML, CSS, JS, and a whole plethora of web-related technologies?

It seems that your site could use some fixing up, how about we work together?

RayhanADev (1393)

@xxpertHacker LMFAO
pass, I’m also a WebAIM expert :)

xxpertHacker (782)

@RayhanADev
Lmao, if it worked I probably would've died laughing.

What did you mean when you had said "pass"?

RayhanADev (1393)

@xxpertHacker pass (or in other words no thanks xD)

xxpertHacker (782)

@RayhanADev It was just how you said "pass, " and went on; normally I've heard something more like "I'll pass."

We should really work together sometime (not soon, I've got 100 projects I'm trying to do), I'm sure we could make a pretty good team, what do you think?

xxpertHacker (782)

@RayhanADev I actually took a look at the code, and I'm trying to understand some of this, take this example:

if (data == undefined) res.redirect("/error/dataless");
if (data.profile == undefined) res.redirect("/error/dataless");

How could data ever be undefined?
And if it were, wouldn't undefined.profile be an error?

RayhanADev (1393)

@xxpertHacker ah gotchu!

We should work on something... pingu me when you do want to :D !

RayhanADev (1393)

@xxpertHacker well I found that fetch info from GraphQL was tricky that day so sometimes it had a data in data but not data in data.profile and sometimes data in data.profile but not data.comments do you follow?

xxpertHacker (782)

@RayhanADev

well I found that fetch info from GraphQL was tricky that day so sometimes it had a data in data but not data in data.profile and sometimes data in data.profile but not data.comments do you follow?

so, sometimes you had data in one section or another, but not all of them. Okay, that I can understand, but what I don't understand is how all assignments to data were objects, so it could never become undefined :/ Is there something that I overlooked?

RayhanADev (1393)

@xxpertHacker beginning of the code, when it was first run data used to be undefined (which was my fault) which is why that exists. I fixed it now so it works fine now.

xxpertHacker (782)

@RayhanADev I think this is actually buggy CSS:

background-color: transparent;
background-color: #101010;

Was that an accident?

RayhanADev (1393)

@xxpertHacker that was on purpose, it actually becomes buggy after I delete either of those for reason I’ve yet to find out :)

xxpertHacker (782)

@RayhanADev Maybe... because one of them is missing a terminating semi-colon? :)

RayhanADev (1393)

@xxpertHacker no I deleted the transparent at first but then when it reached that point the website stopped rendering in general xD.

RayhanADev (1393)

@xxpertHacker okay there I moved it around and fixed it happy ( ᐛ )

xxpertHacker (782)

@RayhanADev
Well, no, I'm not happy

Did you just delete it?

RayhanADev (1393)

@xxpertHacker no, I just moved it around I sped the interval up until I found a spot that works!

Awww why are you not happy? Do you not have cuddly furret?

xxpertHacker (782)

@RayhanADev No, I don't have a furret.
Also, it seems that it worked fine without it entirely in my fork, but then I broken the JS anyways so I can't show it off right now :(

xxpertHacker (782)

@RayhanADev
Finally fixed it: https://its.xxperthacker.repl.co
Works fine without the coloring after the transparent.

RayhanADev (1393)

@xxpertHacker seems you did a lot more than fix it xD
yeah I also got rid of that coloring (tbh idk why it was there) and then moved it around too. also what’s up with your whitespace it’s going brrrrr

xxpertHacker (782)

@RayhanADev

seems you did a lot more than fix it xD

phff I'm not even half-way done

also what’s up with your whitespace it’s going brrrrr

Wdym? Details?

RayhanADev (1393)

@xxpertHacker it looks double tabbed for me, while in my thing it looks single tabbed.

xxpertHacker (782)

@RayhanADev I replaced the spacing with \t tabs, but it was temporary, updating rn.

mintbookworm (25)

Oh me a qestion wut is LOLCODE?

RayhanADev (1393)

@mintbookworm LOLCODE is a programming language in the speak of the LOLCATS.

If you want, you can see something I did in LOLCODE here!

mintbookworm (25)

this is a wittle bit too hard for me becuz me is a beginner but it cool

RayhanADev (1393)

@mintbookworm thank you xD! and don’t worry. With a bit of practice you’ll certainly be better than me!

mintbookworm (25)

Thanks for encoragement (sorry me spewing bad)