DEV Community: Antonio Djigo

Bullet-proof user stories for your team - with AI Prompts to do them!

Antonio Djigo — Tue, 02 Jul 2024 13:21:01 +0000

What are the user stories?

In the dynamic world of product development and engineering, effective communication and collaboration are critical to a project's success. User stories serve as the backbone of agile methodologies, providing a clear and concise way to capture user requirements and translate them into actionable tasks for the development team.

When done right, user stories can drive alignment, foster collaboration, and streamline the development process. However, crafting user stories that are truly "bullet-proof" requires a blend of art and science. It involves understanding the core principles of** effective storytelling*, embracing **best practices*, and continuously refining the process based on feedback and real-world experience.

What will you learn

In this article, we will delve into what makes a user story rock-solid, and why it is essential for your team's success. We will explore the key characteristics of high-quality user stories, provide practical tips for writing them, and discuss how to avoid common pitfalls.

Whether you are a product manager, a developer, or a stakeholder, mastering the art of bullet-proof user stories will empower you to deliver products that truly resonate with your users, and will make your peer's life easier.

Also, we'll speak about a method called Gherkin, used for highly-technical tickets that are aimed to both devs and non-technical profiles.

Understanding User Stories

User stories are concise, simple descriptions of a feature told from the perspective of the end user. They focus on what the user needs and why. Typically, they follow a basic format:

Template: "As a [type of user], I want [an action] so that [a benefit]."

Purpose: To capture user requirements and facilitate clear communication between stakeholders and development teams.

Characteristics of Bullet-Proof User Stories

Clarity: Easy to understand with no ambiguity.
Conciseness: Brief yet comprehensive enough to convey the necessary information.
Specificity: Provides sufficient detail without being overly prescriptive.

These stories should follow the INVEST criteria, which stands for independent, negotiable, valuable, estimable, small, and testable.

INVEST Criteria

Independent: The story should stand alone, allowing it to be developed and delivered independently of other stories.
Negotiable: Stories should be flexible and open to discussion and modification.
Valuable:Each story should provide value to the user or customer.
Estimable:The team should be able to estimate the effort required to complete the story.
Small:The story should be small enough to be completed in a single iteration or sprint.
Testable:There should be clear criteria to determine when the story is complete and meets the requirements.

Also, good acceptance criteria are key because they help the team and other developers grasp the fundamental technical details of a task.

Acceptance Criteria

Acceptance criteria specify the requirements that need to be fulfilled to meet the user's needs as described in the user story. They provide a clear definition of done, helping to prevent misunderstandings and scope creep during development. Essentially, acceptance criteria outline the conditions under which the user story can be considered satisfactorily implemented and ready for testing and deployment.

How Should Acceptance Criteria Be?

Acceptance criteria should be:

Specific: Clearly define what needs to be achieved and what constitutes success.
Measurable: Provide a way to objectively verify when the criteria are met.
Achievable: Realistic and feasible within the project constraints.
Relevant: Directly related to the user story and its intended outcome.
Time-bound: Clearly state when the acceptance criteria should be fulfilled.

Overall, here's an example of a bad vs a good user story about the necessity of adding a new cookie banner for a promotional campaign, that will show specific content depending on wether the user accepts or not:

Bad Example of a User Story

Title: Show Cookie Banner

User Story:

As a user,
I want a cookie banner,
so that cookies are handled.

Acceptance Criteria:
- Display a cookie banner.

Yeah, but, what should happen when user declines? How long should the cookies stay on the browser?, Should we keep showing it if the user accepts?

Above, you'd be failing the achieve most of the acceptance criteria and user story criteria (except for the Small one...)

Good Example of a User Story

User Story:

As a new user that enters the website for the first time,
I want a cookie banner to be displayed to me,
so that cookies can be stored in my browser to determine what to display on the website during the promotional campaign.

Acceptance Criteria:

- Upon first visit, a prominent cookie banner is displayed at the bottom of the website (Check design files below).
- The banner includes options to "Accept" or "Decline" cookies.
- It remains visible until the user makes a choice.
- If the user clicks "Accept," cookies are stored in the browser to record their preference.
- If the user clicks "Decline," no cookies are stored, and the banner remains visible on subsequent visits.
- Component A, related to tracking order status, is shown only if the user accepts cookies.
- If cookies are declined, Component A remains hidden.
- The user's cookie preference is remembered across sessions and visits to the website.
- The banner does not reappear after the user has made a choice unless they clear their browser cookies.
- Ensure the cookie banner and options are accessible to all users, including those using assistive technologies.
- Ensure compliance with legal requirements for cookie consent and user privacy regulations. Link in the cookie banner should forward the user to https://web.xyz/legal on a new tab.
- Verify that the cookie banner appears correctly on different browsers and devices.

