Tag Archives: Coding

How to sort a list of locations by how close they are to you

One of the things that are most important to me for phase 1 of the state parks app is to have the list of parks be sorted by how far the user is from the park.  After all, Tower Hill State Park might be interesting but if you live 4 hours away, you aren’t likely to give it a visit.  While I know vaguely how I would do that, I do not think that I have actually done that before.  So, let’s figure this out. Continue reading How to sort a list of locations by how close they are to you

How to “get into computers”

Every now and then, I’ll get a question along the lines of “How do I get into computers? Is there somebody willing to train me?”  That isn’t an easy question to this answer.  A lot of people don’t seem to like this answer and some even consider it to be derogatory.  No matter what profession you are trying to get into, there are four main steps. Continue reading How to “get into computers”

Object.seal() vs Object.freeze()

So, you want to protect an object that you created in JavaScript?  With Object.seal() and Object.freeze(), you have two solid options that do slightly different things.  While Object.seal() prevents new properties from being added to the object and marks all existing properties as non-configurable, it still lets you change the values of properties.  Object.freeze() on the other hand prevents new properties from being added to the object, prevents existing properties from being removed, and prevents the values of existing properties from being changed.

Let’s take a look at two examples.

See the Pen
Object.seal() Demo
by Joe Steinbring (@steinbring)
on CodePen.

In the above example, we seal the object on line 14 and then test changing a property, adding a property, and deleting a property.

In the next example, we freeze the object on line 14 and then do the same thing to its properties.

See the Pen
Object.freeze() Demo
by Joe Steinbring (@steinbring)
on CodePen.

You will notice that Object.isSealed() and Object.isFrozen() are also available for testing the objects.

Have a question, comment, concern, etc?  Feel free to drop a comment, below.

 

[ Cover Photo by NOAA on Unsplash ]

Playing with more tabular data

Previously, we looked at ways to display tabular data on a webpage.  Let’s pick up where we left off, but with more data.  The last time, the data was hard-coded into an array.  This time, let’s use Axios to load some fake data from JSONPlaceholder.

See the Pen
Table Pagination – Example 1
by Joe Steinbring (@steinbring)
on CodePen.

Now, we have 200 records instead of just 10.  So far, we aren’t dealing with anything that we haven’t covered before, though.  Let’s see if we can add pagination, now.

See the Pen
Table Pagination – Example 2
by Joe Steinbring (@steinbring)
on CodePen.

In the above example, we added a little “Page X of Y” control to the upper right-hand corner of the page and computed values of paginatedResults, numberOfResults, and lastPage to drive the thing.  There are also values for currentPage and resultsPerPage.  The problem is that if you can’t divide numberOfResults evenly by resultsPerPage, stuff breaks.  Also, if you filter your results, you will get a RangeError: Invalid array length error (because the number of results changes).

So, how do we fix it?  Let’s start by simplifying the example.

See the Pen
Table Pagination – Example 3
by Joe Steinbring (@steinbring)
on CodePen.

In this example, I removed the sorting and querying bits to make what’s going on a little more clear.  I then changed the resultsPerPage from 20 to 15.  With the same 200 results from the api, that makes the number of pages 13.333333.  If we wrap the formula in Math.ceil(), that should round the result up to 14, allowing you to properly show that final page of results.  It should also deal with that RangeError: Invalid array length error.

Let’s bring back in the sorting and querying, now.

See the Pen
Table Pagination – Example 4
by Joe Steinbring (@steinbring)
on CodePen.

Now that pagination is working, I need to find something else to better this table.  Have a suggestion?  Feel free to drop it in the comments, below.

 

[ Cover photo by Markus Spiske on Unsplash ]

Var vs let vs const in JavaScript

The next post in our X vs Y vs Z series is var vs let vs const.  I’ve wanted to cover this for a little while.  Let and const were added to JavaScript with ECMAScript 6.  Var has been around a bit longer.

Var is used to declare a function-scoped or globally-scoped variable.  Var declarations are processed before any code is executed.  Let’s take a look at a quick example.

See the Pen
var example
by Joe Steinbring (@steinbring)
on CodePen.

In the above example, there is a lot going on.

