theyurig/deno-portfolio

This is the repository that later gets rendered as my personal website.

👋 Hi, I’m TheYuriG.

When I'm not freelancing to pay my bills, I'm either blogging, contributing to Deno's Fresh, or building some of my hobby projects (listed below).

I'm mostly a Typescript/Deno developer, but I can write more-than-decent Dart code if I need to. Life finds a way.

There is a minimal list of the projects I'm usually working on at any given time:

• My personal website (mostly Frontend Engineer)
• Prizewinner (Lead, Backend Engineer)

These are the technologies I am comfortable working with, right now: Preact, Vue 3, Fresh, Nuxt 3, DenoKV, Mongo/Mongoose, Express, Oak, Cheetah, Auth0/JWT.

And these are the ones I've used extensively before, but haven't used in at least 3 months: React, React Router, React Toolkit, NextJS, Handlebars, EJS, Pug/Jade, jQuery, MySQL, Postgres, Prisma, Docker (and probably many more that I can't recall right now).

Where to find me:

• ✉️ Email: [email protected]
• 💼 LinkedIn: Yuri Lisboa

deno-portfolio's Issues

feature: bounty hunt

For the curious: Add an optional mousetracker JS that will inform the user how close they are to a hidden pixel so they can click it and be taken to a route that congratulates them and gives some sort of reward.

This will make use of the Islands architecture and put a small antenna disabled icon near the footer which users can then click to download/enable the JS file. This file will track the mouse position so it changes the antenna signal icon, colored, until it's at max signal and completely green, when then users can click to be redirected to another page.

Mobile: should it be supported?

Reference: Fresh Icons resource.

Move validation functions from NewExpense.tsx to /services/form-validation

When refactoring validation functions, I guess I forgot to move the validations for a new expense from /projects/expense-tracker.
Whoops.
This issue aims to have that migrated to the service folder with every other validation function.

chore: move the stimulus check from /work to /projects

It has no business being there anymore. I should instead mock some of my older PHP websites and post there instead.

Create a tool that helps with visualizing how a function runs over time

Every night before sleeping, I'm watching this Udemy course about automating boring stuff with Python. I don't intend to use Python at all, but I think it's nice to know the syntax in case I ever need to, and maybe this course will expose me to something interesting that I can end up doing with TS/Dart.

In some of the lessons, the author (which is amazing at teaching) uses a tool of his own that allows them to transverse to code as it's being compiled. It's all manually created, but it would be nice if I could copy and recreate this myself, in case I ever go through with creating a full Deno course.

Add more images to /work

As it is right now, it gives a strong i'm not reading all of that, I'm happy for you or sorry that it happened vibe.
Some images to illustrate each project would help a ton to break that pace.

enable StyledInput to take in a step attribute so that moving arrows up and down can be more relevant

For our very high numbers, like yearly income, the increase/decrease arrows are nearly useless.
This UX can be a bit improved if we add an optional step attribute and allow the counter to go up by a hundred or a thousand per click, depending on the use case.

Fix the page flashing on every load

Because of how the ThemeSwitcher sets the theme on every load, the page will flash every time you try to switch pages, causing a brief flash while the new theme gets applied.

This issue aims to find a way to stop this behavior.

Create /work page

The link to /work needs to display something, right now it just redirects to /toys instead.
Would be interesting to display my recurring Software experience since March 2018, when I embarked on this Journey.
Link the adventurous dabbles with Discord botting, Cross-platform app creation and now, full stack development.
Talk a little about what I currently do at Trophy Place and how that positively impacts a niche of people.

Create `/this`

Currently, our link to /this only really refers to /blog/this. Instead, it should actually link to /this and display a page with the tech stack used.

This issue aims to have that page created and linked on the Home page instead.

refactor: only use GradientLink for external links

Currently, <GradientLink /> is used for all links, internal and external. This makes harder for users to distinguish if any given link will load a new page or redirect.

It would be a better user experience if all external links used the <GradientLink /> component, while all internal links used something else, maybe a new component called <DottedLink />.

With this distinguishment, maybe it would also be nice to add the External Link Icon to all <GradientLink /> components, since they are always going to open links in a new tab. Maybe also remove the option to choose between opening a new tab or not? All external links should open in a new tab, no exceptions. It's better if users don't leave the website, unless they are explicitly choosing to do so by going back or closing the tab.

Save cart items on localStorage

Would be nice if the cart items were saved so you could just resume a purchase if you were returning later.
The course doesn't attempt to do this, but I honestly should add this feature since I intend this project to be visited again and again in the future.

Allow the Expenses Tracker page to save new expenses to the database

Currently, new expenses are only handled in memory and that causes them to vanish if you use filters.
Setting them on the database would allow expenses to be saved over time, through several sessions by many users.
No plans to delete expenses yet, but maybe that could be considered too, if expenses are given a key to help Preact track them on the DOM.

Rewrite all the CSS classes to twind classes

Not using twind and relying on .css files ended up creating technical debt and overhead to track which files need which styles, which I've failed to properly track and ended up sending too much useless CSS to the client.

This issue aims to delete all .css files and use twind classes instead.
Additionally, I'll need to add this information to the /me page, since there I mention not using twind because I wanted to learn CSS instead. Look at where that got me... Despite that, I would do it again because writing pure CSS is actually really good experience.

Make StyledCheckbox and StyledRadio more modular

The children to these components are too tightly coupled with the overall structure. While trying to create ProjectDiscovery, I'm finding myself unable to display a single Checkbox and I'm being forced to, instead, create an entire list of them.

I'll be hacking my way through it right now, but this could be done better with more modular components.

Technical Debt tracker

Listing here things I couldn't figure out and I'm open for external contributions to solve. Just like National Debt, this will persist until the end of time, all that can be done is to reduce the overall debt.

• Syntax highlight: I've created /tools/syntax-highlight to combat this issue. Only option I could find with Deno was to use speed-highlight which is awfully documented. As of May 23rd, 2023, the only way I figured out to use this is to import the script tag and parse the document.body after it finishes loading, which causes issues with CLS. Affected file(s): /routes/[blog]/[post].tsx. Affects users? YES. (#63)
• I ended up evolving my JSX so much that it superseded the need for this feature. No markdown parser to JSX: Not using .md files to save/read blog posts. Posts are manually created as .ts files instead, then dynamically imported as needed. Affected file(s): /routes/[blog]/[post].tsx. Affects users? NO.
• Too much useless CSS is shipped. I need to figure out a way to ship only the required CSS that each component needs. Completed by importing custom classes to Twind, so it will only ship the necessary CSS for each page now. The Academind mentions that we can use .module.css files in React, but I don't know what's the Preact alternative to that. When inspecting the performance, I'm usually shipping 2kb to 8kb of unused CSS per page request. It's not a big deal yet, but eventually it might become and I rather fix this sooner rather than later. Affects users? YES. (#53)
• Preact doesn't natively support portals, which makes creating Modals worse for semantics than it should be. Ideally, modals and the backdrop overlay will sit on the top of the HTML tree, near the body (reminder: use <dialog> when creating this). Preact offers the preact/compat library, which we might be able to import in order to use portals. This needs to be looked into, to check if it's actually usable. Affects users? NO.

update Readme.md

The Readme.md file still uses the default text from Deno build. Would be nice to update it to display some information about why this repository exists.

There is no /me page

Right now, /me redirects to /toys, since there is no page there to be displayed.
/me should, instead, display a page giving more information about me, who I am, what I do, and my background. Since this is a personal website, it should have information that is interesting about me as a person, rather than only as a developer.
Important to display information about my background in marketing, why I started coding and what led me to this moment.

Home viewport stretches while animating text in

While the text is animating from the sides on the home page, the viewport is temporarily stretched, allowing you to see scrollbars briefly. Once the animation ends, the scrollbars are gone.

This issue aims to have this bug investigated and squashed.

Move files containing data from /types to /data

/types should only have files for Types. All data should live in /data instead.

Some data was previously saved in /types before /data was created. Now that there is a proper folder for it, it's time to fix that.

Move BlogNavigationButtons out of /islands

This is not reactive, there is no need to have it in the /islands folder. Move it to /components instead.

Refactor BlogNavigationButtons to accept a next child

BlogNavigationButtons has outgrown its initial scope and is now used as the default navigation menu for Back navigation. For this reason, it needs to be refactored and renamed, so it can better represent its new functionality.

When doing that refactor, also enable it to receive a child component that links to the next relevant page, whenever it's used on a child of /toys or /blog.

Allow clicking on food-order images to expand and see a high quality version

On desktop view, the images are a bit small to see and on mobile, they are too big. There can probably be found a good middle ground between both, where the image is clickable to expand and see in more detail.

Move /insanity to /toys, create /this, add starry night to home page

• #9
• #10
• #11

StyledInput's helpInformation tooltip will overflow past screen width

If it overflows past the screen width, you can't read the information. This needs to be fixed somehow.

Add an ID field to StyledHeader and StyledSubHeader

This is required so that it's possible to use anchor tags to jump between sections and also maybe add a Table of Contents in the future.

Right now, if you want to mention another part of a blog post, there is no way to point the user to move toward that section other than making them scroll manually.

Adding this would allow using internal anchor tags to automatically scroll for the user.

Create a tool/game that generates a random array of numbers and forces the user to find a random number as fast as possible using binary search

Thought it would be cool to have a game-like introduction to how Binary Tree Search works. Maybe talk about different algos?

Would be nice to give it 3 levels:

1. 20 consecutive numbers between 1 and 100, randomized range. Need to find the correct number within 6 (?) attempts.
2. 30 numbers between 1 and 1000, numbers are separated by gaps of 5 (e.g. 75, 80, 85, 90, etc). Need to find the correct number within 7 (?) attempts.
3. 50 random numbers between 1 and 10000. Need to find the correct number within 12 (?) attempts.

fix: Home page waving emoji applied on whole text instead of just my name

On the index page, the group class is applied to the wrong element, causing the animation to happen when hovering over any part of the line, instead of just my name. This allows the animation to happen without my name being highlighted due to a hover, which is not my intended UX.

Port my DiscordJS blog post from Medium to my portfolio's blog

No reason to keep giving Medium the page views when I can just get them myself.
When completing this, it's also relevant to either port back my other posts to blog_lessons or archive it. (ref)

Add Starry Night to the Home page

Haven't decided yet how I want this to display, either on the background of the foreground.
Reference: https://codepen.io/bennettfeely/pen/vYLmYJz

Allow the retirement calculator to accept additional information

There should be a field for starting investment values, some people might already have been investing prior to using the calculator, they need to be taken into account.
Additionally, there should probably be a field to enable adding additional income sources, like a pension. Those values could be softly considered in the investment %, but also should be considered when calculating how much is actually required to save for retirement.

Better organize components in subfolders related to where they belong

Right now, all components are thrown together in the same folder /components. This makes it very confusing to transverse the file system tree and find what we might be looking for.

Instead, everything should be properly separated into folders depending on their function, general availability, or page required.

While not merged to master yet, this was already started for the current update to /projects/expenses-tracker. Just keep the organization going.

Apply changes received as feedback on the web_design Reddit thread

Feedback was gathered here.

• Home text is overlapping with navigation menu items. This can be fixed fairly easily by reducing the navigation menu font size.
• Titles are still too large for mobile, the screenshot shows summaries for blog posts but would be nice to give it a pass to check what else might be too large. This is probably better done using the CSS CLAMP function. Maybe add a new Twind plugin for this?
• Certificates get zoomed in on mobile. This is a problem with setting the width of the image to avoid CLS. It's better to only set the height and let the width auto-scale to maintain the aspect ratio.
• It's unprofessional to use the online persona name to present me on the Home page. It's probably better to just use my first name instead.
• No preview of the projects. I guess the person was expecting an image that shows what the project will look like if clicked? I guess I could use the Carousel cards from Toys for this and use a simple low-resolution image for this, but then I'm afraid I'll have to do the same for the Toys later and I really don't want to do that there.

Additionally, some feedback was provided regarding underline gradient links, but I'm waiting on a follow-up to see if that's something that needs to be directly addressed.

Extract blog footers to a single reusable component

There is a lot of repetition in all blog posts where the same footer is reused through all blog posts:

{/* Post author */}
<footer class="mt-auto w-full text-right text-sm">
  Written with 💞 by TheYuriG
</footer>

This should be instead extracted to a component and then reused on all pages as <BlogPostFooter /> instead. That way, if I ever need to change it, all pages will be affected at once.

Blog Post lists are overflowing left on smaller device sizes

Should be easy to fix if some left margin is added to the <li> tags on smaller resolutions. I actually kinda like that they overflow left on larger width, which makes the list stand out a bit more.

Refactor blog posts to not use the syntax highlight script, but to render static HTML and CSS instead

There is no real reason to modify the DOM at runtime when the page content is 100% static.

The workflow should instead be like this:

• New page is created to test out syntax highlight. Instructions must be present to convert script syntax highlight CSS into themed CSS classes.
• Copy content to the blog route with the proper updated CSS classes. Do not use the script on the and do not import the syntax-highlighting.css file for the blog routes.
• PLUS: Add a button to copy to the clipboard with the classes already fixed and using proper JSX?

For this to be completed, we will also need to add those updated classes to our twind.config.ts file. Maybe name the plugin shl (syntax highlight)?

Create a tool that helps with creating WhatsApp message links

Should be a simple form with 3 fields for number (country code +state +number) and one field for text.

Advanced options could be to save country code and state code so you don't need to input it again, saving message body between requests and allowing body to input variables in it so it's possible to change number and name of recipient.

Also offer am API so all of those things could be automated and links could be programmatically created.

Make the modals disable tabbing through the items on the background or scrolling

For a good user experience, a modal shouldn't allow to select the content underneath nor it should allow the user to scroll the background content while it's open.

• When modal is active, cannot scroll the background.
• When modal is active, cannot tab through the background items.

Updating /work/form

The website now has a form with validation, but some features are missing:

• There is no select/dropdown (complete with #39).
• There is no checklist/radio (complete with #42).
• You can send information even if the validation criteria aren't met (complete with #38).
• There is some unintended behavior with positive validation not being reset on Send. This causes input to not get the green border again when correct input is provided without triggering the onBlur event for another state in the meantime (complete with #40).

Add another field to the whatsapp generator tool to add variables to the text

Marketing teams will often reuse the same message to contact several different people. While using the same message is easier, some users might want to add variables to replace only specific parts of the text with other strings, i.e., the recipient's name.

Add an extra field that allows those variables to be replaced in the text. It would also be nice to have a preview, disabled textarea, so users can see how the message would look, before generating the link.

Create a Card component to add default border, drop-shadow, padding and margin

We are currently reapplying the same styles too many times, over and over again.
Having a reusable component would help alleviating this issue and make our code a little more DRY.

Move insanity

Currently, there is no /insanity. Instead, this page is being hosted at /blog/this, when it shouldn't.
Instead, this should be moved to /toys/insanity, so that it can be later used to test layout shifts.
This issue aims to fix that behaviour.

Related to #10.

Blog post summaries don't use the entire width on larger resolutions

Post summaries will only extend as far as the post title goes, causing the layout to have inconsistent width. Would be better to forcefully set their width to 100% and text-align to center to ensure consistency.

Create a blog post about comparing Javascript syntax to Python syntax

Because of Automate The Boring Stuff With Python, I've been seeing a lot of Python syntax and it's quite nice to look at.

While I have no intention of using Python myself, I think it would greatly benefit people if there was a quick way to compare syntax whenever you are starting a switch in the languages.

Something like this, but a lot more succint, maybe even just using a simple table. The post would assume that you have deep knowledge in at least one of them and would provide little or no explanation of what anything does. It's just meant to be a lookup table, not a tutorial.

Refactor the /Head components to be expandable, like ToysHead

The only Head component able to be edited on the fly (rather than hardcoded) right now is ToysHead, where you can apply props to edit the title, and description and supply additional CSS stylesheets to help style the page.

The other Head components should follow suit and also enable these behaviors.

Create a new page "Tools" to display stuff that i've created for myself to use, but are no longer considered projects

Both the syntax highlighter and the retirement calculator should be moved there.
New link to it should be added to the home page as well.

Improve the cart modal for /projects/food-order

Would be nice if there was a more clear separation of items in the cart, maybe using some <hr> tags?
I like what Mage Burger does, maybe that's how it should look.

Create the browser for all blog posts at /blog, allowing to access individual posts at /blog/:blogId

We currently have no way to view all blog posts, would be nice if we could.
This issue aims to make that possible.

• Blog Index
• Individual blog posts

Integrate the website with a database

It doesn't matter if it's MongoDB or DenoKV, but we need to integrate with one cloud-persistent storage option.

Trophy Place uses Mongo Atlas and maybe the portfolio could use that as well, but it would be nice to use Deno KV instead if I got approved to use it. I've requested to join their whitelist but didn't get a reply yet (as of June 8th, 2023).

EDIT: I never received any sort of approval email or notification, but I'm able to access KV on Deno Deploy now.

Allow the Whatsapp link generator to save the last used Country Code, Area Code and Message

For better reusability, it would be nice to have those listed fields saved, so users can reuse the previous values upon returning to the page.

Since this tool is meant to be used by marketing teams and individuals, there is no good reason to save the phone number. It doesn't make sense to create several links for the same phone number as far as I've thought about it when designing this tool.

To complete this PR, those fields should be saved to localStorage and used as default values when loading the page on subsequent visits.

Reduce CLS, set images width and height

Some images don't have set dimensions and will cause the layout to shift when they eventually load, increasing the page's Cumulative Layout Shift score, which is godawful for SEO. This needs to be addressed. I believe the only offenders are in /this, /me and /blog, as those are the only routes with loose images in them.