Convert Large GIFs to Video

For GIFs under 100 MB, there are plenty of free tools around like Convertio that will convert GIF animations to AVI, MPEG, etc. But I'm not talking about HD reaction memes here. I'm helping to process full on NOAA AWIPS radar graphics. The following example is 2015 x 1224 px, and 300 frames long. These GIFs range from 97 to 170 MB, so the free online tools aren't going to cut it right now.

I'll do this manually with:

• GIMP: A free, open source alternative to Photoshop
• A GIMP plugin called Export Layers
• Sony Vegas, or any other video editing platform - even Windows Movie Maker

Download & Install the Plugin

• Download and install GIMP
• Download the Export Layers plugin (zipped)
• Copy the export_layers folder and the export_layers.py Python script file to your home directory:
  
  My Plug-Ins directory is: C:\Program Files\GIMP 2\lib\gimp\2.0\plug-ins but you may need to do some sleuthing depending on your installation, version, etc. If so:
•  Go to Edit > Preferences
• Expand the Folders group
• Select the Plug-Ins preferences to view the Plug-Ins folder locations
• Copy the folder listed along with your software installation location

• Open GIMP (or restart GIMP) and check the File menu for the new Export Layers options

Open a GIF in GIMP

File > Open will load a GIF frame by frame as separate layers, in descending order. The first frame of the animation will be at the bottom, and the last frame will be located up at the top. Conveniently, the layers are automatically named with a frame position, and a frame duration in parentheses. These are helpful in case any frames (especially the first or last frames) are longer than the rest of the frames in the animation.

Export Layers

Now that the Export Layers plug-in is installed, you can immediately export the loaded GIF layers as individual frames.

• Create a new directory to organize these frames separately since it'll only be a temporary intermediate set of files
• Back in gimp choose File > Export Layers
• Now simply choose the new directory that was just created to store these exports. Accept all default settings, and click Export Layers then Export to process the exports

Load Frames in Video Editing Software

• Open your preferred video editing software
• Find the preferences section that handles the default duration of still frames. Set this value to match the general frame rate of the GIF. In the screenshot above, most frames are 50 ms, while only the first and last frame of the animation hang a bit longer to denote the beginning and ending of the radar loop.
  
  In Sony Vegas:
• Options > Preferences
• Editing tab
• Set New still image length (seconds) to 0.05 seconds (50 ms)

In Windows Movie Maker:
• Load all individual frames
• Select all frames (Ctrl+A)
• Navigate to the Edit tab
• Set the Duration to 0.05 seconds

• In Vegas, now Import the frames which will have the duration set by default
• Next, select the first frame and expand it or manually set the Duration value for that individual frame to match the duration listed in its file name. In this example, the first frame hangs for 700 ms (0.7 seconds)

• Repeat this step for the last frame in the animation: 1500 ms (1.5 seconds)

Export

• Export and share as you need

Quick Emoji on Desktop

! When this was first published, Facebook and other apps did not have desktop emoji support. Even now, it's a bit clunky and cramped so this post might still be helpful

I love using emojis on mobile. It's childish, but I entertain myself by posting eleven cry-laughing faces in a row; or any insane flood of emotional responses and random items. I find that it adds a bit of dimension to plain raw text without having to find the exact rage comic or photo to accompany a quick message.

Even my wife sends entire emoticon shopping lists.

On desktop, however, it's annoying to have to Google a set of icons to use for just a casual Facebook interaction. Using Chrome, I created a bookmark and made a short keyword to quickly launch a preferred page of symbols.

Link a Page to a Keyword

I've been using this set of "facebook symbols" because its layout is decent, the emoji organization is similar to my Android, and it automatically copies single selections and it can copy an entire string of emoticons. Something like Emojipedia is not as rapid-user friendly.

