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.
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 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 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 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 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 :(
@xxpertHackerseems 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
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.devsubdomain. 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
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:
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:
How could data ever be undefined?
And if it were, wouldn't
undefined.profilebe 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?
@RayhanADev
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
datawere objects, so it could never becomeundefined:/ 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:
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 ( ᐛ )
@RayhanADev
Well, no, I'm not happyDid 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 xDyeah 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
@RayhanADev
phff I'm not even half-way doneWdym? 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.