#javascript difference between let and const

[dioticodes]

how to add masonry and infinite scroll to a tumblr theme

Hi, welcome. If you’re here, it’s because you want to add either Masonry, Infinite Scroll or both to your custom Tumblr theme.

Heads up, this guide requires some familiarity with HTML, CSS and Javascript as you will be editing your current theme and since all themes are different, I can't give step-by-step instructions on how to edit your exact theme.

Also, this post is best viewed on my desktop theme. Blame Tumblr for not supporting Markdown properly.

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.

Feel free to shoot me a message if you need help or want to heckle me about the guide being outdated.

[zilllathegod]

Exploring variable declaration in JavaScript and Python (and GML)

Variable declaration, the most basic method for storing and labeling data for use in expressions. Conceptually it is similar across multiple programming languages but the details of the implementation vary. I am working on a few projects that involve JavaScript, Python, and GML so I wanted to take some time to explore some details about the foundational aspects of the languages, in particular how variables are declared and used.

ES6 (JavaScript)

var

When things were simple, prior to the release of ES6, all JavaScript variables were declared using var

var myVariable = "something";

A variable initialized with var could contain any data structure or type. The variable could also be accessed outside of the block or expression where it was initialized.

function varTest() { //declare and assign x var x = 1; if (true) { //re-declare and re-assign x var x = 2; console.log(x); // 2 } //re-assigned value persist outside of block console.log(x); // 2 }

let

Similar to var, let allows you to assign variables but with a restricted scope. Any assignment or reassignment is contained to the scope of the area where the assignment happened.

function letTest() { //declare and assign x let x = 1; if (true) { //re-declare and re-assign x let x = 2; // different variable console.log(x); // 2 } //re-assigned value DOES NOT persist outside of block console.log(x); // 1 }`

const

Constants, as the name implies are meant to be immutable, I guess. Everywhere I see people saying constants should be used as the new default for declaring variables, which scares me for some reason because it feels like there is less freedom, but then I realize that is the point and I’m just probably being sloppy. They can not be re-assigned so I think using them promotes cleaner assignment and organization. All of the ES6 updates to variable declaration seem to revolve around better scope control so that variables don’t “pollute” the code at the “global” level.

//This function doesn't even work function constTest(arg) { //declare and assign x const x = 1; if (arg === true) { x = 2; console.log(x); } console.log(x); // 1 }

This function doesn’t execute so the interpreter(the browser) is very strict about this.

Also you could initialize variables and not give them values with var and let. This isn’t allowed with const.

var x; let y; //then just assign a value later

Python 3

No declarations in Python just assignments (wow).

myVariable = "something"; print(myVariable); //something

Chain assignments allow for transitive value exchange between variables.

a = b = myVariable = "something" print(b) "something"

Variables can be accessed outside of a block, but if redefined within that block they become block scoped:

x = "awesome" def myfunc(): #x is redefined in the world of this function x = "fantastic" print("Python is " + x) #out here x retains its original value myfunc() print("Python is " + x)

…Unless you use the global keyword, which forces a larger scope-agnostic reassignment of the variables value.

x = "awesome" def myfunc(): global x #variable reassignment happens here x = "fantastic" print("Python is " + x) myfunc() #variable reassignment still works here print("Python is " + x)

GML and JavaScript similarity

In GML, the game maker studio scripting language, variable declaration works like legacy JavaScript with var.

var myLocalVariable = "something";

Something I also found interesting though is how the language handles global variables, which are declared and assigned like this :

global.myGlobalVariable = "something"

It looks like there is a global object that you attach a value to and can access globally. Variable scope in GML is affected by the game development environment that the code is run in, so variable scope is defined by the ability for game instances to access the data in that variable. Local variables, initialized with var can only be accessed by the instance in which they are created but global variables, which seem to just be values added to the global object, are available to all instances. In GML imagining each game instance as its own code block is a good metaphor for how the variable scoping works elsewhere.

GML also has macros which operate similar to constants, in that that are meant to be unchanging and can not be changed once the application is running.

#macro total_items 10 show_debug_message(total_tems) //10 ``` --- There is a lot more to explore here in the realm of scope and typing but I think this was a good exercise for me to understand some of these language foundations.

[pandashoppe]

Tumblr Tag Cloud Tutorial

 I wanted a tag cloud for my personal Tumblr but couldn’t find a good one. There seem to be three main options: Heather Rivers’ which didn’t load for me, drunkonschadenfreude’s which doesn’t link to your tag pages, and Pearl Trees’, but you have to join them to use it. The tutorials I found mostly revolve around using jQuery or require you to host your own Tumblr blog and use PHP or whatever, so I ended up writing my own little script.

I was so happy with it I made a tag cloud generator you can use. The generator is pretty self explanatory. I figured the easiest way to use it would be to stick your blog name and API Key in a form, and there’s some basic customisation for sorting, the minimum tag frequency you want to include in your tag cloud, etc. You essentially copy and paste the code for the generated tag cloud into your page. I’ve put mine in the sidebar. 

However it might not be quite perfect for everyone, so I decided to write a little tutorial so you could stick the code in your own blog and customise it for your own use.

The code is simple and pretty self explanatory, and you can really just copy it and replace the capitalised text with the correct values for you.

What annoyed me about many of the guides/tutorials on the internet that tell you how to make a Tumblr tag cloud is that they tend to use jQuery.. Here I use fetch to fetch your blog posts, which is really easy and straightforward.

         fetch('https://api.tumblr.com/v2/blog/YOURTUMBLRNAME.tumblr.com/posts?api_key=YOURTUMBLRAPIKEY').then(response =>{  

...and now you can probably also see why I’ve made it so you copy and paste the generated HTML on the Tag Cloud Generator instead of the javascript itself - your Tumblr API Key is exposed. I assume that you don’t host your own Tumblr blog and just want to casually stick some code in it. What you can do if you don’t want to keep going to the Tag Cloud Generator is set up a basic HTML file like this on your laptop or phone or whatever and just run it whenever you need to update your tag cloud. Also remember that Tumblr’s imposed a rate limit, so you probably don’t want to just stick the javascript on your page anyway.

Anyway.

After it fetches your blog posts and all is good...

not good

if (response.status != 200) { console.log('error', response.status) return }

good

response.json().then(function(data) { const {posts} = data.response

...it goes through all your posts and pushes all of your tags into a giant array allTags...

const allTags = [] posts.forEach(function (post, index) { allTags.push(...post.tags) })

...and then counts all the unique tags.

const tagCount = allTags.reduce((acc, tag) => { acc[tag] = (acc[tag] || 0)+1 return acc }, {})

Then it sorts your tags, in this case in descending order, but at this point you can sort it in other ways too: in ascending order, randomly, alphabetically, etc.

const sortedTags = Object.keys(tagCount) .map((key) => [key, tagCount[key]]) .sort((a,b) => b[1]-a[1])

This point is probably where you’ll want to customise the most. The tag list is filtered to show only the tags above a minimum number of posts (replace MINIMUMENTRIES with the number you want), but you can also filter it to exclude tags with certain values (eg. if all your text-based posts are tagged as ‘text’ and that isn’t a useful tag for your readers, you can filter out value[0] == ‘text’). 

let fontsize const tagList = sortedTags .filter(value => value[1] > MINIMUMENTRIES)

A common feature of tag clouds is that tags that recur more are often in a bigger, bolder font. I’ve split my own tags into three groups and applied different classes on each: a default ‘middle’ group with an average font size, infrequent tags in a small font and the most used tags in the largest font. Replace UPPERLIMIT and LOWERLIMIT with the values you want, or split the tags into more groups. Then style the classes with css.

.map(value => { if (value[1] > UPPERLIMIT) { fontsize = 'font3' } else if (value[1] < LOWERLIMIT) { fontsize = 'font1' } else { fontsize = 'font2' }

The tag list is then returned as a list, which you can style. I’ve gone for a cluster of tags without line breaks in between each list item.

return '<li><a href=http://YOURTUMBLRNAME.tumblr.com/tagged/'+value[0]+' class='+fontsize+'>'+value[0]+' ['+value[1]+']</a></li>' }) 

Last of all, the tag cloud is wrapped up in an unordered list in a div with the ID tagcloud, and gets written into a div (’#generatedTags’ in this example), but obviously you can write it into whatever div you want, and you could have an ordered list too.

document.getElementById('generatedTags').innerHTML = <div id=tagcloud><ul>"+tagList.join(' ')+"</ul></div>" }) }) }

Don’t forget to call the script!

As you can see in this tutorial the Tumblr API is pretty easy to use. If you have a look at the Tumblr API docs, you’ll see it’s pretty easy to branch off this tag cloud generator example and pimp your blog in other ways with data from the Tumblr API.

Have fun! Feel free to ask me any questions you might have.

View full code here:

[c0de-read-blog]

JavaScript: 3 Ways of Variable Declaration

var

let

const

Before ECMAScript 6 (ES6 or the latest version of the language specification standard), var was the only way way to declare a variable. ES6 has since given us two more options to declare variables: let and const. As a beginner, I was often confused about how and when to use each of these, so I figured I would share my findings in case anyone else found themselves needing clarification.

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. 

To sum it all up, use const when the value of a variable will not be changed. Use let if rebinding will be needed. And try to start phasing out var if you can (but remain aware of scoping differences) since that’s generally been deemed as good practice in ES6.

[airman7com]

javascript difference between two dates in days hours and minutes

javascript difference between two dates in days hours and minutes

Calculate the difference between two dates in days, hours and minutes javascript. In this tutorial, we will explain how to calculate the difference between two dates and get the difference in days, hours, minutes.

When you work with javascript date, time, day methods. So you should also read this javascript date, time, day related posts:

Calculate the difference between two dates in the following

View On WordPress

[airman7com]

javaScript Difference Between Two Dates in Years Months Days

In this javascript Tutorial, Calculate the difference between two dates in years months and days javascript. Here, we will explain how to calculate the difference between two dates and get the difference in years months days.

When you work with javascript year, month, date, day methods. So you should also read this javascript year, month, date, day related posts:

Calculate the difference between…

View On WordPress