TEF Coding and You: a cursory outline of the coding process (Last Update: 05/01/2017)

WhenDeerAttack's picture

Home | Recent | Map

05/01/2017: Some users were curious about how to create text with an animated fill, so I added some tutorial links to the resources section.

04/17/2017: So it's come to my attention that certain methods outlined here have the potential for misuse. While the TEFc community has proven to be fairly decent, I'd rather not take my chances should the wrong people abuse them. Since these methods were included on the assumption that they were relatively safe and accepted, if lesser known, I thought it best to remove them for the time being. Code safely, my friends!

TEF Coding and You:

A cursory outline of the coding process.


Welcome to TEF Coding and You! This is a step-by-step guide to coding your own layout from scratch. I noticed on the site there’s a lot of code snippets around, but very little info on workflow, or how to get from point a (an idea) to point b (a functional layout). This guide aims to offer guidance to those who may be familiar with basic HTML, CSS, and JS, but still need a little help when it comes to adapting those skills to the TEF site.

My goal for this post is for it to be the kind of guide I would have wanted to read while still figuring out how TEFc worked coding-wise. I WILL NOT be going over the absolute beginner basics of HTML, CSS, and Javascript at length here—there’s just too much to cover. The emphasis on this guide is developing good workflow, what you can do on the TEFc site and how to do it, and some lesser known tricks someone familiar with web design and authoring may be able to do, but still be unsure of how to execute on TEFc due to the way the site works. The final section will contain a number of resources you can check out on you own time, including the basics of HTML, CSS and Javascript. I’m also always open to any questions, so feel free to ask away on my personal blog, skype (firefly_blood@outlook.com), or discord (fireflyblood#2344). With that out of the way, let’s take a look at some common problems you may run into while coding TEF blogs so we’re aware of them right off the bat.

HoneyDiva's picture

nice idea!! love it 8}

nice idea!! love it 8}
Unplugged's picture

Awesomely done! Thank

Awesomely done! Thank you!

I'm not sure if it's me but i'm having trouble clicking on the external links? they don't seem to actually open anything.
WhenDeerAttack's picture

Honeydiva - Glad you like it.

Honeydiva - Glad you like it. <3

Unplugged - You're welcome! And yeah, I think that's my JS--the scroll function is being fussy for Reasons. I open everything with the middle mouse button so I didn't notice it. Should have it fixed in a bit. and done.

I am going to sleep for a very long time, so hopefully nothing else is broken.
Ebony3's picture

WOah! Super helpful -

WOah! Super helpful - tracking so I can find this later
Oh, I'm just a girl, trying to find a place in this world.
Aivilo's picture


Hraeth's picture

this is super great tysm for

this is super great
tysm for getting this all together for us
WhenDeerAttack's picture

No problem.

No problem. <3 I'm glad y'all are finding it helpful.

thank you.

thank you.
Kamaya's picture

Nicely done! Good job!

Nicely done! Good job! c:

Also, just popping in here to warn people to never use [i] for italics if you are using JavaSript or it will get confused and screw things up. I had someone who had troubles with their tabs, turned out they used this way for italics in their bio, preventing the tabs (especially the first one) from working.
WhenDeerAttack's picture

Taurusviridis - You're

Taurusviridis - You're welcome. ^^

Kamaya - Hmm, that's a very odd glitch. I'm pretty sure I used [i] tags in Ed's bio no problem. But then again, I used [].forEach to add the event listener rather than a for loop, which often makes use of a variable called i.

for (i = 0; i < things.length; i++) {
    text += things[i] + "foo"; <--this [i] is probably your culprit.

I'm assuming, if you do get a glitch like that, you could try changing the variable specified. So if you have var i, and your italics are messing it up, try changing it to var q or something. The letter doesn't have to be set in stone!

for (q = 0; q < things.length; q++) {
    text += things[q] + "foo";

Anyway, glad you liked my writeup. Smiling
Kamaya's picture

Thanks, but it was a long

Thanks, but it was a long time ago, I have solved that problem since. XD
I asked them to use <i> instead, or <span style="font-style:italics"></span> like I do.

I knew it was the [i] from the JS codes, that is why I warn people here to be careful with it.
Unplugged's picture

If you use inline code, [ i ]

If you use inline code, [ i ] becomes troublesome since BBCode automatically converts it (into <span style="font-style:italic"></i>). I think if you only used it in external js it shouldn't be an issue. Haven't tried it myself though.
Chizzu's picture

love it

love it
Thais's picture

tracking for later!

tracking for later!
Display pic by crabbycrown ♥
WhenDeerAttack's picture

Beep beep! Coming through

Beep beep! Coming through with a major update! Due to recent happenings, I figured I'd add a section on remotely storing and loading bio updates using JS. Hopefully I've made this section as concise as possible, so even users who aren't familiar with JS can benefit from it.

Let me know if this works for you, and if it doesn't I'll be happy to help out. Happy coding!

tracking! all your css work

all your css work is so beautiful♥
IvyChain's picture

Track, this is lovely

Track, this is lovely
WhenDeerAttack's picture

@postmortem Thank you! It's

@postmortem Thank you! It's taken a long time to get where I'm at when it comes to CSS; I'm glad you like it. <3

@IvyChain Thanks, I hope it's helpful to you!

Hey there. Got an email I can

Hey there. Got an email I can get you at?
WhenDeerAttack's picture

Hey, Uitleger. I'm more

Hey, Uitleger. I'm more active over Skype and Discord to be honest, but if email's your thing you can reach me at . Feel free to get in touch.

Thanks, sent you a note.

Thanks, sent you a note.
WhenDeerAttack's picture

It's been brought to my

It's been brought to my attention that my recent update could be used for more harm than good, so I decided to take it down in case the knowledge falls into the wrong hands. It's all too easy to break things even further while trying to foolproof them, it seems. Sorry for getting everyone all excited over nothing!
FairyClock's picture


Tracking <3
This is great.
My Tumblr


LowLights's picture


T <3
(sorry for the bump)