If you click button #1, it shows you the value of pi.  When you click on button #2, it shows you my name.  When you click on button #3, it shows you a sentence based upon the two prior values.  Using button #4 and button #5, you can change the value of pi and my name.  When you click on button #3 again, your changes are reflected in the sentence.  The values in this first example are using var to define them.

Next, let’s look at the same thing but let’s use let instead of var.

See the Pen
let example
by Joe Steinbring (@steinbring)
on CodePen.

This example works exactly the same as the first one.  You can load the values and change them.  Now, let’s see how const works in the same scenario.

See the Pen
const example
by Joe Steinbring (@steinbring)
on CodePen.

Now, defining everything using const makes all of the values immutable.  You can define their initial value but you can’t change their value.  That means that buttons #1, #2, and #3 work fine but #4 and #5 result in errors.

The benefit of using let and const over just var is that you can signal your intentions for the values.  If you have something that shouldn’t change it’s value, use const and you won’t be able to change it’s value.

Now, there is an exception to keep in mind with const and objects.

See the Pen
const object example
by Joe Steinbring (@steinbring)
on CodePen.

In the above example, we are defining me using const but we are later changing it.  You can add properties to a constant object and you can even change the value of what you added.  It’s something to keep in mind.

 

[ Cover photo by Pankaj Patel on Unsplash ]

My Blogging Goals

Back in April, I talked about my 2020 goal to post more substantive, coding-related content on this blog.  Since creating my blog nine years ago, I’ve written almost 930 posts.  So far this year, I’ve written 65 posts with an average word count per post of 167.  Compared to the five posts in 2016, and one post in 2017, I think that I’m doing pretty well.  Compared to the four words per post in 2018 and three words per post in 2019, I’m also doing pretty well with the “substantive” goal.

Since the beginning of the year, I’ve stuck pretty well to a cadence of posting every Thursday and every other Tuesday.  With four months left in the year, I think I should be able to keep this up.  I’m definitely not expecting to keep it up in 2021, though.

So, what am I planning for 2021?  I’m thinking about writing fewer posts but targeting a wider variety of topics (ie Angular, Flutter, Svelt, React, Ember, Polymer, Backbone, Knockout, and Meteor).  I also have a bunch of side-projects in potentia.  I might write fewer blog posts but write more things.  I guess I have some time to figure it out, though.

 

[ Cover photo by Markus Winkler on Unsplash ]

Playing with tabular data

So, you need to show tabular data on a webpage and make it as digestible as possible?  For demo purposes, we are going to look at the top 10 most populous municipalities in Wisconsin.

See the Pen
Table Zebra Striping – Example 1
by Joe Steinbring (@steinbring)
on CodePen.

