DEV Community: hkly

Inspiration for the New Year: React and Tailwind

hkly — Fri, 08 Jan 2021 21:51:43 +0000

I've been so focused on my work as a backend dev for the last couple years that I hadn't taken the time to explore the latest and greatests of the frontend ecosystem. Over the holidays, I was finally inspired to dive into React and Tailwind CSS and I'm really glad I did!

One of the mini projects I made as practice is this Random Inspiration Generator. I hope it can help you find some inspiration for the new year!

The React app itself here is very simple and minimal, where I had the most fun with this app was learning about Tailwind CSS.

Tailwind CSS is a CSS framework with a ton of utility classes that allows you to style your app right in the markup. You can also use it to compose custom styles in CSS.

I remember when I first looked at Tailwind, I was immediately intimidated by the copious amounts of utility classes. I couldn't wrap my brain around how I was supposed to know what classes existed and what classes to use, but once I broke the seal and dove into it, it became pretty intuitive and the docs are well written. I was able to style this mini inspiration app in just minutes! Okay, maybe a bit longer cause I was going back and forth to the docs, but the important part was I didn't have to spend any time coming up with my own class or selector names or organize my CSS or do any pixel pushing. It was really easy to come up with a polished look with just their built-in utility classes, I didn't have to write any custom CSS, but I like that I can if I needed to. I am definitely sold on Tailwind now and will be using it for my personal projects.

For React, I, of course, started with the classic to-do app to learn some of the basic functionality. At first, thinking in small components was a bit of a challenge. I wasn't sure how to capture or propagate certain events while also encapsulating things within a component. But after learning about passing functions in props and using React Hooks, I started really enjoying the ease and simplicity of React. In fact, using React Hooks and passing functions as props allowed me to make my functions so short and organize my code in a way that I almost felt like I was writing Ruby and Rails code. Now I can't imagine not thinking in components, I can't imagine not using React and organizing my Javascript in any other way. I talked my non-web developer partner's ear off about how awesome React is over dinner and she told me I was in NRE (new relationship energy) with React. I think I am in love with React. 😍

I'm used to focusing more on the code that I need for my job, but I am glad I tried something new this year. I am really looking forward to diving deeper and building more with React and Tailwind. I hope this inspires you to try something new too, and don't forget, open yourself to the impression left by thousands of butterflies. 🦋 Happy New Year y'all!

Something out of Nothing: Null Object Pattern

hkly — Mon, 13 Jul 2020 22:58:50 +0000

Originally published on Beezwax.net.

What is nothing? nil? null? undefined? A vast void of emptiness that fills your soul with dread? Oh sorry, that's just my stomach.

We often think of nothing as... well, nothing. It's when something doesn't exist and therefore cannot be interacted with. So in our code, we try account for having nothing. No User? No problem.

def display_name
  if @user.present?
    @user.name.titlecase
  else
    "Guest User"
  end
end

Fixed it with a conditional. Right...?

But what happens when you want something else from the User elsewhere? Use another conditional?

def avatar
  if @user.present?
    @user.avatar
  else
    default_avatar
  end
end

Technically it would solve your problem for now, but soon there will a bunch of if statements cluttering your code when all you really want to do is simply call a method.

Here's where the Null Object Pattern can come in handy.

What if instead of nothing, you had a something. Something that responded to the API of your object. That something would be the "null object"-- It is an object that represents when you have no object, kind of like a placeholder.

Instead of having to check whether or not you have a User object, you can ensure you always have something that will respond to your method calls by providing a null object that responds to the API of your object.

class GuestUser
  def name
    "Guest User"
  end

  def avatar
    default_avatar
  end
end

Now you can use this GuestUser whenever you don't have a User.

def initialize(user = GuestUser.new)
  @user = user
end

def display_name
  @user.name.titlecase
end

def avatar
  @user.avatar
end

As you can see in the above example, I've injected the GuestUser in as a default parameter in the constructor. Now if a User isn't passed in, the code will use the GuestUser, and no more need for additional conditionals!

To the keen eye, you'll notice that this Null Object Pattern is actually an example of Composition over Inheritance! Check out this post on Composition over Inheritance if you'd like to learn more.

The code examples are in Ruby, but the concept can be applied to any Object Oriented programming.

Cover photo by Casey Horner.

Ruby's Safe Navigation Operator `&.` and is it a Code Smell?

hkly — Mon, 06 Jul 2020 18:34:47 +0000

Originally published on Beezwax.net.

What is `&.`?

Ruby devs are probably all too familiar with seeing this error:

NoMethodError (undefined method `foo' for nil:NilClass)

If you're not familiar with this error, you can check out Ben's post on it:

NoMethodError: undefined method for nil:NilClass... Explained

Ben Halpern ・ Jul 2 '20

#rails #ruby #errorexplained #beginners

Most of the time, the error is probably due to a typo, but every now and then we end up having to do something like:

defined?(bar) && bar.foo
# returns nil if bar is nil

If you're on Rails, or are using ActiveSupport, you can use present? or try():

bar.present? && bar.foo
# returns false if bar is nil

bar.try(:foo)
# returns nil if bar is nil

In Ruby 2.3.0, they introduced the safe navigation operator &. which returns nil when called on a nil object, like so:

bar&.foo
# returns nil if bar is nil

This can be pretty handy when you're not in Rails-land or just want some compact code.

`&.` vs `.try()`

So other than the number of characters, what's the difference between ActiveSupport's try() and the Ruby safe navigation operator &.?

&. will only return nil if called on a nil object. Calling &. will raise a NoMethodError if it is called on a non-nil object that doesn't implement the method. However, try() will just return nil if called on anything that doesn't implement the method. (Note: try!() works just like &.)

bar = 'a'

bar&.foo
# returns NoMethodError (undefined method `foo' for "a":String)

bar.try(:foo)
#returns nil

bar.try!(:foo)
# returns NoMethodError (undefined method `foo' for "a":String)

This also means that &. will return NoMethodError if called on false, whereas doing a presence check would return false before attempting to call the method. I'm not sure when this scenario would come up, but it is good to be aware of.

bar = false 

bar&.foo
# returns NoMethodError (undefined method `foo' for false:FalseClass)

bar.try(:foo)
#returns nil

bar.present? && bar.foo
# returns false

Is this a code smell?

The safe navigator isn't inherently bad. In fact if you have something like this in your code foo && foo.bar Rubocop will admonish you for not using safe navigation.

However, using &. too often in your code is probably something to avoid. Relying on safe navigation encourages the bad habit of passing around nils, it can make bugs harder to find, and personally I find it can make code harder to read.

For example, I had this piece of code:

if posts.empty? || mean(posts.pluck(:unicorns_count))&.zero?

At first it seems pretty innocuous, I was getting a NoMethodError (undefined method 'zero?' for nil:NilClass), the fastest thing to do was just toss the safe navigator on there and move on. However, if I left it that way, I'd just run into the error again if I tried calling another method on the results of mean() somewhere else in my code. Does that mean going around tagging on safe navigators everywhere I called mean()? No way! The answer was to look at why a method called mean() was returning nil to begin with and refactor the method.

The safe navigation operator should only be used when nil is an acceptable result, but more often than not, you don't want to be returning or passing nil anyway. If you're leaning on &. too often or you find yourself with code that looks something like:

potatoes.foo&.bar&.baz&.qux

It's time to take a closer look at refactoring your code. The 'Null Object Pattern` could be one potential solution (and potentially a future post for me to write🤔).

I wrote the future post!

Something out of Nothing: Null Object Pattern

hkly ・ Jul 13 '20

#ruby #beginners #oop #webdev

Cover photo by https://unsplash.com/@lucabravo

Running Local NPM Executables

hkly — Thu, 28 Sep 2017 19:04:47 +0000

Typically, npm command line executables are installed globally so you can run it from whatever project on your machine. However, sometimes you'll want to run a locally installed package. Here's how!

When npm packages with executables are installed locally, they are linked to ./node_modules/.bin within your project. To invoke them, you would have to enter the entire path pointing to the package name.

For example, if you've locally installed gulp for a single project, it would look something like this to invoke it from the project directory: ./node_modules/.bin/gulp

To make life easier, you can add this bit of script to your .bashrc:

npm-run() {
  $(npm bin)/$*
}

What's happening here is npm bin returns the path of where your executables are, and then the package name you want to invoke is inserted where the $* are.

So now, to run gulp all you have to do is npm-run gulp.

You can even define the function with a shorter name instead of npm-run, like nr, or whatever your heart desires :)

Easy as pie!

DEV Community: hkly

Inspiration for the New Year: React and Tailwind

Something out of Nothing: Null Object Pattern

Here's where the Null Object Pattern can come in handy.

Ruby's Safe Navigation Operator `&.` and is it a Code Smell?

What is &.?

NoMethodError: undefined method for nil:NilClass... Explained

Ben Halpern ・ Jul 2 '20

&. vs .try()

Is this a code smell?

Something out of Nothing: Null Object Pattern

hkly ・ Jul 13 '20

Running Local NPM Executables

What is `&.`?

`&.` vs `.try()`