Nyctophilia; a coding thread (new/old coders are encouraged to join!)

wednesday · July 3, 2021, 4:07pm

Of course! Good luck!!

deathinreverie · July 3, 2021, 4:28pm

see this post by @/astrophile

korralistic · July 3, 2021, 5:36pm

god bless u wtf…

deathinreverie · July 10, 2021, 4:49am

The links aren’t working since the pointer-value is set to ‘none’. If you were to set it to ‘auto’, all/some of the sliders won’t work. It’s a mess in that sense Stilll working out a solution

SockMonster1 · July 10, 2021, 5:50am

Set the pointer events to auto for the link containers.

deathinreverie · July 10, 2021, 5:52am

why didn’t i think of this? cue facepalm

it worked! thank you

TheMidnightAssassin · July 13, 2021, 8:33pm

So sorry that I haven’t gotten the activities out! Summer has been busy and I finally got a new laptop, so I’ll hopefully get to code more! I’ll try to get out the next activity as soon as possible, no promises though >.<

stella_vigo · July 15, 2021, 10:55am

This took me quite a while. I spent hours on this trying to make it mobile-friendly, dark-mode-friendly, and light-mode-friendly Do you have any tips on making aesthetic code? I’ve been trying to make this pretty but I’m not sure if it even looks decent, I’m not as good at making aesthetic things as other people here

⭐︎ ✧ starry sky ✧ ⭐︎ ▼ scroll down to see more ▼ Hello and welcome to starry sky, a graphics thread where I offer custom covers and code for free! I can make simple covers, vector covers, manip covers, coded threads, and coded playlists, among others. Please note that I'm still a beginner in coding and I only use free tools and resources—such as Canva, Photoscape X, and Pixabay—so I apologize in advance if I don't meet your expectations, hehe.

I'm mostly doing this out of fun, so request away! I like making graphics for other people :D

rules... ✭ Be nice and abide by the Code of Conduct.

✭ Giving credit is a must. If you're using my cover, please credit me (cover by stella_vigo) in the description of your story or in an appropriate part of your book. If you're using my code, please don't remove my watermark.

✭ Thread-hopping is allowed as long as the other designer is okay with it. If you prefer another designer's work, don’t hesitate to let me know.

✭ Don’t steal my graphics. I put a lot of time and effort into making these, no matter how simple they look.

✭ If you unpublish/delete your story, use another cover, or delete your account, I have the right to turn your cover into a premade. This also goes to covers that you end up not choosing if I offer more than one design.

things to note... ✭ Your story doesn't have to be published for you to request a cover.

✭ Though I accept most requests, it's not a guarantee that I will accept yours.

✭ All my code is desktop-friendly, mobile-friendly, light-mode-friendly, and dark-mode-friendly by default.

✭ This shop is only for custom orders. I offer premade covers on the 𝖌𝖗𝖆𝖓𝖉𝖊𝖚𝖗 graphics thread.

✭ Highly-manipulated covers (also known as "manip" covers) are covers that take much more time and editing than simply putting text on a picture. Many fantasy covers can be considered "manip" covers.

✭ I'll always show prototypes before I deliver the final product, whether it be a cover or some code. You're allowed to request a complete redo after I show the prototype, but not after delivery. After delivery, I can only accept reasonable edits.

✭ I can code playlists, but I'd prefer if you tell me what songs you want me to include. I can put my own songs but my music taste is, uh, unconventional to say the least.

payment... Payment is optional. Since I'm very much a novice, I'm doing this for free. If you want, though, you can complete one of the following payments:

✭ One comment each on any three poems from my poetry collection, from the depths of my mind, they flutter free.

✭ One inline comment each on the first three chapters of The Secret Land of Otrâlmondé

✭ Three inline comments on any story from my anthology, First and Final

✭ Three inline comments on one of the following short works: I'm Sorry, Word Paintings, or Missing

form... To copy the form, please click on the icon located in the upper-right corner.

form for covers

