DEV Community: Luke Duncan

What things is your company doing to make interviewing more fair?

Luke Duncan — Tue, 21 Jul 2020 15:12:36 +0000

I'm a Developer Advocate at CoderPad (https://coderpad.io). Some of you may have used CoderPad in the past while interviewing for a company. Others may have used the tool to interview candidates.

Our mission at CoderPad is to level the playing field for all technical positions. And when I say all, I mean junior engineering positions all the way up to CTO.

While we have our own ideas on how to make the interview process more fair. I'm looking for input from the community. This is so we can build the right things for you, your company and your team to improve the candidate experience.

So all this said...what does your team do to make the technical interview process more fair? and what things would you like to see to make the interview process more fair?

Questions for a live technical interview — what questions I like to ask and why

Luke Duncan — Thu, 30 Apr 2020 14:48:10 +0000

Technical interviews are probably the most daunting experience a software engineer can have. With every interview, comes a different set of expectations, skills needed and questions asked during an interview.

I’ve gone through a bunch of technical interviews as a candidate. These interviews have ranged from some of the biggest companies in the world, all the way down to small 2-person technology agencies. I have also been in the interviewer seat at companies I’ve worked at in the past. I’ve conducted white-boarding interviews, reviewed take-home assignments and sat in on live-coding sessions.

These experiences have allowed me to develop a good sense of what questions to ask during a technical interview — or at least questions that I like to use to gauge a candidates technical chops.

Before I go into the questions, let me first clarify what I like to see in candidates. I think this will provide some of the context as to why I ask certain questions. Most of the points below cater to both junior and senior engineers, and the candidate has at least broken through the HR gate and first phone screen.

What I look for in candidates

A good base of knowledge in whatever language THEY choose. Demonstrate fundamentals e.g. loops, statements, data structures. If the candidate isn’t familiar with the language the company uses, no big deal. And if I feel like they do need help, I tell candidates to Google to get the specific method or helper function. After all — If I haven’t been using Javascript for a while, I always need to Google a simple for loop.
That being said — if it comes down to two candidates who we think are the exact same, and one has experience with the language my company uses, I’m probably picking them.
I’ll be able to tell if you don’t have a good grasp of the language just from the way your thinking, and typing. You can’t Google everything.
Good, clear, basic communication. While I get that some conversations have to get REALLY technical, speak to me in plain language to describe a problem and to tell me some of the ideas you have. Describe your solution and tell me some of the potential draw backs as well.
Ability to solve problems that the company currently deals with. Some of the code questions are setup to mimic this.
The ability to work alongside me. Showcase that you can work well in a team.

Below you’ll find the questions I like to ask. Depending on the interview setup, I will ask a few of the smaller questions if it’s going to be a 45+ minute interview. If it’s 30–45 minutes then I like to ask one of the bigger questions.

I’ve purposely left some things vague in the questions, just in case a future candidate I’m interviewing with finds this article hehe! But +++ if you are prepping, tell me you saw this. Most of the questions I ask can be applied to any language, but obviously in some cases e.g. hiring a React developer, you want to use React.

[Fullstack] Turn a CSV file into an array of objects.

This question requires you to use a IDE like CoderPad that lets you upload files
Let’s me figure out/see how they work with objects, arrays and basic loops
Includes use of basic file system to read CSV — we purposely have the fs.readFileSync to start off. This lets me see what they know about file usage and what their thoughts are about how to handle it next. The let variable is there on purpose. I want to see if they know what the difference is between const, let, var. I’m waiting to see if they do something with it.
I’m looking for senior engineers to complete this relatively quickly (10–20 minutes)
For junior engineers, I’m looking for them to complete this in around 30 minutes
From experience, senior engineers can usually complete this anywhere from 10–15 minutes

const _ = require('lodash');
const fs = require('fs');

// CSV contents
// Company,Total Users,MRR,AR,Profit\n
// "A, Inc",100,359,2490,28\n
// "B, Inc",43,86,1408,457\n
// "C, LLC",99,1093,12753,5397

// Specifically used let here
let csv = fs.readFileSync('./data/test.csv');

// Below, turn the CSV into an array of objects

[Frontend] Create a simple counter using React

