Responsive Helpers in Bootstrap 4

I was used to the Boostrap 3 responsive utilities for hiding and showing elements based on the viewport width. However, the syntax completely changed. I found out how the new syntax works through this article on the Medium.

This is the mapping for those used to the Bootstrap 3 syntax.

* `hidden-xs-down` = `d-none d-sm-block`
* `hidden-sm-down` = `d-none d-md-block`
* `hidden-md-down` = `d-none d-lg-block`
* `hidden-lg-down` = `d-none d-xl-block`
* `hidden-xl-down` = `d-none` (always hidden)
* `hidden-xs-up` = `d-none` (always hidden)
* `hidden-sm-up` = `d-sm-none`
* `hidden-md-up` = `d-md-none`
* `hidden-lg-up` = `d-lg-none`
* `hidden-xl-up` = `d-xl-none`
* `hidden-xs` (only) = `d-none d-sm-block` (same as `hidden-xs-down`)
* `hidden-sm` (only) = `d-block d-sm-none d-md-block`
* `hidden-md` (only) = `d-block d-md-none d-lg-block`
* `hidden-lg` (only) = `d-block d-lg-none d-xl-block`
* `hidden-xl` (only) = `d-block d-xl-none`
* `visible-xs` (only) = `d-block d-sm-none`
* `visible-sm` (only) = `d-none d-sm-block d-md-none`
* `visible-md` (only) = `d-none d-md-block d-lg-none`
* `visible-lg` (only) = `d-none d-lg-block d-xl-none`
* `visible-xl` (only) = `d-none d-xl-block`

For more details on how the new syntax works and what you can do with it, check out the Medium article.

Advertisements

Switching Between Ruby Versions on Windows

I had the need to handle multiple Ruby versions on my Windows PC.  I was creating a new Rails app and wanted to use the latest Ruby version, but I also needed to manage apps that used older versions.  Many developers use RVM, but it doesn’t work on Windows – so I needed a different solution.

I found URU and it works great for managing multiple Ruby versions.

I tried installing it by downloading the compressed file and running the executable included, but it didn’t work correctly.  For some reason, it created a new directory, but the directory was empty.

So instead, I used the Scoop method – downloading Scoop and then using it to install URU.

(1) After I installed URU, I added the directory to my PATH (environmental variable) on my PC.

(2) Next, I opened a CMD window, and then specified the bin directories for each Ruby version you want o use.  For example entering this on the cmd line (for each Ruby install):

uru admin add C:\ruby200\bin

(3) Then to switch between Ruby versions you enter the command, including the Ruby version (without periods):

uru 200

This will switch to Ruby 2.0.0.

You can check that you were switched by entering this command to check what version you are using:

ruby -v

The first time that I did this, I just installed the new Ruby version and I received an error telling me that my gemfile specified version 2.4.4, but I was running 2.2.1.  That was weird because when I ran ‘ruby -v’, it told me I was on 2.4.4.

It turns out, I just needed to run ‘bundle install’ to install the gems that were in the app I was trying to run, but not installed for the new Ruby version yet.

For more details on URU commands, you can read this page from the wiki.

Facebook Responsive Embed

This isn’t a Rails post, it’s not even a development post.

I wanted to embed a Facebook post, but I was having trouble making it responsive.  I could have made it responsive using CSS, but I didn’t really want to do that.

I looked at this Stack Overflow question, but I couldn’t get the solution work where you change the embed code to be width:100% and width:auto.  That worked for the width, but the height wasn’t adjusting for me.

What I figured out was if I click to embed and then I go to the advanced settings, I could get it to work by removing the ‘500’ for width (in the settings), and then getting the Javascript code (could not get the iFrame to work).

How to Test Your Facebook App Locally Using HTTPS

Facebook now requires you to use https for your Valid OAuth Redirect URIs for apps.  This is true even when your app is in development mode.

In order to get an https address, you could use a gem like tunnels or tunnelss, but I found using ngrok easier.

To get it to work:

  1. I went to their website and downloaded their program
  2. I extracted the file for the program
  3. In my console, I went into the directory where ngrok was extracted to and entered ‘grok http 3000’ on my Windows machine, other machines may use ‘./grok http 3000’
  4. After entering that, ngrok will provide you an https address which you put into the Valid OAuth Redirect URIs field in Facebook
  5. Once you fire up your server, you should be able to access it using that https address instead of localhost:3000

A Free and Easy Way to Create Responsive Emails

I’ve found a quick and easy way to create responsive emails using Bee Free.  Bee Free offers some templates (or you can build from scratch) that you can use along with their drag and drop editor to create responsive emails.

In their tool you can:

  • use a drag and drop interface
  • export everything to HTML (free)
  • preview in desktop and mobile views
  • send an email to yourself to preview it

I’d highly recommend it if you want to add style to your emails without buying templates.

Abbreviating Numbers in Rails

I needed to abbreviate numbers in Rails so that they were shorter and easier to read.  Rails has a great built in method, number_to_human.  However, I didn’t like how number_to_human displays without any customization.

My main issue was that instead of spelling out the entire number, I just wanted to put a letter abbreviation.  In addition, I didn’t want a space between the number and its text description.

For example, “out of the box”, if you do:

number_to_human(1234)

You will get:

“1.23 Thousand”

Instead, I wanted 1.23K.

Luckily, I found this StackOverflow answer by jdoe.

To format it like this, you just need to add these values to config/locales/en.yml (or whatever you’re using as your 18n locale):

(under "en:")
  number:
    human:
      decimal_units:
        format: "%n%u"
        units:
          unit: ""
          thousand: K
          million: M
          billion: B
          trillion: T
          quadrillion: Q

Make YouTube Videos Responsive

It’s kind of hard for me to believe given Google’s emphasis on making sites responsive, that they haven’t supplied people with an easier way of embedding YouTube videos on responsive sites. Fail.

Nonetheless, there’s workarounds to make the videos responsive by editing your CSS.

OS Training has a simple solution.  They create a wrapper in CSS that makes the embedded video responsive.  All you need to to is add the div class and copy and paste the CSS.