In this week’s blog post, I want to cover how to center divs inside of other divs horitontally, vertically, and both horizontally and vertically. You can do this with CSS Grid or Flexbox but I want to go over how to do it with standard CSS. Continue reading How to center all of the things in all the other things without CSS Grid or Flexbox
Tag Archives: Coding
What is a CSS Reset?
The goal of a CSS reset is to reduce inconsistencies with things like line height, font sizes, and margins. Every browser defaults to different sizes and spacing and if you set a common baseline, you end up with a better end-product.
A basic example would look like:
body, div, h1,h2, h3, h4, h5, h6, p,ul {
margin: 0;
padding: 0;
}
Andy Bell and Josh W. Comeau have pretty good, pre-packaged CSS resets but the OG might be the one by Eric A. Meyer.
There is an argument that a CSS reset violates DRY (Don’t Repeat Yourself) but a good CSS reset is minified, blindly pasted in, and is common to all of your projects. You might be setting things only set them again later but it will save you time and pain for a minimal cost.
[ Cover photo by Tom Grünbauer on Unsplash ]
Heroku eliminated free plans. Now, what?
Last week, Heroku announced that they were killing off their free teir. I have been using it off and on ever since a creating an OWASP Juice Shop instance on it at That Conference, a few years ago. Recently, I used it for my How to deploy a Laravel app example and an example on Laravel Socialite that I don’t seem to be able to get into a presentable shape.
So, what’s next? You could keep using Heroku and just pay for it. Render still has a free tier and there are a lot ways it is better than Heroku. I have used Cloudflare Workers for some stuff. That is free and works well. If JAMstack is your jam, there is Cloudflare Pages. DigitalOcean Functions has a free alotment (but I don’t understand the pricing terms at all). Google Cloud has a free offering and I hosted this very blog using it for years. I don’t think that I ever paid more than $3/mo for the VM while I was using the service. My employer bought me a Visual Studio Professional subscription that includes a generous monthly Azure credit but even if you don’t have that, Azure has it’s own free offerings.
The big benefit of Heroku was the fact that you could easily run server-side code and attach it to a PostgresSQL database. I liked the ease of installing things like Laravel on Heroku. If you are looking to do that elsewhere there isn’t a great answer (maybe Forge?). If your jam is Node or vanilla PHP, I would say that you should check out Render or Cloudflare Workers.
Like a service that I didn’t meantion? Have an opinion one way or the other? Please drop a comment, below.
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.
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 ]