Forem: Joe Czubiak

3 Hotkeys That Will Make You a Faster Developer

Joe Czubiak — Mon, 07 Jul 2025 09:00:00 +0000

These are my three favorite hotkeys while coding. They make me faster, more productive, and improve my code quality. On top of that, they reduce my cognitive load and make my code easier to read. I'm using VS Code as my example but you could use them in any IDE you'd like.

View and Edit Hotkeys

Before we get into it, here's a quick reminder of how to view and edit your hotkeys in VS Code.

Go to Code -> Settings -> Keyboard Shortcuts or type Cmd + k then Cmd + S.

1. Organize Imports

It's like having a clean closet

Shortcut: Shift + Option + O (Mac) | Shift + Alt + O (Windows)

The imports section of your files can easily become a mess with unused imports and the latest import at the bottom of the list — which isn't an organization strategy at all. You might (and you should!) have a lint rule setup to catch unused imports but this command lets you get rid of that error message quickly.

The "Organize Imports" command (sometimes called "Optimize Imports" in other editors) automatically:

Removes unused imports
Sorts all imports alphabetically
Eliminates duplicate imports
Improves overall code readability

Example

You might not even realize how messy these imports are but code without an organization strategy applied is simply unorganized and isn't doing your brain any favors.

Before using this shortcut, your imports might look like this mess:

import {
  CardHeader,
  CardTitle,
  CardContent,
  Card,
  CardDescription,
} from '@/components/ui/card' //out of order
import { Button } from '@/components/ui/button'
import { Card } from 'react-bootstrap' // duplicate
import { useState } from 'react'
import { Alert } from '@/components/ui/alert' // unused

After pressing Shift + Option + O, it becomes:

import { Button } from '@/components/ui/button'
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@/components/ui/card'
import { useState } from 'react'

Clean, organized, and instantly more readable. I make it a habit to run this command anytime I've touched the imports. It's such a simple step that eliminates visual clutter and makes code reviews much smoother.

2. Sort Lines

Because Your Brain Loves Alphabetical Order

Custom Shortcut: Ctrl + Option + S (ascending) | Ctrl + Option + D (descending)

One of my core coding principles is simply: if you don't have a specific reason to sort something in a particular way, it should just be alphabetical. Our brains are wired for alphabetized things. When dealing with text, which code is, alphabetized lists are nearly always the way to go.

This one requires a bit of setup since it's not mapped by default, but it's absolutely worth it.

Setting It Up

Open VS Code Shortcuts settings (Cmd + K, Cmd + S)
Search for "sort"
Find "Sort Lines Ascending" and "Sort Lines Descending"
Add your custom keybindings (I use Ctrl + Option + S/D). I find the Control + Option pair is almost never already mapped and I like using it for my custom key mappings.

Example

Let's say you have a list of error messages:

const ERROR_MESSAGES = {
  'unknown_error': 'An unexpected error occurred. Please try again',
  'required': 'Please sign in to access this page',
  'invalid_credentials': 'The email or password you entered is incorrect',
  'too_many_requests': 'Too many attempts. Please try again later',
  'network_error': 'Network error. Please check your connection',
  'email_not_confirmed': 'Please confirm your email address before signing in',
} as const;

Instead of leaving them in random order, select the lines and press Ctrl + Option + S:

const ERROR_MESSAGES = {
  'email_not_confirmed': 'Please confirm your email address before signing in',
  'invalid_credentials': 'The email or password you entered is incorrect',
  'network_error': 'Network error. Please check your connection',
  'required': 'Please sign in to access this page',
  'too_many_requests': 'Too many attempts. Please try again later',
  'unknown_error': 'An unexpected error occurred. Please try again',
} as const;

Now when you're scanning through the list, your brain doesn't have to work as hard. Looking for "Unknown error"? It's always going to be at the bottom where "U" belongs. This small change reduces cognitive load and makes code scanning much faster.

3. Multiple Cursors

Edit Like a Pro

Shortcut: Option + Command + Up/Down (Mac) | Alt + Ctrl + Up/Down (Windows)

This shortcut lets you add cursors above or below your current position, enabling you to edit multiple lines simultaneously. It's a massive time-saver for repetitive edits.

Perfect Use Cases

Imagine you have a list of error messages and want to add a period to the end of each:

const errors = [
  'Database timeout occurred',
  'File not found',
  'Invalid user credentials',
  'Network connection failed',
  'Permission denied',
]

Instead of manually editing each line:

Place your cursor at the end of the first line
Hold Option + Command and press the down arrow to add cursors to subsequent lines
Type the period once – it appears on all lines simultaneously

The result:

const errors = [
  'Database timeout occurred.',
  'File not found.',
  'Invalid user credentials.',
  'Network connection failed.',
  'Permission denied.',
]

Pro Tips for Multiple Cursors

You can add as many cursors as you need
Each cursor operates independently
Use Escape to return to a single cursor
This works for any repetitive editing task, not just adding characters

PS: You can also add cursors by using Option + Left Click (on your mouse)

