Forem: Ethan Fertsch

Gnarly Learnings from July 2023

Ethan Fertsch — Mon, 31 Jul 2023 19:52:52 +0000

`ComparisonValidator`

Gone are the days when we need to write custom validators in Rails to determine if a start date begins before an end date! Back in 2021, the ComparisonValidator was added to Rails 7. While useful for solving the date comparison example above, that’s not all it can do! It can also compare strings, and it allows for the flexibility of custom comparisons.

Active Storage Can Pre-Process Variants

Earlier this month Rails added a feature allowing Active Storage variants to be pre-processed up front by adding preprocessed: true to the variant definition. This makes the attachment ready to serve from the outset, rather than requiring the variant to be prepared/transformed on the fly.

JavaScript’s `findLast()` and `findLastIndex()`

There are a few new Array functions included in ES2023, findLast() and findLastIndex(). The exciting piece is less about what these functions do (you can probably figure it out from the names) and more about the convenience that they provide. As a Rubyist by trade, I am used to a super developer-friendly experience when it comes to the readability, and accessibility of functions so it’s great to see these being added to JavaScript - even if it took until 2023. 😉

Partial Renders in Rails

Partial rendering allows you to create a consistent template with different sections, for example “title”, “body”, and “footer.” Then the templates can define content for each of those sections without having to know anything about the layout of the root template.

`React.FC` Removed From create-react-app Base TypeScript Template

If you build React apps with TypeScript, you're certainly used to seeing and using the React.FC (or React.FunctionalComponent) type at the declaration of your functional components. The folks maintaining create-react-app have decided to remove this type from their template as they believe it is more harmful than helpful. I tend to agree, particularly around the implicit definition of children.

Contributors:

Ethan Fertsch
Steve Zelaznik
Taylor Kearns

Learn more about how The Gnar builds software.

How Generative AI Impacts Software Development at The Gnar

Ethan Fertsch — Thu, 27 Jul 2023 18:50:26 +0000

It would be difficult to make it through a day without hearing, reading, or seeing something related to Artificial Intelligence (AI). While the concept of AI is nothing new, there is a new form of AI that has generated a lot of buzz: generative AI. In the simplest terms, generative AI is a system that can generate content (text, images, code) in response to user input. This type of system has the potential to significantly impact many industries - from healthcare to legal to the software development industry.

As a consultancy, we are constantly evaluating new tools and technologies that will help us to efficiently deliver high-quality work to our clients. At this point, it’s important to highlight that we are consumers of AI, not creators of it. That is to say, we won’t be building the next big natural language processing tool, but we may use one to help us write a test for a certain piece of code. There are a number of AI platforms that are already proliferating in the software design and development space, and our team is happy to experiment with them.

Generative AI at The Gnar

We asked our team what tools they were using to make their process more efficient and there were two at the top of the list: GitHub Copilot and ChatGPT. But we’re more than just an engineering shop - we also offer a full suite of design services and there are a number of tools that our designers use to improve the quality of their deliverables, such as MagiCopy.

GitHub Copilot

GitHub Copilot is marketed as an “AI pair programmer”. It is a paywalled service ($10/mo) that was released in the fall of 2021. The tool plugs into a text editor, such as VSCode, and can make real-time code suggestions based on input from the developer.

How We Are Using It

The majority of our team is using it to increase velocity and reduce the monotony of repetitive tasks. GitHub Copilot is anticipatory so if you begin typing some code it will try to automatically complete a word, line of code, or function. This may sound simple, but when we look at time spent on the keyboard over the course of an engagement, all of those reserved keystrokes have a cost savings associated with them. As a more practical example, we are firm believers in the value of comprehensive test coverage in the applications that we build. However, writing tests is time-consuming, and by nature, there is quite a bit of repetitive setup for each file. GitHub Copilot really shines here because it can handle much of the setup and can even write complete tests for you (though we strongly caution against accepting these at face value, more on this later).

Here’s what one of our team members had to say when asked how they were using AI to make their life easier:

“Github Copilot! I much prefer the in-editor interface to anything prompt-based and while it often spits out nonsense for business logic it excels at test suites. [...]”

Why We Are Using It

GitHub Copilot has been an easy choice for our team for a number of reasons. GitHub is a credible and familiar platform. We use it almost exclusively for storing and managing code. Moreover, GitHub was acquired by Microsoft back in 2018 so we know that they have strong financial and technical backing, which is promising for the tool’s longevity. It also integrates directly with VSCode (another Microsoft brainchild) which is a favorite text editor of many of our team members and therefore has a low barrier to entry. This combined with the time and effort savings during development makes it really attractive for developers and clients alike. However, it’s not all kittens and rainbows (more on this in the Challenges with Generative AI section).

ChatGPT

Chat Generative Pre-Trained Transformer (affectionately referred to as ChatGPT), is a natural language processing tool which is really just a fancy way of saying “an AI-based chatbot” which was developed by OpenAI and released in late 2022. A user can engage with ChatGPT via prompts and receive human-like responses. It is not software specific/focused - you can ask it what the meaning of life is, to build a keto meal plan for you, or to convert a Ruby method to Python. The world is your oyster.

How We Are Using It

ChatGPT is used less often than tools like GitHub Copilot but it did come up a number of times when discussing Generative AI with our team. It can be a great replacement for specific, simple questions about things like code syntax. With these types of questions, it’s often faster to use a tool like this than scouring blog posts or forums like Stack Overflow. One team member finds utility in ChatGPT as a “rubber duck” when they are trying to solve a problem.

“It's better curated than Stack Overflow. Sometimes AI is my "rubber duck". The process of forming a coherent question for ChatGPT helps me better understand the problem I'm working on.”

Why We Are Using It

The primary reason for using ChatGPT is that it is super easy to get started. Getting started requires nothing more than an account with OpenAI and a question. Developers spend a significant amount of time learning, researching, and reading documentation. There are certain situations in which tools like ChatGPT cut down on reading so more time can be spent writing code.

MagiCopy

MagiCopy is a Figma plug-in. Figma is the choice interface design application of our design team. The plug-in can generate copy based on project type, company, desired tone, and content type.

How We Are Using It

Our design team uses MagiCopy to generate meaningful text for wireframes and mockups.

Why We Are Using It

We use MagiCopy because it provides a more realistic feel to design deliverables, which translates to a more delightful experience for our clients and their stakeholders. Without a tool like this, there would be a time investment in generating realistic copy in the specific context of a project, or worse, we’d see a lot more lorem ipsum. Additionally, as with many of the other tools mentioned in this article, MagiCopy integrates with a platform that we know and love, lowering the barrier to entry.

“There's a constant struggle when designing of whether we need copy before design or design before copy. In instances when copy isn't written yet or fully approved for a website, designers will use "Lorem Ipsum" as placeholder text in their work, but it doesn't do a good job of representing how real copy will flow on a page. Not only that, but telling the brand story is important to elevating the design, so if the copy isn't final I write my own to help make a design feel more real. Having the ability to generate copy for my designs with a tool like MagiCopy I not only save time, but no longer have to default to "Lorem ipsum" when copy is not available or I'm unable to write it myself.”

While these tools have the potential to enhance the design and development process, we also envision a number of broad challenges that Generative AI poses to the industry. With great power comes great responsibility…

Challenges with Generative AI

While these recent advances in Generative AI are remarkable and the conceptual utility is there, there are a number of challenges that have prevented widespread adoption at The Gnar.

Overreliance. At this stage, the output from these tools is often flat-out wrong and still requires a careful eye to ensure what is being returned is usable and correct. Could ChatGPT build a web app for you? Probably. Would it be production-ready or usable out of the box? Almost certainly not. The responses from the tools are only as good as the level of detail and prompts that you provide to them. As users of ChatGPT and GitHub Copilot, we’re still required to take everything with a grain of salt and double-check the output - it would be a mistake to become overly reliant on these tools to perform our work for us.
Misrepresentation. This applies less to our current team but more to potential hires (and the potential hires of our clients). It is becoming increasingly easier to misrepresent a skillset using tools like this. A design candidate could use an image-based Generative AI platform to create and submit a portfolio of work just as easily as a software developer could use ChatGPT or GitHub Copilot to complete a coding assessment. While we like to assume the best, this is a serious ethical concern that will need to be monitored as these tools become more advanced.
Intellectual Property. Generative AI tools are built and continuously trained on the data that they are fed. The more data they process, in theory, the more helpful they become. The work we produce is always considered the intellectual property of our clients. When it comes to the impact of using a plugin like Github Copilot, that intellectual property is being used as input data to improve that tool. There’s a big question mark in our minds about whether companies are aware of this and more importantly, if they’re okay with it.
Impact on Cost and Quality. While we don’t think AI is going to cost us our jobs or take over the world, there are specific concerns about how we work with AI that will impact software development:

“In its current form, generative AI could be a repeat of the "low code" experiments of the 1990s: I think a lot of non-technical decision makers will think it can heavily automate software development. They will pay consultancies to ‘use AI’ to cheaply write their apps. The apps won't work very well and they need more money to fix them than it would have taken to write them properly the first time.”

The takeaway from all of this? Generative AI tools are very powerful and have the potential to greatly impact the software development industry. We are still in the very early days of technology of this type and there are a lot of challenges and ethical concerns that prevent us from diving in head first. However, we plan to continue to evaluate these tools and to use them to boost productivity by assisting with repetitive tasks - but only when and where it makes sense to do so, without compromising quality.

Meet The Gnarnians: Erik

Ethan Fertsch — Fri, 21 Jul 2023 14:34:56 +0000

**Gnarnian [nahr-nee-uhn] noun:** An employee of The Gnar Company

In our Meet The Gnarnians series, we unravel the stories, experiences, and passions that drive the folks on our talented team at The Gnar. Through a collection of interview-style questions, you’ll get a sneak peek into daily life on our fully-remote team, some epic origin stories, and answers to some questions as weird and wonderful as our team itself.

The Basics

Where are you located? Chicago, IL

What is your Role? Software Engineer

When did you join the Gnar? December 2021

What’s the last song you played or are listening to right now?

Ballroom Blitz. The Crucial Taunt version.

What was your career journey up until joining the Gnar?

I started out in networking and servers and took a nice long education break before coming back as a developer, then worked for a nonprofit for a long time before joining an early stage startup. In general, I've just stayed curious by doing what I want and things have worked out pretty well.

In your role, do you have any specializations or areas of focus you really enjoy doing?

I really enjoy designing software systems: Thinking in terms of architectural patterns, how best to model the real world concepts involved, how you can play to the strengths of your chosen language, and so on. There's something very satisfying about producing things that are easy to understand and do what you expect, and the design phase is generally where you're closest to what stakeholders really want in the end, whether it's a feature or a greenfield app.

What is your ideal work/desk set-up?

A standing desk, (not a convertible, which I will not convert) with good light, decently-but-not-maximally clackety keyboard, enough screen real estate to read a browser tab and a terminal (dark text, light background) at the same time. Zsh, tmux, vim, asdf. Good headphones for music, which I will feel weird about wearing for meetings. Coffee, for which my taste is utterly gauche.

What has your experience been at Gnar?

I've gotten to be involved in a long standing state project with a really interesting back end architecture, which is maybe not the first thing you picture working on going into a Rails consulting shop. It's very satisfying to see features through not just to completion but all the way through fine tuning them in the real world. The best answer here though is the people--- folks at Gnar are really welcoming and supportive.

What advice would you give someone who is just starting out in your industry?

Don't let popular opinion tell you what success looks like for you. There are a ton of great jobs out there in the world, so keep an open mind and figure out what makes you happy and keeps you curious. And it's ok to go slow.

Outside of work, what do you enjoy doing?

Music. Listening to it, playing it, recording it, talking about it, etc.

If you weren’t in your current role, what would you be doing?

Live sound guy.

Learn more about The Gnar and our team.

Gnarly Learnings from June 2023

Ethan Fertsch — Fri, 30 Jun 2023 19:18:49 +0000

At The Gnar we are always reading, watching, and listening in order to keep our skills sharp and our perspectives fresh. Here are some of the resources we learned from this month.

Understanding TypeScript’s Newest Keyword: `using`

One of the reasons I appreciate TypeScript’s place in the Node.js ecosystem is how they approach incoming JS proposals, and how eager and willing they are to bring these new advancements to the ecosystem early enough to get excited, but late enough to trust it. using is a reflection of the upcoming ECMA TC39 proposal for more explicit handling of “temporary” connections (DB executions, file handlers, etc), and since it has made it far enough to be eventually adopted into JS proper, TypeScript is more than happy to prepare me by adopting it now.

Backtick Strings vs `URLSearchParams`

The title of the article linked above is a _little _clickbait-y but hey, I read it and I am glad I did. The React documentation provides an example of building a URL string to query an API using template literals or “backtick strings”. However, as the author correctly points out, this is not the best tool for the job. Template literals will _work _but aren’t made for creating serializable strings. For that, we have URLSearchParams, which will properly escape parameter values, among other things.

Removing Active Storage Objects via Form POST

Gone are the days of needing to reach for clunky conditionals to massage Active Storage-related params when using direct uploads! Previously, to remove an Active Storage object from a record it would need to be explicitly set to nil. This was all well and good until you would try to do it on form submission and receive an error because the passed value in the params was actually an empty string. Now, setting the value to nil or an empty string yields the same result. 🎉

The Gateway Pattern

Especially on large projects, my services directory admittedly ends up looking a bit like a junk drawer. So, if you’re like me and wrap all external API communication in service objects, you’ll be glad you found this article. A gateway is used to formalize the boundary between your app’s domain and an external API, translating between the two. This is more specific and nuanced than how I typically use service objects, and helps clean up the codebase.

Shopify’s Ruby LSP in VSCode

I was shopping around for a simpler way to auto-format my Ruby code with minimal extensions and config. In my research I came across the Ruby LSP (Language Server Protocol) created by Shopify, who maintain one of the most well-known commercial Rails monoliths. This article describes the LSP and the VSCode integration of it, but it also includes a nice dive into LSPs in general.

Stack Overflow Releases Their 2023 Developer Survey

Here at The Gnar, we love a good developer survey. Admittedly, this is my first experience with the one released by Stack Overflow (SO). There are a bunch of interesting takeaways but I loved reading about how Postgres is now the most loved, admired, and popular relational database (this is true here at The Gnar too - we have a whole series on some of its lesser-known features). SO also includes a new section on the prevalence of AI search tools where ChatGPT (unsurprisingly) is sitting pretty with 83% of professional respondents leveraging it in the past year.

Contributors:

Learn more about how The Gnar builds software.

Metaprogramming in Ruby: Advanced Level

Ethan Fertsch — Fri, 30 Jun 2023 19:15:47 +0000

This post is the third in a series focused on the application of Ruby metaprogramming. If you’re just starting to learn about metaprogramming, “Metaprogramming in Ruby: Beginner Level” is a great place to get started. For those seeking a more practical example of metaprogramming, check out “Metaprogramming in Ruby: Intermediate Level”. In this article, we’ll discuss how a few popular Ruby gems make use of metaprogramming to solve everyday programming problems.

When you go out for a walk, do you bring a paddle with you? Of course not! A paddle would be pointless. It’s only when you’re up the creek that a paddle is invaluable.

So too it goes with metaprogramming.

Welcome to the final installment of our Metaprogramming in Ruby series. Up to this point, we’ve been going through relatively simple, handcrafted Ruby metaprogramming examples. In the beginner level post, we discussed how to use Ruby define_method and send to dynamically create methods. And in the intermediate level post, we put those concepts into practice with a slightly more practical example.

This time, we’re going to look at how metaprogramming is used in the wild by diving into the code underlying popular Ruby gems. The libraries we’ll be looking at are:

devise: An authentication library designed for Rails
factory_bot: A fixtures replacement
rspec: A testing library

Ruby metaprogramming in the `devise` gem

Of the gems we’re analyzing today, this is probably the most straightforward example of metaprogramming in Ruby.

When initially setting up devise in your project, you generally run rails generate devise MODEL, where MODEL is the name of your devise model. So if you wanted your users to have a model name of User , you’d run rails generate devise User.

To make this example a little clearer, let’s assume you run rails generate devise Gnarnian, which will make your devise model Gnarnian (that’s what we call ourselves at Gnar).

After migrating, you’ll get access to a slew of helpers created by the generator, including some nifty url and path helpers like new_gnarnian_session_path, gnarnian_session_path, and destroy_gnarnian_session_path.

But that’s not all! As you add third-party sign in methods to your app/models/gnarnian.rb file, you additionally get access to those path helpers! For instance, you can add :omniauthable, omniauth_providers: [:google_oauth2] to your devise modules to set up Google sign in; that should provide you with user_google_oauth2_omniauth_authorize_path for redirecting users to Google sign in.

At its core, this is made possible by lib/devise/controllers/url_helpers.rb, which uses define_method to create the path helpers, like so:

# lib/devise/controllers/url_helpers.rb

def self.generate_helpers!(routes = nil)
  routes ||= begin
    mappings = Devise.mappings.values.map(&:used_helpers).flatten.uniq
    Devise::URL_HELPERS.slice(*mappings)
  end

  routes.each do |module_name, actions|
    [:path, :url].each do |path_or_url|
      actions.each do |action|
        action = action ? "#{action}_" : ""
        method = :"#{action}#{module_name}_#{path_or_url}"

        define_method method do |resource_or_scope, *args|
          scope = Devise::Mapping.find_scope!(resource_or_scope)
          router_name = Devise.mappings[scope].router_name
          context = router_name ? send(router_name) : _devise_route_context
          context.send("#{action}#{scope}_#{module_name}_#{path_or_url}", *args)
        end
      end
    end
  end
end

Ruby metaprogramming in the `factory_bot` gem

Factory Bot is considered by many to be a must-have tool for testing Rails projects. The factory_bot gem actually uses metaprogramming concepts in a couple of places, but here we’ll focus on the use of traits, callbacks, and the evaluator argument.

For the sake of example, let’s say you have articles and authors tables. Each Article belongs to a specific Author and each Author can have many Articles. You could create a basic factory like so:

# spec/factories/authors.rb

FactoryBot.define do
  factory :article do
    title { "MyString" }
    body { "MyText" }
    published { false }
    author
  end
end

But Factory Bot also provides callbacks that allow you to execute code for a given strategy. So if you’d like to run code after calling create, then you could write something like after(:create) do <something>.

Now let’s assume an Author has written Books that you need to access in your tests; to generate Books written by your Author, you could make something like:

# spec/factories/authors.rb

FactoryBot.define do
  factory :author do
    transient do
      book_names { ['The Color of Magic'] }
    end

    name { 'Terry Pratchett' }
  end

  trait :has_books do
    after(:create) do |author, evaluator|
      Array(evaluator.book_names).each do |book_name|
        create(:book, name: book_name, author: )
      end
    end
  end
end

Notice that you can use evaluator to access transient properties. So in your test, you could write create(:author, :has_books, book_names: ['Equal Rites', 'Mort']), which would create two books with the provided names and the same Author.

This flexible and powerful behavior is facilitated by the Ruby define_method and method_missing blocks found in factory_bot/lib/factory_bot/evaluator.rb.

# lib/factory_bot/evaluator.rb (selected snippets)

def method_missing(method_name, *args, &block)
  if @instance.respond_to?(method_name)
    @instance.send(method_name, *args, &block)
  else
    SyntaxRunner.new.send(method_name, *args, &block)
  end
end

def self.define_attribute(name, &block)
  if instance_methods(false).include?(name) || private_instance_methods(false).include?(name)
    undef_method(name)
  end

  define_method(name) do
    if @cached_attributes.key?(name)
      @cached_attributes[name]
    else
      @cached_attributes[name] = instance_exec(&block)
    end
  end
end

For more detailed examples, check out the getting started docs!

Ruby metaprogramming in the `rspec-core` gem

At long last, we’ve arrived at our final Ruby metaprogramming example: the 800-lb gorilla that is rspec and its many associated gems. Of the three examples discussed here, rspec uses metaprogramming most extensively. This makes some intuitive sense given that we’re talking about a full-fledged testing framework.

That being said, the code and documentation for rspec is generally clear and descriptive, making it a fantastic repository for learning about metaprogramming techniques. In rspec-core/lib/rspec/core/dsl.rb, for example, the implementation is spelled out in code comments.

Let’s create an example for illustration:

RSpec.describe "posts/index", type: :view do
  it "renders a list of posts" do
    # ...something
  end
end

# Creates RSpec::ExampleGroups::PostsIndex
# $ RSpec::ExampleGroups::PostsIndex.describe
# $  => RSpec::ExampleGroups::ArticlesIndex::Anonymous
# $ RSpec::ExampleGroups::PostsIndex.examples
# $  => [#<RSpec::Core::Example "renders a list of posts">]

For each spec, RSpec will construct the RSpec::ExampleGroups::Example subclass. Note as well that RSpec::ExampleGroups::Examples::Anonymous.describe will increment the id appended to the end of RSpec::ExampleGroups::Examples::Anonymous (e.g., Anonymous_2, Anonymous_3, Anonymous_4, etc.).

When you create your spec file with RSpec.describe, behind the scenes your arguments are being passed to dsl.rb:

# rspec-core/lib/rspec/core/dsl.rb
# In this case, `args` are `["posts/index", {:type=>:view}]`
# and `example_group_block` is the block of code representing your spec 

(class << RSpec; self; end).__send__(:define_method, name) do |*args, &example_group_block|
  group = RSpec::Core::ExampleGroup.__send__(name, *args, &example_group_block)
  RSpec.world.record(group)
  group
end

Those arguments are then passed to RSpec::Core::ExampleGroup, which determines if the block is top-level and, if so, defines a new ExampleGroup subclass.

# rspec-core/lib/rspec/core/example_group.rb (selected snippets)
# In this case, `name` is `:describe`

def self.define_example_group_method(name, metadata={})
  idempotently_define_singleton_method(name) do |*args, &example_group_block|
    thread_data = RSpec::Support.thread_local_data
    top_level   = self == ExampleGroup

    registration_collection =
      if top_level
        if thread_data[:in_example_group]
          raise "Creating an isolated context from within a context is " \
                "not allowed. Change `RSpec.#{name}` to `#{name}` or " \
                "move this to a top-level scope."
        end

        thread_data[:in_example_group] = true
        RSpec.world.example_groups
      else
        children
      end

    begin
      description = args.shift
      combined_metadata = metadata.dup
      combined_metadata.merge!(args.pop) if args.last.is_a? Hash
      args << combined_metadata

      subclass(self, description, args, registration_collection, &example_group_block)
    ensure
      thread_data.delete(:in_example_group) if top_level
    end
  end

  RSpec::Core::DSL.expose_example_group_alias(name)
end

def self.subclass(parent, description, args, registration_collection, &example_group_block)
  subclass = Class.new(parent)
  subclass.set_it_up(description, args, registration_collection, &example_group_block)
  subclass.module_exec(&example_group_block) if example_group_block

  # The LetDefinitions module must be included _after_ other modules
  # to ensure that it takes precedence when there are name collisions.
  # Thus, we delay including it until after the example group block
  # has been eval'd.
  MemoizedHelpers.define_helpers_on(subclass)

  subclass
end

The returned subclass, in this case, would be RSpec::ExampleGroups::PostsIndex. Calling subclass.module_exec will step through the example_group_block and define Examples (i.e., tests) for the RSpec::ExampleGroups::PostsIndex subclass:

# rspec-core/lib/rspec/core/example_group.rb
# In this case, `name` is `:it`
# and `all_args` is `renders a list of posts`

def self.define_example_method(name, extra_options={})
  idempotently_define_singleton_method(name) do |*all_args, &block|
    desc, *args = *all_args

    options = Metadata.build_hash_from(args)
    options.update(:skip => RSpec::Core::Pending::NOT_YET_IMPLEMENTED) unless block
    options.update(extra_options)

    RSpec::Core::Example.new(self, desc, options, block)
  end
end

Now that the ExampleGroups subclass (i.e., the spec) and its Examples (i.e., the tests within the spec) have been defined, the runner is called to execute the tests!

# rspec-core/lib/rspec/core/runner.rb
# If we're running only this spec, `example_groups` would be
# a single-member array containing `RSpec::ExampleGroups::PostsIndex`

def run_specs(example_groups)
  examples_count = @world.example_count(example_groups)
  examples_passed = @configuration.reporter.report(examples_count) do |reporter|
    @configuration.with_suite_hooks do
      if examples_count == 0 && @configuration.fail_if_no_examples
        return @configuration.failure_exit_code
      end

      example_groups.map { |g| g.run(reporter) }.all?
    end
  end

  exit_code(examples_passed)
end

Is metaprogramming in Ruby pointless?

If you’ve read all three installments in this series, then firstly – thank you! We hope we adequately addressed your Ruby metaprogramming questions, or at least inspired curiosity.

Secondly, you’ve probably noticed we reiterated ad nauseum that metaprogramming is a “break glass in case of emergency” kind of tool.

So let’s wrap this up by addressing the elephant in the room one last time: is Ruby metaprogramming useful to the average developer? Our hope is that these three articles have proven to you that the answer should be an emphatic, “YES”....

…followed by a cautiously muttered, “under the right circumstances and for specific use-cases.”

Learn more about how The Gnar builds Ruby on Rails applications.

Meet The Gnarnians: Taylor

Ethan Fertsch — Thu, 29 Jun 2023 17:56:14 +0000

Gnarnian [nahr-nee-uhn] noun: An employee of The Gnar Company

The Basics

Where are you located? Charlestown, MA

What is your Role? Software developer / grumpy old man

When did you join the Gnar? 2016

If you were in the middle of a zombie apocalypse, who are three people you'd want on your team?

My wife Lauren: she's the most practical person I know. The kids we can leave behind.
Nick Maloney. I'm not saying he's already prepared for this exact scenario, but he's probably pretty close.
Zach Galifianakis. I just feel like someone would need to lighten the mood.

What’s the last song you played or are listening to right now?

"Rust" by Lagwagon is generally running through my head a few times a week.

In your role, do you have any specializations or areas of focus you really enjoy doing?

From a technical perspective I'm a Rubyist and a Javascripter. I have had a lot of fun and made a lot of web applications armed with these very powerful tools. Being a full-stack developer means I never get tired of writing back-end or front-end code, as I get a pretty good mix of both all year round.

From a career perspective, I have always gravitated toward the people side of the work. Building software is fun, but seeing what it means for a founder and their users is what makes the work exciting for me. Consulting has given me an opportunity to build software and build relationships at the same time.

If you weren’t in your current role, what would you be doing?

If I didn't work at the Gnar, I would probably be starting a coffee roasting business. I have been a hobbyist coffee roaster for some time now, and have put most of my Gnar anniversary gifts towards grinders, roasters, espresso machines, even a refractometer! Google that one.

What has your experience been at Gnar?

I was the first full-time hire at The Gnar, more than six years ago. When I first met Mike (I already knew Nick), the company was located in the conference room of another company. There was a big white board with all of the client work organized on it, two large desks, about six chairs, and cables everywhere. I said to myself ""this is definitely where I want to work.""

Since that day I have upgraded offices four times, and I have watched the team grow from four to twenty-five. And throughout all of this change and growth, my sense of belonging and pride in the company has only grown. It's been a pleasure thus far.

What's your favorite part of working at Gnar?

The people. First and foremost, if Mike and Nick were not the people they are, this company would not be what it is. The trickle-down effect is that we have hired really great team members. Strong developers, designers, and relationship managers, of course. But as importantly, we've hired people with interesting perspectives, different ideas, and bold opinions. And mutual respect is table stakes. It makes for this evolving culture of growth and energy, pulled in a slightly different direction by each new hire.

Also clapping. There's a lot of clapping.

What advice would you give someone who is just starting out in your industry?

Ask questions early and often. Whether it's a question to a colleague about writing code or a question to a client about a requirement, make sure you understand exactly what is happening and what is needed. Nobody will ever fault you for wanting to get it right.

Outside of work, what do you enjoy doing?

I really enjoy gardening when I'm outside and reading fiction when I'm inside. I grew up in the Rocky Mountains, so winter sports are a big part of my life. I have used the term "gnar" many times prior to working here.

Learn more about The Gnar and our team.

Meet The Gnarnians: Erica

Ethan Fertsch — Thu, 01 Jun 2023 17:50:11 +0000

**Gnarnian [nahr-nee-uhn] noun:** An employee of The Gnar Company

The Basics

Where are you located? Philadelphia, PA

What is your Role? Design Director

When did you join the Gnar? November 2022

What's the best advice you've ever received?

When I was in college I used to order enough Chinese food to last me a couple of days (very normal, we all did it). The best part of not only having cheap meals that would last the week but the large amount of fortune cookies they would include in the assumed large family sized order. Most of the time the messages you get are pretty repetitive, "Don't hold onto things. that require a tight grip," "A faithful friend is a strong defense, " or like "Good luck will find you soon". However, this one night while I was stressing over my end of year portfolio, I opened one that said, "You can do anything but not everything", then another that said, "Don't Panic". Both very different than you'd typically get. I kept them, and taped them to a post card I pinned to my wall, and carried them with me until I lost them in a move. So yeah, I could say that was the best advice I've received thanks to my delivery food.

What’s the last song you played or are listening to right now?

Currently listening to "I'm a Princess" by Bill Wurtz.

What was your career journey up until joining the Gnar?

My entire career has been in the design industry but not the same mediums. When I graduated I worked for small NYC design studios, designing identities specifically for hotels, restaurants, and food & beverage companies. That work included a lot of print design, web design and creation of die-lines for physical product packaging. The work I did for restaurants focused around menus, branding for the interior, signage, and their websites. After working for a few small studios I moved to a global agency in NYC, and developed design systems for healthcare and consumer brands like Vonage, Amtrak, and Nestle Waters. At some point everyone was switching from agencies to tech start-ups and I thought I'd might try that out too. While working at various tech start-ups, I got to wear many hats (marketing hats, product management hats, and even an office design hat), was able to build my experience in product design, lead several small design teams, and most recently was part of a fintech start-up that went public during my tenure there.

If you weren’t in your current role, what would you be doing?

There was a point in my life where I was torn between culinary school and art school. Obviously I picked art school, but if I didn't I would 100% be doing Pastry/baking.

What is your ideal work/desk set-up?

I recently moved into my own house and for the first time had the freedom to put my desk in its own room other than my bedroom or living room. I built a wall-length desk with a counter top, added some table legs and desk drawers. Since it's technically a kitchen countertop I don't have to worry about the condensation from all my iced coffees ruining it. I also keep a lot of design books within reach, pens, my sketchbook, and a Wacom tablet. On the other end of the desk is a work area for my partner and the xbox. With summer coming, I'll probably move to take some calls on my back patio, but I prefer to work from my office. It's important to me to maintain that feeling of stepping away from my "work area" for a mental break which is why I tend to only be productive from one area versus multiple set-ups throughout my house.

How do you structure your work day or week?

One thing about me that has been forever true, I am NOT a morning person. I am not productive at all. I start my day either taking a brisk walk with my dog to a local coffee shop or just the walk and then make coffee at home. Either way I need coffee, coffee is a priority. Knowing my focus isn't the best in the morning I tend to designate that time then to things like, checking emails, planning my tasks for the day, and attending stand-ups for various projects. One of the best things about working remotely is I actually am more productive earlier than when I used to commute to work. Before lunch, I typically spend time doing any additional research, and looking up design inspiration. By the afternoon I am more heads down on client work which ranges from writing user research plans, designing, connecting with contract designers, and working internal projects for The Gnar like, designing social posts, writing blog posts, or documenting internal processes. At 3pm my dog reminds me it's time for her walk, and after that 'm usually heads down for the rest of the afternoon to early evening. Being a night-owl I will often be back online after 8pm for anything that is still swirling around in my head.

Outside of work, what do you enjoy doing?

My partner and I own a small gelato shop in Fishtown, Philadelphia. If I'm not there helping him in the shop, I'm either out with my dog, playing video games or visiting friends in NYC for the weekend.

Learn more about The Gnar and our team.

Gnarly Learnings from May 2023

Ethan Fertsch — Wed, 31 May 2023 16:23:20 +0000

At The Gnar we are always reading, watching, and listening in order to keep our skills sharp and our perspectives fresh. Here are some of the resources we learned from this month.

Automatic Fetch Request Deduping with Next.js

NextJS focuses a lot on optimization. So it was no surprise to learn about fetch request deduping. When using fetch with Next, any GET requests with the same input will be cached, so that if there are multiple requests for the same resource during a render cycle or between page refreshes, Next will not make the HTTP request again.

Variable Fonts in Google Fonts

I am always deliberating over which and how many font weights and variants to import from Google Fonts. I want them all, but am I willing to accept the file size overhead? Luckily Google has come up with a significant improvement to web fonts: variable fonts. These fonts allow for a single font to be selected, and that font can be adjusted by weight, slant, and more. Read more about variable fonts.

Active Record’s `rewhere`

It now takes two hands to count the number of years I have been working with Ruby on Rails and I still regularly discover new concepts and methods. This month, it was rewhere, an Active Record method that allows you to change a previously set where condition for an attribute. If you’re thinking “Hey…that sounds an awful lot like the behavior of unscope” you’d be right! That’s because it is a shorthand for unscope(where: conditions.keys).where(conditions).

Cross-Browser Support for Import Maps

A modern choice for including and reusing JavaScript code in web apps is ES modules. There are a variety of ways to implement ES modules but import maps have been gaining popularity in recent years. Popularity, in this case, equates to industry adoption. For example, Rails 7 (released in 2021) allowed us to break away from the Node.js and webpack bundling strategy and leverage import maps instead. Now, import maps are compatible across the three major browser engines which will make developing with them much easier.

Migration Method: `create_join_table`

I was late to this party! When creating a join table in Rails, there's no need to pass id: false to a typical table creation method. Instead, just reach for create_join_table.

Contributors:

Learn more about how The Gnar builds software.

Gnarly News April 2023

Ethan Fertsch — Sun, 30 Apr 2023 14:51:31 +0000

The software development landscape is constantly changing. As a software consultancy, it’s our responsibility to keep our finger on the pulse of the industry. Here are some headlines that caught our attention recently.

Rails World: A New Conference in 2023

Conference season is upon us! There have been many announcements as of late about conference dates and CFPs but one of the most buzzworthy for us is Rails World. Rails World is a brand-new conference that is sponsored by the Rails Foundation and will be held in Amsterdam, Netherlands (😏) on October 5th and 6th.

Ruby 3.2.2 Released

Ruby 3.2.2 was released at the end of last month. There’s nothing super shiny in this release but there are some important security fixes in the Time and URI classes that you’ll want to get in ASAP.

Next.js Version 13.3 Released

This release is all about community-requested features! Four main improvements are described in the release notes such as the ability to dynamically generate sitemaps and Open Graph images. It also adds SPA support for Server Components and adds some new advanced routing features for the App Router.

Contributors

Ethan Fertsch

Learn more about how The Gnar builds software.

Gnarly Learnings from April 2023

Ethan Fertsch — Sun, 30 Apr 2023 14:39:47 +0000

At the Gnar we are always reading, watching, and listening in order to keep our skills sharp and our perspectives fresh. Here are some of the resources we learned from this month.

CSS Supports Trigonometry Functions

Trig functions in CSS make it easier to rotate objects and let us avoid using magic numbers. For example, sin(60 degrees) expresses the developer's intent more clearly than 0.866025.

Action Mailer Now Supports *_deliver Callbacks

Three callbacks (before_deliver, after_deliver, around_deliver) have been added to Action Mailer. You may have strong feelings about callbacks and I probably tend to agree with you, but sometimes they are the right tool to reach for. The described use cases for this include updating an Active Record model’s delivered_at (which is especially useful when dealing with async deliveries), handling delivery errors, and executing tasks that require a delivery provider’s message_id.

Useful Tips for Using GitHub Copilot

Like any other tool, GitHub Copilot has a learning curve. This article from GitHub developer advocate Rizel Scarlett gives us a few tips to quickly improve the quality of Copilot suggestions. One thing I didn’t realize: Copilot uses your open tabs to provide context for the questions you ask! That tip in and of itself really helped me make better use of the tool in my day-to-day work.

CSS text-wrap: balance

Chrome Canary now includes a new experimental CSS feature, text-wrap: balance, that evaluates line breaks to balance blocks of text. As developers, we often look for solutions that help to keep text consistent regardless of final font size, screen size, and language, which are often unknown. This property aims to mitigate those concerns, though it is not without its challenges. It is currently limited to four wrapped lines (and under) and presents some performance considerations due to the iterative technique used to perform the wrapping.

TypeScript’s infer

TypeScript’s Conditional types have allowed developers to build internal type logic based on types provided to the conditional—Model<string> might have subtle differences in signature from Model<number>. Now, TypeScript has given us infer, allowing us to identify and refer to dynamic type values from within a Conditional type. It sounds like a lot - and it kind of is, the uses for this are pretty niche! - but once you wrap your head around it, you’ll have a powerful new TypeScript tool in your arsenal.

Contributors:

Learn more about how The Gnar builds software.

Design Systems: What They Are and Why You Need One

Ethan Fertsch — Fri, 28 Apr 2023 19:50:18 +0000

By definition a design system is a complete set of standards intended to manage design at scale using reusable components and patterns. When properly implemented, a design system provides a lot of benefits not only to design teams but development teams as well.

Imagine you are tasked with baking a cake. You know what it looks like from the outside and from your extensive experience eating cakes you know that cakes have layers, frosting and, sometimes, decorations. But do you know just from looking at it what ingredients were used to make it? To successfully make your cake you will need to know more than just the experience of eating cake. You need to know the ingredients and how to use them. Creating a design system is a lot like creating a recipe.

Taking this very relatable scenario one step further, you are now a cake baking superstar. Customers love you, you're getting very busy and you need to hire staff. As you look to expand your cake baking enterprise you know you want scalability, consistency, to maintain productivity, and to share your cake knowledge with the new bakers so they can follow the recipes. So what do you do? You create a recipe book.

In designing digital products, as in establishing your very own cake shop, the overarching goal is to be able to build for scale. Having to produce digital products (or cakes) without any clear guidance on how to do it isn’t very helpful.

When creating a design system one method that I like to reference is Brad Frost’s Atomic Design. Atomic design is a methodology composed of five distinct stages working together to create interface design systems in a more deliberate and hierarchical manner. Frost defines the five stages of Atomic Design as:

Atoms: The foundational building blocks that comprise all user interfaces. “Atoms” include basic HTML elements like form labels, inputs, buttons, colors, fonts and others that can’t be broken down any further without ceasing to be functional.
Molecules: In interfaces, molecules are relatively simple groups of UI elements functioning together as a unit. For example, a form label, search input, and button can join together to create a search form molecule. Creating simple components helps UI designers and developers do one thing and do it well. Burdening a single pattern with too much complexity makes software unwieldy. Therefore, creating simple UI molecules makes testing easier, encourages reusability, and promotes consistency throughout the interface.
Organisms: Organisms are relatively complex UI components composed of groups of molecules and/or atoms and/or other organisms. These organisms form distinct sections of an interface.
Templates: Page-level objects that place components into a layout and articulate the design’s underlying content structure.
Pages: Specific instances of templates that show what a UI looks like with real representative content in place.

The Atomic Design method is not a linear process, but rather a mental model to help us think of user interfaces as both a cohesive whole and a collection of parts at the same time. While this method is appropriate for designing and developing evergreen design systems for digital products, there are plenty of other existing design systems that designers often use such as:

So far, we've primarily focused on the methods of understanding the value of creating and following a design system for digital products, but the practice of design systems also extends to how a brand is expressed through other communication touchpoints. Similar to design systems for digital products, designers create traditional “Brand Guides” which focus on the overall strategy and consistency of a brand as it relates to a logo, colors, and brand personality, which include visual examples of how the brand should be executed in various communications.

It’s been common practice to create brand guidelines ahead of website design in order to ensure that the brand look and feel is in place first. The problem is that these brand guidelines often don't include guidance for digital products. With the digitization of work, products, and communication, this is now changing.

The practice of creating Design Systems for digital products is still relatively new and rapidly evolving. In 2005, Jenifer Tidwell published her book Designing Interfaces followed by Yahoo! publishing their open source Yahoo User Interface Library (YUI) in 2006. In 2008, phrases such as "CSS Libraries", and “pattern portfolios” paved the way for the creation of "Front End Style Guides" and "Style Tiles". In 2011, Twitter shared their own open-source framework around design patterns, Blueprint (later renamed Bootstrap), and Google's Material Design followed in 2014.

Since then we've seen design systems from IBM, AirBnb, and Uber that encompass not just their brand guidelines, but also full-scale design systems.

Whether you’re a small design team or a large enterprise business, defining, scaling and streamlining your design ensures a more holistic user experience, saves money and prepares you for the future. To quote former IBM president Thomas J. Watson Jr., "Good design is good business", and there is no easier way to bring value to your business than establishing a strong design system.

When developing design systems at The Gnar, we take a holistic approach to ensure that all aspects of your unique brand seamlessly integrate into your digital experiences. From website content to software error messages, each touchpoint with your customer is an opportunity to reinforce your brand values alongside a consistent look and feel.

After establishing your design system, the work doesn’t end there. Technology is rapidly evolving and so are the needs of your users. Thinking back to our super star baker, the original cake that won over customers years ago may not be as good as it is today, or perhaps you’ve added a lot of new desserts as a result of customer requests and the products are longer as consistent as they once were.

In my next post, I will break down why it’s important to reevaluate your current design system in order to see what is and isn’t working through an analysis commonly referred to as a "Design Audit".

Credit where credit is due: There is an open issue related to author re-assignment on this platform. This post was written by the one and only @ericaknauss and published by the Content Manager at The Gnar Company.

Learn more about how The Gnar builds design systems.

Gnarly News March 2023

Ethan Fertsch — Wed, 29 Mar 2023 19:03:11 +0000

Women Who Code Opens Nominations for 100 Technologists to Watch

It's Women's History Month, and Women Who Code are opening nominations for top technologists. WHC's mission is to "empower diverse women to excel in technology careers". Let the voting begin!

Ruby Turns 30

I was in my first year of life when Ruby was released. I wasn’t slinging code until much, much later but the metric provided perspective on the longevity of the language and how far it has come. We ♡ you Ruby, and we’re not alone.

Tuple Now Supports Linux and “Mob” Pairing

Tuple is a great tool for pair programming and they just shipped with a bunch of new features! The Tuple team teased the linked article back in November 2022 and recently sent an email to subscribers boasting a Slack integration, Linux support, increased call sizes of up to 6 people, and more.

Contributors

Learn more about how The Gnar builds software.

Forem: Ethan Fertsch

Gnarly Learnings from July 2023

Contributors:

How Generative AI Impacts Software Development at The Gnar

Generative AI at The Gnar

How We Are Using It

Why We Are Using It

How We Are Using It

Why We Are Using It

How We Are Using It

Why We Are Using It

Challenges with Generative AI

Meet The Gnarnians: Erik

Gnarnian [nahr-nee-uhn] noun: An employee of The Gnar Company

What’s the last song you played or are listening to right now?

What was your career journey up until joining the Gnar?

In your role, do you have any specializations or areas of focus you really enjoy doing?

What is your ideal work/desk set-up?

What has your experience been at Gnar?

What advice would you give someone who is just starting out in your industry?

Outside of work, what do you enjoy doing?

If you weren’t in your current role, what would you be doing?

Gnarly Learnings from June 2023

Contributors:

Metaprogramming in Ruby: Advanced Level

Ruby metaprogramming in the devise gem

Ruby metaprogramming in the factory_bot gem

Ruby metaprogramming in the rspec-core gem

Is metaprogramming in Ruby pointless?

Meet The Gnarnians: Taylor

Gnarnian [nahr-nee-uhn] noun: An employee of The Gnar Company

If you were in the middle of a zombie apocalypse, who are three people you'd want on your team?

What’s the last song you played or are listening to right now?

In your role, do you have any specializations or areas of focus you really enjoy doing?

If you weren’t in your current role, what would you be doing?

What has your experience been at Gnar?

What's your favorite part of working at Gnar?

What advice would you give someone who is just starting out in your industry?

Outside of work, what do you enjoy doing?

Meet The Gnarnians: Erica

Gnarnian [nahr-nee-uhn] noun: An employee of The Gnar Company

What's the best advice you've ever received?

What’s the last song you played or are listening to right now?

What was your career journey up until joining the Gnar?

If you weren’t in your current role, what would you be doing?

What is your ideal work/desk set-up?

How do you structure your work day or week?

Outside of work, what do you enjoy doing?

Gnarly Learnings from May 2023

Contributors:

Gnarly News April 2023

Contributors

Gnarly Learnings from April 2023

Contributors:

Design Systems: What They Are and Why You Need One

Gnarly News March 2023

Contributors

**Gnarnian [nahr-nee-uhn] noun:** An employee of The Gnar Company

Ruby metaprogramming in the `devise` gem

Ruby metaprogramming in the `factory_bot` gem

Ruby metaprogramming in the `rspec-core` gem

**Gnarnian [nahr-nee-uhn] noun:** An employee of The Gnar Company