<span style="font-size: 1.8vmin; display: block; font-family: Tahoma, Verdana, sans serif; margin: auto; width: 80%; padding-right: 15px; padding-left: 15px; border: 3px solid; box-shadow: 5px 5px 0px #8994bc; color: #8994bc; background-color: white;">
<span style="font-size: 3vmin; display: block; letter-spacing: 2.2px; text-align: center; margin-top: 15px; margin-bottom: 15px;">☆ requesting a cover ☆</span>
<span style="font-size:; display: flex; margin: auto;">
<span style="font-size:; display: inline-block; margin: auto; margin-right: 15px; padding: 10px; background-image: url('https://cdn140.picsart.com/330583801047201.gif?to=crop&type=webp&r=310x310&q=75'); background-repeat: no-repeat; background-size: 20vmin 20vmin; height: 20vmin; width: 20vmin; background-position: center"></span>
<span style="font-size:; display: inline-block; margin: auto; width: 75%; padding-right: 10px; height: 20vmin; overflow-y: scroll">
✬ <b>Cover Type (simple/vector/manip/other):</b> INSERT TEXT HERE<br>
✬ <b>Title:</b> INSERT TEXT HERE<br>
✬ <b>Subtitle (optional):</b> INSERT TEXT HERE<br>
✬ <b>Tagline (optional):</b> INSERT TEXT HERE<br>
✬ <b>Author Name:</b> INSERT TEXT HERE<br>
✬ <b>Ideas (please be specific):</b> INSERT TEXT HERE<br>
✬ <b>Genre (optional):</b> INSERT TEXT HERE<br>
✬ <b>Other (optional):</b> INSERT TEXT HERE
<details><summary>Short Summary (optional)</summary>
(type a short summary of your story below if you want)


</details>
<details><summary>inspo pics (optional)</summary>
(insert inspo pics below if you want)


</details>
</span></span>
<span style="font-size: 1vmin; font-family: Garamond; display: block; margin: auto; text-align: center; color: #8080a0; letter-spacing: 1.2px; margin-bottom: 10px;">⭐︎ ✧ coded by stella_vigo ✧ ⭐︎</span>
</span>

form for code

<span style="font-size: 1.8vmin; display: block; font-family: Tahoma, Verdana, sans serif; margin: auto; width: 80%; padding-right: 15px; padding-left: 15px; border: 3px solid; box-shadow: 5px 5px 0px #04097d; color: #04097d; background-color: white">
<span style="font-size: 3vmin; display: block; letter-spacing: 2.2px; text-align: center; margin-top: 15px; margin-bottom: 15px;">★ requesting code ★</span>
<span style="font-size:; display: flex; margin: auto;">
<span style="font-size:; display: inline-block; margin: auto; margin-right: 15px; padding: 10px; background-image: url('https://cdn73.picsart.com/194513109000202.gif?to=min&r=640'); background-repeat: no-repeat; background-size: 20vmin 20vmin; height: 20vmin; width: 20vmin; background-position: center"></span>
<span style="font-size:; display: inline-block; margin: auto; width: 75%; padding-right: 10px; height: 20vmin; overflow-y: scroll">
✪ <b>Code Type (thread/playlist/slideshow/other):</b> INSERT TEXT HERE<br>
✪ <b>Title:</b> INSERT TEXT HERE<br>
✪ <b>Subtitle/Tagline (optional):</b> INSERT TEXT HERE<br>
✪ <b>Ideas (please be specific):</b> INSERT TEXT HERE<br>
✪ <b>Other (optional):</b> INSERT TEXT HERE
<details><summary>inspo pics (optional)</summary>
(insert inspo pics below)

</details>
</span></span>
<span style="font-size: 1vmin; font-family: Garamond; display: block; margin: auto; text-align: center; color: #8080a0; letter-spacing: 1.2px; margin-bottom: 10px;">⭐︎ ✧ coded by stella_vigo ✧ ⭐︎</span>
</span>

▼ cover examples ▼