In the above example, we just have a simple HTML table using tr:nth-child(even) {background-color: #AAC4FF;} to zebra stripe the rows.  It is readable but what if you want to add more municipalities or you want to update the numbers for the 2020 census?  We could put the data into a JavaScript array and use Vue to display it.

See the Pen
Table Zebra Striping – Example 2
by Joe Steinbring (@steinbring)
on CodePen.

You will notice that in addition to using Vue.js to display the data, I also changed the zebra striping to tbody tr:nth-child(odd) { background-color: #AAC4FF; }, so that odd columns are highlighted instead of even columns.  I added tbody before the CSS rule so that the header isn’t included, too.  So, let’s add sorting now that the data is in an array of structs.

See the Pen
Table Sorting
by Joe Steinbring (@steinbring)
on CodePen.

In the second demo, we bound the rows directly to the array.  In this new demo, we are binding to a computed value.  When you click on a column heading, it changes the value of the order and orderBy variables.  The sortedArray computed value then uses the array and order variables to figure out how to display the values to the page.  The next logical step is to add a search box for filtering the data.

See the Pen
Table Filtering
by Joe Steinbring (@steinbring)
on CodePen.

For the above demo, we are adding query and queryBy variables in addition to a queriedResults computed value.

Now, let’s look at a quick, less that useful option for zebra striping the data.

See the Pen
Table Zebra Striping – Example 3
by Joe Steinbring (@steinbring)
on CodePen.

Let me be clear that I do not recommend doing this.  The earlier examples are much better but this is something that can be done.  Since the data is available in JavaScript and we are using Vue.js for the app, we can use v-bind:class to zebra stripe the table.  All you need to do is modify the loop to expose the index of the array and do a modulo operation on the index value.  It is more complicated and a bit unnecessary but kind of neat.

Have a suggestion for where to go from here?

 

[ Cover photo by Mika Baumeister on Unsplash ]

Block vs inline vs inline-block

I’m not sure that this concept is universally understood.  I figured that it is time to take a swing at it.

According to w3schools, a block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).

See the Pen
Block element example
by Joe Steinbring (@steinbring)
on CodePen.

In the above example, there are 4 inner divs contained within 1 outer div.

So, what about inline?  According to w3schools, an inline element does not start on a new line and it only takes up as much width as necessary.

See the Pen
Inline element example
by Joe Steinbring (@steinbring)
on CodePen.

In the above example, there are still 4 inner divs contained within 1 outer div but you’ll notice that it no longer fills 100% of the width.  Instead, it just uses the space that it needs for the content.

So, what about inline-block?  According to w3schools, compared to display: inline, the major difference is that display: inline-block allows to set a width and height on the element.  Also, compared to display: block, the major difference is that display: inline-block does not add a line-break after the element, so the element can sit next to other elements.

See the Pen
Inline-block element example
by Joe Steinbring (@steinbring)
on CodePen.

In the above example, the 4 inner divs still only fill the space that they need to fill but now you can see more of the outer div’s border and there is a right margin to the inner divs.

 

So, let’s try adding padding and margins to the three examples.

 

Block:

See the Pen
Block element example 2
by Joe Steinbring (@steinbring)
on CodePen.

 

Inline:

See the Pen
Inline element example 2
by Joe Steinbring (@steinbring)
on CodePen.

 

Inline-block:

See the Pen
Inline-block element example 2
by Joe Steinbring (@steinbring)
on CodePen.

 

So, to recap a bit …

 

Block elements:

  • Force a line break after the element
  • Is 100% width if it isn’t defined otherwise

Inline elements:

  • Allows elements to sit to their right and left
  • Does not respect widths and heights
  • Does respect right and left margins and padding but not top and bottom

Inline-block elements:

  • Allows elements to sit to their right and left
  • Does respect widths and heights
  • Does respect top and bottom margins and padding

 

Have a question, comment, etc?  Feel free to drop a comment, below.

 

[ Cover photo by William Warby on Unsplash ]

Cookies vs localStorage vs sessionStorage in JavaScript

Back in 2012, I posted How to store JavaScript values persistently, locally (a post that is apparently a bit broken).  I figured that it might be time to revisit the topic.

Let’s start by looking at how to create and read cookies, first.

See the Pen
How to use cookies!
by Joe Steinbring (@steinbring)
on CodePen.

In the above example, we are creating a cookie called “cookieName” and setting it to expire in 365 days.  Cookies have the downside that you can only store 4kb of data per domain and you have to set the expiry manually.

So, let’s look at localStorage, next.

See the Pen
How to use localStorage!
by Joe Steinbring (@steinbring)
on CodePen.

In the above localStorage example, we are creating a localStorage object that’s called “lsName”.  It has the benefit of never expiring and having a capacity of 5mb per domain.

So, what about sessionStorage?

See the Pen
How to use sessionStorage!
by Joe Steinbring (@steinbring)
on CodePen.

In the above sessionStorage example, we are creating an object called “ssName”.  Like localStorage, sessionStorage has a capacity of 5mb per domain.  Unlike localStorage, the object is only available on the tab where the object was created.  As soon as the tab is closed, the object expires.

Local storage and session storage are also referred to as web storage.  Really, the only reason to use cookies instead of web storage is if you are writing for an HTML4-based browser, which would be crazy.

 

[ Cover photo by JOSHUA COLEMAN on Unsplash ]

3 ways to concatenate strings with JavaScript

I genuinely thought that I had covered this topic already.  It appears that the closest that I came was “PHP: Fun with strings” (back in 2014), so let’s do it now?

See the Pen
String concatenation in JavaScript
by Joe Steinbring (@steinbring)
on CodePen.

The three methods that I’m using about are concat(), “[string 1] = [string1] + [string 2]”, and “[string 1] += [string 2]”.  Any of the three should work for you.