This question requires you to use a IDE like CoderPad that lets you upload files
The counter should be able to increase, and decrease. The initial starting number should be 0. The numbers can go negative.
For front-end interviews, I like candidates to build out simple things. It allows me to see how they think in terms of component architecture
If we have an hour or longer, I like the candidate to be able to interact with 3rd party data and making a simple API call — but most of the time I just ask for a simple counter
Because it’s a rather large task — I like to help or work alongside the candidate.
Extra — will the candidate take time to think about styling, UI/UX etc.

<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.2.0/umd/react.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/umd/react-dom.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/jsx">

      class Home extends React.Component {
        render() {
          return (
            <div className="home">
              <h1>Hello world!</h1>
            </div>
          ) 
        }
      }
      // Render component to the page
      ReactDOM.render(<Home />, document.getElementById('root'))      
    </script>
  </body>
</html>

[Fullstack] Fibonacci Series

This question requires you to use a IDE like CoderPad that lets you upload files
Usually I don’t like asking these types of questions, but this is the one I do like — see below.
I want to see if they know and can talk about recursion/big-O notation
My hope is that they spit out the simplest solution, and then we can talk about recursion, and as the series of numbers goes up — how it effects the time for calculation
Candidate may have been asked this previously. I don’t care. It probably means they’ve thought and at least know the solution and recursion.
As a junior candidate, I don’t mind that they solve this with a simple solution and exponential runtime
As a senior candidate, I expect you to be able to solve this for O(1), O(logN) and at the very least O(n).

# Ruby
n = 7 
def fibonacci(n)
  # write code here
end

puts "#{n}'s fibonacci value is #{fibonacci(n)}"

# RSpec is available within this pad
# Below, write a test that makes sure the value of the 7th fibonacci value is 13

RSpec.describe fibonacci do
  # write code here
end

[Fullstack] Find the largest 5 digit number in a sequence

This question requires you to use a IDE like CoderPad that lets you upload files
Looking for good use of loops, sorting and potentially indexing.
As a junior candidate, I don’t mind that they solve this with a simple solution and exponential runtime

# In the following 6 digit number: 283910
# 91 is the greatest sequence of 2 consecutive digits.
# In the following 10 digit number: 1234567890 
# 67890 is the greatest sequence of 5 consecutive digits.
# Complete the solution so that it returns the greatest sequence of five consecutive digits found within the number given. The number will be passed in as a string of only digits. It should return a five digit integer. The number passed may be as large as 1000 digits.

# Write code below

These are only a few examples of some of the questions I like to ask in a technical interview. I think for the most part they are pretty straight forward — the only one that may cause a little confusion is the ability to understand Fibonacci sequence. Some candidates may take a few minutes to understand what it that is if they have never heard of it, and that is completely fine.

The whole purpose of the technical interview is to figure out if a candidate will be able to fulfill the demands of a role, and another chance to see if they will fit character/personality wise. So I like to draw up and select a question that best aligns with the position the candidate has applied for.

If you have your own questions that you’d like to share, I’d love to see them. And if you have any questions about using a live coding IDE for technical interviews — shoot me an email at luke@coderpad.io, it’s what we specialize in!

The process of the technical interview - A perspective from CTO's, VP's and Directors of Engineering

Luke Duncan — Mon, 20 Apr 2020 20:15:03 +0000

Some of you may have read in my last post, I started at CoderPad 3 weeks ago as a Developer Advocate. Since then, I've been connecting with former bosses, co-workers and other software engineers to gather thoughts and to better understand the realm of technical interviews. Most of the people I've been reaching out to in my network work at established technology companies in higher up roles. Think CTO's, Director of Engineering, Lead Engineers, VP's of Engineering and Senior Software Engineers.
I started reading back my notes on these calls and I've started to see a pattern in their technical interviewing process. Here are some key findings…

Side Note: Would you be interested in learning about the specific companies technical interviewing process OR do you want to highlight your companies technical interview process? If yes, shoot me a message luke@coderpad.io

Engineering higher-ups like to use their hiring process as a recruiting tool

I spoke with two former colleagues that now lead engineering teams at some companies you have definitely heard of, but aren't Google and Facebook. An interesting point that came up in my conversations with them is that they use their hiring process as a way to attract the big talent.
They both told me that they are highly involved in the recruiting process. Not so much vetting resumes and finding talent, but they were definitely leading the "Introductory First Calls". Not only was this a tactic to make the engineering talent feel special, but it also allowed them to figure out the motivations of the candidate and if it was worth even moving forward to the technical interview.

Take-Home projects are the go to for smaller companies

Almost every person I talked to in the past week told me they were doing take-home projects for their candidates, instead of live coding sessions. The main reason for them preferring Take-Home projects seemed to be the opportunity for candidates to work in a "real world" scenario and for the company to see "real world" output.

One specific Director of Engineering told me how they set up their Take-Home projects. They took a problem that the company had in the past, simplified it, and came up with an exercise that mimicked that problem. So not only are the candidates in a more relaxed environment, they are also working on problems the company may have faced in the past or are currently facing. It's a win-win for both sides in my opinion.
Another reason was the time saving that comes with the take home, and engineers not having to spend 30 minutes to 1 hour on a live coding interview.

Languages don't matter during the technical interview

Most engineering managers are looking for how you think, rather than specific language ins and outs. It was almost a consensus - that once you know one language, you can learn them all. They were more focused on the tangible outputs like how do they write actual code, and how are they solving a problem.
Specifically they were looking for maintainable code, are they breaking down code into individual functions, are they using object orientated design, is the code readable for others etc.

Most technical interviews are the same for Juniors & Seniors - but managers are looking for different things

Like the subtitle reads above, companies are looking for different traits out of junior versus a more senior engineer.
In a junior engineer, it seemed they were looking more in the direction of soft skills, team compatibility and the basic knowledge of the languages and frameworks that the companies use.
In senior engineers, they are looking for high quality, good grasp of software design knowledge and high end communication that will eventually allow them to lead projects.

Every company is different and finds success using different methods (live coding vs. take homes for example). But I thought this would be good to share to show potential candidates what to look out for in the world of technical interviews.
Technical interviewing is difficult. Both for companies and for candidates. At CoderPad, we are always trying to bridge that gap and make things easier for both sides. If you have any questions about CoderPad, or if you are a company looking to set up technical interviews, please reach out - happy to talk!

The interviewing process for a software engineer and tips for getting a new job while in lockdown

Luke Duncan — Tue, 31 Mar 2020 14:21:09 +0000

After being laid off 52 days ago, I’m happy to announce that today I’m starting with CoderPad (https://www.coderpad.io) as a Developer Advocate (working in a mixture of marketing, product and dev). I’m super excited to work with some really smart people and look forward to learning a bunch/working my butt off. Funnily enough, one of the companies I was interviewing with was using CoderPad so it was cool to look at it from the candidate side, but sorry! That's not the point of this article.

Being that we are in crazy times, I thought it’d be beneficial to talk a little bit about searching and finding a job (specifically software development/tech) in today’s market. I learnt a bunch over the last 5 weeks and want to give some tips to anyone out there hunting for a new position.

To give some background - my last role was a Senior Software Engineer at a ticketing/events company working remotely. I was laid off from the role. Knowing this information will help give context to my situation - the types of interviews I was able to get, the questions I was asked in interviews etc.

Before I get into the tips, here is some data surrounding my job hunt:

Amount of applications: 53
Applications responded by company to get first interview: 18
Applications rejected: 12
Recruiters worked with: 7
Live coding interviews: 5
Code Projects worked on: 3
Amount of whiteboard interviews: 4
Got to final interview but did not get offer: 2
Job Offers: 3

I don’t want to give away the exact companies that I was interviewing with, but I can tell you in an abstract way -

One of the MAJOR banks
A place you’ve probably shopped online before
Construction software company
Oil & gas data company
Major oil/gas company (not a super major but big)
Legal software company
Electricity power company
A cyber security company
Technology agencies
Marketing Firm

I live in Houston, Texas hence why all the oil and gas companies that I was interviewing with. It was up for debate whether I wanted to continue working remotely or find a position in Houston.

Positions applied for:

Software Engineer, Senior Software Engineer, Software Developer, Front-End Developer, UI Developer, Product Manager, Project Manager, Developer Advocate, Implementation Engineer, Web Developer

Some of the live coding challenges:

Fizz Buzz (I don’t know why a company would use this anymore ha)
Write a for loop that goes over the array in reverse order and create an array of arrays grouping the numbers that are the same e.g. [[1,1], [5,5,5], [2,2], [21, 21]]
Figure out if input is palindrome (numbers and strings)
Create a function to determine if a number is a power of two
Turn this CSV string into an array of Objects with the same keys and associated values

Some of the white-boarding questions:

From two arrays, find the numbers that AREN’T in either array
What efficiency is this algorithm? Explain how you would improve it or make it better (Big O Notation)
Given this method, how would you make it better?
Build an abstraction of a shopping cart
Show us how you would build out a car utilizing Object Orientated design
Describe one of your most recent projects you worked on
Build out a relational database for a vet showing appointments and anything else you might find applicable

The take home projects:

Build out a simple CRUD API in NodeJS
Build out UI components that use an external API to digest data and show in graph
In this codebase, make changes to a method so that it caters to what they were looking for

Ok so now we have all that stuff out the way, here are some of the things I learned and hopefully some tips you can take with you or pass a long to someone you know who’s in the interview process:

Use Glassdoor

It’s a good way of finding out what salaries you would be looking at for a role, and if someone has gone through the interview process before, you can perhaps even get a good grasp of what technical questions they might ask. I did this for the major bank that I interviewed with. And I got asked a question that I had prepared for. Part of me says this is wrong, you know moral high ground. But then part of me thinks what’s wrong with being prepared with all the information out there?

LinkedIn is pretty cool when you actually need it

Some people give LinkedIn a bad rap. I’ve never been one to use LinkedIn actively while I’ve been working at other jobs. But having used it pretty extensively during this job search — there are a few things that make it great. First off, their job search functionality is amazing for searching by location and position. Second, the quick application feature makes it super easy to apply to a bunch of jobs. Most of those jobs don’t require a cover letter, and maybe an answer to a question or two — so it’s super easy to apply to 30 jobs in an hour if you really wanted. And lastly, the amount of traffic your profile can get is pretty insane. I had at least 3 to 4 recruiters per week contacting me about open opportunities they thought I’d be a fit for. Not all are, but it’s still a great thing to see.

Recruiters are awesome!

I had never worked with a recruiter before this because I had never had to. In the past, I’ve been hit up by hundreds (not joking) of recruiters asking if I was looking for a new role or saying that I’d be the perfect candidate for X role. I always just responded “no thanks”.

But I think the biggest help on my job search was using recruiters. They allow you to skip the line of the interview process at companies because you’ve already been “vetted”. And they are there to help you. Ultimately, if you get hired, they make money so it’s in their best interest to set you up for success. Being it’s their full-time job, they have a good grasp of the market, what positions you would be good for and help prep you for interviews. All this being said, I actually didn’t use a recruiter to get my role at CoderPad, but the other offers I had were because of recruiters.

You need to practice leet code and technical interviews

No matter what you do, technical interviews are always going to be nerve wracking. So prepare! Take a bunch of Leet Code — most companies ask easy to medium questions that I’ve experienced. And most likely, if you practice enough, you’ll be asked problems you’ve solved before. I think if you are applying at the FANG companies and high up engineering positions (director of engineering), that’s when the “hard” questions start being asked because they are dealing with issues at extreme scale.

Also get familiar with some of the technical interview IDE’s. You’ll be taking live coding interviews a bunch. Try one like CoderPad ;) https://www.coderpad.io

I often find that leet code questions bear no similarities to the things you’ll be working on in your actual job. My mind thinks differently when trying to solve Leet Code questions versus the usual tasks I have as a software engineer. Preparing and practicing these questions makes the switch into thinking about these questions easier in my brain.

Think of creative ways to stand out

You are competing with hundreds of people for a job. Think of ways you can stand out in the job application. One way is to use Recruiters like I said before to skip the line, but what I found really successful was creating a page on my website specifically for a company and hiring manager.
I can show you one I made for CoderPad: https://www.lukeduncan.me/coderpad — I haven’t asked if this helped but I can only imagine it doesn’t hurt. It shows you put time and effort into your application and it’s a good way of getting your foot in the door. I have had major success with this in the past as well. It turns you into a person rather than an application in my opinion.

Get the buzzwords into your resume, and what you did with those buzzwords at prior jobs

Recruiters and companies are looking for specific languages, but they are also looking for the type of things you’ve worked on in your prior experience. Be specific on what languages you used and what you accomplished with them. Here is one of the lines I have on my resume as an example:

“Built custom solutions and features for Ticketbud’s enterprise level clients that led to new revenue channels and retention of clients using technologies such as Ruby on Rails and Javascript”
Recruiters are looking for these buzzwords all over and it will get you a lot more opportunities by including them in your resume.

