DEV Community: J Signature

A Super Basic CRM for Pet Professionals

J Signature — Mon, 15 Aug 2022 00:01:30 +0000

My journey to building an app that Dog Groomers can use to run an effective business has reached another little milestone. I have decided to work on small components that will be used in the bigger application and press on with the whole package at the same time; alternating between them. As I learn new things, often times use cases come to mind and I am excited to build them out.

So this basic CRM uses React on the front end and Ruby, Sinatra, Active Record on the back end. This stack is super fun to work with and I am proud of what a rookie was able to accomplish in a week! As you may know I am attending a coding bootcamp and it is a boot camp for sure..... There is always so much to learn and it is great to have a little time to showcase your ideas.

It has two basic tables, one for clients and one for dogs. It has a one to many design where each client can have many dogs and every dog belongs to a client. Migrations took care of building out the backend and then some Models that inherited ActiveRecord::Base made it super easy to make some routes that my React front end could hit up for some info.

The Dog page is built in a similar way. A "card" component takes care of displaying the data in a clean way after the good 'ole map function iterates what comes back from my no pun intended FETCH! Another cool thing I got to practice was using the Faker Gem to seed the database. They even had fake info that I used to create the dogs. It is super helpful to be able to edit and delete things on the fly and then run $ rake db:reset or db:reseed to just start over with fresh meaningful data.

Let's face it with no update there is no CRUD! This snip shows a page that displays the client's dog and the ability to edit the clients info. This was interesting because I really understand the idea behind reusable code in react. In about 3 lines the Dog Card component came to life on this page!

Overall I am happy with the initial version of my pipe dream. It lacks most every feature I want lol; but you have to start somewhere. It is funny how you go back and look at code you wrote just a few days before and pat yourself on the back, "Wow I can't believe I figured out that filter method". I can only imagine how the pros feel when they accomplish something I probably don't even know is possible at this point!!

Version 2.0 is going to have Ruby on Rails and I plan on practicing my deployment skills. I am sure it would be nice for those reading this to have something to play around with.... stayed tuned I'm on it!!

Its okay to be dependent ...

J Signature — Sun, 14 Aug 2022 20:23:00 +0000

Recently I started to learn about Ruby, Active Record, Sqlite3 and Sinatra. Together they made up a framework for one of the many possible ways of building a functional back end to a web application. Most of my time up to this point has been working with front end tools like React. In a world where the mindset to be as independent as possible I began to understand that being dependent is actually a necessary part of understanding web app development.

I guess understanding that the front end is dependent on the back end and vice versa is a bit trivial; I get it. This idea of hierarchy, file structures, naming conventions and everyone's favorite "Best Practices" really began to hit home. To put it simply your apps success are dependent on them. The course I am following continued to repeat how important organization and laying out your application was in advance to coding. I just thought:

I get that all the planning is important and I WILL do it NEXT time but this is just a simple little app; I can just do it on the fly.

Now I learned the hard way, just why the course was stressing these ideas and methodologies at each step.

I began building a small CRM tool with nothing more than a quick back of the envelope sketch of the app's dependencies. Tables were rectangles with arrows. The front end layout diagrams were even worse. A few days later I did not even understand what I sketched out and the 6+ hours of code I wrote was scrambled and broken. Time to start over and be a little more dependent on the process. Try to be professional and you will get professional results. Something I knew and believed in but didn't choose to apply in this situation

Maybe I thought I was smarter; Maybe I was just lazy; Maybe I was just too excited to wait to write some code.

One thing is for sure, I learned a lesson and I hope this article rings home with another newbie and underscores the importance of being a little dependent.

Everything fits together and conventions will save the day. Take Active Record for example, Tables are plural and Models are singular. Super important; things will break and flat out not work out of the box without that convention. So you are forced to just accept it, do it and keep it moving. Make everything this simple. If there is not a convention to push you into doing something, try thinking through it in advance first and come up with a plan. If you are making a Table (migration) use a free online sketching tool like draw.io to make the tables in advance and then build them.

In the front end, really get an idea of the Parent and Child relationship before you write a line of code. Props, callbacks and code organization are dependent on these and that is a good thing because when done correctly they will work as smooth as the freebie methods good old ActiveRecord::Base gives you.

To make a long story short, learn from my example and really try to plan. Ever watch a cooking show that has all their ingredients laid out; mise en place. Their process is quick and effective when the actual cooking starts. (Quick thought... did you ever wonder if they would use so many pans if they had to wash them all themselves....)

Try really hard to emulate this in your early projects. Spend time and set up a good clean plan with notes on how everything is dependent on each other. Think about your front end and back end. What routes do you need? Can you make helper functions or prevent repeating functions altogether by placing them in a parent React component? How and where will things live and be named in your file tree?

Bottom line is that I am learning that it is okay to be dependent especially when designing a web app!

Email Template Helper

J Signature — Mon, 04 Jul 2022 13:10:02 +0000

I am learning to become a software developer mainly because I want to develop tools small business's can use to make their lives a little... well.... easier. While email is a foundation of great communication with your clients it can be daunting to phrase and write the same email several times. My first ever react project aimed to make this a bit easier! If you have read any of my posts you know that Dog Grooming and software to make it easier is the focus of my journey so be prepared to see it again.

The Email Template Helper was designed to take the reptation out of repetitious emailing. It was a fun project to learn the basics of React. I practiced using React Router to make it a one-page HTML site with a few different client routes. The idea is to add clients, email templates and then render out a email that can be copied into your email program. Write it once and send it many times, clean simple and effective.

Add a few clients with their basic info which could be expanded to many fields. This was a little crash course for me on input fields and state; oh boy lots to wrap your head around here the first time. After a little practice it becomes easier and the data is sent to a back end in this case a JSON server. A quick render of the current clients below and it is off to step 2.

Next, we need to draft the email template so we can reuse it. It works by giving it a name and then using some (rather ugly) placeholders to craft the perfect message. These placeholders are very utilitarian and I would have loved to deep dived an idea to make them more elegant, but time is always a factor!

Finally, we have a few pull downs to help pick the client, date / time and the template that we want to use. Once they are all filled out the email renders below, ready to copy and paste.

So what is my main takeaway from all this... Styling is hard, really hard.

I spent considerable time trying to practice three CSS styling methods to get an idea of what made the most sense to me. Searching this topic online yielding a real split decision of what is best. I used some "inline" styles on the different React component pages right in the JSX. Next up was the "Styled Components" which I mainly used on the Home Page. Lastly, I used Material UI for the input forms and boxes.

Each of these had there strengths and drawbacks in my limited opinion, based on newbie knowledge. In my mind the styled components made the most sense but was difficult to jump into. Things got wrapped in semantic self created tags that I could style from the ground up; but therein lied its own challenge. Sometimes these technologies are like ordering off of a 40 page menu at a restaurant too many choices; at least for a novice. The library had these tags prepped and ready to go and most importantly the media queries to make it all responsive are included. That is one reason if I were to do this project over an gain with the same knowledge I would have done it all in Material UI.

All in all I feel like I achieved something here and there is many more additions I plan on adding as I continue learning React. Search fields on each of the pages as the content grows. A copy button so you do not have to highlight CTRL + v. Mostly I want to really focus on the styling and implementing an API call to a google account to send the main (pro version ???). Thanks keeping up with the journey.

An aspiring developers " ion"

J Signature — Mon, 04 Jul 2022 01:40:18 +0000

So after getting pretty good at HTML, CSS and of course JavaScript, the curriculum I am following switched gears into the land of React. A quick google search and the typical split down the middle debate was uncovered. One side standing fast that it is unnecessary and too much to start over and learn if you already know basic JavaScript and the other side singing its praises as the only true way to build a interactive front end.

As soon as I read that you had to learn something new and it makes JavaScript obsolete, I quickly became overwhelmed and to be honest a bit frustrated.

Why did I waste my time learning JavaScript if there was something better waiting all along? The good thing about being in a well organized bootcamp is you have to trust the journey. I attended the first lecture on React with my guard up.

Sometimes in life you are wrong... dead wrong; This was one of those times. Not only do you need to understand and use JavaScript, but HTML and CSS have their place in this technology too, and in a BIG way.

