Skip to content
← Back to Community
A Frontend Developer’s Website? [CSS Code Injecting Website!]
Profile icon
h
has Hacker Plan
RayhanADev

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

Voters
Profile icon
lu700
Profile icon
chickenman0426
Profile icon
InvisibleOne
Profile icon
SilvermoonCat
Profile icon
Themanimal
Profile icon
G0RG3
Profile icon
Kgbadz
Profile icon
codingjlu
Profile icon
MrVoo
Profile icon
ryanbrwr
Comments
hotnewtop
Profile icon
Coder100

pog

Profile icon
RayhanADev
Profile icon
Coder100

very pog now do it in coffeescript @RayhanADev

Profile icon
RayhanADev

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

Profile icon
xxpertHacker
Profile icon
RayhanADev
Profile icon
Coder100

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

Profile icon
Coder100

@RayhanADev
image

Profile icon
RayhanADev

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

Profile icon
RayhanADev

@Coder100 amazing 🧠

Profile icon
Coder100

@RayhanADev
image

Profile icon
Coder100

@RayhanADev
image

Profile icon
XanderK20

@Coder100

image

Profile icon
Coder100

sorry i discovered imgflip last one

image

@RayhanADev

Profile icon
Coder100
Profile icon
zplusfour
Profile icon
RayhanADev

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

Profile icon
JBloves27
Profile icon
JBloves27
Profile icon
Coder100
Profile icon
Cooolcoder

@Coder100 POG POGPOGPOGPOGPOG

Profile icon
kjl3080kjl3080

@Coder100 pogchamp

Profile icon
Coder100
Profile icon
StealthySniper

@Coder100 bootiful mems u got dare

Profile icon
Coder100

thx :) i made it myself @StealthySniper

Profile icon
PyCoder01

@Coder100 how. Gimme all your memz. NOT THE MEMZ TROJAN PLS.

Profile icon
codingjlu

@RayhanADev lololololol

Profile icon
JBloves27

TRENDING!

Profile icon
RayhanADev

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

Profile icon
JBloves27
Profile icon
RayhanADev

@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

Profile icon
JBloves27

LMAO, xD @RayhanADev

Profile icon
ch1ck3n

very pog indeed

Profile icon
RayhanADev

@ch1ck3n indeed indeed xD!

Profile icon
HarperframeInc

image

Not so transparent, eh?

(where da semicolon)
Profile icon
GabrielManhilot

@HarperframeInc entire program fails

Profile icon
RayhanADev

@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.

Profile icon
elipie

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

Profile icon
RayhanADev

@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
Profile icon
elipie

@RayhanADev

  1. yay
  2. yes. lol
  3. THONK
  4. yes plz i only know the basics..
Profile icon
JBloves27
Profile icon
[deleted]

@elipie

  1. goto 1 and goto 3
  2. goto 1
    (3 -> 1 -> 1 -> 3, basically a dumb you reposted in the wrong neighborhood reference)
Profile icon
realTronsi

nice, now make a website builder :D

Profile icon
RayhanADev

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

Profile icon
realTronsi

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

Profile icon
badst

o_o wow, looks great

Profile icon
RayhanADev

@pepelaugh yay! Thank you!

Profile icon
badst

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

Profile icon
RayhanADev
Profile icon
TsunamiOrSumth

Very Kewl!

Profile icon
RayhanADev

@TsunamiOrSumth danke fren!

Profile icon
JBloves27

Super cool dude!

Profile icon
RayhanADev

@JBYT27 thanks uwu!

Profile icon
JBloves27
Profile icon
enterCheesyNameHere

This is sooooo cool!

Profile icon
DynamicSquid

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

Profile icon
RayhanADev

@DynamicSquid YAYAYAYAYayYAYAYAYAY THANK YOU!

Profile icon
BobTheTomatoPie

this is amazing!

Profile icon
RayhanADev

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

Profile icon
KobeFF

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

BTW i love ur website its aMaZiNg

Profile icon
RayhanADev

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

Profile icon
Kookiez

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

Profile icon
KobeFF

@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

Profile icon
RayhanADev

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

Profile icon
RayhanADev
Profile icon
KobeFF

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??

Profile icon
RayhanADev

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

Profile icon
KobeFF

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

Profile icon
RayhanADev

@KobeFF kewl!

Profile icon
KobeFF