▼ coding examples ▼

code-thread-example

code-post-example

⭐︎ ✧ coded by stella_vigo ✧ ⭐︎

All suggestions welcome

EDIT: changed the height from using vmin to vh so that it looks taller on mobile. Thanks @Novel_Worm for the suggestion!

EDIT 2: I tried to change the scrolls to x-scroll, but for some reason the y-scroll keeps on showing up. If I get rid of the y-scroll then I can’t scroll both ways, I don’t know how to fix it >.< I guess I’ll just keep it like that for now. However, I did take the suggestion of using a screenshot instead of live code. Thank you @deathinreverie

EDIT 3: If you’re wondering why my personal thread is always being bumped, that’s me working on it lol

EDIT 4: Made some more changes. I’m tweaking it in my personal thread, right over here.

Novel_Worm · July 15, 2021, 12:16pm

It’s great! Though I do think it should be vertical, not horizontal, for the mobile peeps. And… How’d you get the scrolling to be so unobtrusive? The thread is stunning, though, and I can only imagine how long that must’ve taken you-

stella_vigo · July 15, 2021, 12:22pm

Thank you!

Oh, so I adapt the height so it’s landscape-ish on desktop and portrait on mobile? Okay, I’ll change the height

Oh I use padding. So padding-right: 10px and then for the same span margin-right: -10px so everything will be aligned. Not sure if that’s what you meant though

Thank you so much!

deathinreverie · July 15, 2021, 2:09pm

Love the colour scheme and the layout! I do have a couple of sugestions though, but you do you!

suggestions

screenshot 1

First one (though I think this was an overlook) is to correct the right-padding for the first image, it’s pushed in more than all the others

screenshot 3

This is probably because of the scrollbar, but the difference between your right and left text-image sets are somewhat jarring - maybe try using margin to move it, or padding to push the text further in? Or you could try using the x-scroll instead of the y-scroll so everything is equalised

screenshot 2

Instead of uploading the coded versions/samples, maybe you can upload gif versions, so you a) get to reduce the space taken and b) equalise their sizing?

screenshot 4

This is more of a preference thing, but just for the difference, you could try to use a cursive font for the title

Those are just my two cents though - use what you think works! Also, the red dots are accidental, I tried to save the screenshots but kept on forgetting the red pen was on xD

stella_vigo · July 15, 2021, 2:15pm

Thanks a lot for the suggestions!

Hmmm, I think it’s because of the scroll bar. I actually adjusted the margins and padding and they look fine on my iPhone

Maybe it’s a Windows thing? Anyway, I’ll try an x-scroll and see if it’s better

Oh, so like a screenshot? I think I’ll do that

Thanks a lot!

deathinreverie · July 15, 2021, 2:17pm

I believe scrollbars don’t show up on phones the way they do on laptop xD maybe that’s why?

Sure, or you can try screen records for “live” previews I guess

No problem!

TheMidnightAssassin · July 15, 2021, 3:21pm

This looks really aesthetic already! You’ve done a pretty good job to make it look good and flexible XD

stella_vigo · July 15, 2021, 3:22pm

Thank you so much

Novel_Worm · July 16, 2021, 1:30am

Looks amazing! And it’s much better vertical on mobile!

stella_vigo · July 16, 2021, 1:31am

Thanks

stella_vigo · July 22, 2021, 3:14pm

~~oof, it’s been a little quiet here~~

Anyway, thought I’d try making those computer-window-style codes that other people are making.

.Command Prompt C:\Users\stella_vigo>"Documents\writing\poetry\the_programmer's_bane.docx"

I am the programmer’s bane.

I am half comma and half colon,
I am the humble semicolon.
The hide-and-seek champion
according to my victims.

My presence, they should not neglect
lest the compilers reject
all the work they have been slaving over.

Such is the misery of the programmer.

These coders make me wheeze and cry
tears of laughter as their bloodshot eyes
scan endless lines of code
to seek the root of problems that arose.