This phrase of Under the Hood,

it really began to make sense. So let me get this right, react allows me to type cleaner, more semantic code which gets complied into JavaScript.....wait for it..... Under the Hood!

Gone is the Query Selector, Get element, Add Event Listener and so much more. This cumbersome way of doing things is replaced in react and replaced in a refreshing logical way. You use something called JSX to basically combine the big Three (HTML, CSS, and JavaScript) into one place that makes sense and is more readable for a newbie.

Now with all things there is a syntax and of course some more brackets to figure out, but all in all.... My React_ion is a positive one. If you are a new to developing like me I strongly suggest you learn Vanilla JavaScript, HTML and foundational CSS, but then dive into React. Your React_ion might be different, but that is the great part about coding, there are so many right ways to do things (enter the never ending debate....)

So after completing a basic little project from scratch in React, I am far from an expert on the matter. There are many great blogs, videos and code along tutorials on how to do things in react. This blog is more to try and convince you to give it a try. Hopefully by not showing you too much, it peaks your interest a enough to hit up the old YouTube and go down the rabbit hole.....

Web App Color Helper

J Signature — Sun, 22 May 2022 00:24:09 +0000

A project to practice using asynchronous JavaScript

The assignment was to use a fetch call and a few event listeners to make a basic web app. I decided to use the color API in order to fetch some info about a color that was selected while using the app.

The idea here is to use a basic HTML input type of color and get back some details about the color selected like its value in various formats (CMYK, HEX, RGB) and also some complimentary colors that might work with your selected color on whatever project you are working on.

There is also a copy button next to the complimentary colors that can be used to copy the value to the clip board and possibly to your code.

This was fun to build and tested my newbie coding skills to the max. The fetch went pretty smooth, I got the DOM updated fairly easily. The big headaches for me proved to be bootstrap and the event listeners on the copy button.

I had never used bootstrap before but began to get the hang of it fairly quickly. At a first glance it makes the HTML seem a little busy but I understand it does so much to clean up your CSS. As a matter of fact I did not need dedicated CSS page to build this simple little tool; in hindsight bootstrap is pretty cool to work with (at times....)

Getting the event listeners for the copy button was super tricky. I discovered that a loop could add the event listener to each button that I was creating when I was rendering them in the DOM. Then the problem hit and

I realized what a double edged sword this whole asynchronous JavaScript really was

So to make a long story short I needed to WAIT for my fetch call to complete and render the page BEFORE my query selector could grab the copyBTN class that the inner HTML was creating. Writing it now after the fact, it seems like such an obvious and simple solution, good ole Async Await to the rescue on this one.

I think the biggest take away from this little starter project is time management and realizing it is okay to tweak things along the way. As I am writing this the fact that innerHTML is being used to render part of the page means that more work is needed. While this feels like unfinished business in a way it also sets up my next little victory on my long journey to Web Development greatness.

The importance of good notes...

J Signature — Sun, 22 May 2022 00:23:49 +0000

Why bother taking notes?

Good note taking is key to succeeding in many professional settings but it is essential in IT and as I am learning in Web Development too. It is impossible to remember everything and having a good set of notes to fall back on makes the process smoother and less repetitive. They say that Google is a developers best friend which is honestly one of the most valid observations I have ever heard. Googling is great but hunting around for the same info time after time gets old quick...

I know I saw this someplace, Wait it must have been on w3 schools, Nope I guess it was Mozilla, I love this site but I wish it had a dark mode, This site is awesome but the layout is super confusing every time I look for something

As a Network Technician in a large data center I utilize my notes daily, but it wasn't always this way. To be honest learning new things and maintaining a proper notebook is a real pain. Let me share what has worked for me. I am a hands on tech with no real background in proper notetaking outside of some basic English classes 20+ years ago.

This info is not earth shattering, I am writing this to call you out on not having notes, at least good ones that is.

Pen and Paper or Digital?

This is a no brainer, you gotta go digital. There are many great applications for this that all have their own pros and cons. These are a few that I use:

Microsoft OneNote https://www.onenote.com/
Notion https://www.notion.so/
Coda https://coda.io/
ClickUp https://www.clickup.com/