Beyond the Shortcuts

While these three shortcuts are my go-to productivity boosters, they represent a larger principle: small, consistent improvements in your development workflow compound into significant gains in productivity and code quality.

The time you save isn't just about typing faster, it's about reducing the cognitive load of reading and maintaining code. When your imports are organized, your lists are sorted, and your repetitive edits are efficient, you can rest assured that you've been a good steward of the codebase. Your future self and teammates will thank you for it.

Your Turn

I reach for these shortcuts daily and feel like they give me a real boost. Give them a try.

I also encourage you to search for other shortcuts you can use to improve your daily workflow. Let me know what you find.

A Practical Approach to Renaming a Model in Laravel

Joe Czubiak — Wed, 06 Mar 2024 00:39:45 +0000

Code is messy, language is messy, and sometimes you want to rename a model in a codebase that a team has sunk years into...for consistency's sake.

Once a codebase hits a certain size or has multiple active participants, it becomes unrealistic to make sweeping changes like these. These types of sweeping changes inevitably run into problems. An all of nothing approach on this scale can lead to hefty merge conflicts, a massive PR that is hard to review and test, or a feature branch that starts diverging heavily from the main trunk and becomes hard to maintain.

A more manageable approach to a large change like this, is to break it into smaller pieces that can merge into the main trunk while keeping the project in a working state.

Doing a quick find and replace isn't enough in this case, as there are some tricky places our model's name might live.

Database relationship columns may be referencing the model name, think {model}_id, user_id, team_id etc.
- Quick Tip: If you're using MySQL, you can find all tables referencing the model's name in your database using the following query. SELECT table_name, column_name FROM information_schema.columns WHERE column_name LIKE '%model_name%;
Database indexes may be referencing the same fields.
Polymorphic relationships in the database may be referencing the model name.
The model may be serialized in the database or used in our queues.

In this example, we'll be renaming a Team model to Organization in a Laravel codebase.

To keep the project in a working state, while introducing the new name, we'll take advantage of a PHP built in function, class_alias. This will allow both the old model name and the new one to be used in parallel.

Add an alias

We could use the class_alias function directly, in somewhere like the boot method of our AppServiceProvider, but Laravel provides a way to add aliases in the app config. So we'll stick to conventions here.

In configs/app.php, look for aliases and add an alias from the old model to the new model.
It should look something like this.

'aliases' => Facade::defaultAliases()->merge([
    ...
    'App\Models\Team' => 'App\Models\Organization',  
])->toArray(),

This is where Laravel is loading all of the facades. Under the hood, it is using the PHP function, class_alias.

Update the model

Rename the Team model to Organization — both the file and class name.

We aren't writing any migrations today and to keep the code running, we need to override some of the Laravel auto table name and foreign key features. We want the model's table name to point to the existing table and relationships to use the existing columns in our database.

Add the table property to the model.

protected $table = 'teams';

Override the default getForeignKey function in the model.

public function getForeignKey()
{
    return 'team_id';
}

Update morph maps

Morph maps are aliases used to reference a class in our database without using the actual class path in the database. This could mean using 'Team' instead of 'App\Models\Team'. You'll most commonly see these used for polymorphic relationships but they could be used for other things as well.

We need to allow the value that is used in the database to remain the same while mapping to our new model.

In the morph map, change from: 'Team' => Team::class to: 'Team' => Organization::class.

