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

flyingCouch · June 14, 2021, 1:45am

once I’ve spelt elementary as elemanery

48lexR · June 16, 2021, 2:42pm

Yo @TheMidnightAssassin how’d you do the buttons on your personal?

TheMidnightAssassin · June 16, 2021, 3:20pm

I’ll get it up quick!

TheMidnightAssassin · June 16, 2021, 3:22pm

@48lexR @stella_vigo So I’m using <summary> and <detail> to do this

raw code

<details class="elided" open> <summary>BackNext</summary> Twinkle twinkle </details> <details class="elided" open> <summary>BackNext</summary> Little star </details> <details class="elided" open> <summary>BackNext</summary> How I wonder </details> <details class="elided" open> <summary>BackNext</summary> What you are </details> <details class="elided" open> <summary>BackNext</summary> Up above </details> <details class="elided" open> <summary>BackNext</summary> The world The world </details> <details class="elided" open> <summary>BackNext</summary> So high </details> <details class="elided" open> <summary>BackNext</summary> Like a Diamond </details> <details class="elided" open> <summary>BackNext</summary> In the sky </details> <details class="elided" open> <summary>BackNext</summary> Twinkle </details> <details class="elided" open> <summary>BackNext</summary> twinkle </details> <details class="elided" open> <summary>BackNext</summary> Little star </details> <details class="elided" open> <summary>BackNext</summary> How I wonder </details> <details class="elided" open> <summary>BackNext</summary> What you are… </details>

48lexR · June 17, 2021, 7:39pm

So I wrote a little post about Zenezonif: Fantastical Faeries and other Magical Beings: A chat thread - #101 by 48lexR

<div align="center"><span style="font-size: 5ch; font-family: serif;"><strong> Zenezonif </strong></span> <details><summary>A drawing of a Zenezonif. They can have red, yellow, blue, or pink skin.</summary><img src="https://i.ibb.co/fMwhxNc/Sensonf.png"></details></div>

<div>
<span style="font-size:; display: flex;">
<span style="font-size:; display: inline-block; width: 25%; float: left; margin-right: 5%; border: 2px solid black; padding: 2%">
Kingdom: Animalia<br>
Phylum: Chordata<br>
Class: Reptilia<br>
Order: Diaspid<br>
Genus: Monstrum<br>
Species: Zenezonif <br>
<hr>
<ul>
<li>Habitat: Arid, inland desert</li>
<li>Diet: Carnivorous Scavengers</li>
<li>Other: triploid genome (96 chromosomes). 
</ul>
</span>
<span style="font-size:; display: inline-block; width: 60%;  padding: 2%; text-align: justify; font-family: serif;">
<p>A Zenezonif (IPA [zɛ.nɛ.zoː.nif]) is a kind of ahuman in the genus <i>Monstrum</i>. It is native to the Lower Åtepsi desert plains and is commonly found along the winding rivers of the sandy desert. They have tough, scratchy skin that doesn't sweat in order to preserve water, along with soft, colorful hair that grows exclusively on the top of their heads. </p>
<p> Unlike most organisms in Kingdom <i>Animalia</i>, Zenezonif are exclusively triploid, earning two sets of chromosomes from the father (who lays the eggs) and one from the mother. Interestingly, Zenezonif sex distinction seems to work similarly to ZW sex distinction. A male offspring occurs when two Z chromosomes are present, and a female when two W chromosomes are present.</p>
<p>Zenezonif are commonly found in large groups (often called herds, but often called an <i>agæz</i> (meaning "crop") by locals). These large groups may consist of up to as many as five hundred members, and they may be as small as twenty in some rare instances.</p>
<p>In the modern day, of course, many Zenezonif have moved into cities, demonstrating that they are also complex organisms to the degree that which humans are, as well. There are currently a variety of anti-discrimination laws against Zenezonif. </p>
<p>Zenezonif eggs are large (greater than sixteen inches [forty centimeters] in length) and are often yellowish before turning white after a week. They often come in groups of 4-6. A father Zenezonif incubates the eggs by the river for about a period of a month before the hatchlings hatch. After just a month of feeding, the hatchlings grow to the size of a six-year-old child, and are still kept under the supervision of the parents for about six more years, when they become fully developed and are ready to go off into the world on their own.</p>
</span>
</span>
</div>

stella_vigo · June 18, 2021, 10:36am

So I decided to give my Random Recipes post a new look. I took some inspiration from those chalkboards you see at restaurants and cafés. Thoughts?