If I had to recommend one to get started with and you are willing to be thrown into the deep end I would try out Clickup. I say deep end because it is not exactly for note taking. It is a super powerful organizational suite that offers something called ClickUp docs, which is awesome for notes. It syncs flawless between devices, has a desktop app and to put it simply it just works. There are several YouTube videos that explain the whole platform and are well worth checking out. You can insert code blocks and write in markdown, just I am doing here! Oh by the way ClickUp basic is free check it out and prepare to be amazed and a little intimidated ... https://clickup.com/features/docs

If you want something simpler that is also super reliable and focuses just on notes, Microsoft OneNote is a great option. Out of the box it is intuitive to use and their search function is probably the best out of these options. You can parse quicky between note books and sections with a super powerful global search.

Coda and Notion are similar on the surface. I am partial to Coda only because I have used it way more that notion and I like the Coda Packs that integrate easily with Google; notion has these things also, like I said just me choosing one...

So I have to type in everything manually?

Nope, not even close. Enter the screen snip tool. On windows it is [Start Key (on keyboard) + Shift + S], on Mac [Shift + Command + 5] that combination of keys is something you need to remember. Snip and paste in your favorite note taking application.

Pause a video, snip. See a great block of code on the Mozilla docs, snip. Type out something you need to remember in VS Code that was genius, snip. Snipping is where it all starts!

Now there is more to note taking than just snipping, and remember if it something you are going to publish don't forget to get the source info to give proper credit where credit is due! You can make a heading (that will eventually be on a table of contents), highlight code, drop it in a code block and some programs even allow syntax highlighting. This is from my javascript notebook in ClickUp.

Links oh links. Yep links are key, go ahead and embed or paste in the link to that favorite YouTube video that explains passed by value vs. passed by reference in JavaScript. Yea sure this is the last time you need to watch it because you got it this time, but just in case drop a link in your notes.

So that is it?

Yup! Copy paste text, screen snips, links and then just type out the rest. You will naturally develop the way you like to break things up. For example you could have a main page about JavaScript, then sub pages about array operations, DOM selectors, and event listeners. Divide these pages up with headings so you can jump to the area quickly, alternatively you can use the global search feature of many of these applications. Find what you need, hopefully it is in a nice code block that you copy and paste right into VScode!

In conclusion, if you find yourself googling the same thing more than once or researching new material try taking some notes.

Honestly it takes time to do this right but it is well worth it in the end.

Currently I am attending a coding bootcamp, I have two excellent instructors and a well written curriculum that are always linking to external references, these end up in my notes for when I need them at 3am....

Give it a try next time you are learning something new and be prepared to be proud of yourself!

If you want something done right; Do it yourself

J Signature — Mon, 11 Apr 2022 00:13:11 +0000

Why I am becoming a software engineer

That title has always seemed a bit harsh to me but also quite frankly, true in some instances. It’s not to say that others can’t do things right; many can and do all the time, it is all about perspective and persistence for me. More specifically it is about executing an idea for something that you have deep in your mind. It is very much central to your thoughts as a truly unique concept and becomes a creator of forward momentum. For me, this idea began to take shape about 10 years ago.

I have been in and around small businesses for the better part of my life and now as I turn 40 outside of my wonderful family, it is my life. The problem-solving that comes from running a growing successful business consumes much of my thoughts and energy. While that seems noble and predictable at a first glance; is it necessary? Is it even smart?? Ask a small business owner and they will often times say yes between meandering stories of how it is so stressful to run a business because “If you want something done right; you need to do it yourself”. You see, small business owners will frequently acknowledge there is or even should be a better way of doing things. Few of us seek out this easier workflow and even fewer try to execute it on their own, to put it candidly

"Many of us are stubborn, happily stuck in our own ways."

My wife and I opened up a mobile dog grooming business in 2012, one of many exciting business ventures we would enjoy over the years. We started out with a unique business model including all-inclusive pricing which was not yet mainstream in the grooming world. My wife loved grooming dogs and I loved business, the landscape was filled with clear skies and rainbows. As we began our new journey as a couple in a new business, we agreed that customer service would be the cornerstone to our business. Not just in theory or a fancy catchphrase on a website, or even something to tell others but no really the cornerstone of our new venture. We love to use services from businesses that are friendly, organized, and appreciative of our hard-earned money.

From my perspective, true customer service can’t effectively exist without organization. Technology nowadays is crucial for proper organization. We scoured the internet for a software package that could “help” run the business and keep us organized. A CRM or database would be all we needed to get up and running. Much to our frustration plenty existed but none of them were perfect, if I am being honest they were not even close. How were we going to keep track of appointments, customer data, dog data, mapping, sales, and the list went on. We panicked and figured we would attend a trade show to seek out the answers, surely, we weren’t the only ones in this position. We attended the world's largest grooming expo in Hershey PA a truly unique experience. We stayed there for four days and returned with two solutions. The most popular was to use index cards in a recipe box to track leads and appointments. The second consisted of a few poorly executed antiquated software packages. Reluctantly we chose the latter of two poor solutions, to begin on the road to organization.

We decided to not re-invent the wheel (yet) and signed up for a software solution that was a “Customizable CRM tool”, it was okay but far from great. It did not track enough details about the actual groom, even after spending hours in the docs trying to figure out how it worked to "customize" it. Sure, it had the customers' address and appointments but what about the details, I mean the real nitty-gritty stuff; dog’s name, type of shampoo used, length of haircut, what the dog likes and doesn’t like, and any medical conditions we needed to be reminded of. All that “extra” stuff we began storing in an excel sheet, which turned into sheets, which turned into a cabal of data points that only I could decipher. The years went on like this band-aid after band-aid, spreadsheet after spreadsheet. We were successful and profitable but we spent hours trying to get the business to run efficiently and remain truly customer-focused. In 2019 I decided enough was enough and I would build something myself and I did, well sort of…

Our solution was to use a new to market doc / database solution called CODA. Similar to Notion.io and others it would allow us a place to centralize our data in a nice format, which was currently spread out between Gmail, contacts, word docs, and of course my nemesis the spreadsheet. As CODA evolved so did I and I began to study the power of API or application programming interfaces to connect our expanding suite of products together. I felt like I was on to something, maybe just maybe other businesses could use this solution that was working so well for us. I mean it looked terrible and is super buggy but the concept was there and my wife and I began to have more free time and falling stress levels all because of this cobbled-together solution. At this point, we were outgrowing CODA’s abilities. I needed to design something from the ground up.

So, like many others, I began with high hopes; filling my arsenal with bookmarked YouTube videos, Udemy courses, and other online resources.

I began studying HTML and CSS then I gave up….. and then I started again….. and then I gave up. Let i = “iteration of failures”.

I began to feel that it was too hard and had too many steps and pieces to tie together for a regular guy, a technically trained airplane mechanic from Queens, NY. My ideas and their eventual execution were for somebody smart, no make that super smart and a few of them at least. So, I finally gave up on my great idea; our business was running smoothly my little software solution full of bad code and Zapier connections was chugging along and life was good. Hours of clerical work turned into minutes and many of my daily tasks were now automated.

At this point, our business has thrived. We have three trucks and a wonderful staff. My wife and I have applied our hard work and focus to other businesses over the years, and have grown as business people. Our use of technology has allowed me the time to run these businesses and attempt another try at making another dream come true; Brindle App. Named after the unique coloring of our canine mascot and CEO Ernie “The Bulldog”. Brindle App will be an app that mobile dog groomers can subscribe to in order to make their own business run smoother, more profitable, and most importantly more organized. It will take my decade-long dream and turn it into a reality. I was fortunate enough to be accepted into a coding bootcamp, hopefully it can push me to get the fundamentals down. Week by week the course is challenging me and connecting the dots guiding me along my new path to become a software developer with a clear goal; don’t give up this time build Brindle App.

Recently one of my instructors Tom shared his struggle early on while he was learning to become a software developer with me. He suggested I post a little note near my computer that would remind me why I am doing this when times inevitably get tough. Mine reads:

“If you want something done right; do it yourself … Build Brindle App”