Here, you can see it's still small, concise, easier to estimate, specific, and testable.

Now, the promised prompts for creating good user stories using tools or models like GPT, Gemini, or Copilot. Always be as informative as possible, like so:

Delete everything from before. As if you were Senior Product Owner, Can you please generate a good user story following this format: 'As a [new user that entered the website for the first time], I want [a cookie banner to be displayed to the user] so that [we can store the cookies in the user's browser to decide what to show on the website]'? [The user story should be related to a new feature for a shopping website with a promotional campaign that allows users to track their order status. Component A should be shown only is user accepts the cookies] Please add an extensive and concise acceptance criteria for the developers to understand. Ask me if there is any doubt on what fields are we working, if any data or description is incomplete, on or anything relevant.

Be sure to adapt everything that's between the "[ ]" so it matches your story.

The Gherkin Method

Gherkin is a structured language used to describe scenarios in a way that is easy to understand by both technical and non-technical stakeholders. It's primarily used in BDD (a way for software teams to work that closes the gap between business people and technical people) to define acceptance criteria and specify how software should behave in various scenarios.

When is Gherkin used?

Gherkin is typically used in agile environments, where collaboration between business analysts, developers, and testers is essential. It helps ensure that everyone has a clear understanding of the expected behavior of a feature or system.

A normal user story, as described earlier, typically follows a format that outlines the who, what, and why of a feature from a user's perspective. On the other hand, Gherkin is more structured and focuses on specifying the behavior of the software through scenarios written in a specific syntax.

Characteristics of a Gherkin story

Structure: Gherkin scenarios are structured using keywords like Feature, Scenario, Given, When, and Then, which provide clear steps and expected outcomes.
Human-Readable: Gherkin scenarios are written in plain, understandable language that can be easily read and understood by both technical and non-technical stakeholders.
Automation: Scenarios written in Gherkin can often be directly used as automated tests. They can also be used as documentation.

Structure explanation

Feature

The Feature keyword is used to define a high-level description of a feature or functionality that is being tested. It provides context about what aspect of the system the scenarios are related to.

Feature: Login Functionality
  As a user,
  I want to be able to log into the system,
  So that I can access my account and manage my profile.

Scenario

The Scenario keyword is used to define specific test scenarios or examples that illustrate how the system should behave under certain conditions. Each scenario typically represents a specific use case or user story.

Scenario: Successful Login
  Given the user is on the login page
  When the user enters valid credentials
  And clicks on the login button
  Then the user should be logged into their account
  And redirected to the dashboard page.

Steps: Given, When, Then, And, But

Given: Specifies the initial state or precondition of the scenario. It sets up the context in which the scenario takes place.

When: Describes the action or event that occurs that triggers the behavior being tested.

Then: Defines the expected outcome or result of the action specified in the When step. It verifies the expected behavior of the system.

And, But: These keywords are used to continue the previous step (Given, When, or Then) to add additional context or conditions as needed.

Scenario: Search for a Product
  Given the user is on the homepage
  When the user enters "smartphone" in the search bar
  And clicks on the search button
  Then the search results page should display relevant products
  And the user should be able to filter and sort the results.

Optionals for Gherkin

Background: Optional Gherkin keyword used to define steps that are common to all scenarios within a feature file. It helps in setting up a consistent starting state for scenarios, reducing redundancy. Read more here.

Scenario Outline: Optional Gherkin keyword used to define a template for scenarios that vary only in their inputs or data. It allows for parameterization of scenarios using placeholders, which are replaced with concrete values in each scenario instance. Read more here.

Overall, let's see what a complete Gherkin story should look like for the example from before

Example of a Gherkin story

Feature: Cookie Consent Banner
  As a new user visiting the shopping website,
  I want to see a cookie banner
  So that my preferences can be recorded and I can view relevant promotional content.

  Scenario: Display Cookie Banner
    Given I am a new user
    When I visit the shopping website
    Then I should see a cookie banner with options to accept or decline cookies

  Scenario: Accept Cookies
    Given I am a new user
    And I see the cookie banner
    When I click on "Accept"
    Then cookies should be stored in my browser
    And I should be able to view promotional content related to the campaign

  Scenario: Decline Cookies
    Given I am a new user
    And I see the cookie banner
    When I click on "Decline"
    Then cookies should not be stored in my browser
    And Component A, which allows users to track their order status, should not be displayed

