There’s a handy little tool I’ve been using for so long I’d forgotten it’s not actually a built-in Medium feature. Using IFTTT (If This Than That), I have an automation set up so that whenever I ‘clap’ an article on Medium, that article will be tweeted by my Twitter account.

Here’s the IFTTT applet:

The default format is:

“Recommended read on @Medium: “{{PostTitle}}” {{PostUrl}}”

however you can format it however you like — just adjust the settings for the applet (click on the cog at the top, then edit the ‘tweet text’ at the bottom), and in doing so you’ll…


Want to add Bootstrap 4 to your Rails 5 application? There’s a gem for that! The documentation for the gem we want to use is on its GitHub page here: https://github.com/twbs/bootstrap-rubygem. We’re looking at a GitHub repo… so do we need to clone it, or fork it, or… Nope. None of that. We’re only here because this is where the info is on how to install the gem! We’re only looking at the README.md, and we only want one section of that — the one titled “a. Ruby on Rails”. Here it is below:


Something that took me a good hour or more to figure out in my first Rails project was why my website wasn’t displaying correctly on mobile devices — instead of showing the layout I had implemented for small screen sizes (using Bootstrap), it was acting as though my standard-sized smartphone had the screen size of my Macbook. Turns out, there was just one line of code missing:

<meta name="viewport" content="width=device-width, initial-scale=1">

When using the “get started” Bootstrap code this line is included in the template, however it isn’t automatically added to the application.html.erb file when using some of the more popular Bootstrap gems, such as the one I used.

Easily fixed though — just add the line of code above to the head of your application.html.erb file and your Bootstrap magic is back in action!


Sometimes when creating creating a link_to tag in Rails, we may want to do manipulate the html in our link (the bit that shows on the webpage).

<%= link_to 'Edit Account', edit_user_registration_path, class: "nav-link" %>

Let’s say that in the link_to tag above, we wanted to add a non-breaking space &nbsp; between “Edit” and “Account”, to make sure that they always stay next to each other and don’t break across lines.

As it turns out this is pretty easy, because link_to accepts a block. So we can create our link with a non-breaking space like so:

<%= link_to(edit_user_registration_path) do %>…


Something that plagued me for a while when I first started implementing Bootstrap on my web projects was how to get the navbar to line up nicely, with the brand on the left and the links on the right, like so:


Our prettily centered profile image

Let’s say we have an image that’s a rectangle, and we want to make it appear like the standard circular profile image. Here’s the code for our image:

<img src="/avatar.jpg" alt="avatar" class="profile-pic">

First we put a div around that image tag, so that we can work with it a bit easier:

<div class="image-cropper">
<img src="/avatar.jpg" alt="avatar" class="profile-pic">
</div>

We’ve given it the class “image-cropper” because that’s what the CSS we’re going to add to that div is going to do — crop our image.

Here’s our CSS:

.image-cropper {
width: 100px;
height: 100px;
position: relative;
overflow: hidden;
border-radius: 50%;
}

Bianca Power

Educator at Coder Academy, Sydney

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store