DEV Community: April Skrine

Simple, beginner steps: RegEx and strings.

April Skrine — Fri, 29 Apr 2022 15:43:48 +0000

I've been working on learning Regex the past couple days. Regular expressions (RegEx) are used in programming languages to match parts of strings. You create patterns to help you do that matching. Here's my beginner crash course:

Define your Regex

Regex is annotated like: /someRegExHere/

So let's say we wanted to find if 'Hello' existed in a string.

const someString = "Hello, World!"
let ourRegex = /Hello/

We've got our string, and we've defined our Regex. There are multiple ways to use regex, but for now I've been using the Javascript .test() method. The test method is going to take our regex and apply it to a string that we pass as an argument. It will return true or false if our defined pattern finds a match, or not.

const someString = "Hello, World!"
let ourRegex = /Hello/
let result = ourRegex.text(someString)

Test returns true!

I've also used .match(), which actually extracts the matches found. The syntax is the opposite of .test()-- you call .match on the string and pass the regex as the argument.

Writing regex patterns:

There is A LOT to learn with Regex. Here's a cheatsheet of some I've learned (so far):

OR Looking for multiple possible matches.
let ourRegex = /Hello|Goodbye/
Ignoring case Matching different cases (i.e. A, a) The 'i' flag goes outside the //
let ourRegex = /Hello|Goodbye/i
Finding multiple matches Matching repeats of your regex. The 'g' (global) flag goes outside the //
let ourRegex = /Hello/ig
Wildcard Matches anything. Essentially a 'wildcard' character. This could match things like her, hen, etc
let ourRegex = /He./i
Character sets Allow you to define a group of characters we're trying to match, placing them inside square brackets.
let ourRegex = /b[ae]g/i
This would match bag and beg, but not big, bug or bog.
Character sets with range You can also define ranges, for letters or numbers.
let ourRegex = /[a-g]at/i
let ourRegex = /[0-9]/g
Combine them, too as needed:
let ourRegex = /[0-9a-g]/gi
NON match - negated character sets Use a carrot to define what you DON'T want to match. This would match everything NOT a number or vowel:
let ourRegex = /[^0-9aeiou]/gi
Repeating characters Use a + to match ONE or more repeating instances (consecutively).
let ourRegex = /s+/gi
Repeating characters Use a * to match ZERO or more repeating instances (consecutively).
let ourRegex = /Aa*/gi
Quantity specifiers Instead of + or * you can specify your own range with {}
let ourRegex = /Hell\syeah{3,10}/g
This would match only strings of "Hell yeahhh" with 3-10 h's on the end

Quantity can also only have a lower limit:
let ourRegex = /Hell\syeah{3,}/g

Start of string Match something only in the beginning of string. Carrot goes outside of brackets, etc
let ourRegex = /^April/
Would match April at the beginning of a string. (aka 'starts with')
End of string Match something only at the end of string. $ at the end
let ourRegex = /end$/
Would match if the string ends in 'end'. (aka ends with)
Alphabet, number and _ shorthand \w is equal to [A-Za-z0-9_]
let ourRegex = /\w/
OPPOSITE Alphabet, number and _ shorthand \W is equal to everything BUT [A-Za-z0-9_]
let ourRegex = /\W/g
Digits \d is the shorthand equal to [0-9]
let ourRegex = /\d/
OPPOSITE Digits \d is the shorthand equal to everything BUT [0-9]
let ourRegex = /\D/g
Whitespace \s matches whitespace, as well as form feed, new line characters and tab
let ourRegex = /\s/g
OPPOSITE Whitespace \s matches everything but whitespace
let ourRegex = /\S/g
All or none Check for the possible existence of an element
let ourRegex = /colou?r/
This would match 'color' and 'colour'

I'll definitely be adding more so keep checking back for the cheatsheet and tips to grow!

Simple, beginner steps: CSS animations!

April Skrine — Wed, 27 Apr 2022 13:31:01 +0000

Let's talk about a fun (and sometimes functional) topic-- animating our CSS! Here's some of the basics:

CSS animation is a really fun topic, and something I love to use to add some fun and life to my projects.

1.The first step is specifying keyframes for the animation.

Keyframes hold what styles the element will have at any given time.

@keyframes example {
  from {background-color: blue;}
  to {background-color: red;}
}

When we specify CSS styling inside the @keyframe, the animation will change from the current style to the new style over a time (that we specify).

2. Second, we have to bind the animation to some element, like an img, div, etc.

For example:

div {
  width: 300px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 10s;
}

We 'bind' the animation to the div by calling it in the animation-name property. We also specify that it will take 10s for the animation to execute.

!! Don't forget-- once the animation finishes, the element goes back to its original specifications. So if we had declared the background color blue, after the animation completes the div would go back to blue.

3. Deciding animation-duration property

animation-duration specifies how long it will take the animation to complete. If you don't specify this property the animation will not work because the default value is 0, which is 0 seconds.

4. Animation timing / breakdown

In our example above, our start point was the 'from' value and the finish was our 'to' value. You can also use percentages to represent the completion percentage, which means we can break it down as much as we'd like.

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  60% {
    transform: rotate(1800deg);
  }

  80% {
    transform: rotate(2085deg);
  }
  100% {
    transform: rotate(2160deg);
  }
}

In this example I was having a ball roll across the screen and come to a stop. This is the keyframe for the rotation aspect. The rotation from 0-60% completion is more, and then it slowly lessens until completion at 100%.

Some other animation properties:

animation-delay will specify a delay time before the animation executes. You can also do negative values, which will make the animation start as if it's already been playing for X number of seconds.
animation-direction decides the direction of the cycle. You can have values 'normal' (default/forward), 'reverse' (backwards, duh), 'alternate' (first forward, then backward), or 'alternate-reverse' (the opposite of alternate)
animation-iteration-count is how many times the animation will execute from start to finish. You can use the value 'infinite' if you never want it to stop.
animation-timing-function can specify the speed curve of the animation. Values can be 'ease' (start slow, execute fast, end slow), 'linear' (same animation speed start to finish), 'ease-in' (slow start only), 'ease-out' (slow finish only), 'ease-in-out' (slow start and end)

CODING TIP:

When writing out animations in CSS, sometimes I like to keep the properties separate, because for me it's easier to read:

div {
  animation-name: example;
  animation-duration: 20s;
  animation-timing-function: linear;
  animation-delay: 5s;
  animation-iteration-count: infinite;
  animation-direction: alternate-reverse;
}

But you can also simplify:

div {
  animation: example 5s linear 2s infinite alternate;
}

Those are some basic tips, have fun with your newfound powers!

Simple, beginner steps: CSS Flexbox!

April Skrine — Sun, 03 Apr 2022 14:52:11 +0000

Let's talk through the basics of one of the most versatile modules in CSS -- the flexbox!