And now, a good AI prompt to generate the Gherkin story, remember to change what's inside the "[ ]":

Delete everything from before. As if you were Senior Product Owner, Can you please generate a good user story following the Gherkin format: 'As a [new user that entered the website for the first time], I want [a cookie banner to be displayed to the user] so that [we can store the cookies in the user's browser to decide what to show on the website]'? [The user story should be related to a new feature for a shopping website with a promotional campaign that allows users to track their order status. Component A should be shown only is user accepts the cookies]  Ask me if there is any doubt on what fields are we working, if any data or description is incomplete, on or anything relevant.

Mastering the creation of bullet-proof user stories is not just about following a template but understanding the nuances of effective communication and stakeholder alignment. By applying these principles, teams can navigate complexities, mitigate risks, and deliver impactful solutions that resonate with users.

Hope you enjoyed the article. Feel free to follow me on Twitter, or just check my website!

https://djigo.dev

What WordPress Playground means for your future

Antonio Djigo — Mon, 17 Jun 2024 15:46:10 +0000

Wordpress in one click

Meaning, you can have a WordPress site on any device, without the need of a host, with just clicking a single button.

A site you can your work with directly in your browser. Download it as a zip, import it to GitHub, test themes and plugins on the fly... All while being safe.

When you first start using WordPress Playground, you'll be provided with a separate space where you can create and customize your own WordPress website. This space is completely isolated from your actual website.

You and your fellow dev destroying the WP site without consecuences

Web applications like WordPress have long-relied on server technologies to run logic and to store data.

Using those technologies has meant either running an web server connected to the internet or using those technologies in a desktop service or app (sometimes called a "WordPress local environment") that either leans on a virtual server with the technologies installed or the underlying technologies on the current device.

Playground is a novel way to stream server technologies -- and WordPress (and WP-CLI) -- as files that can then run in the browser.

Part of the configuration of the playground

The WordPress you see when you open Playground in your browser is a WordPress that should function like any WordPress, with a** few limitations**:

Network connections are disabled (will limit connections to some third-party services)
Volatile, data will disappear once you leave (but you can export it!)
It renders in an iframe
PHP code and wp-cli commands are ran via Blueprints

So, how can Playground help your projects?

WordPress Playground at the WordCamp 2024

At Launch:

Reach your clients or customers faster. Showcase your product, let users try it live, or launch it in the App Store with zero lead time.

Embed interactive product demos on websites.
Put a native app running WordPress in the App Store.
Create new sites from Blueprints and share them with a few clicks.

At QA:

Upgrade your QA process with the ability to review progress in your browser in a single click. When you’re ready, push updates instantly.

Live preview pull requests in GitHub.
Clone your site and experiment in a private sandbox.
Test with different WordPress and PHP versions.

At development:

Create and learn WordPress quickly—even on mobile with no signal. Use Playground where you work best, whether that’s in the browser, Node.js, mobile apps, VS Code, or elsewhere.

Install WordPress in a single click.
Build a block theme in your browser and save it to GitHub.
Integrate with Open AI and CLI apps to create new tools.

So, to summarize:

WordPress Playground allows you to create and customize a WordPress site on any device with a single click, no host needed. This browser-based tool provides a secure, isolated environment to work on your site, download it, or test plugins and themes instantly. While it has some limitations, like disabled network connections and temporary data storage, it offers a fast, flexible solution for showcasing products, enhancing QA processes, and accelerating development. Whether for demos, app integration, or learning, Playground streamlines WordPress management and development directly in your browser.

And you can go a play around at:
https://playground.wordpress.net/

Github: https://github.com/WordPress/wordpress-playground
Documentation: https://wordpress.github.io/wordpress-playground/
Contribute: https://wordpress.github.io/wordpress-playground/contributing/index/

Develop your WordPress themes and plugins on Docker

Antonio Djigo — Wed, 30 Dec 2020 14:30:24 +0000

Hey 👀✨

It's been a long time since I wrote my last post. I've been through a lot of changes, both dev-related (new job ✨) and in life.

As I'm expecting to encounter some WordPress work during my new path, I decided to do it in the most comfortable and efficient way. I started to learn Docker not so long ago, and I think it's time to move the WP-Homestead setup to the shelf so my dev life gets even easier than before.

This tutorial is made for those who want to develop anything related to WordPress on any OS without suffering with Homestead or XAMP/LAMP/WAMP/whateverAMP stuff. It also will work as an introduction to the uses of Docker.

