How to Migrate Your Logins from LastPass to Firefox Lockwise

With LastPass limiting their free tier to one device type only on March 16th 2020, I decided it was time for a new password manager. As an avid Firefox user for the past few years, I figured it was natural to migrate over to the Firefox Lockwise solution. With a mobile app that I could browse my logins, the in-browser solution could do everything I was personally using LastPass for. Finding information on how exactly to make the move proved a tad difficult, so I am putting out this article to describe how to migrate your logins and passwords from LastPass to Firefox Lockwise step-by-step!

Continue reading “How to Migrate Your Logins from LastPass to Firefox Lockwise”

Using Canadian Postal Codes to Create a Map in Excel

If you have a list of postal codes and would like to those postal codes to create a map in Excel, you may be disappointed. If the program succeeds at giving you anything at all without the dreaded “Map charts need geographical data such as country/region, state/province, county or postal code.” message, you probably won’t be happy with the output. The message even suggests using postal codes, so why is it so hard to use them? I can’t say, but there is a data adjustment you can make for more satisfactory results.

Continue reading “Using Canadian Postal Codes to Create a Map in Excel”

Save Excel Table to JSON File using VBA and VBA-JSON

While importing JSON files to an Excel Table is easy using a Get and Transform query, going the other way and saving an Excel table as a JSON file is unfortunately not as simple. Luckily, with the code below, it’s easy to save the first Excel table in your sheet as a JSON file.

Continue reading “Save Excel Table to JSON File using VBA and VBA-JSON”

React Native FlatList scrollToIndex Function to Scroll to Item with Index with Fixed or Variable Unknown Row Size

If you are using a FlatList in React Native, there’s a chance you will want to use the scrollToIndex function to scroll to a certain item’s index. Unfortunately, this function is a lot easier to use with fixed item heights where it is easy to implement the required getItemLayout function. For lists where the row size is dynamic and not easy to compute, we need to respond to the failure case and recursively attempt to scroll to the location.

Continue reading “React Native FlatList scrollToIndex Function to Scroll to Item with Index with Fixed or Variable Unknown Row Size”

Example of Using Three.js with Tween.js

This is a quick example of using Create.js’s Tween.js library with Three.js to perform 3D WebGL animations. This library is not to be confused with another one with the same name, although the APIs and concepts are similar. This example simply adds animation and uses Tween.js for the game loop but is otherwise the same as the basic three.js example.

Continue reading “Example of Using Three.js with Tween.js”

Create an HTML 5 Game with Create.js: Flappy Bird Clone

If you’ve ever wanted to create your own HTML 5 game, you have come to the right place. In this article we will create the complete Flappy Bird clone seen above using the Create.js suite of libraries: Easel.js for drawing, Tween.js for motion and Preload.js for asset loading.

Continue reading “Create an HTML 5 Game with Create.js: Flappy Bird Clone”

Excel Import PDF Using Get & Transform Query Connection

Microsoft has introduced a feature in Microsoft Excel 365 that makes it easy to import data from PDFs on your computer or directly from the web. The feature has its quirks but will work for many applications. In this article, I will show you how to check if the feature is available in your version of Excel and import data from a PDF on the web.

Continue reading “Excel Import PDF Using Get & Transform Query Connection”

Excel Import MySQL Table with ODBC Database Query

In this article, you will learn how to import a MySQL Table from the database into an Excel table using an ODBC Database Query. If you are looking to do the reverse and import an Excel table into any SQL database (including MySQL), try my other tutorial here. This tutorial should work on Microsoft Excel 2016 or greater with Microsoft Windows.

Continue reading “Excel Import MySQL Table with ODBC Database Query”

CSS Flexbox Images Responsive Grid Gallery Tutorial

In this tutorial you will learn to create a grid of images using Flexbox. The grid is responsive to changes in browser width.

index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Flexbox Image Grid</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="image-grid">
      <img class="grid-image" src="https://source.unsplash.com/random/320x240" />
      <img class="grid-image" src="https://source.unsplash.com/random/320x240" />
      <img class="grid-image" src="https://source.unsplash.com/random/320x240" />
      <img class="grid-image" src="https://source.unsplash.com/random/320x240" />
      <img class="grid-image" src="https://source.unsplash.com/random/320x240" />
      <img class="grid-image" src="https://source.unsplash.com/random/320x240" />
      <img class="grid-image" src="https://source.unsplash.com/random/320x240" />
      <img class="grid-image" src="https://source.unsplash.com/random/320x240" />
      <img class="grid-image" src="https://source.unsplash.com/random/320x240" />
    </div>
  </body>
</html>

style.css

.image-grid {
  /* Arrange children using flexbox */
  display: flex;
  /* ALlow images to display on multiple lines rather than a single line */
  flex-wrap: wrap;
  /* Container should take up only 90% of the browser, leave 5% space on each side */
  width: 90%;
  /* Center container */
  margin: 0 auto;
}
.grid-image {
  /* images display inline by default and act like text. We want them to act like divs, so display block */
  display: block;
  /* our width setting for mobile, one image per line */
  flex-basis: 100%;
  /* provide some space between our images */
  padding: 10px;
  /* ensure padding doesn't cause images to wrap, it should be within the width rather than in addition */
  box-sizing: border-box;
}

/* increase images per line as browser gets larger using media queries
   this first query makes two images per line at 640px width */
@media only screen and (min-width: 640px) {
  .grid-image {
    flex-basis: 50%;
  }
}

/* three images per line when browser width exceeds 960px */
@media only screen and (min-width: 960px) {
  .grid-image {
    flex-basis: 33.333%;
  }
}

/* four images per line when browser width exceeds 1280px */
@media only screen and (min-width: 1280px) {
  .grid-image {
    flex-basis: 25%;
  }
}

/* five images per line when browser width exceeds 1600px */
@media only screen and (min-width: 1600px) {
  .grid-image {
    flex-basis: 20%;
  }
}

The HTML is simply a div container with a number of image elements arranged using flexbox. Explanations are written as comments for each line of CSS in the above file. Put the two files in the same folder and open index.html up in your browser and you will see the image gallery below!

Screenshot of finished image gallery
Finished gallery.