Get feedback from final interviews

I reached a few final interviews during this process and didn’t get an offer. It can be a real hit to the gut especially when you are just one round way from being hired. But to move forward and learn, I ended up asking for feedback about why I wasn’t selected or what they liked and what they didn’t like. Ultimately I ended up using the feedback from a few final interviews and took it into my other opportunities. It helps you grow as a developer, thinker and candidate!

A big problem that I had/have, I think of a solution in my head to a problem which fine. But when I start to describe my solution, other things that I maybe missed out in my solution start to pop in my head and I start to include them into my solution. So I start to add random bits into my answer and everything becomes less clear. I got this feedback from one of the first interviews I was rejected from and used it to catch myself when I was doing this at later interviews.

Hit me up!

And that’s that. If you have any questions about my interviews, have any other tips you’d like to share (I’ll add them to this article) or are interested using CoderPad in your interview process (perfect for hiring Remote in todays climate) — I’d love to talk! Email me at luke@coderpad.io

It's hard times out there for everyone, so if there is anything I can do to help anyone, I'm all ears!

Stay safe.
Luke

Any unconventional tips after being laid off?

Luke Duncan — Mon, 10 Feb 2020 19:45:22 +0000

Hey Dev,

I was laid off on Friday and now begin the hunt for a new job. I am looking for tips, specifically things I may not have thought about doing now that I am unemployed.

I have updated the resume, contacted a few recruiters that I am friendly with - and luckily for me I just updated my personal website two weekends ago :)

During this time of unemployment, I hope to take a few React courses. I haven't used React since 2018 so looking forward to learning all about Hooks and all that new shiny stuff.

Buy any advice helps. Look forward to reading your responses!

What are some tips for working as a remote developer with children at home?

Luke Duncan — Wed, 19 Jun 2019 15:11:16 +0000

Hi everyone!

I've been working remote for a little over a year and a half now. It's been great and don't think I can go back to working in an office full-time.

However, we've added a little one to our family and he's now a month old. My wife has started running errands where she is gone only a few hours - and I've stayed at home with the baby boy. He's pretty good overall, sleeping most of the time. But when he's crying - there is no way to possibly work.

My wife will be going to work full-time at an office so I'm coming to you for some tips! Because I can only imagine as he grows up, my eyes will have to be on him 24/7.

How do you balance working remotely and looking after a baby/kids?

What are some good tutorials/tips for building your own computer

Luke Duncan — Fri, 31 May 2019 00:56:48 +0000

I'm a complete newb when it comes to linux, operating systems and all the rest. Basically I'm dumb as to how computers actually work.

I thought it'd be fun to build my own computer from the ground up. But I have no idea where to start! I thought some of you in the community would have some good tips and tutorials to share. Look forward to hearing from you in the comments 🙂

Things that helped me build a $200,000 feature with a 4 week deadline

Luke Duncan — Fri, 17 May 2019 18:48:29 +0000

For about 8 months now, my company had a feature built into our Event Registration system that is only used by 2 or 3 priority clients. Before the feature was built, it cost our support team at least a months load of work to handle. So it was pretty much a no-brainer to implement.

When the feature itself was built late last year, we were under severe time restrictions and it was "hacked" into our system to make a client happy. After the clients event was over, the company realized that this feature could potentially be a huge revenue stream. The decision was made to turn this into a full-fledged feature that all of our users could have access too. I was the one in charge of the project.

But time was against us. My wife is currently 37 weeks pregnant at the time of writing this. And as a company we also had other large projects that needed work. But I was given 4 weeks to make it happen. It was almost going to take a miracle to get the feature production ready, to remove the hacks and to learn parts of the system I wasn't familiar with. But hey, code is only words on a screen that magically work sometimes.

So here are a few things that helped me build a complicated system in a small amount of time. Junior or new developers please read!

Always set expectations with your team

I knew the people above were itching to get this feature out the door. To stop the constant questioning, I came up with a detailed schedule of what was going to be worked on and when. I also included potential setbacks and other small work items that had to be worked on alongside this project.

This helped me in the long run because it would stop useless meetings and slack messages from being sent. Meaning I had more time for work, and less time talking about work.

Don't even code until you have too