So, first of all, why would you want to use Docker to develop WordPress?

Well, by following this post, you can setup and run any WordPress environment with just one file and one command. Actually, the TL;DR of this post would be this simple if you already have Docker installed:

Clone the wp-content folder from your repo.
Add a docker-compose.yml file to the directory you want to work with.
Run docker-compose up -d .
Visit localhost:8000, done, WP is up & running.

We are going straight into battle, so I won't stop with the "what is ...?". I'll just add a link so you can read it if interested.

Click me if you want to know what Docker is!

Okay, let's start.

How to install Docker

First of all, we've got to download it. You can do this in one of the following pages. I'll be following Windows, which is pretty similar to the Mac one. Don't worry if you get lost, everything is perfectly explained in the documentation of the websites below.

For Windows, Mac, Ubuntu, Debian

This is Docker saying hello to your system.

Once we finish the installation, which is a simple Next, Next, Next, Finish one, it is recommended to restart the system. Once we've done it, we can access now to our Docker app, or run docker info to check everything is fine.

Setting up WordPress

Perfect, now that we have Docker ready to work, it's time to set-up our WordPress site. For testing purposes, I'll be doing (and also recommend this for first-timers) a setup with a fresh and clean WordPress site, which you can get here.

Unzip it, and we can continue. If you for example want to work with an existent wp-content folder from a repo, it is also possible. In this case, the directory should look like this:

Preparing the environment

Did you notice the docker-compose.yml file in the last image? Great. This is the file we will have to create in order to make everything work between Docker and WordPress.

Your Docker & WordPress working together smoothly

So, once we have created this file INSIDE the directory we want to work with (in this case, the wp-content directory) we are going to add this to the file:



version: '3.3'

services:
   db:
     image: mysql:5.7
     volumes:
       - db_data:/var/lib/mysql
     restart: always
     environment:
       MYSQL_ROOT_PASSWORD: somewordpress
       MYSQL_DATABASE: wordpress
       MYSQL_USER: wordpress
       MYSQL_PASSWORD: wordpress

   wordpress:
     depends_on:
       - db
     image: wordpress:latest
     ports:
       - "8000:80"
     volumes:
       - .:/var/www/html/wp-content
     restart: always
     environment:
       WORDPRESS_DB_HOST: db:3306
       WORDPRESS_DB_USER: wordpress
       WORDPRESS_DB_PASSWORD: wordpress
       WORDPRESS_DB_NAME: wordpress
volumes:
  db_data: {}

A little bit of explanation here:

We've got two services
One for the database db and one for our WordPress wordpress
They use an image, which will decide which version of database and wordpress are we using, in this case, MySQL 5.7 and the latest WP version.
We can also set up the environment to decide which passwords and database names are we using.
With ports, we decide on which port our app will be running
And finally we have volumes. Here, we decide which of our folders will be copied into the docker environment.

In this case, looking at our wordpress: volumes part, we can see defined .:/var/www/html/wp-content, which means: Copy this directory (.) into (:) /var/www/html/wp-content inside our Docker container.

By doing this, we can edit anything in our editor, and it will be copied in our container, so we can visualize every change we make.

Save it.

Running our environment

Well, this is pretty straightforward. Just run docker-compose up -d on the folder directory through a terminal, and a container will be created and started.



Output: 

PS C:\Users\brownioDEV\Desktop\WP_Docker_DEVTO\wp-content> docker-compose up -d
Creating network "wp-content_default" with the default driver
Creating wp-content_db_1 ... done
Creating wp-content_wordpress_1 ... done

Now, if we access our Docker Desktop App, we'll see this.

This means everything is good to go, so, if you access now to http://localhost:8000/, you'll be redirected to your WordPress installation site, and once you finish, you can now work on anything you want!

Next time you want to run your environment, you just need to click the Play button on the Docker App, and everything will be up!

You can follow me so you are tuned to whenever I post something through my Twitter account. Hope you liked it, and enjoy the festivities!

Is the Front-End community better than the Back-End community?

Antonio Djigo — Tue, 21 Apr 2020 16:52:32 +0000

I know, I know, this is one of those click-bait titles you can see on YouTube.

Before everyone starts yelling, let me explain this.

I've been in the Web Development industry for a few years. Started 100% knee-deep in Front-end and everything seemed to be cool, sparky, flawless and there were a lot of "dev influencers" around the net creating videos, courses, etc...

It was almost impossible not to make someone think "I should become a React/Vue Developer".

