Calculating menu position
Categories: cloud javascript css
I came across a front-end challenge last week that I found interesting. One of the features of the cloud storage app I am building at work is a drop-down menu that appears when clicking on a triangle in the top right of a folder or file icon:
The issue was that if the element clicked is too close to the left or right edge of it's container, the dropdown menu would either be covering the sidebar (left side) or cutoff by the viewport (right side).
To solve this, I had to use some math to calculate the available space and position of the clicked element and then set the position of the dropdown based on these factors.
I decided to use the total width of the container and compare it to the center of the clicked element and then position the dropdown a percentage to the left or right of the clicked element based on these datapoints.
I first calculated the center of the clicked element compared to it's contaner and the center of the container itself (I had to subtract 250 from both due to the left sidebar having a width of 250px and a fixed position):
var parentCenter = $(this).parent().offset().left + 60 - 250;
var windowCenter = ($(window).width() - 250) / 2;
Then I calculated the offset of the clicked element's center from the window center, and then used that number to calculate the offset I needed from the parent element's center (I needed the dropdown container to be offset left or right relative to the clicked element the same percentage that the parent container is offset from the total width of their parent container):
var percentageFromCenter = (parentCenter / windowCenter);
var offset = 120 - (120 * percentageFromCenter);
Last step was setting the margin-left of the dropdown container to that offset before toggling it's display:
$(this).parent().find('.file-icon-dropdown').css('margin-left', offset);The result can be seen here (apologies for the text url, apparently imgur converts all gifs to mp4 files now and my WYSIWYG editor doesn't allow embedded video files):
Creating a cloud storage app
Categories: cloud javascript css
My current task at work is to build out a cloud storage app with a PHP backend, which will be used for sharing documents both internally and with externally. Necessary features:
- User registration, authentication
- User roles: Admin User, Internal User, External User
- Folder creation, copy, share, delete
- File upload, download, coopy, share, delete
- File previews
- File details
- Search functionality
I started out by creating a DB diagram for the mysql database:
There will likely be additions to the database structure as the app gets more fleshed out, but this will be a good initial design and will allow me to start fleshing out the most critical front end and back end features.
0 Comments
Recent developments
Categories: javascript react
It's been a while since I've made a blog post, as I've been incredibly busy the past few months, but I think I have some reasonable excuses:
- I'm now a married man! My wife Patt and I got married in June in Thailand (her home country), and I couldn't be happier. I got to spend 3 weeks visiting her family and friends and experiencing Thailand (mostly via Thailand's incredible food). Unfortunately, we both got covid while I was there, which put a bit of a damper on our celebration, but we made the most of it and had an amazing time.
- I was accepted into Hack Reactor's part-time Software Engineering boot camp and started my 9-month journey to increase my knowledge and experience as a full-stack software engineer, which I'm also super excited about. I graduate in April of 2023, so the next 8 months of my life or so will be mostly dedicated to classes and study. I'm already having a great time and learning a ton.
I'll post again soon with some updates related to my experience at Hack Reactor.
0 Comments
New project: Poker Range Generator / Study Tool
Categories: javascript games
This past week I started working on a pet project of mine that I've been thinking about creating for at least a year now, an app/website for generating and studying preflop poker hand ranges for Texas Hold 'em. The default ranges will be based on Johnathan Little's pre-flop ranges on pokercoaching.com:
PokerCoaching.com Preflop Ranges
I originally had some help putting together a version of this tool in React from my friend Ian, but when I came back to it this year I decided to build it in vanilla JavaScript so I can solidify my JavaScript knowledge (and so I can more easily implement the functionalities I need).
The tool will allow you to study, edit, and save preflop ranges for each position and situation you'll be facing at a 9-handed poker table:
- Raise First In (which hands to raise/fold/limp with no action before you)
- Facing Raise First In (which hands to 3-bet, call, or fold with when facing an open raise)
- RFI vs. 3-Bet (which hands and actions to take after your open raise is 3-bet)
So far I've made good progress with the UI and basic functionality. Next I need to add all of the default ranges, add Local Storage so you can save them, and maybe add a file and/or text-based import function.
0 Comments
Avoidle Word Game is up!
Categories: gamedev javascript
I was able to finish a working version of the word game I've been working on for the past week or so, and I'm pretty happy with it. Technically it's still in the testing phase, but it is up and playable:
I really enjoyed making it, and my JavaScript / Jquery has improved immensely during the project. Some of the more challenging and interesting pieces were:
- Learning how to learn localStorage in order to save player stats. It can be a little finicky changing back and forth from strings using JSON.stringify and json objects using JSON.parse.
- Figuring out how to choose the same random 6 consonants for each player based on the current EST date. I mentioned this in my last blog post, but I ended up getting a suggestion from a fellow dev and was able to turn the date string into an md5 hash and then use that to generate the random consonants.
Let me know if you see any bugs or have any suggestions, as I'd love to hear them. I still have a few more things to complete such as adding settings (dark mode, hard mode etc.), but I hope to finish those soon.
0 Comments
0 Comments