#javascript difference between var and let

to get started, i'm going to assume a basic familiarity with code as a concept, but you don't have to know any javascript. if you've done some intermediate-level html+css, or if you've used something like Scratch, that should be good enough. i'm going to explain everything as we go along

i strongly recommend a computer (or at least something with a physical keyboard) for this, but a phone technically works too

once again, we're going to be using mozilla's playground: https://developer.mozilla.org/en-US/play

> beginner code <

if you've written code before and know about syntax and variables, feel free to skip this section

the first line of code you will want to write is: console.log("Hello, world!");

put this into the box labeled "JavaScript", wait for the page to refresh, and look in the "Console". some text will show up there.

the bit inside the quotation marks is called a "string", and it's how you put text into your program. this is just like using quotation marks in css, or in html attributes. you can change this string to something else, and the computer remembers what you put there, but the computer is dumb and doesn't know anything else about it. it only does exactly what you tell it to do

what we're telling the computer to do is to run "console.log". this is called a "function call". think of a function like a machine (or a factory) that you can put stuff (inputs) into. here, we're putting "Hello, world!" (or "farts") into "the console.log machine". you don't have to know how this works inside, so you can focus your attention on what it does for you. as an analogy, think about how you don't have to know how a recycling plant works, you just have to know that you give them your paper and plastic to be recycled

to call a function, you use () parentheses symbols. if there is more than one input, you separate them with commas (there's only one input here, so we don't have a comma)

at the end of every line, i recommend that you write a ; semicolon. this tells the computer "this step is finished. now we're on to the next step." if you don't tell the computer this, javascript will try to guess where each step ends. it uses some rules to guess, but i can never remember what they are. unless you want the computer to keep guessing what you mean, tell it what you mean explicitly. remember, computers are dumb. you are smart.

finally, one more thing you absolutely need to know before we can do something interesting: variables

when we write the word "let", it tells the computer to create a variable. "let" is an example of a keyword, a word which has special meaning to the computer. (if you've seen older tutorials, they often use "var" instead. the difference between "var" and "let" is very complicated and we won't go over it now, but they both create variables)

a variable is basically a place for the computer to put some information. except, we've stuck a label on it. imagine a box with "x" written on it in sharpie. inside this box, we've put a piece of paper with "Hello, world!" written on it

after creating this variable, the computer moves on to the next step (remember? semicolon ; !). in this next step, we take what's inside the variable "x" and give it to the "console.log" function

except, in the analogy, we actually make a copy of the piece of paper. the box still has another copy inside of it. this is also really complicated (values vs references), and so once again we're going to skip over it for now

in the last line, we add "x" to "x" and then put that into "console.log". in javascript, we can add strings to strings, not just numbers like in math. when we do that, it joins them together. this is why the console shows "Hello, world!Hello, world!"

notice that there isn't a space between the two copies! the computer does exactly what we told it to do, and we didn't tell it to put a space, and so it didn't

> canvas <

we now need to go back to html real quick and add a <canvas> element, like this: <canvas id="canvas" width="400px" height="200px"></canvas>

in the javascript, write this: let canvas = document.getElementById("canvas"); console.log(canvas);

we don't see anything on the page, but the console should show some output like [object HTMLCanvasElement]

what we're doing here is that we took "canvas" and gave it to the "document.getElementById" function. that function gave us back an output, and we put that output into the "canvas" variable

imagine you have an assistant that you ask "please go into the page, and find me the element with id 'canvas' ". this assistant wanders off, rummages around, eventually finds the canvas, and gives it back to you. you don't have to know where or how that happened, you just know that your assistant found what you were looking for

finally finally finally, we're finally getting somewhere! replace the console.log (which we only needed for testing) with this:

let draw = canvas.getContext('2d'); draw.fillRect(10, 10, 20, 30);

we've made a rectangle!

you might be wondering... what on earth was the point of all that? that was so much work, it'd be easier to open mspaint and draw a rectangle by hand!

and you're right! this here is a big problem with learning to code. it takes a ton of work to even get started. the point of code, though, is that computers are really good at doing things repeatedly, very fast, and without getting bored:

this code uses a "for loop", which is a special set of instructions to tell the computer "do this repeatedly"

we're not going to use for loops in the rest of this tutorial, so go look it up on your own!

> saving the output <

i don't know about any other browsers, but at least in firefox on desktop, you can right-click on the canvas to save it as a PNG. it automatically saves with transparency too!

> adding interactivity <

here, we're going to add interactivity to our page. replace the fillRect line with the following code:

canvas.addEventListener("mousemove", (e) => { draw.fillRect(e.x, e.y, 10, 10); })

now, move your mouse over the canvas and watch what happens! (you can't move the mouse if you're on a phone, but you can tap on the canvas to make little squares)

two important concepts that need to be explained here

first of all, when you write something.somethingElse, the "somethingElse" is called a property which belongs to "something"

this means that we're telling the "document" (a variable which magically exists and refers to the whole page) to find ("getElementById") for us the "canvas" element. then we're asking the canvas for the ability to draw 2d. and then we also ask the canvas to add an event listener to detect when the mouse is moving. inside of that (inside the curly braces {} ), we tell "draw" to fill in a rectangle