Now that I've dug a lot more into back-end —to the point that I'm thinking about staying there—, I feel some kind of disappointment when I look at social media like Twitter, Dev.to or local events and don't really feel the "hype" I saw in front-end.

Do you think the same?
Do you think there is an important difference between those two worlds?
Could you recommend any resources for those who feel the same?

Please, let me know in the comments!

Cover illustration by William Erhel & BlueCoders

I just want to be a Golang developer - How to get started

Antonio Djigo — Mon, 16 Mar 2020 17:44:43 +0000

Hey 👀✨

I've been searching almost everywhere to find some good resources to learn Go, and I just realized that there wasn't much information about it! So, what a better way to learn new things than reviewing resources to teach others.

But first, allow me to introduce myself: I'm Antonio (Tony, Tonio, Anto, many other variants allowed...), a Ruby on Rails developer for almost a year, after one and a half years of WordPress and other front-end tasks. I wanted to do something new, something that could teach me how to improve in other fields of programming and would be fun at the same time. That leaves us with the big first question...

Why would I learn GO?

Let's start with the basics, in case you haven't decided yet if this language is really for you.

First of all, Go is an open-source programming language. It's statically typed and produces compiled machine code binaries (an executable, just like Java). If you need a comparison, people say that Go it's the "new age C" speaking of syntax (fear not, it's pretty easy on the eyes).

It was introduced back in 2009, and it's now (16/03/2020) in version 1.14.

It's main characteristics are:

Ease of use together with state-of-the-art productivity.
High-level efficiency along with static typing.
Advanced performance for networking and the full use of multi-core power.

And you may be wondering what you can do with Go, well:

You can create websites.
You can de IoT stuff.
You can do Desktop Software.
You can do... eveything.

So damn powerful.

Aren't you interested yet? You can read more about it on this website

If you are, please keep reading, as there is a lot to know.

How do I learn GO?

First, you need to know the basics of the language, and for that, I truly recommend doing the Go Tour.

On this tutorial made by the creators of Golang, you will get through all the content that makes Go what it really is. All of its main features you need to know to start doing stuff. Slices, Goroutines, Channels, Structs... but worry not, those concepts may sound pretty weird, but if you have a software background, you will notice that everything else is pretty much the same as other languages (and even easier!).

After you've done this, you may want to set up an environment on your computer.

How do I install GO?

If so, you should follow the steps here. No matter what OS you have on your computer, Go works everywhere!

I do recommend VSCode to work with Golang. You'll get a lot of useful tools recommended by the editor itself when you start coding with the language. A linter, snippets, etc...

Thanks VSCode team!

You also have the JetBrains option, GoLand, if you want and can afford it.

Something to read, so I can improve?

Before we dive deeper into recommendations for Go, you should check some of these books out if you think you need more knowledge of the language:

An introduction to Programming in Go - A must if you are new to programming and you want to start with Go.
Build Web Applications with Go - if you want to get into Web Development with Go.
Go for Javascript Developers - In case you already know JS, this may help you learn Go faster!
More recommended books here

But please wait until COVID-19 goes away!

Okay, I feel that you now have enough resources to create your own path into Golang, but you need something to practice, so... what about some exercises?

What about learning by doing?

You don't need to make every exercise or watch every video you see here, but they may help you develop your programming skills and Golang knowledge.

Gophercises

Gophercises is a free course that will help you become more familiar with Go while developing your skills as a programmer. In the course, we will build roughly 20 different mini-applications, packages, and tools that are each designed to teach you something different.

JustForFunc

JustForFunc also used to upload tons of videos about Go new features and tutorials, so be sure to check them out!

Other resources of interest:

Learn Go with tests

And last, but not least.

Do a project of your own!

There are a lot of options around there. Maybe find something that you've always wanted to have, or some simple application that you think is missing something, and create it again.

I started with a To-Do list on console and an HTTP server to serve my own website. Keep it simple at first, we don't want you to get suffocated!

DIY!

Here you have a curated list of awesome Go frameworks, libraries and software Awesome Go, so you can experiment with whatever you want to first.

If you are into web development (as I am), I can recommend you Gin Gonic, a web framework to have a pleasant journey creating a website of your own (even though, I recommend you to do it without framework if this is your first time using Go).

Nothing at all.

And... I think we can stop it for the day. There is a lot to speak about regarding Go, but I think that the basics are covered in this post, so you can start experimenting with Go. Thanks for reading, and please, if you liked it, let me know, so I keep bringing content to this awesome community.

You can follow me so you are tuned to whenever I post something through my Twitter account, hope you liked it!

There are no limits... Go in and play!

Useful "advanced" commands in 2 minutes - Git Bisect

Antonio Djigo — Tue, 10 Mar 2020 13:16:29 +0000

Hey 👀✨

Welcome to Useful "advanced" commands in 2 minutes. Let's be quick about this. Have you ever introduced a bug, and noticed 5 commits after, without knowing where did you put added that bug to the code?

That's where git bisect will help you (a lot!).

So, how does this work?:

First, you need to go to the last commit where you have this bug present somewhere around the code, let's say you are in the master branch.

Then you are going to write in your console:

git bisect start

Nothing will happen after you tell the system the hash of the commit that has the error, by saying:

git bisect bad hashofthebadcommitas489sf0

and you also need to tell the system a commit where the code was working as expected, like:

git bisect good hashofthegoodcommiteoiwi30ea

Bisect then will prompt a message like this:

Bisecting: 3 revisions left to test after this (roughly 2 steps) [cc6a1e3f00cf5360c3bae687fdcf21f1c111accd] Commit message that you wrote

Now, it's time to test, go to that part of the website/app where you have the error, and check whether you still have the error or not.

If you don't have the error, you will write git bisect good, if you DO have the error, write git bisect bad

After you choose one of these options, git bisect will automatically checkout to another commit, where you'll have to do the check again, is everything good? bisect good, else, bisect bad.

Until you reach the last possible commit to check, where, after you make the last decision, git will tell you this.

ed4d268d1ec7039bc6b5e4ee7c4ce28sbc3af30 is the first bad commit commit ed4d268d1ec7039bc6b5e4ee7c4ce28sbc3af30 Author: Antonio Djigo <antonio@greatest-developer.eu> Date: Tue Mar 10 11:59:06 2020 +0000

Add new functionality where for sure I won't break anything

And there you have it! Now you know which commit was the first one that introduced the bug, so you can fix it ASAP!

You can follow me so you are tuned to whenever I post something through my Twitter account, hope you liked it!

Resources to learn Golang by doing?

Antonio Djigo — Thu, 05 Mar 2020 17:10:23 +0000

Hello! I'm posting this because I'm looking for a resource to learn go by doing a guided project. Just like you can do with the The Ruby on Rails tutorial by Michael Hartl.

Do you know any?

I found this one, but last time it was updated was 2 years ago...
Any other resources are also welcome. 👀✨

Beautiful Controllers - Growing Rails applications in practice

Antonio Djigo — Wed, 04 Mar 2020 12:26:54 +0000

Hey 👀✨

I've been reading through a book called Growing Rails Applications in practice and I decided to make a summary to get a better understanding of every chapter. Maybe it also works for you!

Normally, the developer does not struggle to learn about what a View or a Model is. But what about the controllers?

What are the major problems of dealing with them?

It's often hard to decide if the logic goes into the controller or in the model.
Normally, sharing code between the model and the screen requires too much code.
Tested controller's code is hard to test and experiment with because of the parameters, sessions, requests etc they need.
Without a design guide to follow, it is hard to find two controllers that look alike, making it a pain to recognize who every controller work.

We cannot get rid of them, but, by following simple guidelines, we can extract business logic out of the controllers, and take them to a better place.

Consistent controller design

It is important to have a standardized controller design. A developer who has to learn how to manage a new system every time he/she edits a controller file won't be happy. A lot of time will be spent here by doing this.

By reducing the variability in our controllers, we will improve our fellow developers' mental health. Wouldn't it be awesome that, by having a default design, you could focus exactly on what you want to do, and in the other parts of the system?

Also, the development speed of new controllers would be improved. You would only decide to use CRUD, and move to the parts you really care about.

Normalizing user interactions

How could you come up with a default controller design when your site has a lot of different user interactions? A good way to manage this would be to reduce every interaction to a CRUD controller, even if you feel that it's not necessarily a typical CRUD interface (at first).

Every interaction can be modelled as a CRUD. You may have a controller that manages a subscription. Why not DESTROY a subscription instead of cancelling it? Or CREATING it instead of activating a new subscription?

By normalizing every user interaction to a CRUD interaction, we can design a beautiful controller layout and reuse it again and again with little changes.

A better controller implementation

How should a controller truly be? We have seen many unloved controllers during our careers.

Let me give you some hints.

They should be short, DRY and easy to read.
Controllers should provide the minimum amount of glue code as possible. (No intermediary code between a request and a model)
Always follow the standard design, unless there is a truly good reason.

A good way to do this is by creating an standart implementation of a controller that CRUDS an ActiveRecord class:

class NotesController < ApplicationController

  def index
    load_notes
  end

  def show
    load_note
  end

  def new
    build_note
  end

  def create
    build_note
    save_note or render 'new'
  end

  def edit
    load_note
    build_note
  end

  def update
    load_note
    build_note
    save_note or render 'edit'
  end

  def destroy
    load_note
    @note.destroy
    redirect_to notes_path
  end

private

  # The controller actions are delegating most of their work to helper methods like load_note or build_note. This will make our code DRY and it will be easier to change the behaviour of multiple actions by just editing our helper method.

  def load_notes
    @notes ||= note_scope.to_a
  end

  def load_note
    @note ||= note_scope.find(params[:id])
  end

  def build_note
    @note ||= note_scope.build
    @note.attributes = note_params
  end

  def save_note
    if @note.save
      redirect_to @note
    end
  end

  def note_params
    note_params = params[:note]
    note_params ? note_params.permit(:title, :text, :published) : {}
  end

  # note_params will allow us to only give access to those parameters we want the user to edit
  # authorization does not belong in a model, as no users should interact with data in there.

  def note_scope
    Note.all
  end

  # This note_scope method is used by every CRUD action. 
  # It loads a Note with a given ID, or to load the list of all notes at the index method.
  # By having this guard access to the Model, we have a central place that tells exactly which records the controller can show.
  # We could limit this, for example, to only display specific user notes, just by changing the query we make to the model.

end

Why have controllers at all?

By doing this, we are creating a simple and consistent controller design that pushes a lot of code into the model. So, why have controllers?

There are several responsibilities that belong in a controller.

Security (authentication, authorization)
Parsing and white-listing parameters
Loading or instantiating the model
Deciding which view to render

Remember that a controller never does the heavy lifting. They should contain as less amount of glue code as possible. 👀 ✨

You can follow me so you are tuned to whenever I post something through my Twitter account, hope you liked it!

A pattern a day keeps the reviewers away - [Day 6] - Adapter Pattern

Antonio Djigo — Mon, 17 Feb 2020 14:39:16 +0000

Hey 👀✨

It's been 7 days already, that's totally a new achievement! I hope both you and I are learning a lot from these posts, and please, do not hesitate to contact me with your ideas and constructive criticism to make these post better and better!

Well, let's get started:

The first day of a new week, and it's the turn for another design pattern, one that you may find really obvious, but also one that is not as used at it should be. Today, I'll be writing about the Adapter Controller.

Let's get in context. You may have worked before with some APIs that give you a lot of data in many different ways and shapes. Maybe you also had to transform this data and send it to a website, or a chart, or a PDF... Many options here.

Once you try to send the data for your first time, you notice that the service where you are sending the information needs your data in a specific format and type.

Here is where the Adapter Design Pattern gets into action.

This pattern functionality is pretty basic, you may have already realized how does it work. Is just the same logic as an electricity adapter.

Diagram from https://www.javagists.com/adapter-design-pattern

What should you have in mind when working with Adapters?:

Well, there isn't much to say here. You'll always need to have in mind that the data transformation it's made inside the Adapter Class, and it will send it to the object that requested this information. It should be between the sender and the requester.

Want to know more about how to implement this pattern? Click here.

By following these simple rules, everything will fit together and you won't have to worry about that weird information that comes from that 0.1-alpha API you found.

Perfect fit!

And this is my sixth post about design patterns for the series "A pattern a day keeps the reviewers away".

I'll try to keep posting every day one of the different patterns that are around. I can't promise I'll fulfil this task every day though!

You can read more about this pattern at:

Also, you can follow me so you are tuned to whenever I post something through my Twitter account!

#KnowYourWorth - Are you really being valued?

Antonio Djigo — Sat, 15 Feb 2020 11:29:59 +0000

During the past days, a new trending hashtag appeared on Twitter, calling to all the devs/designers around the world to mention what do they earn, what did they study, and for how long have they been working in the software/design sector.

You can spot things like this:

// Detect dark theme var iframe = document.getElementById('tweet-1228247484591476736-543'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1228247484591476736&theme=dark" }

// Detect dark theme var iframe = document.getElementById('tweet-1228341690362191874-87'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1228341690362191874&theme=dark" }

But there are also many several case where you see totally the opposite, like:

// Detect dark theme var iframe = document.getElementById('tweet-1228465847661887488-21'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1228465847661887488&theme=dark" }

or, well, myself:

// Detect dark theme var iframe = document.getElementById('tweet-1228602383363706880-809'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1228602383363706880&theme=dark" }

What concerns me the most, it is not the huge difference between salaries per country, as the expenses are different. It is, for example, that, your salary is completely worse than others in the same country. That you have to bear spending 60%-65% of your salary only for the monthly rent...

You can more about my rant here: // Detect dark theme var iframe = document.getElementById('tweet-1228627734823305216-284'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1228627734823305216&theme=dark" }

What is your situation?
What do you think?
Do you need help?

Let us know in the comments, or Twitter!

Want to share your state? Here you have a template:

🏫: Studies
⏳: Experience
🏷: Role
🌎: Country / City
💸: Salary

A user I don't know (if you do, please share), created this spreadsheet with many of the salaries posted, in case you are curious.

A pattern a day keeps the reviewers away - [Day 5] - Abstract Factory Pattern

Antonio Djigo — Fri, 14 Feb 2020 17:02:30 +0000

Hey 👀✨

During the past few months, I've been working on a back-end project made with Ruby on Rails. Last year I was working as a Front-End developer, I've never had the opportunity to apply design patterns almost anywhere, until now.

It's a pretty useful thing, that probably every developer that works with objects should at least know and practice, and this is why I'm here, to give you (and me!) a daily short post about the different design patterns that exist (or at least, those that are used the most), with an example, and an explanation.

Because doing good code will help you, your workmates, and those who will be in the future.

Do teamwork!

Today, I'll write about a famous one. It is called the Abstract Factory Pattern.

Let's say you have a magic computer generator, where you three families, Linux, macOS, and Windows. Each one has three elements of its own, a calculator, a text editor, and a terminal. For each machine that you are going to build, software on them must match with their OS in order to work. Also, you don't want to change your OS code whenever you want to add a new tool, it should always support every new tool on its own!

If you have felt before that you've suffered this, then you have to choose the Abstract Factory Pattern, where you will create an interface that can be implemented on each of the OS's tools.

In the next diagram, you'll see how an Abstract Factory diagram is defined, so you get an idea of how the idea works.

Things you need to have in mind when working with abstract factories:

Use the Abstract Factory when your code needs to work with various families of related products, but you don’t want it to depend on the concrete classes of those products.
The code may become more complicated than it should be, since a lot of new interfaces and classes are introduced along with the pattern.

If you follow the ideas raised above, you will have an amazing abstract factory ready to mass-produce.

It will be as oddly satisfying as this gif.

Now, you'll create new products with similar characteristics in a ✨ clean and efficient way ✨

And this is my fifth article about design patterns for the series "A pattern a day keeps the reviewers away".

Wow, 5 posts. I've never expected to reach the 5 days strike

I'll try to keep posting every day one of the different patterns that are around. I can't promise I'll fulfil this task every day though!

You can read more about this pattern at:

Also, you can follow me so you are tuned to whenever I post something through my Twitter account!

A pattern a day keeps the reviewers away - [Day 4] - Prototype Pattern

Antonio Djigo — Thu, 13 Feb 2020 21:31:11 +0000

Hey 👀✨

Because doing good code will help you, your workmates, and those who will be in the future.

Do teamwork!

Today, I'll write about a popular design pattern that you may have heard. It is called the Prototype Pattern.

Have you ever had the problem where you have one specific object that you want to duplicate to an exact same copy? The "easy" way would be to just generate a new object with the same values over and over, but, some of those objects could have some private or protected fields that you’ll miss...

Also, it’s quite ugly 🤨

Feeling like you really need to get rid of this problem? Then you have to choose the Prototype Pattern, where you will create a prototype that can be cloned with just a single method.

This one is pretty easy. You just have to generate one, two, or as many variants as you need, and, when you need an exact same object, you just clone it!

In the next diagram created by refactoring guru, you'll see how there is defined a Prototype interface. It will specify the kinds of objects to create using the subsequent prototypes, and create new objects by copying this prototype.

Things you need to have in mind when working with prototypes:

Use only if your code shouldn’t depend on the subclasses of objects that you need to copy.
Try to use it only when you have many subclasses that they are only differentiated by the way they are initialized.

If you follow the ideas raised above, you will have an amazing factory of prototypes ready to be tested.

Now, your clones production will be ✨ clean and efficient ✨

And this is my fourth article about design patterns for the series "A pattern a day keeps the reviewers away".

I'll try to keep posting every day one of the different patterns that are around. I can't promise I'll fulfil this task every day though!

You can read more about this pattern at:

Also, you can follow me so you are tuned to whenever I post something through my Twitter account!