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”

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”

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.

Firefox Extension Development: Context Menu

In this article, I will show you how to create a Firefox extension that adds a custom action to the context menu (right-click menu). Our extension will allow the user to open a link in a new muted tab. The context menu option will appear anytime a user right-clicks on a link.

Continue reading “Firefox Extension Development: Context Menu”

Firefox Extension Development: Storage and Browser Button

In this article I am going to expand on our knowledge of Firefox Extension Development from last article. In that article we looked at content scripts and web requests. If you are new to Firefox Extension Development, I recommend starting there. In this article we will look at using the storage API and adding a browser button with a popup. Our extension will track what domains the user visits and the amount of time they visit them for. Then, it will expose that information in the browser button interface.

Continue reading “Firefox Extension Development: Storage and Browser Button”

Excel Live Currency Exchange Rate with Web Query

If you want to create a table of exchange rates that can be updated live in Excel, you have come to the right place. In this article you will learn how to retrieve exchange rates using a Get & Transform web query, also known as a PowerQuery query. You will also learn how to turn that query into a function that can be used in another query to populate a table of exchange rates.

The API I will use to do this is the currency.com API. You can find the documentation at https://currency.com/api. For a free API I find this is pretty good. There is no need to authenticate yourself to get a rate. More expensive APIs such as XE.com might be of interest if you need to retrieve more niche currency pairs or more recent data.

Continue reading “Excel Live Currency Exchange Rate with Web Query”

Firefox Extension Development: Content Script and HTTP Request

I recently got into Firefox extension development with the WebExtension API. In this tutorial, I will create an example extension that uses a single content script and an XMLHTTPRequest to add duckduckgo result rankings into Google search results. If the result in question appears in duckduckgo results for the same query, an orange box with the position will be placed next to the result. Not insanely useful, but a realistic example to get your feet wet with Firefox extension development.

Screenshot of extension in use, showing Google search results.
Example of extension working. We can see the top result on Google is also the top result on duckduckgo.
Continue reading “Firefox Extension Development: Content Script and HTTP Request”

Import an HTML Table into Excel

In this article, I will show you how to import an HTML table into Excel. This will work for any data from a local HTML file or online URL that is stored in a table. I will import the HTML table in a way that the data can be updated if it changes, which is particularly valuable for online data. This will be done using a Get & Transform Query. As such, this method is only compatible with the Windows version of Microsoft Excel.

Continue reading “Import an HTML Table into Excel”