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.

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”