the second thing is that (e) => { ... } syntax. this is called an arrow function and is one of the ways to create brand-new functions of our own. when the mouse moves, the browser takes information about the mouse (what we've called "e") and calls our function with it. this happens again and again whenever the mouse keeps moving

> bugs, and debugging <

unfortunately, our code currently has a problem (what programmers call "bugs"). if we, for example, add some stuff to the page above the canvas, this happens:

unfortunately, the x and y coordinates that we get from mouse events is relative to the page, not to the element. it was only working correctly before because the canvas was in the corner.

this is okay! don't panic!

we need to copy-paste this code to fix it:

let mouse_x = e.x - e.currentTarget.offsetLeft; let mouse_y = e.y - e.currentTarget.offsetTop; draw.fillRect(mouse_x, mouse_y, 10, 10);

this code subtracts the position of the canvas from the position of the mouse, which gives us the mouse position relative to the canvas

also, in case we don't want to keep all previous squares, we can use clearRect:

by now we've already made two simple programs! a really basic drawing program, and a program where something follows the mouse around

> migrating to neocities <

before we can move on to making the stamp I promised at the beginning, we should put our code on a real web host like neocities. this is because we're going to want to be able to upload our own images

for now, create a new page (or open an existing page for editing). copy the html canvas element into the page, and then (this is really important!) at the end of the page, right before you write </body>, write <script></script>

then copy-paste your javascript between the script tags. it should look like this

now if you view your new page you should see the same square following the mouse cursor. except now it's on your page!

> interactive web stamp <

as promised, something to tie all this together

in your neocities dashboard, upload a stamp base image and an image to draw on top. we're going to be using the following two images here:

it should look something like this in your dashboard

now, inside your html, inside a <div> tag, add two <img> tags to load these images. later on in the javascript we'll use these images

for testing, refresh your page and make sure that the images load

we don't want these images to actually show up like this, but we're required to put them in <img> tags (because the rules say so), so to get around this we add style="display: none" to the div to hide them

now, inside our javascript, we want to use document.getElementById again:

// Get the images we want to draw with let stamp = document.getElementById("stamp"); let shyguy = document.getElementById("shyguy");

we then replace the drawing code with this:

draw.drawImage(stamp, 0, 0); draw.drawImage(shyguy, mouse_x, mouse_y);

and finally, change the canvas size to the usual web stamp size, 99px by 56px

make sure your code looks like this:

now visit your page, and move the mouse around over the canvas! you now have a stamp, but it moves!

> final bug <

right now the stamp appears blank until you move the mouse for the first time. to fix that, we want to draw the images one time when they finish loading. to do that, we add this code:

// Draw the images when the page finishes loading addEventListener("load", () => { draw.drawImage(stamp, 0, 0); draw.drawImage(shyguy, 16, 10) });

and now you have a debugged web stamp!

> going further <

maybe try changing the code to draw the shy guy layer centered around the mouse instead of to the bottom-right

try adding more effects

see if you can figure out how to respond to mouse clicks

don't be afraid to look things up or ask for help! happy hacking!

OVERVIEW

Alright, so what are we even adding? Basically, Masonry is used to display your posts in a nicely laid out grid, even if they're all different sizes. You tell it what your posts are, what you want them to fit into and it'll come up with a nice grid layout for you. Infinite Scroll is used to... infinitely scroll through posts with having to go to another page. It’s the endless scrolling of your Twitter/Instagram/whatever feed.

Now maybe you’ve already got one or the other in your theme and you’re looking to add the other one. Sounds pretty simple, yeah? It kind of is. The trouble is that Masonry and Infinite Scroll interact with each other. When you’re using Infinite Scroll, whenever you scroll down and load more posts, Masonry needs to check whether your post layout is still okay and correct it if it isn't.

PLUGINS

For the sake of this guide not getting too confusing and because they integrate so easily together, we’ll ONLY be using David DeSandro's Masonry and Infinite Scroll Javascript plugins. If you’ve got different versions of these plugins, remove them now as they may cause issues.

First, we need to add the plugins to your theme’s head:

<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script><script src="https://unpkg.com/infinite-scroll@4/dist/infinite-scroll.pkgd.min.js"></script>

HTML

To get Masonry working, we need to know what your posts are and the container that they're in. Give your posts a class (e.g. .post) and your container an id (e.g. #posts). We can also specify additional options, such as column width and spacing between the posts. We want the layout to be responsive, so by following the example code Masonry provides, we'll create post-sizer and gutter-sizer.

To add Infinite Scroll, we need to know what the posts are (same as Masonry) and where to get the new content from - this will be the next page of posts on your blog. Tumblr lets us get that easily using pagination variables. Make sure you give the next page a class (e.g. .pagination__next), since this is where we'll be loading new posts from.

Your HTML might look something like this:

<div id="posts"> <div id="post-sizer"></div> <div id="gutter-sizer"></div> {block:Posts} <div class="post" id="{PostID}"> <div class="post-content"> {block:Text} {/block:Text} </div> </div> {/block:Posts} </div> <p id="footer"> {block:PreviousPage} <a href="{PreviousPage}">« Previous</a> {/block:PreviousPage} {block:NextPage} <a href="{NextPage}" class="pagination__next">Next »</a> {/block:NextPage} <a href="/archive">Archive</a> </p>

CSS

For the styling, we want the layout to be responsive so we'll set post-sizer and gutter-sizer to have a % width. For the rest of the styling, we'll use some of Masonry's example code again.

Your CSS might look something like this:

* { box-sizing: border-box; } #posts { width: 800px; } #posts:after { content: ''; display: block; clear: both; } #post-sizer, .post { width: 32.66%; } #gutter-sizer { width: 1%; } .post { background-color: lightgrey; margin-bottom: 10px; } .post-content { width: 100%; padding: 10px; float: left; }

JAVASCRIPT

In your theme's head, we can create a new script and set up Masonry inside it like this:

<script> window.onload = function() { var elem = document.getElementById('posts'); var msnry = new Masonry(elem, { itemSelector: '.post', percentPosition: true, columnWidth: '#post-sizer', gutter: '#gutter-sizer' }); } </script>

Then to actually get Masonry to generate a layout, we need to call it like this:

msnry.layout();

Usually, that's all you really need for Masonry but for Tumblr posts, any media embeds might take a bit of time to load. For example, Instagram embeds get taller when they're fully loaded (or at least they used to) and this can screw up the layout of your posts. To deal with this, you can add an observer that checks for any changes with media embeds and calculates a new layout if needed:

const embedObserver = new MutationObserver((m, o) => { msnry.layout(); }); embedObserver.observe(document, { childList: true, subtree: true });

Then finally, we need to set up Infinite Scroll. Remember, we're using the same posts that Masonry is changing. Since this plugin is made by the same guy who wrote Masonry, we can integrate it easily using outlayer:

let infScroll = new InfiniteScroll(elem, { path: '.pagination__next', append: '.post', outlayer: msnry });

Every time it loads a new page, it'll update the URL in your address bar. If you want to turn that off, you can add a new line to the previous codeblock, setting history to false:

let infScroll = new InfiniteScroll(elem, { path: '.pagination__next', append: '.post', history: false, outlayer: msnry });

And that should be it! The whole script should be something like this:

<script> window.onload = function() { // INITIALISE MASONRY var elem = document.getElementById('posts'); var msnry = new Masonry(elem, { itemSelector: '.post', percentPosition: true, columnWidth: '#post-sizer', gutter: '#gutter-sizer' }); // CALL MASONRY LAYOUT msnry.layout(); // CALL MASONRY LAYOUT ON EMBED LOAD const embedObserver = new MutationObserver((m, o) => { msnry.layout(); }); embedObserver.observe(document, { childList: true, subtree: true }); // INITIALISE INFINITE SCROLL let infScroll = new InfiniteScroll(elem, { path: '.pagination__next', append: '.post', history: false, outlayer: msnry }); } </script>

FINALLY...

Do keep in mind that your theme code will be different to this, so it's not a case of just copying and pasting everything directly. Remember to remove any old Masonry or Infinite Scroll plugins you already have. Your class and id names will probably be different and you may need to add certain HTML elements if you're missing them. You'll almost certainly need to tweak the styling too.

lets start with the bit that goes into the StoryInterface passage!

<div id="header" onclick="toggle(this)"> <span id="header-text"></span> <div class="menutoggle"><span id="zero"><i class="fa fa-ellipsis-v" aria-hidden="true"></i> </span> <span id="one" style="bottom:-180px;"> <div class="menu-flex"> </div> </span></div> </div>

i've tried to block out the different parts with colours and text styling, hopefully it's a little useful!

all of this is basically contained in one div, even though the menu itself appears at the bottom of screen. that bit is explained through positioning in the css, which we'll get to in a bit!

the bolded bit ( <div id="header" onclick="toggle(this)"> ) is arguably the most important, since this is how the javascript gets called to toggle the menu. specifically, this bit here — onclick="toggle(this)" — which basically says 'when you click on this div, the javascript called "toggle" is going to run on this div.

the orange bit ( <span id="header-text"></span> ) is where the header goes, which in this case is the bit that goes "game title / chapter" and has the little menu. as a side note, there's no actual content in there because i prefer to use the PassageDone function to put the actual values into the page.

the part in pink ( <span id="zero"><i class="fa fa-ellipsis-v" aria-hidden="true"></i> </span> ) is for the menu button, it's mostly a style choice so you don't have to worry too much about it.

the purple part ( <span id="one" style="bottom:-180px;"> ) is where i keep the actual menu. specifically, the style ( style="bottom:-180px;" ) works together with the css to basically hide the menu off-screen until the first div ( the bolded stuff ) is clicked.

the green bit ( <div class="menu-flex"></div> )is where the actual menu goes! same concept applies here with the orange header text, i use PassageDone to store the actual menu values and links so that i don't have to keep going back to fiddle with the interface.

alright, now to the javascript! i basically toss this at the bottom of StoryInterface.

<script>function toggle() { var x = document.getElementById("one"); if (!x.style.bottom ||x.style.bottom === '-180px') { x.style.bottom = '0px'; } else { x.style.bottom = '-180px'; } }</script>

i'm not the best with javascript so there's probably better ways to do this, but it seems to work so !

the orange bit ( toggle() ) is the name of the function. you could probably call it whatever you want, just remember to also change its name in the above onclick part!

the pink bit ( var x = document.getElementById("one"); ) is what specifies what div is going to be selected, basically creating a variable that selects the div element called "one", which in this case is where we have our menu.

the blue stuff is the if/else statement that controls the toggle. it basically goes "if clicked and the menu is hidden (i.e. the bottom margin is -180px), then make the menu visible (i.e. change the bottom margin to 0px, thus putting it at the bottom of the page). otherwise, keep the menu hidden."

from here, we can move to styling! again, this part is mostly just stylistic and uses general css / html knowledge instead of anything too twine-specific. all this goes into the story stylesheet !

.menutoggle #one { box-sizing:border-box; display:block; transition:0.8s; overflow:hidden; position:fixed; left:0; bottom:-180px; background-color:var(--bgblack); border-top:1px solid var(--grey); width:100%; padding:5em; height: 200px; } .menu-flex { display:flex; justify-content: space-evenly; align-items: center; margin:0 auto; width: 100%; max-width: 1000px; flex-wrap:wrap; } .menu-flex a { cursor:pointer; text-decoration:none; color:var(--white); transition:0.4s; } .menu-flex a:hover { color:var(--accent); } .menu-item b { display:block; font-size:0.7em; letter-spacing:0.5em; } .menu-item { font-family:var(--monofont); text-transform:uppercase; font-size:0.7em; line-height:200%; } .menutoggle { display:inline-block; font-size:0.8em; } .menutoggle #zero { cursor:crosshair; transition:0.4s; } #header:hover #zero { color:var(--accent); }

i've bolded the most important bits and put them in red! as you can see, it's mostly in the div called "one", and the rest are mostly stylistic choices.

transition:0.8s; is just here to ensure that the transition is smooth and achieves that sliding effect, instead of the menu simply popping up with no transition.

position:fixed; left:0; bottom:-180px; are what make the menu appear at the bottom of the screen despite the header text appearing at the top. you could play around with positioning as you wish, the same principles pretty much apply everywhere else!

height: 200px; is just a personal preference, i found it easier to work with as compared to using relative measurements such as vh (viewport height). that being said, i do recommend using relative measurements when coding the overall ui because it helps to make the whole thing more responsive to different screen sizes. the little 20px difference between this and the bottom margin helps to have that little grey line at the bottom of the screen, but again, it's up to personal preference so fiddle with the specifics as you wish!

The inevitable happens.  As far as you can tell, you’re minding your own business on your blog.  Your ask box lights up and you perk up, wondering which of your friends is reaching out to you.

Instead, the message is nasty, condemning you for your support of your favorite ship and the theme of your blog.

You’re upset, of course!  And you have every right to be!  You put a lot of time and effort into this blog and your ship, and to have someone so coldly butt in--you can feel the frustration mounting!  Tears are glistening and your body trembles as you type up a strongly worded essay and--

Stop.

It’s okay.

Take a deep breath and step away from your emotions for a minute.  Your emotions are valid-- but so are the sender’s.  

Instead of starting a fight, be kind.  It may hurt.  You may not want to be, but I promise you it’s worth it.  Here’s a template response:

Hi, anon.  I’m really sorry that you feel this way about [thing] and will gladly take it into consideration in the future.  Could you please tell me more about why you dislike [thing]?  If you’d like to take some time to gather your thoughts, I’d be happy to discuss this issue with you.  

Let me confess something.  I don’t suggest this out of pure kindness.  I suggest this because their response will tell you what you need to know.  Remember how the intro talked about how people’s intentions are incredibly hard to figure out?  This is a little trick I like to use to get them to play their cards.  

There are three possible responses:  They respond angrily, they respond kindly and respectfully, or they don’t respond at all.

In the first case, you may get something that resorts to expletives.  They may call you names.  They may tell you to delete your blog or any other amount of nasty things.  It’s very likely that your very attempt at kindness will anger this person!  This is a troll/bully whose sole interest is to get you upset and get themselves attention.  At this point, you can safely delete and ignore the messages without any guilt.  

In the second case, you have a person with a genuine grievance who just happened to address it poorly.  Both of you have a duty to humanity to resolve the problem respectfully and politely.  You’ve avoided escalating the conflict, you may learn something new and you may even make a new friend!

This also applies to reaching out to someone for the first time.  You see someone doing something you don’t like.  Oh, it just makes you blind with rage!

Again.  I’m going to advise you to stop. Take a deep breath.  No one responds well to name-calling and being condemned.  There’s a few techniques you can use (see if you can spot them in the template message):

Listen to their opinions

Actively ask to hear their opinion

Ask for clarification

Validate the way they feel

Avoid casting blame 

(These techniques work a lot in real life, too!)

Again, there are some genuinely scummy people in life!  But, there are many, many more ignorant people.  A gentle pointer goes much further than yelling and screaming.  

4.  Analyzing a Message

We’ve all been there.  We’ve gotten a message and we’ve panicked--do they hate me now?!  Is this a troll message or genuine criticism?!

Again.  Relax.  Push aside your emotions and focus on the logical words as they appear before you.  Ask yourself if you are reading a tone that doesn’t exist.  For example, not everyone puts active thought into choosing between “ok”, “Ok”, “okay”, “Okay”, “ok.” etc.  Sometimes an ok is just that.  An ok.  

Break the message into parts.  Find the logical structures and decipher them piece by piece.  Someone who throws some very hurtful words into a message may indeed have a point, despite coming off as very crude.  Accept that different parts of a message may mean different things.  The world is very complicated and multifaceted.  Try to avoid sticking labels to things.  

5.  Fiction as Fiction VS Fiction as Reality

I’ve seen a lot of arguments floating around recently that seem to think that these two ideas exist in a vacuum.  It’s simply not true.  The ideas are entwined intrinsically--Fiction is both fiction and reality.  Fiction was created to mimic reality yet extend it far beyond what can happen in the confines of reality.  What happens in reality impacts fiction and what happens in fiction impacts reality.  

This is undeniable.  

Both of these ideas exist, and as the author it is your duty to figure out what that means for you.

You cannot hide behind Fiction as Fiction to ignore your responsibilities as an author.

You cannot hide behind Fiction as Reality to promote censorship.  

Both of these ideas are far too simple for the complicated world we live in.  A complicated concept requires complicated solutions.  

Every word you write has an impact on the people that reads it.  This is the very definition of writing.  We use writing as a tool to share emotions.  Extend empathy.  We use writing to make people cry, to make people laugh, to make people angry.  

To deny that this impact exists is to deny what writing is.  

But censorship is not an option.  Censorship prevents these stories from being told, and quite frankly, no one should have the right to decide what story should and shouldn’t be told, regardless of what is in that story.  

What is the solution then?  There is no easy answer. 

6.  The Author’s Duty

When you put words before another human being, it becomes your responsibility as a moral individual to give your best effort into ensuring that those words have a positive impact on the individual.

This doesn’t mean not making them cry.  Or not making them upset.  It means ensuring that the morals you impart on them are sound and logical.  

How one achieves this is up to you.  

In general, tone makes all the difference.  Writing murder in a positive light versus writing murder in a negative light can drastically alter how the audience perceives your scene.  

Empathy, too, can help sway your audience.  If your writing must involve racist police officers stopping a young black man, make sure you delve into how unfair this is, how terrifying it is, how this needs to change.  Do not normalize it.  Do not let it go by without a somber note indicating your awareness of the topic.  

Sometimes, the solution is to simply avoid the issue.  There are certain topics that only some individuals should write about, and that’s just how it is.  This isn’t to say that you can’t write about it, but keep that writing private.  

Most importantly, do your research, and ask for help and keep an open mind.  It’s a grave responsibility and you may not do it right and that’s okay!  Everyone is capable of learning.  Everyone is capable of changing.  

7.  Echo Chambers & Lateral Thinking

An echo chamber is a phenomenon where an individual’s exposure to certain topics becomes self-enforcing because they don’t see, or actively avoid, differing opinions.  

Echo chambers are also exactly what happens when a rift this massive opens in a small community.  

When Orange blocks Green and starts posting about it, all of Orange’s friends decide whether they agree or not.  The overwhelming majority, due to peer pressure, will agree.  Many of them will then block Green and the users directly associated with them.  In retaliation, Green will defend themselves.  Because Orange’s group had already blocked Green, Green’s friends only seen Green’s point of view and will rise in response to the perceived slight.  

What results are two heavily biased groups of users that refuse to communicate with one another and many individuals swept into the mess because they don’t wish to be isolated.   

Even worse, it turns a complicated and multi-faceted issue into a binary issue.  Either you agree with Orange or you agree with Green.  The world is not this simple.  

Instead, I would encourage everyone to practice lateral thinking of their own accord.  I would encourage you to make your own decisions, rather than blindly supporting or condemning the people around you.  Everyone has their own opinions about what is or isn’t okay, and that’s perfectly fine.  Even your closest friends will have different opinions than you.  

8.  Accepting Differing Opinions 

Once you’ve accepted these different opinions (good on you!) what do you do now?  Simply put, the choice is on you!  There’s a few options:

Quietly accept it

Respectfully debate it

Avoid it

Escalate it

The first two are pretty obvious, and the third one is where blocking people and the blacklist comes in.

The fourth one is extreme and only recommended for activities causing active, known, measurable harm to other people.  

This involves actively seeking a legal entity to handle the issue.

Being mean to people on Tumblr is not a solution.  Tumblr is not a place to pursue a justice agenda.  There are bigger issues in the world, and I encourage you to find ways to make a difference that will actually be fruitful.  Donate to charities.  Extend yourself as support to victims.  Contribute to research.  

Changing the mind of strangers on the internet is not a good use of your time.  

9.  Good Intentions (Pave the Road To Hell)

This has been a phrase for a very long time.  

What does it mean?

Well, I’ll offer my own interpretation.  

It means that people often become absorbed with the idea that they are doing the right thing and forget to be mindful of the true consequences of their actions.  

It doesn’t mean to not do good things.  It means that good is relative and not everyone will find your actions good.  It’s important to keep an open mind and realize that just because you think something is good, doesn’t mean everyone agrees.  

10.  Being Mean is Fun (so do it in non-harmful ways)

Yeah.  

It’s okay.  You can admit it.

Being mean is fun!

If it wasn’t fun, people wouldn’t do it!  In fact, this very blog was created because I found that writing the character being mean was very enjoyable and cathartic!  

So, if you find yourself tempted to be mean to people in your life, maybe find another way to get those emotions out.  Hell, people on tumblr just might appreciate you taking up a nasty, villainous character that’ll tear their character up...

People love angst.  You can take this bad thing and twist it into something good.  

11.  Morality (Personal, Community, and Legal)

Bringing this long post to a close, I would like you all to end by thinking about what morality really is.  In particular, I’d like you to think about morality on three different scales:  Your personal morality, the morality of the community you’re in, and morals as described by laws.

You’ll find that these morals don’t overlap.  

Or, at least they shouldn’t. Please revisit section 7.  

Being aware of morality in these three ways may help you determine how to proceed when going forward.

Do I personally agree with this? Does the community I’m in agree with this? Do the laws have anything to say about this? 

None of these are right.  Everything has different morals, and it’s up to you to find the exact opinions that fit you.  

Don’t let people blindly tell you how you should and shouldn’t feel about a topic, and don’t let people bully you into changing your morals to fit into their perceived moral high ground.  

But at the same time, be open.  Extend yourself to new ideas.  If enough people tell you that something is wrong, it just may be time to listen.

Be you.

Be unique.

Be safe.

And above all, be kind.  

Basically, Tumblr supports an API that retrieves published posts and it returns JSON-encoded object. If you have no idea what it means, try to put your blog URL on the browser and add /api/read/json after that and you will see a bunch of formatted code.

There are different methods to make this work. Register your application to get your API key or not. So what is the difference between them? Based on the Tumblr API documentation, each blog also has a unique identifier. The benefits of using a unique identifier instead of a hostname are that the unique identifier will not change if the blog name or custom domain changes. It can be used as a stable, persistent identifier for a blog.

But I prefer not using the method above as it is not suitable for those who are not familiar with registering an app. As I have mentioned above, you can extract the JSON of your blog by using your own URL such as fukuo.tumblr.com/api/read/json.

Part 1: Understanding the structure of JSON

The following code is used for retrieving all posts from a Tumblr blog using jQuery.getScript(). Please run this code somewhere on your code editor such as Brackets, Atom, VSCode etc. Replace yoururl with your own URL.

<script src="https://static.tumblr.com/5ojoydj/Kzyp56cvt/jquery-2.2.0.min.js"></script>    <script>        $(document).ready(function() {            var readData;            var url = "https://yoururl.tumblr.com/api/read/json";           $.getScript(url, function() {                readData = tumblr_api_read;                console.log(readData);            });        });    </script>

If you press Ctrl + Shift + J (on Windows) or Ctrl + Option + J (on Mac) in your Google Chrome browser, it will open the developer console. It is a tool which logs the information associated with a web page, such as JavaScript, network requests, and security errors. For more information please read this article.

As you can see above, those are the structure that plays a big role for us. If you read this documentation on w3schools about JSON. It has its syntax rules:

Data is in name/value pairs

Data is separated by commas

Curly braces hold objects

Square brackets hold arrays

Please read that post for more information. By the way, let’s me explain the code I shared above and how it works:

var readData and var url is a variable

$.getScript() is a shorthand Ajax function to load something from the server using a GET HTTP request. In this case, we will load the url from the variable named

Inside the function, I have set the readData to read the data from JSON. If you, once again, put the https://fukuo.tumblr.com/api/read/json in your browser, you will see the beginning of the code that shows a variable named tumblr_api_read. I try to get all the data from this variable.

console.log has nothing to do with jQuery. It is a common object/method provided by debuggers (including the Chrome debugger and Firebug) that allow a script to log data (or objects in most cases) to the JavaScript console. I use this to see if the code is working or not by showing the data (see gifs above).

Part 2: Creating a div element to store the data and style them

I assume you have understood the basic of HTML and CSS. So here’s the code for you,

HTML: Please insert this code whatever you want, I recommend you to put this into the container of your posts

<div id="wrapper_featured_posts"> <h1>Featured Posts</h1> <div class="inner_featured_posts"> <!-- the posts will appear below using jQuery --> </div> </div>

CSS: Just put this code above </style> tag. You can edit the styling as much as you can!

#wrapper_featured_posts{max-width:1000px;margin:5rem auto;font-family:'Source Sans Pro',sans-serif;font-size:.9em}#wrapper_featured_posts .inner_featured_posts{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:1.5rem}#wrapper_featured_posts .inner_featured_posts>.grid_featured{position:relative;width:auto;height:400px;overflow:hidden;background-color:#fff;border:1px solid rgba(0,0,0,.25)}#wrapper_featured_posts .inner_featured_posts>.grid_featured .body_caption{position:relative;padding:1em 1.5em}#wrapper_featured_posts .inner_featured_posts>.grid_featured h3{font-size:1.5em;padding:1em 1.2em;word-break:break-all;margin:0;background-color:#d43189}#wrapper_featured_posts .inner_featured_posts>.grid_featured h3 a{color:#fff}#wrapper_featured_posts .inner_featured_posts>.grid_featured a{color:#d43189}#wrapper_featured_posts .inner_featured_posts a.tumblr_blog{text-decoration:none;color:#d43189;font-weight:700;margin-bottom:-1.4em}#wrapper_featured_posts .inner_featured_posts>.grid_featured .body_caption blockquote{margin:0}#wrapper_featured_posts .inner_featured_posts>.grid_featured .body_caption h2{font-size:1.2em;margin:.4em 0 0}#wrapper_featured_posts .inner_featured_posts>.grid_featured:after{position:absolute;content:'';width:100%;height:100px;background:linear-gradient(0deg,#fff,rgba(255,255,255,.15));bottom:0;left:0}#wrapper_featured_posts .inner_featured_posts>.grid_featured .btnMore{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);z-index:999;text-decoration:none;display:block;font-size:.85em;background-color:#2c1421;color:#fff!important;padding:.6em 1em;-webkit-border-radius:20px;-moz-border-radius:20px;-ms-border-radius:20px;-o-border-radius:20px;border-radius:20px}

Part 3: Retrieving posts with specific tags

Okay, we have previously got a simple code above to test whether the script is working or not and it works! But how do we make a script to retrieve the posts with a specific tag? The following code is a modified code, put this above </body> tag (please make sure you have included the jQuery library in your blog). Also, see the text I have highlighted below? If you tag your post as "featured", the post will show up. You can replace the tag with your own.

<script src="https://static.tumblr.com/5ojoydj/Kzyp56cvt/jquery-2.2.0.min.js"></script>    <script>        $(document).ready(function() {            var readData, insert;            var url = "https://{Name}.tumblr.com/api/read/json?&tagged=featured";            $.getScript(url, function() {                readData = tumblr_api_read;                console.log(readData);                                /*replace "2" with your desired number.                 please remember that the number starts from zero                 if you want to show 4 featured posts, replace "2" with "3" and so on.                */                for (var i = 0; i <= 2; i++) {                    var posts = readData.posts[i]; /* is equivalent to tumblr_api_read.posts */                    var link = posts["url"]; /* get an url of the posts */                                                                                    /* photo posts */                    var img = posts["photo-url-1280"]; /* get an image url */                    var captionPhotos = posts["photo-caption"]; /* get a caption of the photo/photoset posts */                                        /* text posts */                    var titleText = posts["regular-title"]; /* title of the posts */                    var captionText = posts["regular-body"]; /* body of the posts */                                        /* condition                   if the post type is not photo/photoset posts */                    if (img === undefined) {                        insert = '<div class="grid_featured">';                        insert += '<h3><a href="' + link + '">' + titleText + '</a></h3>';                        insert += '<div class="body_caption">' + captionText + '</div>';                        insert += '<a class="btnMore" href="' + link + '">READ MORE</a>';                        insert += '</div>';                                                $('h3').filter(function () {                         return $(this).text() == 'null';                        }).remove();                        $('.inner_featured_posts').append(insert); /* insert the HTML inside the <div class="featured_posts"></div> */                                          } else {                        insert = '<div class="grid_featured">';                        insert += '<img src="' + img + '">';                        insert += '<div class="body_caption">' + captionPhotos + '</div>';                        insert += '<a class="btnMore" href="' + link + '">READ MORE</a>';                        insert += '</div>';                        $('.inner_featured_posts').append(insert); /* insert the HTML inside the <div class="featured_posts"></div> */                    }                }            });        });    </script>

Explanation: If you see the code above, you must be wondering what posts[”url”] and posts[”photo-caption”] is for. Look at the following structure, they come from the arrays that are written inside square brackets. In my case, I use photo-caption and photo-url-1280 for my photo posts (image and caption)

The same thing to the screenshot below, I get the data from regular-body and regular-title to retrieve the title and the body of the text posts.

Unfortunately, this script only works for photo/photoset posts and text posts. I will try to update the code so that it will support any post type.

Var and let seem very similar at first glance, but they are not truly synonymous. One big difference between the two is that of scope. The var keyword defines a variable globally or locally to an entire function regardless of block scope. By contrast, let allows you to declare variables that are limited in scope to the block, statement, or expression on which it is used. 

To further expand on this, variables declared with var are either function-wide or global and cannot be block-local or loop-local. Var ignores code blocks and so pierces through them. Because var can declare variables globally or inside a function, when the variable’s value is reassigned inside a block later, the original value of var updates. See below for an example:

function() {    var x = 1;    console.log(x) // 1    if(true) {        var x = 2        console.log(x) //2    }    console.log(x) //2 }

On the other hand, since let limits the value of a variable within a block scope, the original value will be left unchanged as illustrated below:

function() {    let x = 1;    console.log(x) // 1    if(true) {        let x = 2        console.log(x) //2    }    console.log(x) // 1 }

Var declarations are also processed at the beginning of a function (or script for globals) unless the definition is in a nested function. This is called hoisting because all var are hoisted or raised to the top of the function. Even if an “if” branch never executes, the var inside it is processed in the beginning of the function. Although these declarations are processed at the start of function execution, assignments are not hoisted and work at the exact place they appear. This means that although all var declarations can be referenced at any place since they are processed at function start, they are undefined until assignment. 

Variables declared with let are not subject to variable hoisting which means they cannot be referenced before the block where initialization of that variable occurs (without receiving a ReferenceError). The variable is in what we call a temporal dead zone from the start of the block until the initialization is processed. Let variables may be reassigned (such as with a counter within a loop), but you can only declare a let variable inside of its scope once. The latter is not true for var which can cause bugs.

Let me say this one more time because it was confusing to me initially: you can update a let variable, but you cannot redeclare it twice in the same scope.

Const is similar to let in that it is block-scoped. With const, the value cannot be reassigned. Unlike var and let, the use of const also requires an initializer which means it cannot be used to declare an empty variable. 

Take a look at this:

const name = 'Player1'; let points = 50; let winner = false; if(points > 40) {   let winner = true }

Although it looks like there is only one winner variable here, there are actually two separate winner variables because they are scoped differently, even though they have the same name. The first winner is scoped to the window but the second one is scoped to the block because it is within the “if” loop. Logging the let variable at the end of this code would return winner as false, but changing let to var would return winner as true because the variable would not be scoped to block, meaning that the original global variable would undergo reassignment because of what’s inside the “if” loop.

The difference between let and const is that const makes a contract that no rebinding will happen. This means you cannot alter a const value by using an assignment operator or a unary or postfix operator (--, ++, etc) without encountering a TypeError exception. The value of const freezes the moment it is declared and cannot be reassigned.

This can also be a bit confusing though, because it is possible to change the properties of a const variable. The object itself is not immutable, but the binding is. 

Wes Bos describes const well when he says that you can think of a const object as a person. A person’s entire identity will never change; it will remain essentially the same. Although your personality could waver, you will still always be you (unless you’re Taylor Swift I guess). Your value cannot be reassigned. However, your properties can be. Your hair color, your job, your sleep schedule, your age, etc. -- those are all subject to change. Your identity isn’t. You can change properties as long as the object base remains the same. That can be illustrated with the following code:

const person = {  name: 'Noey',  age: 22 } person.age = 23

There’s no problem with this, but the entire variable value cannot be changed. 

// fonts dropdown var settingFontstyle = ["Sans-serif", "Serif", "Dyslexic-friendly"]; var settingFontHandler = function () { // cache the jQuery-wrapped <html> element var $passage = $("#passages"); // remove any existing theme class $passage.removeClass("sansserif serif dys"); // switch on the theme name to add the requested theme class switch (settings.fontstyle) { case "Sans-serif": $passage.addClass("sansserif"); break; case "Serif": $passage.addClass("serif"); break; case "Dyslexic-friendly": $passage.addClass("dys"); break; } }; Setting.addList("fontstyle", { label    : "Font style", list     : settingFontstyle, default : "Sans-serif", onInit   : settingFontHandler, onChange : settingFontHandler });

this goes into your story javascript with all the rest of your setting stuff.

it works by adding additional classes (in this case sansserif, serif, and dys) to the #passages div, which lets you style it in css so that it looks a certain way when enabled.

tumblr breaks the indent formatting so ideally, the properly formatted version should look like this:

// mode toggle var settingMode = function () { if (settings.mode) { // is true $("html").addClass("lightmode"); } else { // is false $("html").removeClass("lightmode"); } }; Setting.addToggle("mode", { label    : "Toggle UI Modes", desc    : "Toggle between light and dark modes.", default  : false, onInit   : settingMode, onChange : settingMode });

this also goes in the story javascript to handle the light/dark mode toggles, and works pretty much the same way, except it adds a class to the overall html element instead of just the #passages div.

this particular example just deals with a single toggle between light and dark mode -- you'll have to use the dropdown method as used with the fonts dropdown if you want to do multiple modes.

again it should look something like this once it's formatted:

now that that's out of the way, all that's left is the stylesheet!

you do need a vague understanding of css selectors, though really i just mean you need to know that ".class1 .class2" selects all elements with name2 that is a descendant of an element with name1.

the specific way the css is styled is going to look different for everyone, but here's some of how mine looks for snakeroot:

some useful links:

using custom fonts: 1 & 2