When I first started working on the project, I sat down with the CTO and we created a list of action items that had to be done. He wasn't going to be coding this feature, but his insight and the information he could provide were invaluable. The action list included things that had to be done at a high level. E.g. customers had to have xyz, we need to show users abc.

Once I had that action list scribbled on a piece of paper in front of me. I literally sat for two days pseudo coding the entire project. Pseudo coding for me is done at a lower level than the action list. E.g. what database columns would need adjusting, what views did I need to create/edit, what models was I going to be interacting with.

I can't recommend this enough. Once I got in front of my computer, it made the actual coding so much easier. I've seen junior developers

just dive straight onto their computer and into a problem, and it often leads to major major coupling issues. Sometimes a pen and paper is all you need.

I promise it won't be fun in a few weeks or when somebody else has to come in and fix it!

TDD until you die

When I mentioned I was turning pseudo code into actual code, I should have been clearer. I was turning pseudo code into tests into code!

Pseudo Code -> Write Tests -> Write code for tests to pass -> FEATURE WORKS ALL THE TIME

When creating a feature (especially one of major importance), I always think it's vital to follow test driven development. If you don't know what TDD is, take a look at this great article by @chasestevens https://dev.to/chasestevens/getting-started-with-test-driven-development-1o8f

My favorite part about following TDD, it breaks the code into manageable parts. This makes it easy for other developers to review the code and review pull requests.

If you're struggling, take a break

At around week 2 of the project, I was really struggling to understand the more complicated parts of the system. After 3 days of working on it, I still didn't understand what I was looking at.

I realized that I had to take a break from looking at the code. I moved onto small, quick wins I could knock out and worked on them for about a day. When I found myself having to come back to the complicated parts, all of a sudden I had lightbulb emojis flashing above me head. If your an engineer, you definitely know the feeling!

Take a break, have a Kit-Kat.

I often tell junior developers that if they are having a tough time - go and take a walk, spend a few hours away from your computer and let the mind relax. The answers will always come, I promise! If you struggle to take breaks, then do what I did. Move onto other parts of the project so your mind can think "differently".

Conclusion

Ultimately, all these points helped me successfully build out the project on time. And so far the support team has not recorded any bugs - pray for me!

But I hoped these points helped out, especially for junior developers. I truly believe that half the job of a software developer doesn't even revolve around typing on a computer.

What are some tips you have for others to help them build software? Drop them down in the comments 😄

What is your favorite CI tool to integrate with a Rails project?

Luke Duncan — Fri, 17 May 2019 14:50:18 +0000

I'm looking to integrate a CI into a new Rails project I'm working on. What are your favorite CI tools?

I have experience utilizing CircleCI for my job, but wanted a more low cost tool if there was any out there.

Thanks for the recommendations in advance!

Uploading a CSV to AWS S3 in Rails to use in an Email

Luke Duncan — Wed, 08 May 2019 19:12:34 +0000

Recently we were dealing with an issue for a customer (we’ll call them customer X) that has been with us for several years. They have hundreds of thousands of records in our system and we are starting to deal with issues of scale.

For a typical customer that isn’t customer X, they could simply go to a dashboard we had created, click on a button and a CSV report downloads straight from the browser with a few hundred records. For customer X this simply wouldn’t work because the calculations in the backend took too long for the browser and often ended up timing out. It was a simple problem to solve with a background job which is exactly what we did a few years ago.

We implemented a background job to run the query and when ready would allow the user to download the report from an email we had sent them. It was a perfect solution for customer X until another problem arose. Here is the email method that was performed and put in a background job:

def email_sales_report(email)
  @report = Reports::Sales.new(report_params)
  attachments['sales_report.csv'] = @report.csv
  mail to: email, subject: "Email Sales Report #{Time.now}"
end

This looks fine and dandy right?

We thought it did too until one day we started receiving errors about this email report not being able to be sent. After a few hours of digging and irrelevant error messages, we found out that the email server could not handle attachments of the size we were trying to use.

In order to make this report work again, we had to come up with a solution where we could host the CSV and link to it from the email. AWS S3 which most of you should know is “simple storage service” allowing you to store documents, files and more was the perfect solution.

Here are the basic steps we took to set this up in our Rails application:

Adding AWS SDK to gemfile and bundle install

Just for this tutorial, if you don’t already have AWS-SDK within your Rails repo, go ahead and add it and then bundle install.

gem 'aws-sdk'

Setting up initializer