Random Recipes!

insert recipe here

Ingredients:

something edible

another item

another thing

Steps:
1. First step.
2. Second step.
3. Third step.

insert recipe here

Ingredients:

something edible

another item

another thing

Steps:
1. First step.
2. Second step.
3. Third step.

insert recipe here

Ingredients:

something edible

another item

another thing

Steps:
1. First step.
2. Second step.
3. Third step.

insert a note here

⭐︎ ✧ coded by stella_vigo ✧ ⭐︎

raw code

<span style="font-size: 15px; display: block; border: 12px ridge; width: 85%; border-color: #D2B48C; margin: auto; text-align: justify;">
<span style="font-size: 15px; display: block; font-family: Papyrus; margin: auto; padding: 20px; background-image: linear-gradient(to bottom right, #0f2a0f, black, #0f2a0f, black, #0f2a0f); color: #fffff0; text-align: center; letter-spacing: 2.2px;"><span style="font-size: 40px; display: block; font-family: Papyrus; margin: auto; padding: 10px; text-align: center; letter-spacing: 2px; text-shadow: 2px 2px 8px">Random Recipes!</span>
<br>
<div align="center"><details><summary>insert recipe here</summary>

<span style="font-size: 12px; display: block; font-family: Garamond; text-align: justify; width: 90%">
<span style="font-size: 18px; display: block; font-family: Garamond; text-align: left; letter-spacing: 3.3px; font-style: italic;"><br>Ingredients:</span><br>
<li> something edible<br>
<li> another item<br>
<li> another thing<br><br>
<span style="font-size: 18px; display: block; font-family: Garamond; text-align: left; letter-spacing: 3.3px; font-style: italic;">Steps:</span><br>
1. First step.<br>
2. Second step.<br>
3. Third step.<br>
</span>
</details>

<br>

<details><summary>insert recipe here</summary>

<span style="font-size: 12px; display: block; font-family: Garamond; text-align: justify; width: 90%">
<span style="font-size: 18px; display: block; font-family: Garamond; text-align: left; letter-spacing: 3.3px; font-style: italic;"><br>Ingredients:</span><br>
<li> something edible<br>
<li> another item<br>
<li> another thing<br><br>
<span style="font-size: 18px; display: block; font-family: Garamond; text-align: left; letter-spacing: 3.3px; font-style: italic;">Steps:</span><br>
1. First step.<br>
2. Second step.<br>
3. Third step.<br>
</span>
</details>

<br>

<details><summary>insert recipe here</summary>

<span style="font-size: 12px; display: block; font-family: Garamond; text-align: justify; width: 90%">
<span style="font-size: 18px; display: block; font-family: Garamond; text-align: left; letter-spacing: 3.3px; font-style: italic;"><br>Ingredients:</span><br>
<li> something edible<br>
<li> another item<br>
<li> another thing<br><br>
<span style="font-size: 18px; display: block; font-family: Garamond; text-align: left; letter-spacing: 3.3px; font-style: italic;">Steps:</span><br>
1. First step.<br>
2. Second step.<br>
3. Third step.<br>
</span>
</details>
<br>
</div><br><div align="justify">
insert a note here</div></span></span></span>

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

TheMidnightAssassin · June 18, 2021, 12:18pm

Omg, that’s so cool! (And very aesthetic)

stella_vigo · June 18, 2021, 12:22pm

Thank you

~~still trying to figure out the slideshow code btw, somehow I can’t get it to work XD~~

TheMidnightAssassin · June 18, 2021, 12:23pm

Yeah. I’ll tinker a little bit with that and then see how to work it out

~~oh, and also, I found a way to animate code in a cool way but I have to also try to figure out how to do that~~

deathinreverie · June 21, 2021, 3:53am

just popping by to say that the slideshow code comes from the "image gallery" button in the tab bar, where div data-theme-slick="1". increase the number according to how many images you want per slideshow.

TheMidnightAssassin · June 21, 2021, 4:54pm

Activity #4

columns:

Today, we’re going to make a code with columns! (as hinted by the subtitle) it’ll be a simple two part column, on one side: a picture, and the other: some text. If you aren’t familiar witth this concept, take a look at the posts down below where Wren explains the basics (since I’m not fit for teaching anything). If you’re still confused, don’t be afraid to ask questions, I’ll explain it to my best ability or someone with more experience can do it:)

Scrollboxes:

As you know, i like to make mine look neat and small, but most of my codes ontain a lot of information. So of course, we need scrollboxes. i know most people know how to do this, but for a quick refresher, here’s the scroll code:

overflow: scroll;

Bonus:

If you’re a certain person named Lex (or someone who just wants to try this out). Feel free to do multiple scrollboxes side by side with anything you’d like.

Requirements:

1. 2-part (or more) column
2. A picture in one column
3. facts/summaries/text about whatever you want in another column

raw code


<div align=center>
<span style="font-size:; display: block; border: solid 1px #211F2B; border-radius: 2px; background-color: #211F2B; width: 500px; height: auto; padding: 15px;">
<span style="font-size: 14px; display: block; letter-spacing: 2px; line-height: 1.5; text-align: right; font-family: arial; text-transform: uppercase; color: #98979F; text-shadow: 3px 3px #4A4853;"> <i> Activity #4</i> <span style="font-size:; display: block; border: 0.5px solid #98979F; margin-top: 3px; margin-left: 385px; width: 115px; height:;"> </span></span>

<span style="font-size: 9px; display: block; border-left: solid 2px #98979F; padding: 1% 2%; text-transform: uppercase; text-align: left; letter-spacing: 2.5px; text-shadow: none; line-height: 1.5px; color: #98979F; margin: 5px;">columns:</span>

<span style="font-size: 11px; display: block; border-right: solid 2px #98979F; padding: 1% 2%; text-transform: lowercase; text-align: justify; letter-spacing: 3px; text-shadow: none; line-height: 14px; color: #98979F; margin: 5px;"> Today, we're going to make a code with columns! (as hinted by the subtitle) it'll be a simple two part column, on one side: a picture, and the other: some text. If you aren't familiar witth this concept, take a look at the posts down below where Wren explains the basics (since I'm not fit for teaching anything). If you're still confused, don't be afraid to ask questions, I'll explain it to my best ability or someone with more experience can do it:) </span>

https://forum.wackywriters.com/t/coding-101/1172/348?u=themidnightassassin
https://forum.wackywriters.com/t/coding-101/1172/387?u=themidnightassassin
https://forum.wackywriters.com/t/coding-101/1172/432?u=themidnightassassin

<span style="font-size: 9px; display: block; border-left: solid 2px #98979F; padding: 1% 2%; text-transform: uppercase; text-align: left; letter-spacing: 2.5px; text-shadow: none; line-height: 1.5px; color: #98979F; margin: 5px;">Scrollboxes:</span>

<span style="font-size: 11px; display: block; border-right: solid 2px #98979F; padding: 1% 2%; text-transform: lowercase; text-align: justify; letter-spacing: 3px; text-shadow: none; line-height: 14px; color: #98979F; margin: 5px;"> As you know, i like to make mine look neat and small, but most of my codes ontain a lot of information. So of course, we need scrollboxes. i know most people know how to do this, but for a quick refresher, here's the scroll code: 

`overflow: scroll;` 
</span>

<span style="font-size: 9px; display: block; border-left: solid 2px #98979F; padding: 1% 2%; text-transform: uppercase; text-align: left; letter-spacing: 2.5px; text-shadow: none; line-height: 1.5px; color: #98979F; margin: 5px;">Bonus:</span>

<span style="font-size: 11px; display: block; border-right: solid 2px #98979F; padding: 1% 2%; text-transform: lowercase; text-align: justify; letter-spacing: 3px; text-shadow: none; line-height: 14px; color: #98979F; margin: 5px;"> If you're a certain person named Lex (or someone who just wants to try this out). Feel free to do multiple scrollboxes side by side with anything you'd like.</span>

<span style="font-size: 9px; display: block; border-left: solid 2px #98979F; padding: 1% 2%; text-transform: uppercase; text-align: left; letter-spacing: 2.5px; text-shadow: none; line-height: 1.5px; color: #98979F; margin: 5px;">Requirements:</span>

<span style="font-size: 11px; display: block; border-right: solid 2px #98979F; padding: 1% 2%; text-transform: lowercase; text-align: justify; letter-spacing: 3px; text-shadow: none; line-height: 14px; color: #98979F; margin: 5px;"> 1. 2-part (or more) column<br> 2. A picture in one column <br> 3.  facts/summaries/text about whatever you want in another column</span>

<span>
</div>

TheMidnightAssassin · June 21, 2021, 4:54pm

Code Example:

