2 months ago

Form Requests and Form Objects

In most cases, performing the persistence logic within the Controller is simple. In the cases where I need to perform additional tasks, muddying up the Controller with this logic can get a little messy. I want to clean this up, but how?

Form Objects.

Laravel already provides an easy to use interface for handling form requests in terms of validating the request data. I want to take this one step further, and turn my Form Requests into Form Objects. Form Objects will not only handle validating our request, but also be in charge of persisting the request to storage (e.g. the database).

To do this, I simply need to add a persist method:

<?php

namespace Modules\Test\Http\Forms;

class CreateTestForm extends FormRequest
{
    ...

    public function persist()
    {
        dump('perform necessary tasks and persist the data.');
    }

    ...
}

And within the controller, simply call it:

public function store(CreateTestForm $form)
{
    $form->persist();

    ...
}

Notes

One important thing to keep in mind with this approach, is to create a form object for each individual "form". This is important, because:

  1. Each form will have different validation rules.
  2. Each form will have different authorization rules.
  3. Each form will have different persistence logic - am I creating a new entry or updating an existing one?
  4. It keeps the controller and model clean!
1 year ago

Orthogonality

Orthogonality, how many of you have heard this term? Unless you've read works like The Pragmatic Programmer, you'd more than likely come across this terminology in a mathematics class.

In mathematics, orthogonality is the relation of two lines at right angles to one another (perpendicularity).

In the above image, the lines A and B are orthogonal to each other. Now how might this be applied to programming? Lines that are orthogonal to each other never affect nor cross paths with each other. Meaning, each line is independent of the other. This concept can be applied to programming, where systems within your application (or even at the code-level) are independent of one another; changing one component does not affect another - it can continue on its own path (just like the lines in the above image).

Let's zoom out and look at a generalized example of how this might be laid out. Let's say you're developing a CMS, and you need to create a blog where posts can be tagged and categorized, as well as accept user comments; you also need a way to create simple pages with text. This is great! We have our scope and can begin building these components out, and you come out with a blog and a pages component:


Blog Component

Blog posts can be tagged and categorized, as well as accept user comments.

Pages Component

Simple text pages.


