Lessons learned the hard way

Image for post
Image for post
Photo by Marty Southwell on Unsplash

Sometimes I wish answers could be spoon-fed to me and not necessarily done the hard way by reading and searching. But if we ever want to earn our ability to fly we need to stretch our wings and leave the nest. Definitely, a lesson I learned from this problem I was present on building an elixir ecto query with a nested and/or statement.

The Problem

I ran into a problem where I wanted to create an ecto query that would nest an and/or statement inside my where clause. If you don’t understand that it's probably because it's hard to put into words…


Lessons learned the hard way

Image for post
Image for post
Photo by Torsten Dederichs on Unsplash

Wow, this took me way too long to figure out. For the past week, I've been stumped by something that was so simple it was complicated. Oh, the pains of learning a new language. Sometimes I feel like the goat pictured above wrapped in a leash of Elixir and Ecto docs. I thought it would be helpful to share with others what I had learned in order to help someone else out in the same situation.

The Problem

I needed to select all items from a database that had a jsonb array column that contained a string…


Build your project’s own component library

Image for post
Image for post
Photo by Filiberto Santillán on Unsplash

How many times have I started a new React project and thought to myself, I wish I had a good common component library built the way I like and with what I like? Then I spend a day or so getting all my boilerplate set up and working.

What if there was a way to cut this time in half? There is — by building your own common component library or using a pre-built component library like bootstrap.

I classify component libraries into two categories.

  1. Common stylistic components
  2. Common logical components

You can find a lot of libraries that can…


React state may not always be immutable

Image for post
Image for post
Photo by DDP on Unsplash

Today I was working through a problem with a component involving the react context API which was holding state I was sharing between two components. Testing out my knowledge of hooks I decided to useReducer and wrap my context API in a hook. Here’s an article I used to get started.

After happily coding away I was up and running. A beautiful new react hook that held all the state I needed to share between these components.

Well little did I realize but I had set myself up for failure before anything had…


npm install from a git repo

Image for post
Image for post
Photo by Dayne Topkin on Unsplash

Have you found yourself like me scouring the internet for the cheapest easiest way to do something? I spent a few hours digging into finding a way to host, deploy, and install a package using npm but without using npm. I think I found the cheapest most elegant solution, and I hope you can benefit from what I’ve learned.

Here’s the short answer: Use a Git repository. It really doesn’t matter which one you use. But it can even be a repository that isn’t public.

The nice thing about using npm to manage your packages is that you can install…


Image for post
Image for post
Photo by Bernard Hermant on Unsplash

Recently I came upon an interesting dilemma that probably wasn’t that unusual of a problem. I needed to mock a method that existed in the same class that I was testing.

This problem helped me realize that I hadn’t grasped the concept of a mockito spy.

When you want to mock an entire class you can initialize that class as a mock but if you want to use unmocked functions in that class and still mock some of them you need to initialize the class as a spy.

Here’s how you initialize a class as a Mockito Mock:

Apple apple…

A continuation of the game you play on your own right here, in this piece

Image for post
Image for post
Photo by Carl Raw on Unsplash

Well, hopefully, if you’re reading this, you’ve checked out my first quiz on Javascript/React. If you haven’t you can check it out here on Better Programming a medium blog.

This second quiz consists of 6 problems. Hopefully, they don’t rack your brain too badly.

1. (True/False) Functional Arguments (Numbers, Booleans, Strings, Null, and Undefined) Are Passed by Reference

2. (True/False) Consider the Following Code, Do the Comments Represent the Correct Output?


A tutorial for writing a simple authentication React Hook

Image for post
Image for post
Photo by Artem Sapegin on Unsplash

Really, it’s pretty simple. At first, it may seem like it’d be really complex. But it really is simple. First, you need to figure out what you would like to hookify. If you don’t understand the new Context API, it might be good to do a little refresher on that before you read this.

In this brief tutorial, we’re going to create a small authentication Hook. You can plug it into your API or build it out however you want after this tutorial.

Get Your Context Set Up

This isn’t too hard. If you’re on the latest version of React, then you should have Context…


The game you play on your own right here in this article

Image for post
Image for post
Photo by Sebastian Davenport-Handley on Unsplash

How much of a JavaScript guru are you? Are you trying to take your programming career to the next level?

I've put together 10 JavaScript trivia problems, see if you can answer them without using your browser console. Hopefully, you can learn something.

1. What Does the Following Code Console Output?

var bar = null;console.log(typeof bar === "object");

a) False

b) True

c) Null

d) Throws an error

2. What Does the Following Code Console Output?

(function(){
var a = b = 3;
})();

console.log("a defined? " + (typeof a !== 'undefined'));
console.log("b defined? " + (typeof b !== 'undefined'));

a) True, false

b) False, true

c) True, true

d) False, false

3. Everything in React Is a _______ .

a) Module

b)…


Using the best date library in the world

Image for post
Image for post
Photo by Chad Kirchoff on Unsplash

There’s an easy way to do things, and there’s a hard way to do things. I'm the kind of person who prefers the easy way. Usually, less code for me means it’s the easy way.

If you are new to moment.js, then I recommend reviewing it a bit. Also, you will need to have moment.js installed or imported into your workspace.

We’re going to be taking advantage of two simple functions moment.js gives us. That's the .add() and .diff() functions.

Here’s some quick documentation on how they are used.

.add()

moment().add(Number, String);
moment().add(Duration);
moment().add(Object);

The function accepts three different parameter formats.

Number and string

Avery Duffin

Im a software engineer, react developer, inventor, salesman, family man, religious, and outdoor connoisseur

Get the Medium app

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