Kristin Donovan

Currently, I’m in the running for a job in Rochester. I’m super excited about the opportunity and, if I get the job, it will mean relocating. So I thought I’d take a quick break from the technical blogging and do some research into Rochester and some of the things to do in the area. Here’s a few of things I’m super excited to try out:

Watkins Glen State Park

Ok, this isn’t exactly in Rochester, but it’s much closer to Rochester than it is to NYC. I’ve been hiking pretty much all my life and it’s one of my favorite pastimes. Watkins Glen is arguably one of the most famous NY hiking areas and has an abundance of beautiful waterfalls.

It would pretty awesome to be a short drive from the area and be able to go hiking there on the weekends. The gorge trail has been on my list to hike for years, so I’m very much looking forward to crossing it off (even if it might have to wait until spring).

Highland Park

In May, Highland Park hosts a lilac festival. That just sounds awesome (don’t most festivals?).

The 150 acre park also has the Lamberton Conservatory, which is open all year round. It sounds like a lovely park to wander through. Plus, there’s ice skating in the winter, so I’d be just in time for that!

Upstate Vineyards

I recently had the opportunity to visit some vineyards in the Oneonta area and thoroughly enjoyed some good wine. While Oneonta, may not be that close to Rochester, there are a whole bunch of vineyards nearer to Rochester. I just may need to stop by and do a little taste testing.

Strasenburgh Planetarium

OMG. There’s a planetarium. I love planetariums. Well, mostly I love space and all things space-related. They have star shows, laser shows, and news from deep space!

They also have free public telescope viewing every Saturday evening! Plus, they offer adult astronomy lessons, connecting art, science and history. And, as if all of that wasn’t enough already, the offer space mission simulations. I’m already nerding out about this.

Lake Ontario

There’s few things I like better than being on a boat. It’s basically the best. The water under your feet, the wind in your hair, the sound of the waves. I’ve only been fishing once, but it was pretty awesome, so I’m gonna throw fishing in as one of the awesome things you can do on a boat.

Lake Ontario is HUGE. I’m pretty sure I’ll find more than a few opportunities to make it onto a boat.

Niagra Falls

Believe it or not, I’ve lived in NY state for more than 10 years and I’ve never been up to Niagra Falls. Not even once. It’s a shame, I know, especially considering how much I love waterfalls.

Now get this, Niagra Falls is only a hour and a half drive from Rochester. If I move up there, I really won’t have any excuses left.

Canada

Canada’s pretty awesome. The people are nice, the politics are good. Everyone loves a Canadian, right? Well, it’s also just across Lake Ontario from Rochester. I could practically swim there! Practically.

I’ve been to the west side of Canada, but not for many years. I’ve never been to the east side of Canada. It would be an easy weekend trip up over to Toronto or up to Ottawa.

Rochester Museum & Science Center

Okay, this one might be slightly more for kids, but who doesn’t have an inner child? Plus, you can dig for dinosaur “bones”. That’s pretty cool.

In my research, I found a ton of great restaurants, bars, comedy clubs, movie theaters, theater theaters, music halls, etc. All of the things I would expect to find in a sizable city like Rochester. Plus all of the awesome stuff listed above (and more!)

Recently, I’ve been working on a really interesting client project. The project was to take a client’s design file and turn it into a fully functioning fronted template. I had the chance to build out a whole bunch of features that I hadn’t ever built before and my next few blog posts will detail a few of them. Today, I’m going to discuss the custom on-screen keyboard that I built.

When I initially saw the need for an on screen keyboard (the template will be used for a touchscreen application), my first thought was “there’s got to be a plug in for that”. And, I was right. However, I couldn’t find a plug in that looked good, fit with the application, or generally served the needs of the project. So I decided to build my own.

The HTML

The first thing I did was to set up the HTML file.

First, I set up a container to hold both my text area (this is where the user’s input will be displayed) and my keyboard.

Next, I set up my text area, with an id of “write”.

Then, I set up a div with a class of “keyboard-area”. This will, as you might have guessed, hold our keyboard. Inside of this div, I set up four <ul> flex containers to represent the four rows that my keyboard will have. Flex containers are super useful and amazing. I wrote a blog post on them that you can read HERE.

Inside each of my <ul> flex containers are the <li> elements that will be my keys. I’ve given the <li>s the class of “symbol”, which will be key in changing the display character. Inside of each <li> element are two <span> elements, one with a class of “on” and one with a class of “off”. These represent the values that will be displayed on the keys.

In my fourth row, I have a <li> element set up with the additional class of “left-shift”. This will be my toggle button. I want my keyboard to display the alphabet by default and, if the button with the class of left-shift is pressed, display numbers and symbols. If that button is pressed again, I want my alphabet view to display again.

The last line is a <br> element with a style clear. This is not strictly necessary for the keyboard to work, but an element I am using to style the look of the keyboard.

And that is it for the HTML!

The CSS

The next thing I did was to set up the CSS to style the look of my keyboard.

I first set my container element to be 100% of the available space, removed all padding and margin, and set a background color.

Next, I gave some styling to the text area so that it would stretch across 100% of the container, have a white background, and a thin border to make it visible.

For the keyboard area, I removed the padding and margin and set the list-style-type to none.

The flex-container and flex-items take care of centering the keys within the containers. I also added a border to the keys to make them more visible.

I also added a box-shadow to the keyboard container to distinguish it from the text-area.

You can, obviously, style the keyboard whichever way you think looks best.

The JQuery

Here’s where the real magic happens!

The keyboard is one function. First, I set a variable and set it equal to write area. I also set up a shift variable and set it equal to false.

Next, I place a click function on each keyboard key. This is how we select the key and character to write. Next, we check to see if the selected key is the shift key. If it is, we toggle the span class.

If it is the delete key, we delete the last value off of the write area string.

Next, if the key has a class of symbol, we set the variable character equal to the visible symbol. If the key has a class of space, we add a space character.

The last thing we do is write the value of each character to our text-area.

And voila! We have a working keyboard! The great thing about this on screen keyboard is that it works in tandem with an actual keyboard. This means that the user can type on the on screen keyboard OR on their physical keyboard.

I’ve been doing a bit of front end work recently and working heavily in CSS (and HTML. and JavaScript.) In the course of some projects, I’ve run across examples of things I’m trying to do, done with SASS. I’ve used SASS to an extent, but am certainly not as comfortable working in it as I am in pure CSS. I thought I’d look into SASS a little more and get comfortable with the uncomfortable.

Let’s start with some basics

SASS is compatible with all versions of CSS. This is important when using CSS libraries or other features that may need to be compatible.

Before you can start using SASS, you need to set it up on your project. You can get started using SASS either through an application or through the command line. Check out the instructions here to get started!

Why use SASS?

CSS on its own can be super powerful, but the larger or more complex your layout gets, the larger and more complex your stylesheets become. Even simple layouts can have a few hundred lines of CSS styling and can be difficult to maintain. This is where SASS comes in. SASS has a preprocessor that lets you use features that don’t exist in CSS yet. Things like variables, nesting, mixing, inheritance, etc. that make writing CSS simpler and easier to maintain and manage.

Did you say Variables?

Yup.

As in most programming languages, variables in SASS are a way to store information that you want to reuse. Instead of reusing the variable in your application, however, you are reusing it in your stylesheet. You can store any CSS value that may be use more than once, such as colors, fonts, etc. The ‘$’ symbol is used to make something a variable. When the SASS is processed, it takes the variables that have been defined and outputs normal CSS with our variable values in place.

What about Nesting?

The first thing to know about nesting is to be careful. Overly nested rules will result in CSS that could be hard to maintain. It is generally considered a bad practice.

Warnings aside, nesting allows for the same clear visual hierarchy that HTML uses to be used in CSS. Nesting is a great way to organize your CSS and make it more readable.

And Mixins?

A mixin groups CSS declarations that you may want to reuse throughout your application. A prime example of a mixin is for vendor prefixes: instead of writing out -webkit, -moz, -ms, etc., you can set write it out once as a mixin and reuse that mixin throughout the application. Creating a mixin is easy; you simply use the @mixin directive and give it a name. Once the mixin is created, you can then use it as a CSS declaration starting with @include and the name of the mixin. You can even pass a variable as the value to make the mixin more dynamic!

What’s that inheritance you mentioned?

In programming, we talk about having DRY code, well, a lot. If you’re not familiar, DRY means Don’t Repeat Yourself. We take great pains to reuse, not repeat, code snippets. But when it comes to CSS, we repeat often and that is not very DRY. In SASS, we can use @extend to share a set of CSS properties from one selector to another. We can write out our properties once and @extend them to other selectors. It helps you avoid have to write multiple class names on HTML elements as well!

One last thing, Operators.

Why would we want to do math in CSS? Responsive templates are the norm these days — websites need to be viewable on computers, tablets, phones, etc. In CSS, we have a few ways of making things responsive. We can use percentage values, such as setting a width to be 100%. In CSS3, we also have access to view height and view width values, so we can set something to be 100% of the view-width.

SASS has the standard operators: +, -, /, *, and %. We can use these to calculate the width and/or height that specific objects should take up on our screen. One thing we can do with operations is take a pixel value and convert it to a percentage without much hassle. For example, if we have a div with a fixed width, we can define the fixed space that elements with that div should take up. If we use operators, SASS will then convert those fixed pixel amounts to percentages.

Conclusion

Let’s talk scope in JavaScript. New to ES6 (or ECMAScript2015 or whatever it’s being called these days) are the variable declaratives let and const. We can still use var, which we’ve always used, but let and const give us some different scoping options.

So what are the differences?

1. Var can be redefined or updated. You can redeclare a new var with the same name and JavaScript won’t have any issue with that.

2. Var variables are function scoped. This means that the variables are only available within the function in which they are called.

3. If called outside of a function, var variables are globally scoped, which means they are available in the entire window. Generally, you want to keep your variable declarations inside of functions.

4. Let and Const are block scoped, which means they are available through the entire block of code in which they are called. In JavaScript, anytime you see curly braces, { <- these are curly braces -> }, that’s a block.

Functions are also blocks, let and const are still going to be scoped to a function, but let and const will be scoped to the closest set of curly braces.

5. Let and Const can only be declared once.

So, are Let and Const the same then?

Nope. Here are some ways they are different:

1. While let and const can both only be declared once, let values can be updated. Const variables cannot be updated.

2. Properties of a const variables can be changed, however, the entire variable cannot be reassigned. For example:

In the above code, I may want to update some of the properties, but I would never reassign the entire variable.

If you DO want to make everything unchangeable, we have the option to freeze it. 

This isn’t new in ES6, but it is useful to know about.

How much deeper can we go?

What is Flexbox?

The Flexbox Layout is intended to provide an efficient way to lay out, align, and distribute space among items in a container, even in the case where the element’s size is unknown and/or dynamic.

A flex container expands or contracts items to fill the available free space. The idea is to give the container the ability to alter the size of it’s items to best fill the available space within the container. It’s great for responsive design that accommodates all kinds of display devices and screen sizes.

Why not use a Grid?

The Grid layout is intended for larger scale layouts. It works well for these and is an industry standard. The Flexbox layout is more appropriate for components of an application and for small-scale layouts.

An important distinction is that Flexbox layout is direction-agnostic, which means that it is neither vertically-based (block) or horizontally-based (inline). While direction-specific layouts work well for pages, they lack flexibility (pun definitely intended). When it comes to orientation changing (think, rotating your phone screen), resizing, stretching, shrinking, etc., it is easier to support with Flexbox.

Terminology

Parent Properties (container)

Display: This defines a flex container. It can be inline or block depending on the given value. All direct children of this element with have a flex context.

Flex-direction: This defines the direction that the flex items are placed in the container (horizontal or vertical). While there is optional wrapping, Flexbox is primarily a single-direction layout.

Flex-wrap: This defines a wrap property for the container. By default, Flexbox will try to fit all items onto one line. The flex-wrap property allows you to add a wrap to override the default behavior.

Justify-content: This defines the items’ alignment along the main axis. It has some control over the alignment of items when the overflow and helps to distribute extra free space left over when all the items have either reached their maximum size or are inflexible.

Align-items: This defines the flex items’ alignment along the cross axis. The cross axis is perpendicular to the main access (laid out with justify-content).

Align-content: Similar to how justify-content aligns individual items along the main axis, align-content defines the container’s lines when there is space available in the cross axis.

Children Properties (items)

Order: The order of flex items is laid out in the source order by default. The order property controls the order in which items appear in the container.

Flex-grow: This defines the behavior for a flex item to grow if necessary. It accepts a proportional value that dictates what amount of available space the items should take up inside of the container. If all items have flex-grow set to 1, the remaining space with equally distributed to all children. If one item has a value of 2, the available space would attempt take up twice the space of the other items.

Flex-shrink: This defines the behavior for a flex item to shrink if necessary. As you’d expect, it is flex-grow in reverse.

Flex-basis: This defines the default size of an element. It can be a defined numerical length (e.g. 50%, 2em, etc.) or a keyword.

Keywords:

Auto: looks at the width or height property

Content: size is based on the items content (also, min-content, max-content, fit-content)

Flex: This shorthand for the combination of flex-grow, flex-shrink and flex-basis, defined above.

Align-self: This allows the specified alignment (align-items) or default alignment to be overridden for individual flex items.

To view an example of some styling done with Flexbox, please click here. I have set up a navigation bar and some box items. To view the code for the example, please click here.

Browser Support

In my last two posts, I set up a basic contact form application (here) and went through a few steps to improving the security on it (here). I also promised to write about some gems that you can use for security, so here we are!

FIGARO

Environment variables are a great way to store private data, especially when your project is publicly hosted on Github (or another such site).

Figaro configures Rails apps to keep private information (such as Stripe credentials or email log ins) private. It provides a generator that creates a file, config/application.yml. Figaro also adds this file to your .gitignore.

You can then add your environment variables to the yml file in the following format:

GMAIL_EMAIL: [email protected]

You can now use these variables in your environment files, such as production.rb. You can call them like so:

ENV[‘GMAIL_EMAIL’]

Figaro is compatable with Heroku, so if you are deploying to Heroku, you don’t need to do anything additional. You can set your production variables on Heroku as normal.

DEVISE

Devise is a gem used for authentication for Rails applications. It provides many features and can be configured to meet almost all requirements. Devise is built on top of Warden, a Rack application, which means that it runs a separate and standalone module. It is almost always executed before the chief Rails application is invoked. Warden does the cookie handling that verifies the identity of the a logged in user. It uses a secure session string, where the primary key of a particular user is stored and disguised, to do this. It also provides a way for your app to deal with users who aren’t logged in. Depending on your sign in/sign up pages, users who are not logged in will have either restricted access or no access at all until they log in.

What Warden doesn’t handle is your Rails app. It does not provide any helper methods, controller classes, views, configuration options, or log in failure handling. This is where Devise steps in.

Devise mostly interacts with Warden using Strategies (a design pattern where an algorithm is encapsulated within a dedicated class and implements a method with a commonly shared name). The Strategies that Devise uses are for email confirmations, encrypting passwords, and HTTP Authentication. You can implement a customized Strategy to extend Devise.

For more information on the implementation of Devise, check out the github repo: https://github.com/plataformatec/devise

VULNERABILITY SCANNERS

BRAKEMAN

Brakeman Scanner is a staple of every Rails security audit that includes static code analysis. It supports many different security notifications and can be run either as a comannad line app or a Ruby library inside your project.

BUNDLER-AUDIT https://github.com/rubysec/bundler-audit

Bundler-audit is used for securing your gemfile. It checks for vulnerable gems versions in Gemfile.lock, insecure gem sources, allows for ignoring certain advisories that have been manually worked around and prints advisory information.

RACK::ATTACK

Rack::attack is a rack middleware that protects your web app from malicious clients. It allows safelisting, blacklisting, throttling, and tracking based on arbitrary properties of the request. It’s useful for a basic defense against DDoS attacks and limiting brute force options when trying to target form inputs on sign up and other critical pages.

TARANTULA

From the documentation: “Tarantula is a big fuzzy spider. It crawls your Rails 2.3 and 3.x applications, fuzzing data to see what breaks.” What it actually is, is a website crawler that tests your Rails app for input validation that results in SQL or XSS injections.

FIND MASS ASSIGNMENT https://github.com/mhartl/find_mass_assignment

Find Mass Assignment is a Rake task that finds likely mass assignment problems in Rails projects. It scans the controllers for likely mass assignment and then finds the corresponding models that don’t have attr_accessors defined.

ALPACA

With Alpaca, developers can quickly and easily configure and manage a safelist and/or blacklist. Safelisting and blacklisting can be done on the global level, controller-level via before_filter, and per-action at the controller level.

In my last post, I set up a basic mail sending application. (Read that post here). While setting up the application, I had some security issues that I knew about and promised to fix in my next post. So, here we go!

Sensitive Information

First, we need to identify the sensitive information in our application. In my original SMTP settings, I was providing my actual email and password as the user_name and password. The code works, but it is super insecure! I don’t want to share my email and password with the world.

Let’s move that information into a .yml file.

I am going to create a file, app/config/application.yml where I can set some environmental variables, like so:

NOTE: It is convention to name environment variables in ALL CAPS.

Now, let’s use the variables in our SMTP settings:

Don’t forget to exclude your .yml file from your repo! Go to your .gitignore file and add:

Now, let’s make sure that the environment variables get loaded. In config/application.rb, add the following lines of code:

This tells the application to load locally stored environment variables.

NOTE: Locally store environment variables are exactly what they sound like — locally stored! Because we’ve added these to the gitignore file, anyone who clones or downloads your repo won’t have access. If you are working with a group or partner, you will each need to set up your own environment variables. You will also need to set production variables when you push your code to production. Check out my post on Heroku commands for the steps on Heroku!

Gems

Currently, I’m working on a client project for a yoga instructor in upstate NY. The client asked me to build out a contact page so that potential clients could email her without having her email up on the website. I’ve seen tons of these on various websites and thought ‘this shouldn’t be too hard’. So I started building it out and found that I got it working great in development, but when I deployed to Heroku, it wasn’t working. After MUCH troubleshooting (and StackOverflowing), I still hadn’t figured out the problem.

So, I decided to step outside of my application and a build a sample app of just a contact page. Without the noise of the rest of my program, I thought I might figure out the issue and in the process, decided to share my step by step guide to creating a contact page.

First, the SMTP settings.

One thing I am not going to do in this post is go over how to set up a mail server. I am using google to manage the email. I am building this application using Rails 5.

Back to the SMTP settings.

There are lots of possible configurations for the settings. Click here for the official Action Mailer documentation. These are the settings I am going with:

I have chosen to put my SMTP settings in config/application.rb. Alternatively, I could set different settings in development/production environments. Since this is a sample application, I’m going to keep everything in config/application.rb.

Since this application is in development, my default_url_options are set to “host: Localhost:3000” — in production, this would change to “host: MYDOMAIN.com”.

Next, Creating My Model

I generated a new model (rails g model Message) and set my attr_accessors. My email form will have fields for “name”, “email”, “content” (aka the body of the message), and “subject”. I also validate the presence of all fields. An error will be returned if any of the required fields are left empty.

Some other validations I might consider adding: that the email is in a valid email format or that the fields don’t surpass a specified number of characters. You can add validations for just about anything you might want to check for.

Next, Creating My Mailer

I generated a new mailer (rails g Message Mailer) and set some options.

I have chosen a default “from” and “to” — these settings can be different. I have chosen for them to be the same so that my mail is being sent from me, to me. I will handle the sender’s email and such in my actual email message. For now, this works better for me, as the current level of security on the application means that I need to set google to accept less secure apps. I will revisit the security issues in another post.

My method, send_message, takes in the argument of a message and sets the subject of each mail to be “Message from NAME” where NAME is the name submitted in the form.

Next, Creating a Mail Template

This is how your mail will look to the receiver. My mail template is SUPER basic because it doesn’t make sense for me to spend a lot of time styling a mail template for a sample application. You can make it beautiful (you SHOULD make it beautiful).

This template will go in views/message_mailer/send_message.text.erb.

Next, Creating the Message Controller

One of Rails’ core concepts is convention over configuration. For this reason, it is important that we setup our controller to be RESTful. I generated a controller (rails g controller Messages), which generates my messages controller and views/messages folder.

Here is the code for the controller:

Let’s break it down.

First, we have our new method, which will render our messages/new form (we haven’t set this up yet).

Next, we have our create method, which will create and send our message. The message uses our message_params (defined in our private method — this tells the application which params are permitted) to create a new message. Then it checks if the message is valid.

If it the message is valid, it sends the message and redirects to our root path. If the message is not valid (say, because it is missing a required field, for instance), it will re-render the form.

NOTE: this is super basic. Maybe you add some alert messages to notify the sender if the message has been sent successfully or of any errors that have prevented it. I am not going to set that up right now, but it would be a good idea.

Next, Creating the Routes

Here I set my root path equal to the messages#new action of my messages controller. I did this because I don’t have any other pages in this sample application. Set your root page wherever you’d like.

Next, I use resources to draw my messages routes. I limited the routes to “new” and “create” because those are the only routes that we will need to use.

You could also use “resources :messages”, but this will create a full set of RESTful routes (new, create, edit, update, destroy, show, index), most of which will be unused.

Last, Creating the Form

The form will go in views/messages/new.html.erb

Again, my form is pretty basic. I haven’t added any special styling or made it pretty in any way. You should absolutely do that for your own. Chances are, you’re using bootstrap or something similar, which will take care of that.

That’s it!

Run a rails server and try it out!

Debugging

Don’t forget to include your debugger of choice in your Gemfile. I prefer using Pry.

Also, because we haven’t addressed application security — make sure you aren’t pushing your actual credentials to Github (this would be in the SMTP settings above “user_name” and “password”) and make sure that the email you are sending from has their allowances set to allow less-secure apps.

Recently, on a job interview, I was asked to describe the difference between passing by reference and passing by value. Unfortunately for me, I could not think of the answer (I guess the lightbulb in my brain wasn’t screwed in right). Of course, as soon as it was explained, the lightbulb turned on. So I decided to write a blog post on it to further solidify the knowledge in the recesses of my brain.

What IS passing by reference?

Passing by reference is a way to pass an argument to a function. It means that the parameter of the called function will be the same as the argument passed to it. This means that we are not passing the value of the variable to the function, but the variable itself. Changes made to the variable will change the argument passed into the function.

What about passing by value?

Passing by value is another way to pass an argument to a function. It means that the parameter of the called function will be a copy of the passed argument. This means that we are passing the value of the variable to the function, not the variable itself. Changes to the variable will change the value of the parameter in in the called function.

What’s the difference?

Essentially, when you are passing by reference, you are passing a pointer to the variable. When you pass by value, you are passing a copy of the variable. Passing by reference means that changes to the variable will be seen by the calling method, but changes won’t be seen when passing by value because changes to the variable will not make changes to the copy.

Use in Languages

C is pass by value only, but those values are allowed to be pointers C++ and Pascal allow both pass by reference and pass by value Fortran is pass by value only

Most modern programming languages (including, but not limited to, Ruby, Java, JavaScript, Python, and PHP) do something a little more complicated -- they pass primitive data types by value and class types by reference. There is some debate about whether or not what they are doing is really passing by reference, however, the key points are the same:

At this point in our course, we’ve all put a couple of apps up on the web using Heroku. While Heroku is a mostly awesome way to quickly and easily put apps up on the internet, sometimes our code acts differently on Heroku than it does on our LocalHost. The following are some of the Heroku Toolbelt CLI commands to help you debug and get your apps working properly!

Basic Set Up

First steps - install the Heroku Toolbelt (if you haven’t already) here; you can verify your toolbelt installation using

Make sure that the path to the heroku command can not be a Ruby gem directory. Uninstall heroku and reinstall outside of the Ruby gem directory.

The first time you log into Heroku, you will need to log in on the command line:

After the first time, your email address and an API token will be saved to ~/.netrc for future use (you don’t need to sign in every time you want to run Heroku commands!)

Push your app to Heroku:

Running Rake Commands

With Heroku run rake, you can pass Rake arguments, run multiple tasks, and pass variables just like you can on your local host.

To check the version of your database:

Migrate database:

To migrate the database to a specific version with backtraces:

Seed database:

After running a migration, you need to restart your app with ‘heroku restart’ to reload the schema and any changes.

Limitations

Not all Rake commands are supported on heroku - for example, there is no db:reset or db:drop. However, you can run

This will drop everything from your database -- be careful! Any information that has been persisted will be erased.

Renaming Your App

Renaming your application will take effect immediately and your app will be available at newname.herokuapp.com and unavailable at oldname.herokuapp.com. Custom domains(see below) that use these subdomains will need to be updated.

Defining Custom Domains

By default, apps are available at their heroku domains (yourapp.herokuapp.com). You can also make apps accessible via one or more non-Heroku domain names. You can add custom domains to your application like this:

1. Get a domain name (obvi) 2. Add the custom domain name to your Heroku app using one or more of the commands outlined below these steps 3. Look up the Heroku-supplied DNS Target for the custom domain 4. Configure your app’s DNS provider to point to the Heroku-supplied DNS target 5. Test that your app is accessible via the custom domain. Note: there may be a time delay between setting up your domain and your app being available via your custom domain.

View existing domains:

Add a custom root domain:

Add a custom domain with a subdomain:

Add a custom wildcard domain:

Confirm that your DNS is configured correctly:

Remove a customer domain:

Create a Shell Environment

You can create a shell environment for your app with:

This starts a new dyno separate from the one(s) serving your web data. Your database and files will be the same, but you won’t interact with any other dynos and any changes you make in this dyno will not affect the other dynos. It is useful for exploring the file system and shell environment of your app.

You can start a console by running:

Set Secret keys on Heroku using Figaro

Sets your secret keys to available for use in your heroku app:

All the Heroku Commands!

$ heroku help will display the following additional options:

$ heroku addons : view and manage current app add-on resources $ heroku apps : view and manage all current Heroku apps (can create and destroy) $ heroku auth : display token and current user, can manage heroku authentication, including logout $ heroku config : manage app configuration variables, including database_url and secret_key_base $ heroku domains : view and manage domains $ heroku logs and heroku logs -t : display the app’s logs or trailing logs $ heroku ps : manage dynos $ heroku releases : displays a log of pushes to heroku $ heroku access : manage access in Heroku Applications $ heroku buildpacks : manage the buildpack for an app $ heroku certs : manage the ssl endpoints $ heroku drains : display drains $ heroku features : manage optional heroku features $ heroku fork : clone an existing app $ heroku git : manage local git repository $ heroku keys : manage authentication keys $ heroku local : runs heroku app locally -- allows you test how your code works on heroku $ heroku maintenance : manage maintenance mode $ heroku members : manage membership in organization accounts (multi user) $ heroku notifications : display notifications $ heroku orgs : manage organization accounts $ heroku pg : manage heroku-postgresql databases $ heroku pgbackups : manage database backups $ heroku pipelines : manage collections of apps in pipelines $ heroku plugins : manage plugins to the heroku gem $ heroku redis : manage heroku redis instances $ heroku restart : restarts the app servers $ heroku rollback VERSION : revert app to a previous version $ heroku regions : list available regions $ heroku spaces : manage heroku private spaces $ heroku stack : manage the stack for an app $ heroku status : status of the heroku platform $ heroku update : update heroku

Some Helpful Tips for free Heroku Apps

Heroku doesn’t support locally hosted pictures unless you pay. If you want pictures on your app, you need to host them somewhere else on the internet and use a link to render the image.

Database space is limited. If you are making a ton of API calls and storing that data to your database, consider dumping unnecessary info periodically.

Free apps come with one dyno. Free dynos can be run for 18 hours out of a 24 period. If you hit the limit, the dyno shuts down for 6 full hours and the app cannot be accessed in that time. A dyno will automatically sleep after 30 mins of inactivity so make sure that you don’t have background processes running that prevent your dyno sleeping.

Heroku requires a credit card on file before you can add any addons (including free addons).

Use the gem rails_12factor. It turns your plain, somewhat useless heroku error messages into less plain, somewhat useful error messages.

Some More Cool Stuff

Running ‘heroku labs’ will give you a list of the new features heroku is currently working on implementing. Heroku makes these features available for testing and review. NOTE: be careful using any of these features in a production app as they are experimental and subject to change or removal.

In Ruby, everything is an object. That means that every bit of information and/or code can be given it’s own properties (instance variables) and actions (methods). In JavaScript, almost everything is an object, but not everything is an object.

Objects in JS

Certain things can be objects (or primitive data treated as objects), but are not always objects, such as: Booleans Strings Numbers

Certain things are always objects, such as: Dates Maths Regular expressions Arrays Functions Objects (duh!)

In JavaScript, all values, except for primitive values (strings, numbers, booleans, null, and undefined), are objects.

It’s important to understand what an object is when discussing the concept of this, because in JavaScript, this is the object that “owns” the code. It is similar to ‘self’ in Ruby. Like self, this is not a variable. It is a keyword and it’s value cannot be changed. There are some differences between how this behaves in strict mode vs non-strict mode.

this in Functions

When used in a function, this is the object that owns the function. The value of this will depend on how the function is called.

In the call above, the value of this is not set by the call. If the code is not in strict mode, the value of this must always be an object and will default to the global object.

In the call above, the value of this remains at whatever it’s set to in the function. If it is not defined (as in the code above), it remains undefined. It can also be set to any value and will remain at that value.

this as an Object Method

When used in an object, this is the object itself. This is set to the object the method is called on when a function is called as a method of an object.

In the above example, when demo.f( ) is called, inside of the function this is set to the demo object. The behavior of this is not changed by how or where the function was defined. In the following example, we call the function before attaching it to the demo.f object, however, it will result in the same behavior. What matters is that the function was called from the f member of demo.

It is important to note that the most immediate member reference is what is attached to this.

In the above code, when we call the function, we call it as a method ‘c’ of the object demo.b. During the execution, this will refer to demo.b. It does not matter that the object is a member of demo; the most immediate reference is what counts.

this as a Constructor

Why do we need associations?

The short answer is that they make common operations simpler in our code.

Types of Associations

belongs_to

has_one

has_one :through

has_many

has_many :through

has_and_belongs_to_many

A belongs_to association is a one-to-one connection with another model. This association must be used in the singular term, as the class name is interpreted from the association name. For example, if we have an application with ‘spacecrafts’ and ‘crews’, and each spacecraft can be assigned to exactly one crew, we can create the association like this:

class Spacecraft < ActiveRecord::Base    belongs_to :crew end

A belongs_to association will have a foreign key in the declaring model. It will also add the following methods to the association:

association(force_reload = false)

association=(associate)

build_association(attributes = {})

create_association(attributes = {})

create_association!(attributes = {})

In each case above, “association” is replaced with the symbol passed as the first argument to belongs_to (i.e. “crew” in our example above)

A has_one association is also a one-to-one connection with another model, however, in this case, one model owns another. For example, if each spacecraft in our program has one crew, rather than each crew having one spacecraft, we can create the association like this:

class Spacecraft < ActiveRecord::Base    has_one :crew end

The main difference between the belongs_to and has_one associations is that a belongs_to association will place the foreign key in the declaring model, whereas a has_one association will place the foreign key in the other model. The has one association suggests that one model owns another, while the belongs to association suggests that one model belongs to another.

Like the belongs_to association, a has_one will also add the following methods to the association:

association(force_reload = false)

association=(associate)

build_association(attributes = {})

create_association(attributes = {})

create_association!(attributes = {})

In each case above, “association” is replaced with the symbol passed as the first argument to has_one (i.e. “crew” in our example above)

A has_one :through association also sets up a one-to-one connection with another model. In this association, the declaring model can be associated with one instance of another model by going through a third model. In our example, a Spacecraft has one Crew, and has one Captain through Crew. Our classes would looks like this:

class Spacecraft < ActiveRecord::Base    has_one :crew    has_one :captain, through :crew end

class Crew < ActiveRecord::Base    belongs_to :spacecraft end

class Mission < ActiveRecord::Base    belongs_to :crew end

A has_many association is a one-to-many connection with another model. This association is commonly used with a belongs_to association. For example, a Crew belongs_to a Spacecraft, but might have many Missions. Each instance of Crew would have zero or more instances of missions.

class Crew < ActiveRecord::Base    belongs_to :spacecraft    has_many :missions end

A has_many will add the following methods to the association.

collection(force_reload = false)

collection<<(object, ...)

collection.delete(object, ...)

collection.destroy(object, ...)

collection=(objects)

collection_singular_ids

collection_singular_ids=(ids)

collection.clear

collection.empty?

collection.size

collection.find(...)

collection.where(...)

collection.exists?(...)

collection.build(attributes = {}, ...)

collection.create(attributes = {})

collection.create!(attributes = {})

In each case above, “collection” is replaced with the the symbol passed as the first argument to has_many and “collection_singular” is replaced with the singular version of the same symbol. In our example above, “collection” and “collection_singular” would be replaced with “missions” and “mission”, respectively.

A has_many :through association sets up a many-to-many relationship with another model. In this association, the declaring model can be associated with zero or more instance of another model by going through a third model. For example, a Spacecraft belongs to a Crew and a Crew has many spacecraft. A Spacecraft also has many missions through it’s Crew. To set up these associations would look like this:

class Spacecraft < ActiveRecord::Base    belongs_to :crew    has_many :missions, through: :crew end

class Crew < ActiveRecord::Base    has_many :spacecrafts    has_many :missions end

class Mission < ActiveRecord::Base end

A has_and_belongs_to_many association is a direct many-to-many connection with another model. In this association, there is no third model to go through to set up the connection. For example, we know that a Crew has many Missions, but a Mission might also belong to more than one Crew. We would set up the association like this:

class Crew < ActiveRecord::Base    has_many :spacecrafts    has_and_belongs_to_many :missions end

class Mission < ActiveRecord::Base    has_and_belongs_to_many :crews end

How do we choose between has_many :through and has_and_belongs_to_many?

The has_and_belongs_to_many creates a direct relationship between two models, whereas a has_many :through creates an indirect relationship between two models. If you need validations or extra attributes through the join table, the has_many :through association is the way to go.

It will add the following methods to the association:

collection(force_reload = false)

collection<<(object, ...)

collection.delete(object, ...)

collection.destroy(object, ...)

collection=(objects)

collection_singular_ids

collection_singular_ids=(ids)

collection.clear

collection.empty?

collection.size

collection.find(...)

collection.where(...)

collection.exists?(...)

collection.build(attributes = {})

collection.create(attributes = {})

collection.create!(attributes = {})

In each case above, “collection” is replaced with the the symbol passed as the first argument to has_many and “collection_singular” is replaced with the singular version of the same symbol. In our example above, “collection” and “collection_singular” would be replaced with “crews” and “crew”, respectively.

Slightly More Advanced

A polymorphic association is one in which a model can belong to more than one other model on a single belongs_to association. In our Spacecraft/Crew/Mission example, we know that a Spacecraft belongs_to a Crew. What if a Spacecraft also belongs to a Fleet? We could set up two different belongs_to/has_many relationships like this:

class Spacecraft < ActiveRecord::Base    belongs_to :crew    belongs_to :fleet end

class Crew < ActiveRecord::Base    has_many :spacecraft end

class Fleet < ActiveRecord::Base    has_many :spacecraft end

This works, but we had to add a second line in our Spacecraft class. In a tiny program like this, it’s not a big deal, but what if our Spacecraft belongs to a bunch of other models? If we have to add a new line of code each time, our code will get very long, very quickly.

Enter the polymorphic association. The polymorphic belongs_to association sets up an interface that any other model can use.

class Spacecraft < ActiveRecord::Base    belongs_to :spacestuff, polymorphic: true end

class Crew < ActiveRecord::Base    has_many :spacecrafts, as: :spacestuff end

class Fleet < ActiveRecord::Base    has_many :spacecrafts, as: :spacestuff end

In the code above, we only need one line in our Spacecraft class to set up a belongs_to association that can be used in any other model. We can now retrieve a collection of Spacecrafts from an instance of the Crew model with @crew.spacecrafts or from the Fleet model with @fleet.spacecrafts.

To Sum it Up

Scope is an essential thing to understand in programming. Incorrect assignment of scope to variables can wreak havoc on your code.

First, what is scope?

Scope, is the term used to describe when a variable can be accessed and when it can’t. If a variable is ‘in scope’, then it is available to be called on in the code. If it is ‘out of scope’, it is not available for use and will return an error message.

Local Variables

A local variable is a variable that is either declared within a program block or passed into a function as an argument. It is available for use only within the program block in which it is defined. Once the function ends, the memory used by the local variable is released.

A local variable always started with either a lowercase letter or an underscore (’_’).

Usually, the scope of a local variable can be defined within: loop{..code..} def…end class…end module…end

If defined outside of one of the above parameters, a local variable would be available for the whole program.

The code above defines a new method, planet, and inside of the method, a local variable, earth. It sets the variable equal to a string and calls on the variable. When the variable is called on outside of the method, it returns a NameError: undefined local variable or method ‘local_variable’ for main:Object.

Instance Variables

An instance variable is a variable that is available for all instances of an object. Instance variables start with “@“ and can be used inside or outside of methods within the object. Every instance of an object will have it’s own instances variables.

If we have methods that need to access the same variables, such as in setter and getter methods, we need to have a single variable that is accessible within both methods.

Instance variables hold information about an instance, usually an attribute of that instance, and can be called on throughout the object, without needing to be passed into other methods as arguments.

In the code above, we set the instance variable, @planet_name, equal to whatever string is passed into it. We do this inside of the variable= method. Then, in the variable method, we call on @planet_name, which will return the string we passed in.

Class Variables

Like an instance or local variable, a class variable, can be set to any type of data. While instance variables are prefixed with a single ‘@‘, class variables are prefixed with a double ‘@@‘. Class variables are used to store information that belongs to a class, not to individual instances of the class. Class variables do not translate between different classes, but are available everywhere within the object in which they are defined.

For example, lets take the Planets class that we used before and keep track of what planets are added. We can do this using a class variable.

In the above code, we define a class variable, @@planets, that is set equal to an empty array. Each new instance of the Planets class is then added to the array in the initialize method. The class variable is set inside of the class and can be accessed by the entire class.

We can then call on the class variable, in our self.planets method, and it will return the array of our planets.

Global Variables

Global scope is scope that covers the ENTIRE program. A global variable is, therefore, a variable that is available everywhere in the program, both in and outside of objects. Global variables are always prefaces with a ‘$’.

Because they are available to the entire program, global variables can be overwritten from anywhere within the program. This can make pinpointing bugs difficult; therefore, global variables should be used sparingly. When naming a global variable, it should be a name that is very specific and unlikely to used elsewhere.

or, How My First Major Life Change Led to My Second Major Life Change

Six years ago, I was out of shape, unhappy, and desperately wanting a change. In high school, I was an athlete (albeit, maybe not a great one) — a cheerleader and soccer player — but college found me without a team sport to play and absolutely no knowledge of how to workout by myself. A lack of exercise, combined with a college student’s diet, meant that I gained significantly more than the ‘freshman fifteen’.

As I started my professional career — overweight, out of shape, and in major need of a confidence boost — I knew that I needed to make a change. Having recently moved to New York City, I noticed a small amount of weight loss, without really trying, simply from an increase in walking. This inspired me to started walking purposefully, everywhere and all the time, which turned into walk-jogging. Walk-jogging turned into simply jogging, which eventually turned into running. The first time I attempted to run, I made it less than a quarter mile before doubling over, out of breath, but I got out the next day and I did it again. I kept doing it until that quarter of a mile turned into a half mile, which became, in turn, three quarters of a mile. The first time I ran a full mile without stopping, I nearly cried. It was a sense of accomplishment that I hadn’t felt for a long time.

Around this time, my sister entered into and started training for the New York City marathon. At the time, a marathon seemed like an unachievable goal to me - I had barely run a single mile, let alone 26! Running around the city to cheer her on at various places along the route and seeing the support of the crowd for every runner inspired me enormously. So much so, that I decided to sign up for my first half marathon. With two months to train, I pushed my mile to two miles and then three, etc. And on January 6th, 2011, I ran the Disney Half Marathon in Orland, FL. It was the first race I had ever run.

Over the following two years, I made forays in and out of fitness — running some, then getting injured and not working out for weeks or months at a time, then picking it back up. But I had lost my motivation and had, once again, become a couch potato.

Enter Epic.

In 2013, a friend sent me a link to a LivingSocial deal for a gym. It was a Monkey Bar Gym (Monkey Bar Gym) called Epic Fight Hybrid Training. Even with the deal, it was more than I’d ever spent on a gym membership and the format was intimidating (small, intimate classes style - no anonymous treadmills or weight machines to hide behind). Over the years since HS, and due to a number of personal issues and experiences, I had lost much of my confidence and self-esteem. I looked at Epic as something I couldn’t do — it was for people who were already fit, not overweight like me. I don’t know what made me actually sign up — maybe it was the small kernel of belief I have that talk is cheap and if you want to change, don’t think, just do — but I remember thinking of it as a birthday present to myself. I thought ‘I’ll do this program for the month trial and then I’ll have my motivation back.’

I can’t remember my first class. It was a whirlwind of exercises that I’d never done before, in a small group, circuit style. At the time, Epic was just starting out — they opened in March and I joined in September. Class sizes were small — usually 4 to 8 people — which allowed the instructors to pay attention to each member, correcting form and pushing people to new levels. What struck me the most, however, was that Epic employed a philosophy of fitness that I’d never been exposed to before. I have always been a little overweight and my whole life, prior to Epic, fitness was presented to me as a way to become less — to weight less, to take up less space, to be smaller. Epic, on the other hand, didn’t care if I lost weight. Epic presented fitness as a way to become more — to lift more, to be faster, to be stronger, to have better body mobility. It was a radical way of thinking for me and changed my entire attitude towards working out. Exercise became less of a chore and more enjoyable. Epic taught me to appreciate my body for the amazing things that it can do; for the incredible tool that it is. Epic taught me that success is measured in progress and in increasing my capability, not in weight loss.

That month membership got extended to two, and then three. Three years later, I cannot imagine how different my life would be if I hadn’t found Epic.

About six months after I started at Epic, the owner and head trainer, Alex, talked me into running my first Spartan Race at CitiField. Spartan Race is an obstacle racing series that combines running with various obstacles (climbing over walls, up ropes, under barbed wire; monkey bars; sandbag/log carries; flipping tractor tires; spear throwing; etc.) I had never done anything like it before and I was terrified. All of my insecurities came back and I thought ‘this is something I can’t do’. Alex, being the amazing coach that he is, talked me through all of this and encouraged me to sign up.

The day of CitiField came and it was the first race for almost everyone from the gym. We had amassed a group of roughly 60 people from the gym. The race itself was a whirlwind, but I was surprised by how fast I could run and how quickly I completed the obstacles. I finished my first Spartan Race feeling like I could do anything.

Epic Hybrid Training CITIFIELD 2013 <— check out the Epic team’s video compilation of CitiField Spartan Race 2013. I'm in there a few times.

Since then, I have run 10 more Spartan Races, ranging in length from 3 to 17 miles, as well as numerous other obstacle and non-obstacle races. Racing, and Epic, showed me how to reignite my motivation, increased my confidence and improved my self esteem.

If you’ve made it this far, you’re probably wondering ‘what does this have to do with coding?!? Why is she talking about fitness and gyms and racing?!’

For the last eight years, I have been working in the fashion industry and I have found myself in the career equivalent of ‘overweight and out of shape’. I have seen my industry shift and change, becoming increasingly more focused on e-commerce and digital services. I have seen companies both excel at and struggle to keep up with the online demand. I have seen the need for specialized analytics to track and manage online shopping habits. I have also seen a shift in the consumer confidence in online security - people are more willing to share credit card data with online retailers and with platforms like PayPal and Venmo (and innumerable others springing up), there are a number of reasons to feel confident shopping online.

For the last two years, I have run the e-commerce website at Patricia Nash Designs and, in the process, assisted with a full site redesign. As I was working with the developers and discussing the various elements that we wanted to incorporate into the site, making recommendations and reviewing the developers’ suggestions, it dawned on me that I didn’t want to working with the developers; I wanted to be the developer.

Many years ago, when I was in high school, design-your-own websites were super popular - Angelfire, Yahoo pages, etc. I taught myself HTML and CSS by building and designing these sites, which are probably still floating around the web (and hopefully not connected to my name!) and enjoying the challenge of figuring out which element controls which part of the page.

I also took classes in Visual Basic and JavaScript, although I did not pay nearly as much attention as I should have. Seventeen-year-old me thought that I had my whole life planned out (I was going to become a fashion buyer) and coding wasn’t part of it. And 17-year-old me was partially correct. I did become a fashion buyer, but I didn’t anticipate how unfulfilling and unchallenging I would find that role. I had always enjoyed the problem-solving aspects of coding and working on the site redesign for Patricia Nash reinspired that interest in me. I started taking a online tutorials through Skillcrush and Codecademy and immensely enjoyed it.

With e-commerce businesses consistency out performing brick and mortar stores, I have recognized that it is the way my (former) industry is moving. It is increasingly more important to have the technical skills to work with websites and I want to do that. I want to apply the determination and dedication I developed running Spartan Races to developing beautiful code.

Which brought me to The Flatiron School

Making the commitment to learn to code and leaving an industry in which I am well-established was a huge life change, but also one that I am gladly making. My first day at Flatiron brought nervous anticipation - would I be good at this? What would the other students be like? Do I really deserve to be here? Am I going to fail horribly? It was one thing to think about and plan to leave my comfort zone, but an entirely different thing to actually take the plunge and do it.

The first week at Flatiron, like so many firsts in my life, was a complete whirlwind. I was delighted to learn not only that my fellow students are as excited to be here as I am, but also that they come from a wide variety of backgrounds. We have all excelled at different things in our lives and are bringing that experience into our code. I feel lucky to be included in this amazing group of people.

It was also exhausting. It’s not just the late nights (I was up until midnight working on labs three nights in the first week) — it has been many years since I had to concentrate on one thing so comprehensively and I didn’t realize how tiring that could be.

Week 1 brought a slew of new concepts and information, some of which I will cover more thoroughly in this blog. We learned about Classes and Instances; Instance Methods; Scope of methods and variables; Object Relationships and Architecture. Some concepts I have found easy to grasp, such as inheritance, and others, like yield, have been more challenging.

Similarly, some of the work have been really fun, such as working with the Star Wars API and others have been incredibly frustrating (I’m looking at you, MP3 Importer).