A Frontend Developer’s Website? [CSS Code Injecting Website!]
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
TRENDING!
@JBYT27 AWESOME!
Been a while since I’ve been there! Glad to be back xD
@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
LMAO, xD @RayhanADev
very pog indeed
@ch1ck3n indeed indeed xD!
Not so transparent, eh?
(where da semicolon)
@HarperframeInc entire program fails
@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.
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
@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
- yay
- yes. lol
- THONK
yes plzi only know the basics..
@elipie
1. goto 1 and goto 3
3. goto 1
(3 -> 1 -> 1 -> 3, basically a dumb you reposted in the wrong neighborhood reference)
nice, now make a website builder :D
@realTronsi lmao actually 🤔 interesting idea...
also I can help with your thing!
@RayhanADev alright cool, I still have ~50min of class but we're just reviewing rn, I'll be on the rpel
o_o wow, looks great
@pepelaugh yay! Thank you!
@RayhanADev also, join repldash rn i got to ask you something
Very Kewl!
@TsunamiOrSumth danke fren!
Super cool dude!
@JBYT27 thanks uwu!
np! uwu @RayhanADev
This is sooooo cool!
Yo that's insane!! This is one of the coolest sites ever! I need to learn how to make this!!
@DynamicSquid YAYAYAYAYayYAYAYAYAY THANK YOU!
this is amazing!
@BobTheTomatoPie thank you!
(ˊᗜˋ)/ᵗᑋᵃᐢᵏ ᵞᵒᵘ*
WOWWWWW!!!! how do you sign up for like a special domain like is-a.dev???
BTW i love ur website its aMaZiNg
@KobeFF thank you!
if you have GitHub, it’s pretty simple just go to https://www.is-a.dev
@RayhanADev do you know any other "free/special" domains?
btw its really cool
@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
@Kookiez thanks (^_−)−☆
and no ;-; sadly I do not
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??
@KobeFF yeah sure, it’s MIT licensed so as long as you follow it and attribute me it’s kewl!
@RayhanADev Okay sounds good! ill add that guy, wuthizname? Jake albaugh? and urs
@KobeFF kewl!
@RayhanADev super cuheul
idk lmao
yasssss i got my domain :)
@KobeFF nice!
@RayhanADev yeah now i can finally start building my site :)
@KobeFF nice!I bet the poor dude is wondering why so many site’s like mine are showing up xD
@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
@KobeFF i have data from before, I used the Replit API to get them all!
@RayhanADev Cool! Did you make the repl.it api urself??
@KobeFF no xD
but I made a package that gets data from the API
Amazeing!!!!
@AverseABFun thank you! (ˊᗜˋ)/ᵗᑋᵃᐢᵏ ᵞᵒᵘ*
This is so satisfying! It's like when you make your bed or something it feels so good
@Highwayman thank you :)
OH SO YOU MADE THE replit-api NPM PACKAGE!
if you need some help, I may help!
@ZDev1 YEP, I publish the first major version earlier this week and am writing doc for it now!
@RayhanADev yeah can I help
@ZDev1 no thanks, I’m basically done with it, but if you have an idea feel free to open an issue on GitHub :D
AWESOME!i dont wanna write the same comment, in the vidtube idk "pog"
This is the best thing I have every seen. POG
@Whippingdot Yay thank you!
Im confused about what this is
@GEISTCODER it’s basically a website that’s creating it’s CSS as its being displayed!
What does that mean???? @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
THAT IS COOWL. IT MADE A FARE AMOUNT ON SENSE. @RayhanADev
Creative!
I also like how you made those keywords :D
@NoNameByProgram :D
Thank you! I really wanted something unique yet reflective of my frontend appreciation!
this is cool
@TheCheeseCoder danke! I appreciate it!
This is awesome!
@Renise thank you!
imma try this lol
@EpicGamer007 good luck!
I retracted my upvote to make it 30 again. But its stonks!
well did you just forget a semicolon?
@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
@Kookiez sometimes i just dont add semicolons to annoy people i put them in later tho
oh my god this is amazing and really creative, your obviously a big expert at coding!
@XanderK20 31 = prime number Y DID YOU DO THIS TO ME
@XanderK20 thank you xD! I’m not a big expert but I appreciate it :D!
30th upvote!
@TommyVictory YAY thank you!
@RayhanADev Me wondering when it becomes 31 and someone breaks the nice divisibility:
@RayhanADev NOOOOOOOOOOOOOOOOOOOOOOOOOO ITS 31 UPVOTES.
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?
@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.
@RayhanADev Well, it's just that it says JS and JavaScript.
Also, I already checked the GitHub, how secret can it be?
@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.
@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
@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?
@xxpertHacker LMFAO
pass, I’m also a WebAIM expert :)
@RayhanADev
Lmao, if it worked I probably would've died laughing.
What did you mean when you had said "pass"?
@xxpertHacker pass (or in other words no thanks xD)
@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?
@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?
@xxpertHacker ah gotchu!
We should work on something... pingu me when you do want to :D !
@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?
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?
@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.
@RayhanADev I think this is actually buggy CSS:
background-color: transparent;
background-color: #101010;Was that an accident?
@xxpertHacker that was on purpose, it actually becomes buggy after I delete either of those for reason I’ve yet to find out :)
@RayhanADev Maybe... because one of them is missing a terminating semi-colon? :)
@xxpertHacker no I deleted the transparent at first but then when it reached that point the website stopped rendering in general xD.
@xxpertHacker okay there I moved it around and fixed it happy ( ᐛ )
@RayhanADevWell, no, I'm not happy
Did you just delete it?
@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?
@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 oof
oof
xD
@RayhanADev
Finally fixed it: https://its.xxperthacker.repl.co
Works fine without the coloring after the transparent.
@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
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?
@xxpertHacker it looks double tabbed for me, while in my thing it looks single tabbed.
@RayhanADev I replaced the spacing with \t tabs, but it was temporary, updating rn.
@xxpertHacker got it.
Oh me a qestion wut is LOLCODE?
@mintbookworm LOLCODE is a programming language in the speak of the LOLCATS.
If you want, you can see something I did in LOLCODE here!
this is a wittle bit too hard for me becuz me is a beginner but it cool
@mintbookworm thank you xD! and don’t worry. With a bit of practice you’ll certainly be better than me!
Thanks for encoragement (sorry me spewing bad)
pog
@Coder100 pog
very pog now do it in coffeescript @RayhanADev
@Coder100 buh, buh the other guy did it in coffeescript and I transpiled it back to javascript...
@RayhanADev lmao
@xxpertHacker lmao
untranspile your transpile then transpile it back so you can transpile it again to coffeescript @RayhanADev
@RayhanADev
@Coder100 bren feels bad, pretend I did it thanks mark as correct bai!
@Coder100 amazing 🧠
@RayhanADev
@RayhanADev
@Coder100
sorry i discovered imgflip last one
@RayhanADev
POG @XanderK20
@Coder100 pog
@Coder100 bootiful memes
and ofc the one pog boi would win easy clap xD.
LOL @RayhanADev
POG @Coder100
XD @RayhanADev
@Coder100 POG POGPOGPOGPOGPOG
@Coder100 pogchamp
pog @kjl3080kjl3080
@Coder100 bootiful mems u got dare
thx :) i made it myself @StealthySniper