DEV Community: Alex Arroyo

The Importance of Pseudocode: Developing a Web App Using the Principles of Atomic Design

Alex Arroyo — Thu, 16 Nov 2023 15:51:00 +0000

In the realm of modern web development, crafting interactive user experiences is paramount, and JavaScript stands as the pivotal tool for such dynamic interactions. For developers, an intimate understanding of JavaScript's capabilities is a prerequisite, even before leveraging the abstraction layers provided by frameworks like React and Angular.

To go deeper into this topic, I will present in this article a case study of a task management web app I made called "Priorities Online".

"Priorities Online" will be handy here to exemplify JavaScript web app development, integrating user interaction and dynamic content manipulation without the overhead of heavy frameworks. This article will delve into the intricate process of building this application, leveraging the concept of Atomic Design, which is proposed in line with the fundamental principles of object-oriented programming (OOP).

To make our web app, before starting to write code, I sketch a visual frame of how it could look and then I plan a layout using this methodology that I write in a markdown program like Obsidian, where I write pseudo code and plan each part of the app beforehand within its respective structural frame.

From Wireframes to Functional Outline

To start off, I want to have at least a visual clue of how the app will be, that is why I usually start to develop my apps creating some wireframes for Figma. Once I have those, I proceed to outline the app's functionality in Obsidian or other note taking app with markdown functionalities using the Atomic Design principles to organize the components systematically. This meticulous planning phase is pivotal, forming a clear pathway from design to development.

Atomic Design: A Modular Approach