Relation::enforceMorphMap([
    'Team' => Organization::class`
])

Both (new Team())->getMorphClass() and (new Organization())->getMorphClass() should now return 'Team'.

Using the alias

After these steps, our app should be in a working state, only now, we can use both model names interchangeably. References to both Team and Organization will work.

From here we can chip away at updating our codebase and database to use the new name in bite sized bits. This lets us keep the codebase moving in the direction we want to go, without putting a stop to everything else.

The downside of course, is that we now have two ways to reference the same model, making things a little confusing in the interim. So don't sleep on the rest of the work.

Consistency...here we come.

NFTs beyond art — 3 uses with real utility

Joe Czubiak — Thu, 11 Mar 2021 12:00:00 +0000

NFTs, Non-Fungible Tokens, have broken into the mainstream in the past few weeks.

Nifties, as some call them, are a way to prove ownership of a digital asset like a photo, illustration, or video using the blockchain. NFTs aren't a currency like BitCoin or Ethereum, they have no intrinsic value, the value of an NFT comes from the value of the actual asset that it represents.

The NFT markets have been skyrocketing and this excitement and energy is largely centered on NFT art. Digital art is being sold as NFTs. It usually comes in the form of a jpeg, gif, mp4, or other common image and video file formats. NFTs contain metadata and the metadata usually includes a link to the artwork, hosted elsewhere on the web. This means the artwork itself is not on the blockchain but the certificate of ownership, NFT, is on the blockchain or public ledger.

Because of this, if you want to use one of these pieces of art as your background image on your device, there's nothing in place to stop you. The file is public and anyone can right-click and download it just like any other image on the internet.

So then why own NFT art?

Nifty art has little utility beyond being able to display it in somewhat obscure virtual worlds. Some say to buy them for bragging rights, because owning things feels good, or to start a collection. Maybe that resonates with you, maybe, like me, it doesn't. I'd say a lot of people are buying NFT art because they don't understand the speculation trap they've fallen into.

NFTs today, feel a lot like the crypto craze of 2018. The difference is that NFTs have no inherent value, are not a store of value, and there's no way to get your money out besides finding a buyer for your specific token.

The nifty art market is based on artificial scarcity, hype, and speculation. Artificial scarcity isn't enough to drive lasting value. Almost every article about NFTs mentions Crypto Kitties as an example of the power of artificial scarcity but they overlook the fact that the cats offered utility in that you could breed them and sell the offspring to others, for a profit.

Beyond art

While nifty art is getting all the attention, there are very practical use cases for NFTs that will outlast the art craze.

NFTs have two important traits that make them valuable tools. They are tradable on open markets and they prove ownership. Taking advantage of these traits to provide utility is where the real value of NFTs comes from. NFTs are not art. Art is just one type of asset that an NFT can represent and it's important to remember that.

These are a few of the real-world scenarios where NFTs could be game-changing.

Tickets

Tickets are a great use case for NFTs. Tickets to concerts, games, conferences, or other events and shows — both in person and online. In this case, there are already markets set up to sell your tickets to another person but they're fraught with uncertainty and fraud. Oftentimes, all you need is a barcode printed out or on your phone to get into an event. If you bought the ticket second-hand, which has become increasingly the only way due to a proliferation of bots buying tickets as soon as they go on sale, how can you be certain that they didn't sell the same barcode to someone else or several others? First one to arrive gets in and everyone else got scammed. That's not a good system.

There have been attempts to make physical tickets have holographic or otherwise hard to counterfeit traits but to a one time buyer I wouldn't know how to know if what I'm looking at is real or an elaborate fake.

This is what provability of ownership solves. With the NFT, you can see that the ticket originated from the official organization in charge of the event and there is no way for someone else to use the ticket. You can be sure that you didn't buy a fraudulent ticket and be sure that it will work to get in.

Movies

Movie ownership feels a little different than it used to. We used to own DVDs. They were ours and we could do what we wanted with them, permitting we weren't breaking laws. These days, if you click buy in iTunes, what do you get? You get the privilege to watch the movie from your account, in iTunes, and that's it. There's no transferability. You can't move that movie to Google Play or lend it to a friend because you didn't buy the movie. You bought a privilege to consume it through a service.

If digital movies instead used the NFT model, you would own a copy of the actual files and you could watch that movie through any service or player that you want. You could give it to a friend for the weekend. When you're tired of it, just like a good old-fashioned garage sale, you could sell it off.

I don't foresee large movie studios being at the forefront of this innovation, they are currently benefiting from this lopsided system. I would expect smaller studios and independents to be the driving force in this change.

Game assets

Have you ever bought in-game items? If you have, you've given money to the makers of the game, and in return, you get to use the item with your account in their game and that's it. If instead, you bought an NFT that represents a digital asset in the game, doors start to open. You could exchange your items on a public marketplace. You could show off the items you own on your blog. If you no longer play this game, you can sell off all of your items.

At first, it feels like all of the power is being given back to the users and the game makers are losing if they adopt NFTs. But, they won't lose if they adapt. NFTs create more reason to buy items and an ability for users to show off items which drives demand for more limited-run items. The switch to an NFT model creates a more thriving market and the ability for the game makers to produce more items to sell.

There are so many more ways that NFTs can and are being used but just because they can be used, doesn't mean that you should. No article about crypto would be complete without including a mention of the environmental effects of using crypto, which is enormous. With such high environmental costs, NFTs should only be used when it offers real utility and value that is hard to obtain otherwise.

To understand the environmental costs, I'll send you to this article explaining them. https://everestpipkin.medium.com/but-the-environmental-issues-with-cryptoart-1128ef72e6a3

Box-Shadows: a journey to understand great shadows

Joe Czubiak — Thu, 25 Feb 2021 12:30:00 +0000

I've become mildly obsessed with box-shadows. When they are done well, they're magic. They provide depth, contrast, and clarity to the page. When done poorly, they're distracting. It's apparent to me that most shadows fall short of the magic. It's especially true when I try to apply my own handwritten CSS box-shadow to an element.

What's behind a good box-shadow?

I keep finding myself reaching for the shadows defined in Material Design. They are some of the only ones that I think really get it right. Most design frameworks provide their own version of a decent shadow but I find the concept and execution of elevations in Material Design resonates with me. They also have extensive design guidelines that are worth reading.

I never understood why Material Design shadows are so good and when I make a shadow, it really doesn't look great. They come out too harsh or undefined and unprofessional.

What's the math behind box-shadows?

I see a lot of visual editors like WebFlow or box-shadow generators that give you controls for angle and distance, but angle and distance aren't CSS properties for box-shadow. So then, how do you get the x and y values from angle and distance? Hint: trigonometry is involved.

Why don't CSS generators produce good-looking shadows?

The quick answer is that most of them don't support layers and as you're about to learn, having multiple shadow layers is important.

I had these questions and one night my curiosity got the better of me. At least, I had hoped it would only be one night. It led me back to high school trigonometry and carried me through a weeks long journey into box-shadows. This journey involved building a CSS Box-Shadow generator myself and writing this article that keeps growing in scope.

Alas, here we are, let's get into it.

CSS Box-Shadow

Let's take a look at what the box-shadow CSS property is and the values it allows.

Syntax: box-shadow: x-offset y-offset blur-radius spread color outset/inset

Example: box-shadow: 0px 3px 2px 4px #000;

Box-Shadow Values Explained

x-offset — This is the horizontal offset of the shadow. Higher values will move the shadow to the right like it is traversing the x-axis of a graph. Negative values will move the shadow to the left.

y-offset — This is the vertical offset of the shadow. Higher values will move the shadow further below your object or down the page. Negative values will move the shadow higher vertically up the page. This is the opposite direction you might think of when looking at a graph with the y-axis.

blur-radius — Higher values will increase the blurriness and also increase the size of the shadow leading the shadow to become lighter in color. This number can't be less than 0.

spread — Higher values will increase the size of the shadow without causing any loss of sharpness.

color — Specifies the color of the shadow.

* outset / inset — You can specify the box-shadow to be inset instead of the default outset. This will make the shadow appear inside of the object instead of outside of it. This article is about outset shadows and won't touch on inset shadows.

There's a little bit more to the box-shadow that I did not cover here and I encourage you to look it up elsewhere if you need to know more. This is a good basic understanding for us to use.

The thing that isn't obvious while working with box-shadows is that you can specify multiple shadows on the same element. Simply, use commas to separate multiple values.

Angle and Distance

It's very common to see the inputs angle and distance in visual editors such as WebFlow and they forgo the x and y offsets. You'll notice though that neither angle nor distance is one of the attributes defined above.

How do angle and distance translate to x-offset and y-offset?

To answer this, we need to dive into some trigonometry.

The x offset and y offset can be thought of as the x and y coordinates on a graph. Because of this, we can draw a right triangle on the graph from the center point. If you can remember back to your trigonometry days, right triangles are the very basis of the 6 fundamental trig functions.

I'm going to show you how to calculate the values forwards and reverse. From angle and distance to x and y and then from x and y to angle and distance.

Math

Take a look at this graph. We're going to use it as the basis for our calculations.

The x and y coordinates are the x-offset and y-offset of the box-shadow properties. When you plot it onto a graph, like the graph shows, it creates a right triangle and the perfect setup for doing a little trigonometry.

If you understand trig or stare at this graph long enough you'll see how all the pieces fit together. When given the options of angle and distance instead of the x and y, we can see that the angle is angle A in the graph and distance is c or the hypotenuse of the triangle formed.

These are the two basic functions of trig and the two that we need for our calculations.

sin(x) = opposite/hypotenuse = a/c

cos(x) = adjacent/hypotenuse = b/c

Angle and distance to x and y

Angle and distance to x and y is the calculation that visual editors would use. We let the user pick an angle and distance and then we convert that into an x and y coordinate to use as the x-offset and y-offset in CSS.

We can use the functions defined above.

X in our case is the angle, we'll call it angle A as we can see on the graph.

a is our y offset.

b is our x offset.

c is our distance.

In this case, we know the values of angle A and the distance, c. So we need to solve for a and b.

We will need to use both the sin and the cos functions. Sine will give us a, our y, and Cosine will give us b, our x.

If we rearrange the functions they will look like so.

cos(A) * c = b

cos(A) * distance = y

sin(A) * c = b

sin(A) * distance = x

Using real numbers

angle = 70

distance = 9

sin(70) * 9 = x

3.08= round down to 3 = x

cos(70) * 9 = y

8.45= round to 8 = y

(x, y) = (3, 8)

x and y to angle and distance

This is the calculation to take the x-offset and y-offset from our CSS values and convert it to an angle and distance that we could show to a user in a visual editor.

a is our y offset.

b is our x offset.

In this case, we know the a and b values and we need to solve for angle A and distance.

Distance

We know that distance is c and c can be calculated using good old Pathagoreum's theorem. a^2 + b^2 = c^2.

distance = c = sqrt(a^2 + b^2)

Angle

To find the angle, we need to do the inverse of the previous calculations, we need to use inverse sine, arcsin, or inverse cosine, arccos. We can use either arcsin or arccosine because we know the values of each of the sides of the triangle.

We can take the inverse of our function from before and solve for the A in sin(A).

A = arcsin(a/c) or in our terms Angle = arcsin(x/distance).

Using real numbers

We'll use the values we calculated from our angle and distance.

x = 3

y = 8

End result should give use angle = 70 and distance = 9 because those were the values that we used above.

distance = sqrt(8^2 + 3^2) = sqrt(64 + 9) = sqrt(73) = 8.54 = round to 9

angle = arcsin(8/sqrt(73)) = 69.44 = round up to 70

That's it, that's how it's calculated. Not too bad if you think about it for a minute.

These calculations need to be done in radians. If none of the math worked for you, it's likely because your calculator is in degrees mode and you need to flip it to radians.

I built this quick calculator tool that you can use to test your math or inspect to see how it might be done in javascript.

What makes a box-shadow great

Color and opacity, layers, and angle and distance are the three critical parts needed to make a great natural shadow. Get all three right there's no shadow you won't be able to conquer.

Color & Opacity

When creating a shadow by hand, the shadow often appears too dark. A couple of ways that you might be tempted to mitigate this is to change the color to something less black and more gray, off-white, etc. The other attribute you might reach for is the blur. Crank up the blur and it will make the shadow appear less dark and sharp due to the lack of concentration the blur provides.

These strategies might get the job done but it's sloppy and won't give you the best result possible.

A great shadow mimics our perceived physical reality. So then, a contemplative person might ask — what is a shadow? A shadow is caused by an object blocking light and causing a partial absence of light on the surface behind or below the object.

With that as our working definition of a shadow, it changes the way we might think about our options for making a shadow less harsh and more natural.

Let's think through it again.

Black is the absence of light.

A shadow is the partial absence of light.

Therefore, a shadow in our perceived reality is a semi-transparent black.

In CSS, that would mean setting the opacity of our black to less than one. Setting the color to a semi-transparent black now frees us to use the blur value to shape our shadow and not use it to compensate for something else.

Semi-transparent black will also allow your shadow to keep looking good on multiple background colors because the transparency will allow the background color to continue to shine through.

Recommended Opacity Range: 0.04 - 0.25

eg. rgba(0,0,0, 0.2)

Layers

It's not overtly obvious that box-shadows supports multiple shadows on one element but this is the key to a great shadow.

To understand why layering works so well, we need to look at a film technique.

3 Point Lighting

There is a well-established technique in film and photography used to light subjects called 3 point lighting. It solves a simple problem. You need to light a subject, often a person, using artificial light sources but in a way that it looks pleasing. Using a single bright light will cast harsh shadows. Three-point lighting is a technique that solves this problem with a relatively low number of lights, three.

In a traditional setup, you have three types of lights, key light, fill light, and back light. The key light is your brightest source and is often pointed from off-center to the front of your subject. The fill light is a softer light that is often pointed from the other side of the front of your subject to fill in the shadows caused by the key light. The back light is a light that is pointed at your subject from behind and acts to give your subject some definition around the edges.

It's important to realize that a single artificial light source is often too harsh whether you're talking about photography or CSS.

Apply this to CSS

To layer shadows, they must be semi-transparent. If they are not, they cannot compound on each other and will rather block one another making the previous layer mostly useless.

You can think of each layer as being one of the three lights. One of your shadow layers will act as your key light, it will be the heaviest shadow — least transparent. A second layer can be your fill light, a little softer and wider. Lastly, your back light, provides a little extra definition to your edges.

A Material Example

Take a look at how Material Design uses layers to define their shadows.

To see the effect of the layering and what impact each has, I've turned the shadows into red, green, and blue. Opacity 20 layer is red. Opacity 14 layer is green. Opacity 12 layer is blue.

Notice how the colors interact with each other and create colors, like purple, that weren't used. This also highlights the effect that each shadow has on the box.

Elevation

The way a shadow is cast can signify how high above the surface the object is floating. Using different 'elevations' of objects can be an important indicator in your design.

The further an object is from a surface, the larger the shadow it will cast. In CSS this would translate to a larger blur-radius and spread.

The higher an object is, the further down the screen you'll want the shadow to appear.

Using a combo of blur-radius, spread, and y-offset will allow you to portray height.

Into the shadows

With that, my journey comes to an end but hopefully, this is just the beginning of your journey. To experiment with box-shadows, I encourage you to try out the box-shadow generator tool that I built. Good luck. Hope to see you in the shadows.

I built a box-shadow generator

Joe Czubiak — Wed, 10 Feb 2021 16:55:52 +0000

https://shadows.joeczubiak.com

I built an open-source CSS box-shadow generator this week.

I was trying out WebFlow the other day and I noticed that like a lot of visual editors, it lets you specify an angle and distance on your box-shadows but both angle and distance aren't CSS attributes on box-shadow. So I decided to explore how angle and distance are converted to an x and y offset.

I started to write an article detailing the math behind it, turns out it's basic trigonometry and if I was still in 9th grade it would have been obvious, but before you know it and before the article was done I built and released my own CSS generator.

It taught me a lot about shadows and was a good overall exercise that I hope will now live on to help others.

I found that a good shadow is built with layers and opacity and mimic real-world behavior. The ability to specify multiple layers in a box-shadow isn't intuitive and most box-shadow generators online don't allow multiple shadows to be specified. They also don't typically give you a great preview. This is where I tried to make mine different. I made it easy to add multiple shadows, the page and preview cards are customizable, and there are presets from popular frameworks.

Take a look and let me know what you think. I built it this week so it's not totally polished and I'm open to suggestions.

Thanks!

My secret to putting my email on my website without getting spammed

Joe Czubiak — Wed, 27 Jan 2021 16:00:00 +0000

I got an email from Ugohow the other day. Ugohar also sent me one. The Ugos send me a lot of emails, they write to me in Russian with links to buy prescription drugs.

Thanks, Ugos.

The Ugos are just a small subset of the spammers I regularly receive contact from. Most of them try to sell me web services like SEO, development, or marketing services. The Ugos and their friends are abusing my contact forms and public email addresses that I have on my websites. I put up with Ugos and friends because sometimes a real human needs to get in contact and I want them to be able to do so in the easiest way possible. Sometimes that's the whole point of a website, to get leads by encouraging visitors to contact you.

Somedays the spam feels overwhelming, while I looked back at my emails for this article I found that some days I was getting over 10 emails a day that were all landing in my inbox and not in the spam folder. That's from one website. I built out my personal blog website recently and I was faced with the decision of what to include on my contact page. Contact form or email address or both. My domain name is my name, literally, and I want to at least try to keep the spam down.

Contact forms are the worst

It might feel like having a contact form on your website is the best experience for everyone, but contact forms are kind of the worst. I would prefer to pop an email address into my Gmail and be done with it instead of dealing with contact forms with annoying requirements and dropdowns. Sending from my email app also gives me a record of what I said and when I said it.

On the other end, it's pretty easy to f›‹¢k up the server-side of a contact form. Not speaking from experience or anything. Configure it wrong, and it ends up in spam or doesn't get sent at all. Whoops, forgot to include their email address. Thanks for contacting the black void, see you — never. There are a million ways it goes wrong. A more foolproof way is to just copy and paste an email address into your Gmail.

Contact forms are ripe targets for spammers. Low hanging fruit, something they've nearly perfected. You don't want to live through the consequences of not using some sort of bot blocker like reCaptcha on your contact form.

Even though the case against contact forms is strong, some people like the things, and we aim to please on the internet. So, the polite thing to do is to include both a contact form and an actual email address. It feels hard to publicly display your email address, especially when it's a personal address and not some generic support address. How many times have you seen joe [at] gmAil dot c0m or some variation of strange obscurities? We have good reason to be frightened.

The internet is mostly bots.

So much internet traffic comes from bots that you'd be forgiven if you thought your site was a lot more popular than it is after looking at your server logs. Some are good bots like Google's search engine crawler. You want that one to ping your website and put the latest content onto Google's search results. Others are less clear about their motive. Fighting traffic from bots is mostly a lost cause, but ignoring them altogether isn't a great plan either.

The internet is built on content being crawled and information being disseminated and tangled into the web. Keeping personal information out of that process can be difficult, but not impossible. We need to understand how web scraping works in order to work around it.

Traditional web scraping works like this. A script runs and downloads the contents of a webpage in its raw code form. To see what this looks like, you can right-click on the webpage you're on and click "view source". That's what a web scraper usually takes in. It can then parse out the bits that it wants.

Traditional scrapers don't load or run any javascript, they only load the server-side generated code. This is one of the reasons that SEO can be so tough for javascript based websites. If your site renders in the browser as opposed to the server, there's a good chance the content won't be available when the crawler hits the site. This is a big part of why server-side rendering (SSR) is so popular for javascript based websites. Node-based web crawlers are increasing in popularity because they can load and render javascript but they can be slower are still in the minority.

The Trick

Finally, we arrive at my secret to putting my email address on my website without being spammed. Since most of the crawlers are just grabbing the server-side rendered page, we need to take our email out of the server-rendered DOM and add it back in using javascript after the page loads. This way, users visiting your website will be able to see your email, after a short delay, but when your webpage is scraped, it won't be readable by the bots since it wasn't in the DOM when your page was crawled.

To implement this, you could use javascript's timeout function to set a delay and call a function that adds the email to the DOM.

setTimeout(() => {
  addEmailToDOM(`your-public@email.com`)
}, 1000) // 1000ms or 1 second

This is one of many ways you could go about doing this. To get it working on your website would depend on your setup. This isn't a foolproof method — almost nothing is. It's a simple trick that might just help you avoid some spam.

Let me know what you think of this method. Do you think it works?

Laravel + React

Joe Czubiak — Fri, 16 Oct 2020 19:43:26 +0000

This tutorial will show you how to use React with Laravel in a way that lets you sprinkle React into a legacy Laravel codebase and blade templates. We will not be creating an SPA or using Create React App.

You can view and download the full sample project.

https://github.com/jcz530/laravel-plus-react

After going through this guide...

We'll be able to add React components into blade files.
We'll have reusable components that can be combined to make complex components.
We'll use webpack (Laravel Mix) to build our files.
We will not have an SPA.
React will not be served with SSR (Server Side Rendering).
We will not be able to use the components as inline components like is popular with Vue.

Background

I was inspired to write this guide because recently, I added React into a legacy project of mine, and I didn't want to rewrite the whole project to turn it into a React SPA. Instead, I wanted to reap the benefits of writing new React components that I could start sprinkling into my project right away.

There are a lot of ways to get React to load and render components, and this is simply the method I choose when working on my project. I'll walk you through how and why I chose this setup.

First thing's first, navigate to your existing or new Laravel project.

Install Dependencies

npm i react react-dom

Folder Structure

In the /resources/js/ folder, we'll add a new folder where all of our React files will live. We want to keep these files all together and not mixed in with other JS files. This will keep the project organized, make some of the webpack setup easier, and allow for the use of other technologies.

In my case, I created a source folder for all of my React files at /resources/js/src/.

I have the following folders in the src folder.

/src/components
/src/hooks
/src/layouts
/src/pages

Your exact folders may vary depending on your needs and organizational style, but this could be a good place to start.

Laravel Mix - Webpack setup

Aliases

This step is optional, but I think it makes the project a lot easier and cleaner to work with. Defining aliases in the webpack configs will allow you to refer to your files without needing to know where in the file path you are.

For example, if you want to refer to your theme file from a component deep in the folder structure, without aliases, you might write

import theme from '../../../themes/theme.js'

With aliases, you would simply write

import theme from 'themes/theme.js'

To use aliases, you'll need to add them to your mix file webpack.mix.js.

mix.webpackConfig({
    resolve: {
        alias: {
            //adding react and react-dom may not be necessary for you but it did fix some issues in my setup.
            'react' : path.resolve('node_modules/react'),
            'react-dom' : path.resolve('node_modules/react-dom'),

            'components' : path.resolve('resources/js/src/components'),
            'pages' : path.resolve('resources/js/src/pages'),
            'themes' : path.resolve('resources/js/src/themes'),
            'layouts' : path.resolve('resources/js/src/layouts'),
            'hooks' : path.resolve('resources/js/src/hooks'),
        },
    },
});

webpack.mix.js

Bundle and Extract React

After you've added your aliases, you'll need to tell webpack to bundle your files and extract libraries. In the same webpack.mix.js file, add the following line. Notice that we're using mix.react and we are using app.js. If your app.js file already has legacy code, you could create a new app file for the React components.

mix.react('resources/js/app.js', 'public/js').extract(['react', 'react-dom']);

webpack.mix.js

Rendering the components

This is where things get tricky.

Even though we aren't building an SPA, we still want to be able to build complex components that reuse multiple components. We're going to be mixing React components into blade files, and it would be great if we could retain some of the JS feel for the components so that we know we're referring to a React component, and it's not just a random div with an id.

Instead of referring to components as <div id="MyComponent" />

We are instead going to use <MyComponent />.

This isn't valid html, so if you want to use the id method, all you'll have to do is uncomment one of the lines in the ReactRenderer.js file coming up.

Create a simple component

We need a simple component to test with, and this is about as simple as they get.

Create a new file with the following code in src/components/MySimpleComponent.js.

import React from 'react';

export default function MySimpleComponent(props) {

  return (
    <>
        <h2>This was loaded from a React component.</h2>
    </>
  );
}

components/MySimpleComponent.js

Set up app.js

Next, we need to set up the app.js file. These are the lines that you'll need to add to the app.js file.

require('./bootstrap')
import React from 'react'
import ReactRenderer from './src/ReactRenderer'

import MySimpleComponent from 'components/MySimpleComponent'

const components = [
  {
    name: "MySimpleComponent",
    component: <MySimpleComponent />,
  },
]

new ReactRenderer(components).renderAll()

app.js

A little explanation.

In our app.js file we will import any components that we want to use within the blade files and add them to an array. We'll use the 'name' element to find all the references to the component in the blade files, and we'll use the 'component' element to render it.

Next we need to add the ReactRenderer.js file.

import React from 'react';
import ReactDOM from 'react-dom';

export default class ReactRenderer {

  constructor(components) {
    this.components = components;
  }

  renderAll() {

    for (let componentIndex = 0; componentIndex < this.components.length; componentIndex++) {

      // Use this to render React components in divs using the id. Ex, <div id="MySimpleComponent"></div>
      // let container = document.getElementById(this.components[componentIndex].name);

      // Use this to render React components using the name as the tag. Ex, <MySimpleComponent></MySimpleComponent>
      let containers = document.getElementsByTagName(this.components[componentIndex].name)

      if (containers && containers.length > 0) {

        for (let i = containers.length - 1; i >= 0; i--) {
          let props = this.getPropsFromAttributes(containers[i]);
          let element = this.components[componentIndex].component;

          if (props !== null) {
            element = React.cloneElement(
              element,
              props
            )
          }

          ReactDOM.render(element, containers[i]);
        }
      }
    }
  }

  // Turns the dom element's attributes into an object to use as props.
  getPropsFromAttributes(container) {
    let props = {};
    if (container.attributes.length > 0) {
      for (let attributeIndex = 0; attributeIndex < container.attributes.length; attributeIndex++) {
        let attribute = container.attributes[attributeIndex];
        if (this.hasJsonStructure(attribute.value)) {
          props[attribute.name] = JSON.parse(attribute.value);
        } else {
          props[attribute.name] = attribute.value;
        }
      }
      return props;
    }
    return null;
  }

  hasJsonStructure(str) {
    if (typeof str !== 'string')
      return false;
    try {
      const result = JSON.parse(str);
      const type = Object.prototype.toString.call(result);
      return type === '[object Object]' || type === '[object Array]';
    } catch (err) {
      return false;
    }
  }

}

ReactRenderer.js

You can read through the code to more fully understand what is happening. At its core, it's just finding all DOM elements that match your components and rendering them with any props included as well.

Put it to work

Now that we have everything in place, we can start to build more components and add them to blade files.

Here are some examples of adding it to blade files.

...
<MySimpleComponent></MySimpleComponent>

@guest
<MySecondComponent
    title="This is using blade's {{'@'}}guest helper to show to 'Guests' only"
/>
@endguest

@auth
{{-- Remember to use "json_encode" to pass in objects --}}
<MySecondComponent
    title="This is showing to authed users"
    user="{{ json_encode(auth()->user()) }}"
/>
@endauth
...

app.blade.php

In the source code for this tutorial, I've also included a second component that accepts a title prop. This code is a snippet from the app.blade.php file in the source code.

If you download and run the sample project, you will get something that looks like this.

I encourage you to download the repo, explore, and make modifications to test it out. https://github.com/jcz530/laravel-plus-react

Bridging CMS content and react components via shortcodes

Joe Czubiak — Tue, 04 Aug 2020 22:24:23 +0000

Recently I've taken up blogging as it were. I'm more of a developer than a writer but when it comes to the blog I thought it would be nice to use a proper CMS instead of coding in paragraph tags or writing in markdown. I don't need to make writing any harder than it is.

The problem that comes up as a developer writing with a CMS is that there's no bridge that allows you to mix a little code in with your content. If you're writing — you're writing. If you're coding — you're coding. There's no mingling going on. I want them to get to know each other.

Let's say I want to include an interactive or live map or chart that I built like I did in my APIs post. There's really not a great way to do that, especially in the middle of the content. We could write something custom into our post template to add a component at the end of a certain post but that's never a good idea.

This is where Shortcodes come in. Shortcodes is a concept popularized by WordPress in which you can insert a short snippet into square brackets, for example [contact-form]. Where you place the shortcode in your content is where the actual component will load.

I thought it would be nice to create my own implementation of shortcodes for my blog so I can include my custom react components into my post by adding a simple shortcode. This creates the bridge between CMS and code that I was missing.

Diving in

We are using React in this example. The CMS that you use does not matter. I'm borrowing the concept from WordPress but went a different way in implementation; we're not going to use square brackets but instead a new html tag <sc> for shortcode. This is not an existing tag but rather a tag we are creating so that we can find our shortcodes when we render our page.

The CMS

At the end of this process we will be able to insert an html snippet into our post in the CMS and use our shortcode tag like this.

<sc comp="ContactForm">Contact Form</sc>

We define an attribute called 'comp' (component), this will specify which component we use to render the shortcode. We also should include some text in-between the tags to remind us what is loading here because when you are looking at the text in your CMS, the shortcode will look blank and you won't remember that you have a shortcode there unless you put in this descriptive text.

Rendering the content

The trick to making this work is running an html parser instead of simply loading in the html. You might be used to loading your content with something like <div dangerouslySetInnerHTML={{ __html: post.html }} />. In our version we are going to replace that with our own implementation so it looks like <HtmlParser html={post.html} />.

Now we need to build our HtmlParser. Our component will rely on the html-react-parser library. You will need to include that with your package manager.

import React from 'react'
// import your components the shortcodes reference.
import ContactForm from 'components/ContactForm'
import parse from 'html-react-parser'

const HtmlParser = ({ html }) => {
  // Replace shortcodes with their react component counterpart
  const replace = (domNode) => {
    // If we find the '<sc>' tag then we need to replace it.
    if (domNode && domNode.name === `sc` && domNode.attribs) {
      if (domNode.attribs.comp === `ContactForm`) {
        return (
          <ContactForm />
        )
      } else if (domNode.attribs.comp === `AnotherComponent`) {
        return (
          <AnotherComponent />
        )
      }
    }

    return domNode
  }

  return (
    parse(html, { replace })
  )
}
export default HtmlParser

Notice that we parse through the html and find the tags, we then use the comp attribute to check if it's an existing component and then explicitly load the component. For any new shortcodes, you'll have to add it to the HtmlParser.

Now they're mingling

Now the code and content are talking to each other. This opens a lot of doors for making creative posts.

There are so many ways we could have gone about creating our shortcode system. This is just a starting point to help you think about bridging the CMS code gap. Further improvements could include allowing props to be passed to the components.