windDOWN with Sinatra

download the app // https://github.com/kyle-crews/wind-down

_________________

WINDdown is a simple web application built on a combination of Ruby, Sinatra, HTML/CSS, JS, and ActiveRecord. The build only took a few days, but I certainly ran into my share of issues along the way. Below I review the functionality associated with the app … and discuss some of the headaches I encountered during the build.

Software development in 2020 is that of rapid iterations, frequent updates, and a stream of feature requests. For apps and SaaS products to stay relevant, they must nail: quick updates, offer quality/stable builds, and do seamless deployments, regularly.

To enable rapid builds/deployments, modern software development requires working with borrowed-code of all sorts. From open source contributions, to APIs calls, to code snippets … code, you did not personally write, is frequently called on and utilized. The need to write custom code for each feature/function drops dramatically … and with it, the development time of projects. Versus starting from scratch, what’s primarily required of a modern developer is the ability to stitch together code segments, ensuring compatibility.

Until now, I have built each project from scratch. Starting with an empty notebook and building out each document individually. I wanted to do something different this go around. So, for a recent build, I decided to take an existing project as the starting point. Updating, refactoring, and adjusting the codebase to reflect the desired functionality I wanted.

The application should have a few simple elements:

1. A field to input your most crucial task tomorrow
2. An area to input what you accomplished that day
3. A space to input what good happened today
4. An area to input what you are grateful for

Primarily, a way to decompress before bed using targeted, self-aware, journaling. WINDdown is the result. A place to deliberately remember what you accomplished today, what is your primary focus tomorrow, and what went right today. Yes, there are plenty of applications, both mobile and web-based, that offer similar functionality. But, ultimately, nothing provided what I was looking for, as far as functionality. Said functionality includes:

1. Ability to secure sensitive personal data by storing it locally. No data is sent to or stored in the cloud … unless set up manually. By default, store all information on your local machine. Back up your data on an external SSD, and you are the only one who will see it.
2. New entries are not a blank page
3. A new entry takes only a few minutes to complete
4. The process is frictionless and easy to navigate

LESSON FROM THE BUILD:

_________________________________

common mistakes when using search/replace

“Oh, this is so simple. I will simply replace all the instances of a word” is a dangerous statement.

// capitalizations //

Here’s where I ran into the first problem. In my case, I wanted to change each instance of category to day. The Find & Replace functionality within VSCode makes this exceedingly easy to accomplish. What I failed to account for … the default settings do not account for the capitalization of a word. Replace category for day, without issue … replace Category with day, big issue.

In most programming languages, the capitalization of words matter. The app I built, WINDdown, utilizes Ruby … So I will use Ruby in this reference:

variables not capitalized

capital = “liquid assets”

classes capitalized

class Capital

end

When the class #Category is replaced by #day, the class and all references to the class no longer work. The class #Category must be replaced by the class #Day. To resolve this issue, I selected the “match case” filter.

find & replace within VS Code

LESSON 1: Always VERIFY THE CASE before replacing a word

// words within words //

Replace all instances of asset with liability. It seems easy enough … but what about for terms such as Cassette. This word is updated, as well. Cassette becomes Cliabilityte. I’ll take “Most likely to cause an error for $400, please”.

When #Cassette is replaced by #Cliabilityte, the class, and all references no longer work. The term “liability” must only replace independent instances of the word “asset” … nothing else. To resolve this issue, I selected the “match whole word” filter.

find & replace within VS Code

LESSON 2: Before replacing, always VERIFY THE WORD

// unintentionally replacing similar words //

Another issue I ran into was updating code, unnecessarily. name is a variable associated with the previous project. What I wanted to do? … update instances of the variable name to date. Again, simple enough to do. What I did not consider is … some instances of name are part of the HTML syntax, that need to remain unchanged. For example:

<input type=”text” name=”username” placeholder=”Username…” class=”form-username form-control” id=”form-username”>

There’s no easy filter or way I found around this issue. Across many languages, syntax and relevance should be observed for projects with a sizable codebase before making each update.

VS Code: select to update an individual instance

LESSON 3: Always INDIVIDUALLY REVIEW THE WORD/SYNTAX + VERIFY FUNCTIONALITY after changes

Hopefully, you’re able to learn from some of the struggles I encountered during this project. If you have thoughts on the project or suggestions for improvements … reach out.