But wait, after you finished building these two components you come to the conclusion that you also want users to be able to leave comments on your pages as well. Now you need to build the same functionality into your pages component that you already have available in your blog. This in short results in a duplication of code and functionality, which goes against a well known principle of software development - DRY (Don't Repeat Yourself) as well as being a gateway to the Cut-And-Paste Programming AntiPattern.

Both of those are bad in coding land.

The right solution to this, is to decouple the comment system from your blog component into an abstraction as its own component. This way, instead of duplicating the commenting system between the two components, they both can utilize the comments component.


Comments Component

Gives the ability to accept and display user comments.

Blog Component

Blog posts can be tagged and categorized. Utilizes the comments component.

Pages Component

Simple text pages. Utilizes the comments component.


Now the comment component can be developed and managed on its own, while the blog and pages components are fundamentally untouched while sharing common functionality, and vice versa.

I like to look at these as hexagonal tiles that can be pieced together to form new components (forgive my lacking Gimp skills in the below image, I tried).

If you haven't noticed, the terminologies decouple, abstract, and orthogonal all have similar meanings that roughly translates to independence. We want to be able to take two separate elements (the numbers 4 and 5 for example) and combine them to get new functionality that may not have been previously envisioned (4 + 5 = 9; 9 being a new number to us that was previously unknown). This concept is also known as the bridge design pattern within object-oriented design.

In Conclusion

This is a concept and way of thinking that can be applied within any programming language. When building out an application, think of the various components and requirements that make it up. Can certain things be abstract so they can be utilized through out your application without duplicating their functionality? There are some pretty common components that fit the orthogonal way of thinking easily such as the user comments component in our CMS example earlier. Can something like a blog and pages component be broken down into abstract components where they share common functionality? It may feel a little weird to try and extract shared abstract components out from something like a blog and pages component as they're commonly always developed a certain way across a multitude of different platforms. The key here is thinking outside of the box and looking at things at a different angle, as they can give insight into how things are built leading to possible better solutions.

Further Reading

3 years ago

Beautify Sublime Text 3

Sublime Text is an incredibly flexible and powerful text editor used by many developers today. I'm going to be looking at "beautifying" Sublime here, as it only makes sense that we'd like it if the tool we had to stare at for 8+ hours a day looked good.

Please keep in mind though that I will be leaning a little more towards to what I like as far as setting up Sublime Text. There are a lot of settings and tweaks one can make to Sublime, and every one will have their own unique preferences. So if there's something you don't agree with here, or simply don't like and prefer another setting, that's great! Please experiment and find what suits you and your of development.

Before we begin, the only prerequisite I have is that you have the Package Control plugin installed, which can be found here. If you have that installed, great! Let's move on.

User Settings

First things first, I'll be going over some user settings I use that I think clean up the look and feel of Sublime. Your user settings can be found by navigating to Preferences → Settings - User.

Always show minimap viewport

"always_show_minimap_viewport": true,

I rely on the minimap a lot to quickly navigate through a file, so I like it showing all the time. It's easy to pick up on the blocky pattern produced by the way your code is formatted, and use that to quickly get your bearings if you're working within a large file.

Bold folder labels

"bold_folder_labels": true,

If there's one thing that Sublime is lacking, it's the ability to spruce up the sidebar navigation. I'd love for filetype specific filename colors and icons to help distinguish between files in the sidebar navigation - but as of now it's not possible (maybe in Sublime Text 4!?), so bolding the folder labels helps a tiny bit.

Caret style

"caret_style": "phase",

caret_style will change the look and feel of the caret in the editing portion of Sublime. I'm a fan of "phase" which will sort of "fade" the caret in and out rather than the default blinking look. Other options to choose from are smooth(default), blink, wide, and solid. Give them all a try and see what you like best.

Caret size

"caret_extra_top": 3,
"caret_extra_bottom": 3,

This setting goes in line with a setting I'll be mentioning below. But, this will extend the length of the caret by x pixels on top and bottom.

Show fold buttons

"fade_fold_buttons": false,

When I'm working, especially in larger files, I like to fold the code I'm not going to be working with down to lessen the clutter on my screen. Setting this option to false will always show the code folding arrows within the gutter of Sublime for easy reference.

Font

"font_face": "Ubuntu Mono",
"font_size": 13,

I'm a fan of the Ubuntu Mono font, but other good choices are Monaco, Source Code Pro, and even Consolas.

Highlight current line

"highlight_line": true,

Highlights the current line you're working on.

Line padding

"line_padding_bottom": 6,
"line_padding_top": 6,

These two settings were a huge game changer for me. Adding padding between the lines of text within the text editor really make everything so much easier to read and navigate. 6 may be too much for some, but generally between 4 and 6 seems to be the sweet spot for most. This is also the setting that I use in tangent with the aforementioned caret_extra settings.

Margin

"margin": 10,

This is a recently new setting that was brought to my attention. This setting adds a bit of space between your code and the gutter. 10 seems to be a good medium here.

Overlay scroll bars

"overlay_scroll_bars": "enabled",

Use the overlay scroll bars, to minimize the clutter on your screen.

Color Scheme and UI

I like a minimalist look to things. So with that, I find both the color schemes and parented UI themes created by Dayle Rees here to be absolutely perfect. All of these can be easily installed through Package Control by searching for the Dayle Rees Color Schemes package. You will then have access to all the color schemes (which I do switch through on an almost daily basis) and accompanying UI theme for each color scheme.

Do note that you'll need to install the Spacegray UI theme through package control before you're able to use the accompanying UI themes provided in the bundle.

So, my favorite color scheme is juicy. So after switching to the juicy color scheme, I can use the accompanying UI theme by opening my user settings again and setting the following:

"theme": "juicy.sublime-theme",

And voila! Your text editor should look like the one in the screenshot at the head of this post.

That wraps things up for me. There are a lot more options and settings to monkey around with than what was covered here, so I do encourage you to look at the available options and mess around with things and see what you like.

To leave things off, here's my complete user preference file:

{
    "always_show_minimap_viewport": true,
    "bold_folder_labels": true,
    "caret_extra_bottom": 3,
    "caret_extra_top": 3,
    "caret_style": "phase",
    "color_scheme": "Packages/Dayle Rees Color Schemes/sublime/juicy.tmTheme",
    "fade_fold_buttons": false,
    "font_face": "Ubuntu Mono",
    "font_size": 13,
    "highlight_line": true,
    "ignored_packages":
    [
        "Vintage"
    ],
    "line_padding_bottom": 6,
    "line_padding_top": 6,
    "margin": 10,
    "overlay_scroll_bars": "enabled",
    "theme": "juicy.sublime-theme"
}