The flexbox has two elements: the parent element (the container that's 'flexing') and the child element (the flex items). It's amazingly versatile because it allows us to format, layout and organize even when the size of the space is unknown-- or it's dynamic!

Parent properties:

1. display This is the building block, that is going to define the flex container.

.container {
  display: flex;
}

2. flex-direction This is going to dictate which axis your flexbox parent expands on, and which direction on that axis.
row: left to right
row-reverse: right to left
column: north to south
column-reverse: south to north

.container {
  flex-direction: row (OR) row-reverse (OR) column (OR) column-reverse;
}

3. flex-wrap Flexbox will always try to fit items into one line-- this property can allow it to wrap to a new line.
nowrap: all on one line
wrap: wrap onto multiple lines (top to bottom)
wrap-reverse: multiple lines (bottom to top)

.container {
  flex-wrap: nowrap (OR) wrap (OR) wrap-reverse;
}

4. justify-content This property defines the alignment on the axis declared originally for the flex.
flex-start: items are packed toward the start of the flex-direction
flex-end: packed toward end of flex direction
start: packed toward start of writing-mode direction
end: packed toward end of writing-mode direction
left: left packed toward left edge of container
right: left packed toward right edge of container
center: centered
space-between: items are evenly spaced on line
space-around: items are evenly spaced, space around them is also even
space-evenly: spacing between items and edges is even

.container {
  justify-content: flex-start (OR) flex-end (OR) center (OR) space-between (OR) space-around (OR) space-evenly (OR) start (OR) end (OR) left (OR) right (OR) you get the idea;
}

5. align-items This defines how the items are laid out on the crossing axis of the current line.

stretch: (default) stretches to fill container
flex-start: start of the cross axis
flex-end: end of the cross axis
center: items are centered on cross axis
baseline: items are aligned so their baselines are aligned

For this one, imagine your flex goes L-->R. Flex-start would mean all items align at the top (North). Flex-end would align them at the bottom (South). Center would center them along the center of North-South, centered by the item's center. Stretch would make them fill equal North-South space from the center. Baseline will center them North-South by baseline.

.container {
 align-items: (value here)
}

6. align-content This aligns the lines of a flex container within the extra space on the cross axis. This property only effects multi-lines flex containers.

normal: (default)
flex-start: items packed to start of container
flex-end: items packed to end of container
center: items centered in container
space-between: items evenly distributed from start to end of container
space-around: items evenly distributed with equal space around each line
space-evenly: items are evenly distributed with equal space around them
stretch: lines stretch to take up space

.container {
  align-content: (value here)
}

7. gaps The gap property handles the space between flex items. It only applies between items, and doesn't affect edges.

you can declare:
gap: 20px (default)
gap: 20px 20px (row-gap then column-gap)
row-gap: 20px
column-gap: 20px

.container {
  display: flex;
  ...
  gap: 10px;
  gap: 10px 20px;
  row-gap: 10px;
  column-gap: 20px;
}

Child properties:

1. order This can control the order items appear in the flex container. If items have the same order, they default to their source order.

.item {
  order: 5;
}

2. flex-grow This defines the flex item's ability to grow if necessary. The value is a proportion.

For example, if all items had a value of 1, the space would be distributed equally between the children. If one item had a 2, it would take up twice the allotted space of all other items.

.item {
  flex-grow: 4;
}

3. flex-shrink This is the opposite of grow, and allows items to shrink if necessary

.item {
  flex-shrink: 3;
}

3. align-self This allows the default alignment (the one in align-items in the parent) to be overridden in a specific item

.item {
  align-self: auto (OR) flex-start (OR) flex-end (OR) center (OR) baseline (OR) stretch;
}

It can take awhile to get a hang of the flexbox, but it's worth it!

Check out this amazing visual guide to CSS flexbox here!

Simple, beginner steps: API with Rails!

April Skrine — Fri, 18 Mar 2022 18:17:34 +0000

Let's talk through some basics to building out an API in Rails.

Make sure you have rails installed first by running gem install rails! This assumes you already have a rails directory started. If not, run rails new [name] --api to start new.

1. Build out your resources

For the sake of this example, we're going to work with the following:

Owner --< Pets >-- Pet Sitters
An owner has many pets
A pet sitter has many pets they take care of
Through relationships apply

Let's build out our resources. We're going to use rails g resource because it will generate model, controller, migration and serializers for us.

rails g resource owner name phone:integer
rails g resource sitter name phone:integer active:boolean
rails g resource pet name age:integer sitter:references owner:references

This will build out our resources, and include the foreign keys in the pet migration. References will ensure the foreign keys cannot have a null value when we migrate and update the schema.

2. Add/confirm relationships

Once we've created our resources with the generator, let's make sure our relationships are correct. The resource generator automatically generated the belongs_to when we used references, but we need to go into the Owner and Sitter models and include:

In Owner:

has_many :pets, dependent: :destroy
has_many :sitters, through: :pets

In Sitter:

has_many :pets
has_many :owners, through: :pets

Now our relationships are confirmed. In the Pets model you should see:

belongs_to :owner
belongs_to :sitter

This is also a good time to think about whether any relationships will need dependent: :destroy . Obviously if an owner deletes their profile, the pets they own should be deleted as well. We included this in the Owner model.

3. Validations

Now that our models are linked, let's look at validations in our models. Let's assume an owner must be 16 or older to use our service, and a pet sitter must be 18 to be a pet sitter. Also, a pet cannot be created without a name.

In Owner model:

validates :age, numericality: {greater_than_or_equal_to: 16}

In Sitter model:

validates :age, numericality: {greater_than_or_equal_to: 18}

In Pet model:

validates :name, presence: true

These are the validations we've added in each of the models.

4. Routes

Let's take a look at our routes in Config >> Routes. Since we used the resource generator, we'll already see:

resources :owners
resources :sitters
resources :pets

This means that all default routes are currently open. Let's clean up what's accessible:

resources :owners, only: [:index, :show, :create, :destroy]
resources :sitters, only: [:index, :show, :create, :destroy]
resources :pets, only: [:index, :show]

We can define the routes any way we want to, but this is what we'll arbitrarily use for now.

5. Controllers

Now that we've got the routes, let's head for the Controllers and get some of the routes defined. Let's just look at an example of OwnersController:

def index
        render json: Owner.all, status: :ok
end

def show
        render json: Owner.find(params[:id]), status: :found
end

def create
        render json: Owner.create!(owner_params), status: :created
end

def destroy
        Owner.find(params[:id].destroy
        head :no_content
end

private

def owner_params
        params.permit(:name, :phone, :age)
end

Make sure each Controller has routes defined for each route we've specified in our Config >> Routes. Technically, we didn't really need strong params for this, but I wanted to show an example. In the private methods of the controller, I've defined the strong params, which are the only params that will allowed to be passed.

!!! I've used find because it throws an error. I've also added the bang operator in the create method. In our ApplicationController, you would find something like this:

class ApplicationController < ActionController::API
  include ActionController::Cookies

  rescue_from ActiveRecord::RecordNotFound, with: :not_found
  rescue_from ActiveRecord::RecordInvalid, with: :render_unprocessable_entity

  private

  def not_found(error)
    render json: {error: "#{error.model} not found"}, status: :not_found
  end

  def render_unprocessable_entity(invalid)
    render json: {errors: invalid.record.errors.full_messages}, status: :unprocessable_entity
  end

end

All of our controllers inherit from ApplicationController, so we can write these rescues only once and they will be applicable for any of our Controllers that need them.

6. Serializers

First, you need to ensure that the serializer gem is in the Gemfile. If it's not, add gem "active_model_serializers", "~> 0.10.12"

Our resource generator already generated serializers for each model when we used the resource generator. We can use those serializers to limit what we receive in our responses. Anything in the related Controller will default to the serializer with the matching name, unless you specify otherwise. In our OwnerController, that would look like:

render json: <something>, serializer: <CustomSerializerName>, status: :ok

If you'll be using the default serializer with the corresponding name, you can omit the serializer specification in the Controller. However, let's say we have two serializers for Owners.

One default for index, so we see all owners with their :id, :name, :age, :phone like so:

class OwnerSerializer < ActiveModel::Serializer
     attributes :id, :name, :age, :phone

One custom serializer for show, so when we access individual owner info their pets are also returned:

class OwnerIdSerializer < ActiveModel::Serializer
     attributes :id, :name, :age, :phone
     has_many :pets

If we call that custom serializer in our show method:

def show
     render json: Owner.find(params[:id]), serializer: OwnerIdSerializer, status: :ok

end

Rails Generators - the basics.

April Skrine — Mon, 14 Mar 2022 16:23:14 +0000

RAILS GENERATORS

Let's talk generators in Rails. They save us time, AND they provide us with some awesome benefits:

They can set up some basic specs for an application's test suite. They won't write our complex logic tests for us, but they will provide some basic examples.
They are set up to work the same way each time. This helps standardize your code and enables your development to be more efficient since you don't have to worry as much about bugs related to spelling, syntax errors, or anything else that can occur when writing code manually.
They follow Rails best practices, which includes utilizing RESTful naming patterns, removing duplicate code, using partials and a number of other best of breed design patterns. (If you don't know what all of these are, don't worry — we will cover them shortly.)

SOURCE: LEARN.CO

FUN FACT - when you're creating an application with rails, you're actually already using a Rails generator.

Once you've created a Rails application, you can show a list of all available generators by running:

bin/rails generate OR bin/rails generate helper --help (The latter will give you detailed descriptions)

CREATING GENERATORS

Entering the basic command into the terminal will follow syntax like this:

rails g <generator name> <options> --no-test-framework

There are many generators, but the 4 we'll focus on here are:

Migrations
Models
Controllers
Resources

1. Model

Model will create a model & migration

rails g model Pet name breed

This would generate a Pet model, and a migration to create a pets table with two columns, name and breed. String is the default input for a table column, so we don't need to put name:string when using the generator

2. Controller

Controller will create a controller

rails g controller admin dashboard stats financials settings --no-test-framework

This will generate a controller file that inherits from ApllicationController, a set of routes to each of the arguments/options (dashboard, stats, financials, settings), a new directory for all of the view templates along with a view template file for each of the controller actions that we declared in the generator command, a view helper method file, a Coffeescript file for specific JavaScripts for that controller & an scss file for the styles for the controller

3. Migration

Migration will create a migration

rails g migration add_published_status_to_posts published_status:string --no-test-framework

This would generate a migration that looks something like this:

class AddPublishedStatusToPosts < ActiveRecord::Migration
  def change
    add_column :posts, :published_status, :string
  end
end

4. Resource

Resource will create a model, controller, migration & views directory

rails g resource Account name payment_status --no-test-framework

This would generate a migration file with the passed atrributes, a model file that inherits from ApplicationRecord, a controller file inheriting from ApplicationController, a view directory (with no view template files), a view helper, a Coffeescript file for specific JavaScripts for that controller & an scss file for the styles for the controller and a full resources call in the routes.rb file

The last item is a MAGIC ROUTE! It shows the full set of RESTful routes that'll you'll need to perform CRUD. If you run rake routes (optional filter) you'll see something like this:

rake routes | this account

accounts      GET    /accounts(.:format)          accounts#index
              POST   /accounts(.:format)          accounts#create
new_account   GET    /accounts/new(.:format)      accounts#new
edit_account  GET    /accounts/:id/edit(.:format) accounts#edit
account       GET    /accounts/:id(.:format)      accounts#show
              PATCH  /accounts/:id(.:format)      accounts#update
              PUT    /accounts/:id(.:format)      accounts#update
              DELETE /accounts/:id(.:format)      accounts#destroy

Sources: Learn.co Rails Guide

Cheat Sheet: ActiveRecord QueryMethods

April Skrine — Tue, 08 Mar 2022 17:11:24 +0000

.count

Return value: integer
Counts total of instances, or # of values in an array

Order.count

.create

Return value: New created instance of a class

Order.create(name: "Americano", price: 5.55)

.pluck

Return value: an array of values grabbed that match the plucked column names
Extremely helpful when used with other selectors

Person.pluck(:name)
# SELECT people.name FROM people
# => ['David', 'Jeremy', 'Jose']

Person.pluck(:id, :name)
# SELECT people.id, people.name FROM people
# => [[1, 'David'], [2, 'Jeremy'], [3, 'Jose']]

Person.distinct.pluck(:role)
# SELECT DISTINCT role FROM people
# => ['admin', 'member', 'guest']

Person.where(age: 21).limit(5).pluck(:id)
# SELECT people.id FROM people WHERE people.age = 21 LIMIT 5
# => [2, 3]

.sum

Return value: integer
Calculates the sum of a column

Person.sum(:age) # => 4562

.maximum & .minimum

Return value: integer
Finds the max/min value of a table column

Person.maximum(:age) # => 93
Person.minimum(:age) # => 93

.where

Return value: Instance(s) of class
Can take various arguments, including a string, array or hash. A single string is often 1 argument, and an array can be used for multiple arguments, where the first element in the array is treated as a template. It can also accept a hash, with the key/value pairs you're looking for.

String example:
Client.where("orders_count = '2'")

Array example:
User.where(["name = :name and email = :email", { name: "Joe", email: "joe@example.com" }])

Hash example:
User.where({ name: "Joe", email: "joe@example.com" })

.max_by & min_by

Return value: enumerator
Good to use in methods, as its return value by itself is not a common wanted value. Looks for either the min/max values

Coffee.all.max_by{ |c| c.orders.size}
Coffee.all.min_by{ |c| c.orders.size}

.first & .last

Return value: Instance of class
Very useful in conjunction with .sort

Order.all.sort.last

Sources: rubydoc.info

3 ways to code CSS in React

April Skrine — Mon, 21 Feb 2022 22:10:59 +0000

Getting comfortable with React can be a bear. And once you're comfortable... unfortunately, there's no guarantee you know how to give your components any sort of unified styling.

CSS can become a convoluted process in React, so here are the 3 most common ways you can implement CSS:

1. STYLESHEET

The most recognizable way to implement CSS in React is a .css stylesheet. Though the easiest to navigate-- especially if you're already familiar with CSS-- it can get complicated rather quickly with a large application and be difficult to reference as the size increases.

Another potential drawback to a .css stylesheet in React is that it interacts in a very specific matter with Bootstrap/Semantic UI, and getting your CSS to override the defaults in either requires making sure you're being more specific, or using !important , which isn't always best practice.

Also, make sure where you're bringing in class from your stylesheet, make sure to use className=

2. IN-LINE STYLING

My favorite method, inline styling can be organized quite nicely as long as you pay attention to indentation and 'hamburger-style' HTML elements.

In-line styling has a few specific rules:

<label style={{
  color: '#C1BBDA', 
  fontSize: '20px', 
  fontFamily: 'shizuru'}}
>
 NAME
</label>

As you can see in this example, the 'style' code is added directly into the HTML element that exists in the JSX. Inside of the opening tag (or the main, if it's self-closing) you'll add style={{}}, where the outer set of brackets refer to JSX. Inside the brackets indicating CSS, you'll add your CSS styling, with the following rules:

a colon follows all separately, i.e. 'color:'
if the styling has multiple words, camel case will be used, rather than the traditional CSS stylesheet format. fontSize would be used in in-line styling, rather than font-size
all styling following the ':' will be encased in a string. i.e. color: '#C1BBDA' (The hex code is inside quotes)
commas are still to implemented between style, if there are multiple styles applied. See the above example, where commas exist between each applied style

3. STYLED-COMPONENTS

The final alternative to applying CSS in React is styled components. In order to use styled components, you must import them into a component:

import styled from 'styled-components'

Once imported into the component, the syntax for styled components varies slightly from the previous two examples. Outside of your component's function, you will declare an HTML element styled:

const div = styled.div`
  margin-top:40px;
  margin-bottom:20px
`

Declare a variable and set it equal to styled.${someHTMLelement}, immediately followed by an backtick. On the next lines, the indented code will look extremely similar to stylesheet CSS, with colon and semi-colon format. When you have applied all styling, the end line of the styled component should end with an backtick, as shown above.

After declaration, calling the styled component looks exactly similar to calling a imported component anywhere else in your React application. For example, to code the above styled component, we would use

<Div></Div>

to call the styled component. (Make sure to capitalize, just as with any component.)

BONUS: CSS MODULES

I'm not very knowledgeable about CSS Modules, so if you're interested in learning more about CSS Modules, pop over to this helpful article

So, what is Monkey Patching?

April Skrine — Tue, 15 Feb 2022 02:33:03 +0000

Along the banks of the learning river I stumbled on 'monkey patching' during a particularly convoluted Javascript lecture...

WHAT IS MONKEY PATCHING?

Monkey patching is a way to extend, change or modify something (library, supporting system software, plugin) locally. This means applying a monkey patch won't change the library itself, but rather just the local copy of the library on your machine. 'Monkey Patching' is a term that merely means changing code at runtime. Most often this is done to work around a bug or feature.

(Oftentimes when an update comes out there are minor bugs that aren't devastating, but they make it a lot more frustrating to work through... hence the monkey patch.)

Monkey patching can be used to:

Replace methods / classes / attributes / functions at runtime (e.g. to stub out a function during testing)
Modify/extend behavior of a third-party product without maintaining a private copy of the source code
Apply the result of a patch at runtime to the state in memory, instead of the source code on disk
Distribute security or behavioral fixes that live alongside the original source code (an example of this would be distributing the fix as a plugin for the Ruby on Rails platform)

But monkey patching isn't only used to work around bugs. It can also be a way to modify behavior that isn't quite doing what we want. It's possible to make changes to said code using monkey patching.

FYI -- this only applies a patch to any original code. (Hence, 'monkey patching'.) It only applies to YOUR copy of it. Meaning, if you install a npm library, the monkey patch would only work on the library for you, and not directly modify the library npm has access to.

Here's an example of monkey patching, courtesy of Max Heiber:

They've monkey-patched 'Array' to add a 'last' method, which returns the last item in the array. Potential problems with this? Definitely. The author could change the implementation of 'last', which would break your code since yours relies on your implementation. Elsewhere in your code you (or someone else) will always have to remember that 'Array' has been patched. See how we're getting into little headaches?

So is it... wrong?

I knew I had to write a blog topic on it when I heard how it was discussed. Was it... horrible? In the end it's not... wrong, per se. Nor is it a particularly niche technique. But-- 9/10 times-- there's a better way to solve the issue. It's only in rare cases that monkey patching is the only (and best!) solution. Its rarity as 'best-use' is why it's discussed in such a taboo way.

Patches made to a module might not work after methods have changed and the module is updated. If monkey patches aren't applied conditionally, this can lead to crashes and bugs that are a headache to fix later on.

Also, if 2+ components apply a monkey patch to the exact same method-- depending on which component runs last-- the other monkey patch will be completely useless.

Monkey Patching Issues

Poorly documented or badly written patches can lead to a lot of possible problems:

Whenever a monkey patch relies on an assumption about the patched object, an upgrade can lead to problems if that assumption is no longer true after the upgrade is applied. Monkey patches should be made conditional, and then they can be applied only when appropriate.
"If two modules attempt to monkey patch the same method, one of them (whichever one runs last) "wins" and the other patch has no effect, unless monkey patches are written with a pattern like

alias_method_chain

They can create inconsistency between observed behavior of the application and the actual source code, which can lead to time wasted trying to debug an unfixable problem.
And-- obviously-- they can be written with malicious code inside.

References:

"New in Rails: Module#alias_method_chain". 2006-04-26.
Wikipedia: Monkey Patching
Max Heiber