TITLE:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nisi mauris, porta a pharetra nec, ullamcorper eu tellus. Nullam non est ullamcorper, posuere odio id, commodo sem. Duis auctor eros quis massa sagittis fringilla. Cras suscipit scelerisque venenatis. Duis placerat commodo felis sit amet condimentum. Duis a elit non justo lacinia tincidunt non et nisi. Cras at nisl velit. Nulla eget faucibus est. Vivamus scelerisque ante nec sem gravida mattis. Maecenas efficitur est nec ex vulputate egestas. ⟪ coded by Aevyn ⟫

raw code

<div align=center>
<span style="font-size:; display:block; background-color: white; background-position:center; border: 2px solid white; width: 540px; height: 240; padding 24px; margin: 12px;"><span style="font-size:; display:inline-block; background-image:url(https://i.pinimg.com/236x/c9/2d/56/c92d562049fdcd0adf1e5670b70137b1.jpg); border: 1px white; width: 195.6px; height: 195px; padding:; margin-top: 18px; margin-right:300px;"> <span style="font-size:12px; display:inline-block; border: 1.5px solid black; width: 258px; height: 168px; padding: 12px; margin-left:210px; Overflow:scroll; font-family:; letter-spacing: 1px; line-height: 1.5; text-align: justify; font-family: Arial; color: black; "> <u><b>TITLE:</b></u><br> <br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nisi mauris, porta a pharetra nec, ullamcorper eu tellus. Nullam non est ullamcorper, posuere odio id, commodo sem. Duis auctor eros quis massa sagittis fringilla. Cras suscipit scelerisque venenatis. Duis placerat commodo felis sit amet condimentum. Duis a elit non justo lacinia tincidunt non et nisi. Cras at nisl velit. Nulla eget faucibus est. Vivamus scelerisque ante nec sem gravida mattis. Maecenas efficitur est nec ex vulputate egestas.</span>
<span style="font-size:10px; display:block; margin: 8px; font-family:copperplate; text-align: center; letter-spacing: 1px; color: black;"> ⟪ coded by Aevyn ⟫ </span> </span> </span> </span></div>

Winter Woods II:

Hello and welcome to Winter Woods!

This is a thread to just talk, relax and have fun. Feel free to introduce yourself with the provided form, make some friends and enjoy your time here:)

Lurkers are always welcomed~

raw code

<div align=center>
<span style="font-size:; display: flex; justify-content: space-around; background-position: center; background-image: url(https://i.imgur.com/sBLZkt3.gif); border: 2px solid #F0F8FF; width: 500px; height: 220px; padding: 10px; box-shadow: #B0C4DE 5px 5px;"><span style="font-size:; display: inline-block; background-position: center; background-image: url(https://i.pinimg.com/236x/25/e8/1d/25e81da15a436a9be40cec147a9aa3b0.jpg); border: 2px solid; width: 210px; height: 197px; padding: 10px; margin-right: 267px; color: #F0F8FF; font-family: cursive; text-shadow: 2px 3px #B0C4DE; text-align: center;"><span style="font-size: 12px; display: inline-block; background-color: white; border: 2px solid #F0F8FF; width: 229px; height: 181px; padding: 12px; margin-left: 232px; overflow: scroll; font-family:; letter-spacing: 1px; line-height: 1.5; text-align: justify; font-family: arial; color: #B0C4DE; text-shadow: none;"> <u> Winter Woods II:</u> <br><br>Hello and welcome to Winter Woods! <br><br> This is a thread to just talk, relax and have fun. Feel free to introduce yourself with the provided form, make some friends and enjoy your time here:)<br><br>Lurkers are always welcomed~ </span>
</span>
</div>

TheMidnightAssassin · June 21, 2021, 4:55pm

Sorry about posting this late, I was kinda busy

taglist

@stella_vigo @48lexr @anon25068527 @zena

Zena · June 21, 2021, 10:31pm

I can’t reach-
coded by a friendly Libra (aka Zena)tireddddd

raw code

<div align=center>