First we setup an initializer to get S3 working. We set this up like so in a file we created — /config/initializers/amazon_s3.rb

We set this as a global variable that could be accessed at any point in our rails application through AMAZON_S3_CLIENT

AMAZON_S3_CLIENT = Aws::S3::Resource.new(region: 'us-west-1',
  access_key_id: 'XXXXXXXXXXXXXXX',
  secret_access_key: 'XXXXXXXXXXXXXXXXXXXXXXXXX'
)

Creating Class Command to instantiate S3 Upload

We utilize commands throughout our app that are put into background jobs like the one we have been talking about with the reports. We created another command for uploading our CSV’s to S3. This is how we set it up below in a file named commands/reports/upload_to_s3.rb:

class Report::UploadToS3 < Command::Base
  attribute :csv

  action do
    self.set_aws_bucket
    obj = AMAZON_S3_CLIENT.bucket(@bucket_path).object("#{Time.now}/report.csv")
    obj.put(body: csv, acl: 'public-read', content_disposition: 'attachment')
    return obj.public_url
  end

  def set_aws_bucket
    case Rails.env
    when 'production' then
      @bucket_path = 'csv'
    when 'staging' then
      @bucket_path = 'staging.csv'
    else
      @bucket_path = 'dev.csv'
    end
  end
end

There are a few things I’d like to point out. Notice that we use a different bucket path depending on the environment that we are working on, we don’t want to mix and match csv uploads.

Next — you’ll see that Time.now is included in the string for saving the file name in S3. This will create a folder called “01/01/2019 18:00:00” for example and within that the actual file. This was just to show that you can create subfolders.

In our actual app we do some complex things to create folders for individual users so that each user has their own folder and we can save all the reports they have been downloading. You should be able to figure out ways to do this on your own but it is highly recommended you do so and in a secure manner not using any common identifiers like user_id and things of that nature.

And lastly, you’ll notice content_disposition: 'attachment' is vitally important as it allows the CSV to be downloaded and acl: 'public-read' is important too because it makes your CSV’s viewable for your customers. The URL for this file is returned using public_url instance method which can be seen here:

https://docs.aws.amazon.com/sdk-for-ruby/v3/api/Aws/S3/Object.html#public_url-instance_method

Invoking the command and retrieving the URL

Now this is what our email_sales_report method looks like :)

def email_sales_report(email)
  @report = Reports::Sales.new(report_params)
  @s3_public_url = Report::UploadToS3.new(csv: @report.csv).execute

  mail to: email, subject: "Email Sales Report #{Time.now}"
end

@s3_public_url can be used in the email template for this method like so:

<p>Your all attendee ticket list is attached. Please click on the link below:</p>
<a href="#{@s3_public_url}" download>Download Report</a>
Now you can send a file as you want over any email server. This has helped us immensely not only send out large reports to our customers, but it has also helped us to see which customers are downloading reports and how frequently they are downloading them.

Hopefully this has helped you out and is easy to follow along. If you have any questions or need any help uploading files to S3 and using those files throughout your rails app — shoot me an email at luke.will.duncan@gmail.com

How to build an audio player with HTML5 and the Progress element

Luke Duncan — Wed, 08 May 2019 15:34:21 +0000

HTML5 introduces built-in media support with the audio tag, which makes it very easy to embed media straight into any HTML document with limited code. It comes with built in browser controls, if you specify and plays audio nice and effectively.

This is typically what it will look like in your browser.

You might be thinking: “Well what if I wanted to style my own audio player with it’s own buttons and scroll bar?”

With the audio element, the progress element and a few buttons, you can build your own audio player in no time! The progress element is mainly used to track the completion of a task and can be manipulated easily with Javascript. In our case, it would be to keep track of the length of a song. And the great thing is, HTML5 and browser capabilities make it easy to grab song lengths, current time and more.

If you’d like to play with the code, go for it! Unfortunately Codepen embeds aren't working for me so the link is below.

View on Codepen here!

And below is the code. Note that their are two separate functions. One that keeps track of the audio player actually playing audio (initPlayers function) and the other that is keeping track of the audio for the progress element (initProgressBar function). I tried to keep jQuery to a minimum but used it to actually call the function, sorry, i’m not sorry JS purists.

If you have any questions or suggestions, i’m all ears! Email me at luke.will.duncan@gmail.com or hit me up on twitter @luke__duncan