• Navigate to Chrome Settings (chrome://settings)
• Scroll down to the Search category and click Manage Search Engines
• Scroll to the bottom the lower box (Other search engines) 
• Type a page title in the Add a new search engine box. Something like Facebook Emojis will do
• Pick a short keyword to launch the page. For my Facebook Emojis page, I entered fbe here
• Finally, paste the URL of the page in the last textbox
• Click Done and close Chrome Settings

Now simply open a new tab (Ctrl+T) and type your keyword to launch the page.

Setup Arduino Print Line / Debug Print / Console Log Messaging

It took me a few extra minutes to figure out why any Serial.println() statements weren't appearing in my Arduino IDE's Serial Monitor. I'm brand new to Arduino coding, but it seemed like if you click the Serial Monitor icon your debug/print line messages should show up there.

For this basic example, I set the Arduino Uno's onboard LED on Pin 13 to blink twice per second, with a println() statement running just after each change of the LED's state. Esssentially:

• Turn on the LED
• Write me a message that says On
• Turn it off
• Write Off
• Etc.

It turns out that I needed to set the channel to communicate with the IDE in code.

Inside void setup(){} add the line Serial.begin(9600); where the value 9600 matches the baud rate in the Serial Monitor.

That's it. It begins writing to the monitor as soon as you upload the sketch and the device resets itself.

There's some more information about the begin() method on the Arduino Language Reference

Problems with Font Awesome Icons

I love Font Awesome, but it's been a pain in the ass for me to work with their icons on my Windows machine using Inkscape. I blame this on Inkscape's buggy text element interface, but I'm happy to use it as a free, open source package.

Anyhow, it's hard to select an icon from the Font Awesome Cheatsheet or from individual icon pages becasue I'm not able to select the icon directly. I end up copying a space character.

I ended up relying on Microsoft word to act as a medium to get access to copying the character:

• Open Word
• Type the Unicode address, for instance f041
• Select the 4-digit code and hit Alt+x to convert the unicode value to its designated character
• Change the font of the unknown character to FontAwesome, then I can finally move on with my life...

Even after I'm able to copy the desired character from Word, Inkscape still doesn't always work since it's a nightmare tying to tell Inkscape to render the character using the FontAwesome font.

Anyway, here are a few things to consider to ease the transition

Download the Latest Font File

If you have any problem, first update to the latest Font Awesome font file:

• Uninstall any current Font Awesome fonts you have installed. Make sure to close any software that's running it including Inkscpae, Gimp, Illustrator, or even Word or Outlook just to be safe
• Go to FontAwesome.io and click the Download button to grab the latest version
• Install the .ttf file and try again

Chrome Won't Let me Select Icons

I found a cool Chrome extension that streamlines the search-copy method.

Download the Font Awesome Icon Picker extension for Chrome for a quick Font Awesome reference. It'll let you easily navigate the catalog of icons, and most importantly, it allows you to directly highlight and copy individual icons.

Since I started using this, I haven't had a problem directly pasting the desired icon directly into Inkscape.

Rapidly Send Encrypted Information via Email

Never send sensitive information through email, or text. This includes passwords, social security numbers, bank account information, maybe even sensitive medical information, etc.

Sometimes you can't chat in person or over the phone to tell someone the information they need, or maybe you just need to send it to yourself for another location. Take a moment to quickly encrypt that data before sending it.

All you really need to encrypt information is a common program called 7-zip. Download and install it from 7-zip.org.

Encrypt your data:

• Create a new text document. A Notepad or Wordpad .txt file is the fastest, but feel free to use Word, Excel, a nice looking template saved as PDF, or anything else
• Write your sensitive data, save the file, and close the document

• Right click on the file, navigate to the 7-zip sub-menu and choose Add to archive

• Enter a password, choose your desired settings, and also check Encrypt file names just for an extra level of security. Click OK to continue

A zipped file with a .7z extension will be created. If a user attempts to open it, they will be prompted for a password. Without the password, file names nor the enclosed content will be able to be viewed, so any enclosed data is safer to send through e-mail, etc.

Create & Embed Custom Icons on Your Web Site

Icons are great. Now more than ever, icons are being used in Web design and mobile application development as referenced font files in place of inline image files. Custom font packs are small, quick, and scalable.

I'm a big fan of Font Awesome Icons and Bootstrap's native glyphs. Their icon packs are simplistic, intuitive, and sleek, so I can usually lean on those folks to help make quick decisions with my design choices. There are plenty of other resources out there as well but these two take care of almost all of my needs.

Recently I had the need to stylize a navigation menu with some icons, but Font Awesome and Bootstrap weren't broad enough to cover the project. I decided to put together a custom font with all the icons I needed.

Create a Custom Font

There are a number of dedicated software you can use to create your own fonts - both free and licensed - but I found that Inkscape (free, open source) works surprisingly well to build the base set of icons. There are a few little tricks but its built-in SVG Font Editor is designed to get the job done.

Build your icons in Inkscape:

Simplicity is preferred. There are a few guidelines to follow here, but feel free to play around with these until you find something that works for you. Let me know if you find better settings:

! Here's a downloadable SVG file that is set up as a template to get you up and running. The page size is set, and it contains a character map and a single icon as reference. Open that directly with Inkscape.

1. The size of your icons seems to work well around 75 pc x 75 pc (1125 x 1125 pixels)
• Go to File > Document Properties. On the Page tab, under Page Size > Custom Size, change the Units to pc (pica), and manually punch in a Width and Height of 75
• Leave the Default units at the top of the dialog set to px (pixels)

2. Place a guide slightly below the lower bound of the page (at -50 pixels). Drag a guideline onto the page then double click it to show the Guideline properties where precise location values can be entered. This will be used to align the icon when setting it as a character. Remember that certain typeface characters can extend below the baseline (g,j,p,q,y, etc.) so the centering is a little wonky when creating a font with icons

3. Be mindful of the difference between lines with thicknesses applied, and polygon shapes. In my process, I found the best results were produced from combining polygon shapes together and using Path Operations (Union, Difference, Intersection, Division, Linked Offset, etc.) to create outlines out of polygons, rather than using a stroke lines with various line thicknesses. The illustration below is how I created the outline for the safety icon. The top line is the correct process:

So the Christmas tree icon isn't an outline. It is now a single polygon with most of the center erased. The negative space is a hole. The fill is black, and there is no stroke on the shape.

4. To ensure all of your elements are indeed polygons with a black fill and no stroke, I recommend performing a Union on all of the elements instead of grouping them together. Errors will be apparent, and the result will be a single element; even if there is negative space separating items

5. Speaking of black and white, fonts do not preserve multiple colors, transparencies, or blurs. I suggest developing the icons in black (or one single color) only so you don't have unexpected results

6. It helps to save your icons in some kind of  key or character map to can quickly find and re-order your icons as necessary

A rough character map of the 9 icons
that were created for this font pack

Add Icons as Font Characters

Once your icons are designed, use Inkscape's SVG Font Editor to assign each icon to a unique letter:

• In Inkscape, navigate to Text > SVG Font Editor
• Under the Font pane on the left, click on font1 to rename your font and hit your Enter key to Apply the name
• Also change the Family Name in the Global Settings tab to your desired font name

• Navigate to the Glyphs tab
• Type abcdefg... in the Preview Text box. This will help confirm that your icons are mapping correctly - a hand full of black (unmapped) boxes should appear for now

• Select your icon and align it to the center of the page, and snap the bottom edge to the guideline that is -50 px below the page

• Back on the SVG Font Editor, click the Add Glyph button
• Slow double click on the Glyph Name glyph 1 and enter your own icon name. For my example, I'll name the icon Overview. Hit Enter to confirm
• Click on that new item to select it - it will turn into a blue bar
• Under the Matching string column, click on the selected glyph item to bring up a hidden text box. Type the lowercase letter a and hit Enter. This will assign the Overview icon to the 'a' character in this font

• Click on that item again to make sure the selection is applied - it should turn blue
• Click on your icon graphic to select it
• In the SVG Font Editor, click the Get curves from selection button. If your graphics are created correctly, your icon should appear in the first black box of your preview. If nothing happenes, go through tips 3 & 4 in the previous section. If all else fails, reply in a comment and I'll do a more in-depth article on creating sufficient polygons for this process

! Note: The icon looks a bit large here, but its layout is correct on my final result

• Save this as an SVG. Even though your icon graphics are moved outside of the page into the character map legend, the SVG file will have all the embeded information on your font characters ready for a conversion to .TTF, etc.

That's pretty much it for this process. To review:

1. Repeat aligning your icon graphic the correct position on the page space
2. Add a new glyph
3. Name and map the glyph to a character
4. Grab the curves from your selected icon

Updating Font Characters

Making updates to the font mapping - changing the order or updating the glyph graphics - is as simple re-mapping graphics to a glyph item in one of three ways:

1. Change the value of the matching string - i.e. enter a different character that will call a glyph

2. Select a glyph, select the updated graphics as aligned on the page, and click Get curves from selection to apply the update

3. Right click the glyph item, choose remove, and Add a new glyph as necessary

Convert SVG to Font File

Finish up by converting the SVG file to a .TTF for use on your computer, and a .woff file for use on the Web or in your applications:

• Navigate to fontconverter.org
• Upload your SVG and choose to ttf - TrueType font as the output format and click Start to convert and download your custom font
• Repeat the previous step, chosing woff - Web Open Font as the output format

! In Windows, right click on the .ttf file and choose Install. Restart any opened programs, and you can use the new custom font in your local applications like Word, Excel, Inkscape, Illustrator, Photoshop, etc.

The .woff file will be referenced by your Web application code in the next step

Embed in a Web Page

Use basic CSS & HTML to embed the icon in a Web page. Here's an example of a menu with the icons displayed using CSS's ::before selector. Unfortunately I'm having a problem referecing a custom font on CodePen, but the code works.

CSS:

1. Reference the font:
@font-face {
  font-family: "Custom Icons";
  src: url("Custom Icons.woff"); /* or .ttf, etc. */
}

2. Call the font in a class selector:

.custom-icon {
  font-family: "Custom Icons";
  -webkit-font-smoothing: antialiased;
}

3. Reference the individual icons

.custom-icon-overview {content: "a";}
.custom-icon-anotherIcon {content: "b";}
/* Etc. */

HTML:

Call the icon as a class in lots of elements. Try the otherwise obsolete <i> tag, similar to FontAwesome

<i class="custom-icon custom-icon-overivew></i>

Automating Password Management

I have a password that I don't particularly need to be super secret, but I don't really want to memorize another password either.

I  put together a script that will automatically copy the password to the clipboard (essentially a Control + C command of text). I threw this into a project folder and I can run the script quickly by double clicking it.

For the sake of slight security, I named the file something boring and unrelated.

Code

from Tkinter import Tk
r = Tk()
r.withdraw()
r.clipboard_clear()
r.clipboard_append('password')
r.destroy()

Setup

• Install Python if it's not already installed
• Copy the code above
• Paste into Notepad or another text editor
• Replace the highlighted password with your own password
• Save as type: All Files (*.*)
• File Name: "SomeFileName.py"
• Wrapping the filename in quotes ensures the file type will be set to .py - a python script file
• Double click on the file to run it. A Python window will briefly open and close automatically
• Navigate to a text area and hit Ctrl+V or use some other paste command