Atomic Design, a concept I came across online years ago, is an insightful paradigm for decomposing complex interfaces into fundamental building blocks within a hierarchical structure. It borrows from the natural world, where sentient beings can be broken down into organisms, molecules, and atoms, all residing within a specific environment (this being a term I've personally added to the original layout). In this manner, Atomic Design offers a logical blueprint for constructing a web app with a clear separation of concerns, facilitating maintenance and scalability. This conceptual approach is coupled with the principles of encapsulation, inheritance and compartmentalization used in OOP in general.

Environment: The Single Page Application

"Priorities Online" breathes within a single-page application environment, with the index file orchestrating the overall structure. It encompasses two organisms that facilitate user navigation and action zones: the "sideBar" for navigation and the "contentBox", where the action happens.

Organisms: Dynamic UI Elements

The organisms, such as the "sideBar" and "contentBox," are the cornerstone components that define the spatial and functional organization of the web app. The sidebar acts as a navigation hub, while the content box is the central area for user interaction and task management. They house various molecules, which are combinations of atomic elements working together to execute a particular task module.

Molecules and Atoms: Reusable Components

Molecules are combinations of various elements that perform a particular function—like a task "molecule" that includes a button to add tasks. As shown, molecules can be conceptualized as a parallel to "modules" in real code. Atoms can be considered as the smallest reusable units, like buttons or input boxes, etc. These design units are leveraged across different modules, ensuring a consistent and maintainable codebase. In the Priorities Online app, an example of an atom would be the "Add Task" button, which resides in the task module (or molecule).

I also like to utilize the concept of "particle" (as a broader sense than atom) as an analogue to classes of prototypes, which have properties (or "subatomic particles") shared all across.

Implementing the Vision: Pseudocode to Execution

Having set out all the pseudocode with the Atomic Design in mind in obsidian, and having all the structure in place, I translated the pseudocode to real javascript (and jQuery) code, which was now easier as we have delineated already how the UI elements interact within the DOM. And through the app's functionality is rooted in JavaScript, its pseudocode serves as its architectural blueprint:

The environment is the single page application (index.html)
The organisms are the main divs within the "environment": sideBar and contentBox.
The molecules are the different modules used throughout the app: priorities.js, projects.js, tasks.js, etc.
There are two particles or classes for "projects" and "tasks" defined in the tasks and priorities modules.
The atoms are the different objects also shared throughout the app or locally. Many of them are defined with classes for styling.

With this article I hope to have illustrated how a systematic approach to design and development can yield a robust approach for abstraction thus simplifying the development process.

For the code itself, you can check it here.
Here is the pseudocode.
And here you can see the app live.

Building an Installable Desktop App with Python, PyQt, and Py2app

Alex Arroyo — Tue, 05 Sep 2023 07:58:35 +0000

Desktop applications remain a popular choice for many utilities and tools. With Python being one of the most versatile and widely used programming languages, combining it with a GUI library like PyQt can yield robust applications. In this tutorial, we’ll go through the process of creating a simple installable desktop app using Python, PyQt, and Py2app.

Prerequisites:

1. Installing Python and pip

Ensure you have both Python and pip installed. If not, here’s how you can do it:

Download and install Python from the official Python website.
Pip is included by default with Python 3.4 and later.

2. Installing necessary libraries

With pip in place, install the necessary libraries:

pip install py2app PyQt5 pyinstaller

Creating Your Desktop Application:

1. Writing `app.py`

Here’s a simple PyQt application that displays a window with a greeting message:

import sys
from PyQt5.QtWidgets import QApplication, QLabel, QMainWindow

class MyApp(QMainWindow):
    def __init__(self):
        super().__init__()
        self.setWindowTitle('Hello PyQt')
        self.setGeometry(100, 100, 200, 80)
        label = QLabel('Hello, world!', self)
        label.setAlignment(Qt.AlignCenter)
        self.setCentralWidget(label)

if __name__ == '__main__':
    app = QApplication(sys.argv)
    window = MyApp()
    window.show()
    sys.exit(app.exec_())

2. Creating `setup.py`

This script informs py2app how to package your application. Here’s a basic example:

from setuptools import setup

APP = ['app.py']
DATA_FILES = []
OPTIONS = {
    'argv_emulation': True,
    'packages': ['PyQt5'],
}

setup(
    app=APP,
    data_files=DATA_FILES,
    options={'py2app': OPTIONS},
    setup_requires=['py2app'],
)

Making Your Python GUI App Executable:

Execute the following command:

python setup.py py2app

This will bundle your PyQt application into a standalone executable. Once finished, you’ll find a .app bundle in the dist directory.

Making Your Desktop App Installable:

1. Install Node.js and npm

You can download and install both from the official Node.js website.

2. Install `create-dmg` using npm

npm install -g create-dmg

3. Create an installable dmg for macOS

create-dmg 'dist/YourApp.app' destination_path/

Replace YourApp.app with your actual application name and destination_path/ with where you want the .dmg file to be saved.

And voila! You now have an installable desktop app created with Python and PyQt. This process provides a straightforward method to develop and distribute GUI applications for macOS. Happy coding!

Mastering VS Code: The Power of Keyboard Shortcuts

Alex Arroyo — Tue, 05 Sep 2023 07:56:38 +0000

Every professional tool has its nuances that allow for an optimized and efficient workflow. One of the many reasons developers love Visual Studio Code (VS Code) is its robust set of keyboard shortcuts. Keyboard shortcuts not only speed up your workflow but also give you a feel of fluency and mastery over your tools. In this article, we’ll dive deep into some of my most frequently used keyboard shortcuts in VS Code.

Why Use Keyboard Shortcuts?

Before we delve into the specifics, let’s address the importance of using keyboard shortcuts. By eliminating the need to constantly reach for your mouse or to navigate through menus, you’re not only saving precious seconds but also maintaining your flow state. Over time, these saved seconds add up, leading to significant productivity gains.

My Most-Used VS Code Shortcuts

Below are the (MacOS) shortcuts that I find myself using the most in my daily workflow:

Navigating between tabs and terminal: ⌘ +`
Formatting code: ⇧ + ⌥ +
Commenting out code: ⌘ + /
Indenting and outdenting code: ⌘ + ] / ⌘ + [
Moving lines of code: ⌥ + ↑ / ⌥ ↓
Copying an entire line: ⇧ + ⌥ + ↑ / ⇧ + ⌥ ↓
Deleting a section or line: ⌘ + ⇧ + K / ⌘ + X
Starting a new line: ⌘ + Enter
Jumping to the start or end of a document: ⌘ + ↑ / ⌘ + ↓
Folding a function or section: ⌥ + ⌘ + [
Unfolding a function or section: ⌥ + ⌘ + ]
Accessing quick actions and commands: ⌘ + ⇧ + P
Navigating to settings: ⌘ + ,

Dive Deeper

The beauty of VS Code is its flexibility. If the above shortcuts don’t align with your personal preferences or if you have a unique set of commands you frequently access, you can always customize your shortcuts. Just head over to settings > keyboard shortcuts in VS Code to explore and set your own combinations.

Wrapping Up

Mastering keyboard shortcuts in VS Code (or any tool, for that matter) is akin to mastering a musical instrument. The more you practice, the more fluent and efficient you become. Embrace these shortcuts, and watch your productivity soar!

I hope this article encourages you to dive deeper into the functionalities of VS Code and truly harness its power. Happy coding!

Learn How to Use Git & GitHub: A Guide for Absolute Beginners

Alex Arroyo — Tue, 05 Sep 2023 07:51:29 +0000

Embarking on Your Coding Journey? You’ve probably heard of Git & GitHub. Dive in, and let’s demystify these essential tools for every developer.

Why Git & GitHub?

Version control is paramount for collaborative projects and individual projects alike. Git helps you manage changes to your code, while GitHub provides an online platform to share, collaborate, and version-control your repositories. Together, they’re an unbeatable combination for any developer.

Getting Started with Git

Setting Up Your Identity

It’s essential Git knows who’s making changes. Let’s set that up:

Open your terminal or command prompt.
Enter:

   git config --global user.name "Your Name"
   git config --global user.email "your.email@example.com"

Tip: Ensure the email used is the same as your GitHub account for a seamless experience.

Creating Your First Repository

Before diving deep, check if a repository exists in your current directory:

ls -a

If you spot a .git directory, a repository already exists!

Otherwise, initialize a new one with:

git init

Syncing with GitHub

Setting Up Your GitHub Repository

Head over to the GitHub website and create a new repository.

Connecting the Dots

Now, let’s link your local repository (on your machine) with the remote one on GitHub:

git remote add origin https://github.com/your_username/repository_name.git

Run into trouble? Don’t fret!

Check if a git repository already exists connected to the directory:

git remote -v

If that’s the case, you can:

Modify the URL for origin:

  git remote set-url origin https://github.com/your_username/repository_name.git

Or perhaps, you’d like to start afresh by removing origin and adding it again:

  git remote remove origin
  git remote add origin https://github.com/your_username/repository_name.git

Alternatively, you can try a different name other than origin:

  git remote add another_name https://github.com/your_username/another_repository.git

Tip: Naming conventions can help streamline your workflow. Choose names that resonate with your project.

Staying Updated with Git

Tracking Changes

Add and commit changes within your repository. This helps Git understand and track your modifications:

For all files:

  git add .

For a specific file:

  git add file_name

Commit the change with a descriptive message:

  git commit -m "Your descriptive message here"

Updating GitHub

Every time you modify your code, it’s a good practice to push changes to GitHub:

If it’s your first push:

  git push -u origin main

For subsequent pushes:

  git push origin main

Quick Cheat Sheet:

git add

git add file_name

and

git commit -m "descriptive message"
git push -u origin main

Determined to Learn More?

Delve deeper into the world of GitHub with its official documentation.

Extra Help:

If you’re just starting out and only making simple pushes on your own, you might want to check out the VisualGit script, which automates the processes described in this guide.

You can find it here.