I’ll give you a hint:
I’m part of it.
Or rather, my absence is.

Have you got the gist?

When my programmers do, they bang their fists
and I am sent into hysterics
for a little semicolon like me was all they missed.

After they put a clone of me
I am filled with glee
the moment they see
they are not yet free
for more errors have come to be.

Then they cause another racket
when they realize a missing bracket
caused the failure of their project.

Ah, of course, the other prime suspect.

And people wonder why programmers burn with fury
when they claim that coding is easy.

These amateurs do not know
what great lengths coders have to go
to produce a program that compiles and runs
as expected until the job is done.

Isn’t programming fun?

I am not the only one laughing.

Python is there in the corner, watching
and cackling
and muttering,
“I pity those who deal with such things.”

I am the programmer’s bane.
Semicolon is my name,
and for many programming errors, I am to blame.

⭐︎ ✧ coded by stella_vigo ✧ ⭐︎

raw code

<span style="font-size:; display: block; margin: auto; color: #909090">
<div align="justify">

<span style="font-size:; display: block; margin: auto; width: 85vmin; height: 50vmin; border: 1px solid; background-color: black;">
<span style="font-size: 1.8vmin; display: block; margin: auto; width: 100%; height: 5vmin; background-color: #909090; color: white; font-family: Tahoma, Trebuchet MS, Verdana, sans serif"><span style="font-size: 2vmin; display: inline-block; background-image: url('https://icon-library.com/images/command-prompt-icon/command-prompt-icon-19.jpg'); background-position: left; background-size: contain; background-repeat: no-repeat; width: 3vmin; height: 3vmin; margin: auto; margin-top: 1vmin; margin-bottom: 1vmin; margin-left: 2vmin; margin-right: 2vmin; color: #909090">.</span>Command Prompt
</span>
<span style="font-size: 1.5vmin; display: block; margin: auto; width: 83vmin; height: 43vmin; overflow-y: scroll; margin-bottom: 0px; font-family: Courier; padding-left: 2vmin; padding-top: 2vmin; color: white;">C:\Users\stella_vigo>"Documents\writing\poetry\the_programmer's_bane.docx"<br><br>

I am the programmer's bane.

I am half comma and half colon,
I am the humble semicolon.
The hide-and-seek champion
according to my victims.

My presence, they should not neglect
lest the compilers reject
all the work they have been slaving over.

Such is the misery of the programmer.

These coders make me wheeze and cry
tears of laughter as their bloodshot eyes
scan endless lines of code
to seek the root of problems that arose.

I'll give you a hint:
I'm part of it.
Or rather, my absence is.

Have you got the gist?

When my programmers do, they bang their fists
and I am sent into hysterics
for a little semicolon like me was all they missed.

After they put a clone of me
I am filled with glee
the moment they see
they are not yet free
for more errors have come to be.

Then they cause another racket
when they realize a missing bracket
caused the failure of their project.

Ah, of course, the other prime suspect.

And people wonder why programmers burn with fury
when they claim that coding is easy.

These amateurs do not know
what great lengths coders have to go
to produce a program that compiles and runs
as expected until the job is done.

Isn't programming fun?

I am not the only one laughing.

Python is there in the corner, watching
and cackling
and muttering,
"I pity those who deal with such things."

I am the programmer's bane.
Semicolon is my name,
and for many programming errors, I am to blame.
</span>
</span>

</div><br>
<span style="font-size: 12px; font-family: Garamond; display: block; margin: auto; text-align: center; color: #e08080; letter-spacing: 1.2px;">⭐︎ ✧ coded by stella_vigo ✧ ⭐︎</span>
</span>

Not the best, but it’s a start

tellyouwhat · July 22, 2021, 3:41pm

that’s pretty cool, is it supposed to come outa the chat bubble tho? i mean it’s an the edge.

stella_vigo · July 22, 2021, 4:17pm

Oh, it’s not supposed to what device are you using? It looks fine on my phone and laptop

iPhone:

Windows laptop: