My goal was to only find objects that had an appointment time from the current time until the end of the day. In this case, appointments were the association and the objects were already set up to display in descending order.

Object.where(status: status)
      .includes(:appointments)
      .order('appointments.scheduled_datetime DESC')

The objects also needed to have a status of ‘scheduled’, which was already set to the variable status at the start of the controller action.

Using array conditions in my where statement, I started with the following:

Object.where(status: status)
      .includes(:appointments)
      .where('scheduled_datetime >= ? AND scheduled_datetime <= ?',             
        current_time, end_of_day)
      .order('appointments.scheduled_datetime DESC')

I had set the current_time and the end_of_day time to variables. The string making up the array condition looked good. Yet the above resulted in the following error:

PG::UndefinedTable: ERROR:  missing 
FROM-clause entry for table “appointments”

I realized that a references was needed for the conditions mentioned in the where statement. Using the example above doesn’t join the appointments table.

Object.where(status: status)
      .includes(:appointments)
      .where('scheduled_datetime >= ? AND scheduled_datetime <= ?',             
        current_time, end_of_day)
      .references(:appointments)
      .order('appointments.scheduled_datetime DESC')

Using references allows the query to know that the string in the where statement references appointments. It joins the appointments table to the query.

You may be reading this and wondering, “Couldn’t you also use joins here?”. You are right, you can use joins here, it would look something like this:

Object.where(status: status)
      .joins(:appointments)
      .where(
        'appointments.scheduled_datetime >= ? AND ' + 
          'appointments.scheduled_datetime <= ?',             
        current_time, end_of_day
       )

This looks cleaner, yet I also want to use order here. You cannot simply use order and joins when ordering on associations. You would need to use merge like this:

Object.where(status: status)
      .joins(:appointments)
      .where(
        'appointments.scheduled_datetime >= ? AND ' + 
          'appointments.scheduled_datetime <= ?',             
         current_time, end_of_day
      ).merge(Appointment.order(scheduled_datetime: :desc))

There you have it! If you are using includes in queries don’t forget the references!

The post Active Record Queries: Specifying Conditions on Associations appeared first on Trim Agency.

Having previous experience in Ruby, Rails, and JavaScript, working with Angular was different but also eye-opening. It is a lot of fun creating the functionality of a client app with components, modules, and services.

One of my biggest challenges was styling a select dropdown to match our designs. Thankfully the team ( Dom Miller!) created a JCF module that can be easily imported into an Angular project.

The JavaScript Custom Forms library (JCF) is a really great tool to customize form elements with CSS.  Once it’s imported to the project, you can place the jcf attribute in the desired element. Adding the attribute will style the element with the default jcf styles.

<select id=“dropdown-example” jcf>
    <option>Pick me</option>
    <option>No, Pick me!</option>
</select>

It is possible to include options with the jcf attribute for the select element. I’d like my dropdown to only show three options at a time. That would look something like this:

<select id=“dropdown-example”         
        jcf='{"maxVisibleItems": 3}'>
    <option>I’m option 1</option>
    <option>I’m option 2</option>
</select>

Now that the default styles and other options are set, we can add in our own styles by selecting and overriding the appropriate jcf classes. To do this, I created a file like this one within my assets folder:

project-name/src/assets/scss/base/_jcf_overrides.scss

.jcf-scrollbar-vertical {
 display: none;
}

.jcf-scrollbar-horizontal {
 display: none;
}

.jcf-list .jcf-option {
 font-size: 18px;
 font-weight: bold;
 background-color: $white;
 padding: 11px 20px;
 margin: 0px;
 text-align: left;
 border-top: 1px solid #ccc;
 cursor: pointer;
}

You can view the different jcf classes by opening your chrome dev tools on the page where the element is located, and looking near the bottom of the html. You’ll see the jcf classes created by the module.

There you have it! You now have a customized form element.

The post Styling Select Elements with JCF appeared first on Trim Agency.

The office joke is “it’s Tmux’s fault” and we eliminated Tmux, uninstalled Node, NPM, Yarn, etc. Nothing worked. My colleague Alex pointed out the repo was in Dropbox so I moved it to another folder and magically it started working again.

So take note, if you’re having live reload or similar issues and it’s in Dropbox, take it out.

The post Dropbox & Webpack appeared first on Trim Agency.

require 'spec_helper'

describe SomeProject::MyHelpers do

  # add the module methods as instance methods to Rspec's subject
  subject do
    self.extend(described_class)
  end

  describe 'The helpfulness of my helper' do
    it 'helps a lot' do
      expect(subject.helpfulness).to eq "a lot"
    end
  end
end

The post Testing Modules in Rspec appeared first on Trim Agency.

To allow the submission of the same input field multiple times, I added an empty array to the input name:

   <input id = “user_text_entry”, name=“user[text_entry][ ]”, placeholder=“Enter text” >
         => [,,”user’s text entered”]

More on parameter naming conventions can be found here.

To implement front end validations, I used jQuery’s :visible selector to ignore the hidden text fields.

var userTextEntry = $(‘.text-required-radio-box’).find(‘*’).filter(‘:input#user_text_entry:visible');

The post Rails Forms: Validating and Persisting Duplicate Parameter Names appeared first on Trim Agency.

The post Rename a Phoenix Application appeared first on Trim Agency.

WITH top_sales_by_date AS (
  SELECT date, SUM(order_total) AS total_sales
  FROM orders
  GROUP BY date
  ORDER BY total_sales DESC
)
SELECT email
FROM users
WHERE sign_up_date = (
  SELECT date
  FROM top_sales_by_date LIMIT 1
)

The top_sales_by_date is a table created just for this query that aggregates the order totals grouped by date, the ordered by total sales. We can use the date value from the top record in the temp table to find the emails of users who signed up on this date.

The post Common Table Expressions in Postgres appeared first on Trim Agency.

We are simply making the connection with one of our go-to’s, Zapier . The concern with this integration is that our zap is searching for new notes every 15 minutes, so you would need to be aware of this as it relates to how you draft your content. For example, if you create a new post, and need to go back and edit this note beyond a 15 minute time frame, you run the risk of posting a partial blog post (depending on your Evernote sync settings). Therefore, we still have some tweaking to do to establish versioning workflow. For the time being, I will likely draft in my main notebook, and dump in my TIL notebook when ready to ship. Future versions will also need to handle images, as these are not included on my zap yet.

Additionally, we will need to handle code better in the future. Evernote has released a beta feature of a “Code Block,” which has to be manually be turned on in order to use, however, the zap is not pulling this in to the blog post. You can access it in the preferences: http://take.ms/6e0up

Overall, this is massively helpful in meeting our goal of using TIL as a repo, not a marketing tool.

Here is a random code snippet:

<div class="ipsType_normal ipsType_richText ipsContained" data-role="commentContent" data-controller="core.front.core.lightboxedImages">
<div class="ipsQuote_citation ipsQuote_open">  <a href="#" data-action="toggleQuote"> </a>     <i class="fa fa-share"></i>    On 2/19/2016 at 10:16 AM,   <a href="//discussion.evernote.com/?app=core&amp;module=members&amp;controller=profile&amp;id=102218" data-ipshover="" data-ipshover-target="//discussion.evernote.com/?app=core&amp;module=members&amp;controller=profile&amp;id=102218&amp;do=hovercard">bootislands</a> said:</div></blockquote>
</div>

The post Evernote to Blog Post appeared first on Trim Agency.

Recursion is solving a problem whereby one applies the same solution to smaller instances of that problem. Think, a function calling itself. So, here is what it looks like in Elixir:

defmodule Recursionism do

  def operate_on_list_items([], _) do
    []
  end

  def operate_on_list_itmes([head | tail], fun) do
    [fun.(head) | operate_on_list_items(tail, fun)]
  end
end

Recursionism.operate_on_list_items([1, 2, 3], fn(n) -> n * n end)

Let’s break this down:

• First we define a multi-clause function called Recusionism.operate_on_list/2. Multi-cause functions are multiple functions of the same name and arity that are executed depending on the matching of the arguments.
• Then, when we call Recusionism.operate_on_list_items([1, 2, 3], fn(n) -> n * n end), it matches the second multi-clause function definition and executes it.
• That second function, uses the anonymous function (it’s second argument) to operate on the first item in the list (head). The result of applying the anonymous function (fun.(head)) becomes the first item in a new list.
• In order to complete the list, the operate_on_list_items function calls itself by passing all the remaining items in the original list (tail) as the first argument, along with the same anonymous function as the second argument.
• When there are no more items in the list, calling operate_on_list_items matches the first multi-clause function definition and returns an empty list, thereby stopping the recursion.
• The end result is building a list by doing [1 | [4 | [9 | []]]], which evaluates to [1, 4, 9]

The post Recursion in Elixir appeared first on Trim Agency.

Let’s say you want to iterate over the array ctrl.items in your <select> field.

some.component.js

(function() {
  'use strict';

  function SomeController() {

    var ctrl = this;

    // item array for dropdown
    ctrl.items = [
      {
        select: 'data1',
        label: 'Option 1'
      }, {
        select: 'data2',
        label: 'Option 2'
      }, {
        select: 'data3',
        label: 'Option 3'
      }
    ];

  }

  angular
    .module('app')
    .component('someComponent', {
      controller: SomeController,
      templateUrl: '/app/components/some.component.html',
    });
})();

Instead of using ng-repeat, this can be accomplished with ng-options.

ng-options Pattern Usage:
select as label for value in array

some.component.html

<select name="selectName"
        ng-model="$ctrl.formName.selectName"
        ng-options="item.select as item.label for item in $ctrl.items">

  <!-- this option sets the dropdown placeholder -->
  <!-- value must be an empty string for this to work -->
  <option value="" selected="selected">Select an Item</option>
</select>

Where:
select: value that will be submitted or bound to the model of the parent
label: each <option> shown in dropdown list
value: local variable for each array item or object property value being iterated over.

You can find more ng-options usage patterns in the AngularJS API Documentation

The post Angular 1.x Dropdown Menus
(Removing The Blank Option) appeared first on Trim Agency.

Example:

.container{ 
  margin: 1%;
  width: 70%; 
  
  &:hover{
    .content{
      max-height: 300px;
    } 
  }
}

.content{
  transition: max-height 1s ease;
  overflow: hidden;
  max-height: 0;
}

The post Animating height with only CSS appeared first on Trim Agency.

In this example, User calls the create() method on Post, which in turns calls the send() method on the Messenger class. The dotted line is called the object’s Lifeline. The part of the Lifeline that is wider, is where the object is active.

What are the benefits of a sequence diagram? It turns the focus from the objects themselves to the messages that pass between them. You can see what public interfaces you’ll need to implement. As Sandi Metz writes in her book, Practical Object-Oriented Design in Ruby, this process can also reveal ‘hidden objects’ – object you didn’t know you needed. If you do TDD, you also know what tests to write. What happens if you make a mistake? Just fix the diagram. It’s a lot cheaper than fixing code.

The post Efficient Object Oriented Design with UML Sequence Diagrams appeared first on Trim Agency.

The custom keyboard shortcuts can be set to individual apps or to be enabled in certain circumstances. In addition to special keyboard shortcuts, the app also allows you to customize actions based on gestures input through the trackpad.

A feature I have started using is setting up custom snap areas. The basic level of this feature adds in the functionality found default in modern Windows environments. When dragging an app to the edge or top of the screen it will snap to take up half or a corner of your screen. The advanced functionality of this features allows you to set multiple drag zones that will allow you to size a window down to the specific pixel dimensions that work for you, then create a keyboard shortcut or drag zone to replicate these dimensions.

Finally, if you have a favorite mouse whose auxiliary buttons and features do not work natively with your mac, you can map the desired functions with this app.

The post Increase Productivity On Your Mac appeared first on Trim Agency.

We have [all] seen how greatly velocity can be impacted when teams invest too much human capital on a project. It is business law that your output does not grow at the same multiplier of “personnel” on a project. At some point, often said to be over 6 people on any team, you begin to see clear diminishing return as more and more team members contribute to one single business unit. On any given sprint, we will augment a team with more resources only if necessary, as we try to keep our efficiency as high as possible.

Our formula is to hire consultants that embody the skill and the empathy to make decisions in their domain and align with the value and core mission of the product owner’s feature set. Our developers need to flag designs that will double the scope versus an alternative solution, our designers need to flag a work-flow that strategy has over-complicated, and we all need to be able to assemble as often as needed to align with those pivots.

The post The Power of 3 [micro team edition] appeared first on Trim Agency.

At the top of your webpack.config.js file define your environment variables like so:

/**
 * Example Constants
 */
const ENV = process.env.ENV = process.env.NODE_ENV = 'development';
const API_URL = process.env.API_URL = 'http://localhost:3000';
const METADATA = {
  API_URL: API_URL,
  ENV: ENV
};

Then in the plugins array use DefinePlugin method to define global variables configured at compile time:

/**
 * Make Webpack Constants Available Globally
 */
   new webpack.DefinePlugin({
     'ENV': JSON.stringify(METADATA.ENV),
     'API_URL': JSON.stringify(METADATA.API_URL),
     'process.env': {
       'ENV': JSON.stringify(METADATA.ENV),
       'NODE_ENV': JSON.stringify(METADATA.ENV),
       'API_URL' : JSON.stringify(METADATA.API_URL),
     }
   }),

Re-compile and now your variables will be globally available.

The post Environment Variables in Webpack appeared first on Trim Agency.