@RayhanADev super cuheul

Profile icon
KobeFF

idk lmao

Profile icon
KobeFF

yasssss i got my domain :)

Profile icon
RayhanADev

@KobeFF nice!

Profile icon
KobeFF

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

Profile icon
RayhanADev

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

Profile icon
KobeFF

@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

Profile icon
RayhanADev

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

Profile icon
KobeFF

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

Profile icon
RayhanADev

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

Profile icon
KobeFF
Profile icon
AverseABFun

Amazeing!!!!

Profile icon
RayhanADev

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

Profile icon
Highwayman

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

Profile icon
RayhanADev

@Highwayman thank you :)

Profile icon
zplusfour

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

Profile icon
RayhanADev

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

Profile icon
zplusfour

@RayhanADev yeah can I help

Profile icon
RayhanADev

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

Profile icon
zplusfour

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

Profile icon
Whippingdot

This is the best thing I have every seen. POG

Profile icon
RayhanADev

@Whippingdot Yay thank you!

Profile icon
GEISTCODER

Im confused about what this is

Profile icon
RayhanADev

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

Profile icon
GEISTCODER

What does that mean???? @RayhanADev

Profile icon
RayhanADev

@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

Profile icon
GEISTCODER

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

Profile icon
RayhanADev
Profile icon
GEISTCODER
Profile icon
NoNameByProgram

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

Profile icon
RayhanADev

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

Profile icon
TheCheeseCoder

this is cool

Profile icon
RayhanADev

@TheCheeseCoder danke! I appreciate it!

Profile icon
Renise

This is awesome!

Profile icon
RayhanADev

@Renise thank you!

Profile icon
EpicGamer007

imma try this lol

Profile icon
RayhanADev

@EpicGamer007 good luck!

Profile icon
mesquite2234

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

Profile icon
RayhanADev
Profile icon
Kookiez

well did you just forget a semicolon?

image

Profile icon
RayhanADev

@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

Profile icon
[deleted]

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

Profile icon
XanderK20

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

Profile icon
mesquite2234

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

Profile icon
RayhanADev

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

Profile icon
mesquite2234

30th upvote!

Profile icon
RayhanADev

@TommyVictory YAY thank you!

Profile icon
mesquite2234

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

Profile icon
mesquite2234

@RayhanADev NOOOOOOOOOOOOOOOOOOOOOOOOOO ITS 31 UPVOTES.

Profile icon
xxpertHacker

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?

Profile icon
RayhanADev

@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.

Profile icon
xxpertHacker

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

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

Profile icon
RayhanADev

@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.

Profile icon
xxpertHacker

@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

Profile icon
xxpertHacker

@RayhanADev
Well, WebAIM doesn't say anything good:
Screenshot 2020-12-07 at 5.06.48 PM
Screenshot 2020-12-07 at 5.06.39 PM

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?

Profile icon
RayhanADev

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

Profile icon
xxpertHacker

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

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

Profile icon
RayhanADev

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

Profile icon
xxpertHacker

@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?

Profile icon
xxpertHacker

@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?

Profile icon
RayhanADev

@xxpertHacker ah gotchu!

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

Profile icon
RayhanADev

@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?

Profile icon
xxpertHacker

@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?

Profile icon
RayhanADev

@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.

Profile icon
xxpertHacker

@RayhanADev I think this is actually buggy CSS:

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

Was that an accident?

Profile icon
RayhanADev

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

Profile icon
xxpertHacker

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

Profile icon
RayhanADev

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

Profile icon
RayhanADev

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

Profile icon
xxpertHacker

@RayhanADev
Well, no, I'm not happy

Did you just delete it?

Profile icon
RayhanADev

@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?

Profile icon
xxpertHacker

@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 :(

Profile icon
RayhanADev

@xxpertHacker oof
oof
xD

Profile icon
xxpertHacker

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

Profile icon
RayhanADev

@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

Profile icon
xxpertHacker

@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?

Profile icon
RayhanADev

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

Profile icon
xxpertHacker

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

Profile icon
RayhanADev
Profile icon
mintbookworm

Oh me a qestion wut is LOLCODE?

Profile icon
RayhanADev

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

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

Profile icon
mintbookworm

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

Profile icon
RayhanADev

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

Profile icon
mintbookworm

Thanks for encoragement (sorry me spewing bad)