<span style="font-size: 15px; display: block; color: white; background-color: black; background-position: center; border: 3px solid black; width: 644px; height: 250px;  padding: 10px; border-radius: 1px"><span style="font-size: 11.5px; font-family: garamond; display: inline-block; color: white; background-color: black; border: 3px solid salmon; width: 200px; height: 80px;  padding: 10px; margin-top:30.5px;margin-right: 10px; line-height: 1.95"> I can't reach-
<span style="font-size: 8.5px; display: block; margin: 3px; font-family: garamond; center; letter-spacing: 1.45px;"> <i> coded by a friendly Libra (aka Zena)</i></span><small><small><small><i>tireddddd</i></small></small></small>
<span style="font-size:; display:inline-block; background-image: url(https://media.giphy.com/media/Fl7JeHkg5vatf81p6m/giphy.gif); width: 220px; height: 220px;padding:; margin-top: -83px; margin-left:220px;"><span style="font-size:; display:inline-block; background-image: url(https://media.giphy.com/media/d0MjmkmTFOzstasmzk/giphy.gif); width: 184px; height: 157px;padding:; margin-top: 50px; margin-left:-870px; transform: scaleX(-1)"></span></span></div>

stella_vigo · June 22, 2021, 4:07pm

a mystery piece
You may have noticed
since I returned to practice
a mystery piece
has been on my list.

Ever wondered what it is?

You have heard it
at least a bit
you may wonder
to what do I refer?

It is a guarded secret.

Though I admit
I have spread hints
they are hidden
within what I have written.

Good luck in finding them.

⭐︎ ✧ coded by stella_vigo ✧ ⭐︎

raw code

<span style="font-size: 33px; display: block; font-family: Times New Roman; border: 3px solid; border-color: white; width: 85%; margin: auto; background-color: black; text-align: center; letter-spacing: 2.2px; padding: 10px; text-shadow: 3px 3px 2px grey; color: white">*a mystery piece*<span style="font-size: 18px; border: 3px transparent; display: flex; margin-top: 20px;">
<span style="font-size: 55%; display: inline-block; font-family: Times New Roman; border: 3px solid; border-color: white; background-color: black; margin: auto; margin-left: 4%; margin-right: 4%; height: 100px; width: 44%; text-align: left; overflow-y: scroll; padding: 10px; text-shadow: 0px 0px 0px; letter-spacing: 0.8px">You may have noticed
since I returned to practice
a mystery piece
has been on my list.<br>
Ever wondered what it is?<br>
You have heard it
at least a bit
you may wonder
to what do I refer?<br>
It is a guarded secret.<br>
Though I admit
I have spread hints
they are hidden
within what I have written.<br>
Good luck in finding them.
</span>
<span style="font-size: 18px; display: inline-block; border: 3px solid; border-color: white; background-image: url('https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fs-media-cache-ak0.pinimg.com%2Foriginals%2Fb5%2Fd3%2F1b%2Fb5d31bc067002a9f34166be60d419e18.gif&f=1&nofb=1'); background-size: cover; background-position: bottom; margin: auto; margin-right: 4%; margin-left: 4%; height: 100px; width: 44%; padding: 10px"></span></span><span style="font-size: 12px; font-family: Garamond; display: block; margin-top: 18px; margin-bottom: 10px; text-align: center; color: #e08080; letter-spacing: 1.2px; text-shadow: 0px 0px 0px">`⭐︎` ✧ coded by stella_vigo ✧ `⭐︎`</span></span>

Novel_Worm · June 25, 2021, 5:44am

An easy way to analyze raw code instead of searching through raw code (you can also do this for coded threads that don’t provide raw code)
On desktop only, as far as I know.
Right click on the thread, click on “inspect” and a panel should pop up on the side. Scroll down to span and when you hover over it, you can see which part of the thread that code corresponds to. Another side panel beside it will show the tags and their functions and tag editors.
Also, you can personalize these codes for yourself. You can change the color of the text to your own preferences… and so on. Honestly, I think I’m in love with this.

TheMidnightAssassin · June 25, 2021, 12:14pm

You can do that, but some people actually don’t like when you do it. So it’s just easier to respect their privacy by not using the ‘inspect’ option. (Unless it’s my codes, I don’t really care. Some people just aren’t comfortable when you do that:)

Novel_Worm · June 25, 2021, 1:38pm

Ah alright! Can we use it when there’s raw code already provided, tho? It makes it easier on the eyes. Though I understand if not.

Novel_Worm · June 25, 2021, 1:41pm

I’ll be sure to remember that. And I already used those as a reference when deciding a theme for my thread… Yours and @deathinreverie and @stella_vigo’s from this thread. And this thread only.

TheMidnightAssassin · June 25, 2021, 1:44pm

If raw code is available, then it is assumed that the person is comfortable with you looking at it

I’m not sure about @/zeroinfinyx, but I know @/stella_vigo is fine with it. But thank you for being mindful, happy coding!