project details
details, descriptions, and notes for my projects
Writing Assistant
Tech used
I built this app for anyone with reduced fine motor skills and who also have difficulty in speaking. This is common with people who have cerebral palsy or stroke survivors to name just 2 conditions. My hope is that it will be easier for them to compose emails to family, friends and former co-workers.
If you know someone with a disability who would benefit from this tool then send them to the live version. There are some modifications that can be tailored for each person so feel free to contact me for help with that. Also, take a look at the code on GitHub.
Why I built this app
This was my first JavaScript project and I built it for my aunt who had cerebral palsy. Her emails were in ALL CAPS with many misspellings. She has since passed away but it would be great if someone else with a similiar disability could find value with this app.
How I built this app
As only a newbie builds something: with some initial help and lots of for loops. But I still built it and the only code I searched for was in using the Clipboard API. I then refactored it by converting the for loops to high order array methods, and then I converted it to TypeScript.
What did I learn?
It is absolutely essential to have a clear plan outlined of what you need to accomplish, and I learned that the hard way. This was my first project and the details were not clear in my mind.
Is the app complete?
No. I would like to use the File API so that users can upload a file of proper nouns and sample text so that they can have a custom-built page. I would also like to create keyboards for other languages.
Guitar Chord Namer
Tech used
This app returns the name of a guitar chord, the chord intervals, the chord tendencies, whether or not it equals another chord by a different name and the scales that build the chord.
You won't find a more accurate and complete guitar chord namer app! If you or someone you know plays guitar then try out the app on my guitar website or check out the code on GitHub.
Why did you build this app?
I started this project after viewing SVG Guitar Chord repos on GitHub and noticed that their names were often wrong. I also was not able to find any quality websites on the subject.
How I built this app
There were a number of steps I needed to do like get the get the notes values for the user fret #'s, convert them to either sharp or flat notes, strip out duplicate notes, and use the every() method to return the chord name if valid.
What did I learn?
It was a challenge building the majority of the functionality inside a single function that is called from the form event listener.
Also. the use of the JS every method was the main "helper" method for getting the functionality I needed.
Is the app complete?
This app is complete for its purpose but it can be much better. I would like to have an option for ukeleles, banjos & mandolins.
I also intend to load the users' tuning and sharp/flat selection into local storage.
Tarp Configurations Calculator
Tech used
This is a personal project that aligns with my interests in bushcraft and wilderness survival. It calculates the height of the rope(s) used to raise your tarp for 33 different tarp configurations.
It also notes whether the user is able to 1) sit under the tarp, and 2) sit in a chair under the tarp.
You can try out the app on Netlify or take a look at the code on GitHub.
Why I built this app?
I wanted to do something unique so I converted my spreadsheet equations for tarp configuration into a React application.
This app would be useful for campers, backpackers, and bushcrafters.
Challenges encountered
I had to do some research for building a Hamburger menu in React and to handle PNG files not outputting due to their small size and the default Webpack settings.
I also had to design all the tarp graphics in Inkscape and to display half of them as 3D to the best of my ability.
What did I learn?
The ease of Tailwind and the basics of React such as react-router-dom, use hooks (useState, useContext,
useEffect, useRef, useNavigate, and useLocation), and conditional JSX.
Final thoughts
Using useContext was better than useState but I would like to incorporate useReducer for my state values. I
would also prefer to create my own webpack.config file for greater control.
WordPress Clients
Tech used
The details below are not what I would call projects, but are rather the steps I took to help different website owners who built their sites with WordPress.
To date I have done unpaid volunteer work for two WordPress site owners. Another client is from Fiverr who was unfamiliar with how WordPress works and decided to choose a Block theme to build his website.
I had a 4th client that also is from Fiverr but it was not WordPress-related, but instead involved HTML. Specifically, that client provided me with PDF files with tables that needed to be converted to HTML <table> elements.
As I get other clients for any type of website needs, I will add a short summary of the details for each job. Here are summaries for the 4 clients mentioned above.
#1 Camping Ventures Hub
The client's website Camping Ventures Hub was an affiliate marketing blog. The job had 2 milestones, the first for determining why the domain would not load, and the second for building or "fixing" 5 more pages.
The client chose a Block theme named Yith Wonder but he was unfamiliar with WordPress and so knew nothing about the admin area, Gutenberg blocks, or block themes.
He also configured the WordPress admin area incorrectly and had his host company create a staging area which was totally unnecessary for a brand new website with no pages.
Issues and the Solutions:
1. Issue: The staging area link worked but the domain link was timing out.
Solution: I noticed that the client added the staging area link in the Site Address and WordPress Address URL fields which means his domain had no pages. Bluehost fixed the error.
2. Issue: Home page images were 100's of kilobytes. They were sized to 800px wide but displayed at ~ 300px wide.
Solution: I brought the images into Photoshop, reduced the size, optimized them for the web, and then uploaded the new lightweight images to the media library.
3. Issue: The footer lacked the elements and styling that the client wanted.
Solution: I edited one of the footer template files and added the current elements including the newsletter form.
4. Issue: The header lacked a proper menu with links to the category pages.
Solution: I created the categories since they did not exist and then added them to the header menu.
5. Issue: There were no blog posts to see the styling for the blog page, categories pages, or single post pages.
Solution: I created a single sample post for each category which allowed us to see how the templates displayed on the front-end.
6. Issue: The Home, Archive, and Single templates had limited styling and needed layout changes.
Solution: I edited the templates per the client's requests for the features and styles he wanted.
7. Issue: No favicon.
Solution: I brought his logo into Inkscape, removed the wordmark, and used just the graphic as the favicon.
8. Issue: The client's lack of knowledge of WordPress.
Solution: I created a draft post with notes about the template files, Gutenberg blocks, and theme options so that he would be able to continue building the site on his own.
#2 propMeUp
The client's website propMeUp is a non-profit charity site that was started by a WordPress designer from Fiverr but who abandoned the project.
The owner was on a timeline to obtain funding for the charity and 3 pages needed to be built and the images on the other pages needed to be replaced.
The additional issue for the client is that the site was built using the page-builder Elementor and the original designer installed a dozen plugins in support of Elementor.
This was a volunteer job for a person in my local area who had no knowledge of WordPress let alone Elementor and a host of plugins.
Issues and the Solutions:
1. Issue: The Events and Contact pages had not been created and therefore lacked content.
Solution: I created the pages, copied design elements from the Join page, and then made edits. I also created a contact form with custom CSS.
2. Issue: The Home and About pages had spacing, font size, and many other issues.
Solution: I changed the padding, margin, font size, and changed the layout until the client was happy. I then applied those styles to every other section and page throughout the site. The previous designer used pixels for everything — I replaced px with em and rem.
3. Issue: The sticky header was unreadable after opacity was reduced on scroll.
Solution: I deleted the header and built a simpler header that was not sticky. There already was a back-to-top button so a sticky header was not needed.
4. Issue: The testimonials slider had the text obstructed by the ornamental “ on small screens.
Solution: Elementor had different slider options so I switched to another design that did not have any issues.
5. Issue: The images on the pages needed to either be changed or minimized. The image sizes were in the Megabyte range.
Solution: I downloaded every image and reduced the filesize using Photoshop then uploaded the smaller files and used them on the pages.
6. Issue: There were many plugins that were installed in support of Elementor.
Solution: I migrated the site onto my local machine and then systematically disabled every plugin to see if there was any loss of functionality or styling. I removed all the plugins that were not needed.
7. Issue: No favicon.
Solution: Luckily the client hired a graphic designer who did a great job and had a version of her logo with just the UP and up arrow (see website). I resized that and used it for the favicon.
8. Issue: The client's lack of knowledge of WordPress and Elementor.
Solution: We did a number of Slack Huddles where I shared my screen and explained how to work with Elementor.
#3 Two Average Gamers
This was another non-paid volunteer job that I found on a job board named Flexjobs for Two Average Gamers. My job was to improve the page speed and to look at the overall design and page structure. I was not able to do much for the design but I did address the other 2 issues.
The Google Insights Performance score was in the mid to low 40% range. I was able to get it up to 71% but Mailchimp was loading the entire jQuery library. There is only so much a free caching plugin can do.
I also alerted the site owners to the fact that they had multiple Contact, About, and other duplicate pages. They were unaware of this. I created the code for 301 redirects and I told them how to add it to their cPanel .htaccess file.
#4 Lift Master
This was another Fiverr gig for someone from Lift Master, or at least I think that was the website based on the docs I was provided. I had to convert 7 tables in a PDF file to HTML elements.
I did create an excellent responsive table design but this job only required using a number of rowspan and colspan attributes.
I copied the text from the PDF files and pasted it into a markdown file. Then I created the table element with empty thead, td, tr, th, and tbody tags. Then it was just a cut/paste process making sure that my table matched the PDF files exactly.