How-To:: 2015

Thursday, 24 December 2015

BlackBerry Link El Capitan USB connection unstable

Problem:

My BB10 BlackBerry device won't back up using BlackBerry Link in OS X El Capitan. The USB connection keeps dropping. USB is fine with all of my other devices.

Solution:

Make sure BlackBerry Link is installed, and your Mac has been restarted
Make sure your BlackBerry is plugged into your Mac via USB
Navigate to Apple Logo (top right) -> System Preferences -> Network
At the bottom of the list on the left, click the plus button + (this will add a network interface)
In the "Interface" drop down, note any BlackBerry interfaces that haven't already been added to the list (in the case of this machine, it was "BlackBerry (en4)")
Add the BlackBerry interface, and then hit "Apply"
Open BlackBerry Link, it might ask for your device password and then connect properly
If successful, operations such as backup will now work without dropping

Notes:

This was verified to work using OS X 10.11.2 (El Capitan), a BlackBerry Passport, and BlackBerry Link 1.2.2 (build 32). Your results may vary.

Some operations, such as syncing photos, might not work (i.e. iPhotos has now been replaced by Photos, and syncing photos requires iPhoto; other changes apply).

Additionally, the above steps worked on a machine with a fresh install of BlackBerry Link, and without BlackBerry Blend installed. If the above steps work or do not work with both software installed, please follow the links in the references section for more information.

References:

Monday, 7 December 2015

Snap SVG to whole pixel using CSS

Problem:

In most modern browsers and IE newer than IE9, how do I snap an SVG drawing container to the nearest sub-pixel?

Solution

Use the following CSS, where 'your-svg-container' is replaced by the actual ID or style class of your drawing inside your website.

#your-svg-container {
    /* svg */
    transform: translate(0, 0);
}

Notes:

This SVG style rule appears to work in many modern browsers. It can be useful if a website contains a SVG drawing that has elements that align to whole pixels, such as a grid. If such a drawing lands on a fraction of a pixel, it can appear blurry, depending on the browser's rendering engine.

This blurry alignment can happen when non-pixel alignment techniques are used, such as aligning to units such as em, %, or pt, or using computed alignment such as centered alignment (i.e. your drawing will be blurry upon every odd or even page size).

References:

http://stackoverflow.com/questions/18257132/is-it-possible-to-snap-to-pixel-after-a-css-translate

Monday, 6 April 2015

Export open tabs in Chrome without a plugin (in order to share them with someone)

Problem:

How can I export open Chrome/Chromium tabs in order to share them? I have a bunch of tabs that a friend has opened in Chrome on my computer as part of some research that they were doing, and they would like to have a list of the opened tabs to continue working on their own computer.

Solution:

There are a few ways to share open tabs in Chrome. However, one of the easier ways to do this without a plugin is to simply bookmark all open tabs into a new bookmark folder, edit the saved bookmarks, export the bookmarks to a HTML file, and then share the HTML file. The file can be imported back into Chrome on another computer.

To bookmark all opened tabs, select in the main menu: Bookmarks -> Bookmark All Tabs
To edit the bookmarks: In the Bookmark Manager, create a new folder for the tabs and then edit out the ones you don't want to share
To export (while in the bookmark manager): 1) select a folder, 2) do one of the following (depending on your version of Chrome):
- Click 'organize' (top of the right-hand side of the manager) -> Export Bookmarks to HTML file, or
- Click the gear button -> Export Bookmarks

Importing these bookmarks in Chrome follows a similar process:

(main menu) -> Bookmarks -> Bookmark Manager
Organize -> Import Bookmarks from HTML File

References:

https://support.google.com/chrome/answer/96816#alternate (importing and exporting bookmarks)

Tuesday, 31 March 2015

Insert image using only CSS

Problem:

How can I insert an image using only CSS?

Solution:

While there are many ways to do this, we will discuss one below.

Assuming the following html:



This is an image of an icon <span class="myicon"></span>

We can make the span display an icon using the following CSS for the class "myicon", with the stuff in bold being stuff you'll want to replace:

.myicon {
    display: inline-block; /* or 'block' if not inline */
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background: url("path/to/your/image") no-repeat;
    background-size: 85pt 8.5pt; /* (optional) resize image */
    width: 85pt; /* Width of image */
    height: 8.5pt; /* Height of image */
    padding-left: 85pt; /* Equal to width of new image*/

    margin-left: 2pt; /* optional */
    margin-right: 2pt; /* optional */
}

Notes:

While the situation is not common, there can be cases where designers might only have access to the CSS and not the HTML, with the developer applying the desired class to the span or div for the designer. If yours is one of these situations then this trick can come in handy.

Note that you can also use this trick to add other content by using the 'content' attribute. While this is out of the scope of this post, you can feel free to experiment and see how it goes.

Also note that this trick will only work with CSS3 and beyond (because of the 'box-sizing' attribute).

References:

https://css-tricks.com/replace-the-image-in-an-img-with-css/ (A longer explanation of the above technique, with useful discussion in the comments section.)

Thanks for over 200,000 views!

Thank you for over 200,000 page views!

I'm glad that so many people have found the information in this blog useful :)

As a bonus, here are two Android games that I made which are free as of now. Enjoy!