dedededevvvloggg #04: shortcuts and more shortcuts!!!

Perfect-Start now saves to localStorage, and has completed Shortcuts features like adding a new Shortcut, Editing an existing shortcut, and deleting a shortcut!

This was honestly a rollercoaster of emotions because on one hand I’m so happy I got it over with, but on the other there was so much React concepts I had to learn I started to brain-fog when I was working on it lol. I didn’t wanna rush too much so I took a lot of breaks and thus, this update took me 2 days to complete.

Let’s get it over with though!

1. Shortcuts now save to localStorage!! This is my first time dealing with localStorage, so I’m happy its application is SOMEWHAT simple enough (atleast for this project).
2. Shortcuts now have their own IDs, so React won’t be screaming at me anymore about keys!!!
3. Finish Edit Functionality, so you can Add, Edit and Delete Shortcuts!

And that’s the TLDR of this devlog!!
You can continue reading if you want to read myself yapping about the challenges I went through to implement the edit shortcuts functionality though!

storytime :O

Implementing the localStorage feature was actually pretty easy, I just had to use the useEffect() hook for everytime the Shortcut List State changed, and check whether the Shortcut List is available in localStorage or not. If it doesn’t, then it’ll return the default Shortcut List.

Implementing the Edit Shortcuts Function though was a completely different story. I thought it was just going to be a quick and easy change to /src/components/shortcut.tsx and /src/components/modal.tsx but oh boy, I was so wrong…

At first, I rendered the Modal component inside the Shortcuts component, which rendered one Modal per Shortcut.. This was due to the Shortcuts component being rendered with .map(), and my smarty pants forgot about it. Great Start!

I proceeded to write some more code for the Modal component, when I tried to call a function that I had passed in as a prop, but still doesn’t recognize it as a function. This had me inspect and change almost everything inside of the Modal component JUST for the sole purpose of debugging it, but it just… turned out… that I hadn’t… passed in anything in App.tsx… I was so ready to crash out Thank god for git’s amazing version control

After this I decided to get some sleep (pointed out by my git commit lol)

The next day came, and I got so much clarity! (especially after that disastrous session last night xD).

I quickly got to work, and did the following changes:

• get rid of modalVisibility state in favor of modalMode, which has three states: “add”, “edit”, and null! this worked miraculously since the modal can now distinguish between popping up the “add shortcut” popup, “edit shortcut” popup, or don’t show any pop up at all.
• make the editShortcut() function actually… function properly instead of saying “i am so sleepy” using .map() again!!!

and… that’s about how much i struggled with THIS supposed specific simple feature!

thank you for reading this far!! i hope you have a nice day. peace out!!!!

devlog #03!

I wanted to keep it really simple this time, (and I did!) so the changes I made were literally just:

• Turn each component in App.tsx into its own file in ./src/components/
  This is so as to remove as much headache as possible before making new, even more complex features
• Styled the Add Shortcuts Modal
  I went for something simpler this time (mostly because I didn’t know how to style it lol). This is most likely subject to change though!

Watch out for the next devlog! I reckon it’s going to be something big again! 👀

oh boy!

This devlog was actually supposed to be really short, since I WAS supposed to be implementing ONLY the shortcuts, but one thing led to another and… hey! I’ve got shortcuts AND the edit shortcuts functionality (partially) done!

Before we start..

Let’s start this off by; I STRUGGLED so much with this. From the previous devlog you probably know that I’m still very much a beginner in React, and if I’m being honest this is the BIGGEST project (by scope) I’ve ever tried to make, so you could probably imagine how much hassle I went through xD.

Enough with that, here’s what I implemented!

Shortcuts

This should’ve been very basic stuff, but I (SOMEHOW) struggled with it.

The biggest change I did was converting the hard-coded shortcut into a React State, which is rendered with .map(). This helped SO MUCH, and made state updates A LOT easier.

shortcuts.map((shortcut) => {
  return (
    <Shortcuts
      name={shortcut.name}
      url={shortcut.url}
      editMode={editMode}
      deleteFunc={deleteShortcut}
    />
  );
})

After that ordeal is done, I ran into another problem again; implementing a way to get the destination website’s favicon. I decided to use favicon.im’s API for this one! Honestly this is only included as something I struggled with because I completely did NOT realize that the URL in the shortcut still has the HTTPS protocol and not only the domain

This is what I was literally doing..

src={`https://favicon.im/https://youtube.com?theme=dark&larger=true`}

..Yup. I fixed it by removing the HTTPS protocol from the URL, and then splitting it every “/”, and finally use the [0] index to get the favicon.

Edit Mode

The “Edit Mode” is supposed to be an all-you-can-edit type of feature, but for now it is only implemented for the Shortcuts card, primarily because I wouldn’t really know how to implement it to all components…

Deleting

This was the easiest part of the whole Edit Mode section! Basically, when in Edit Mode, every shortcut will have a delete button underneath them. When you click on it, it will delete said shortcut by using .filter().

Adding

If deleting was the easiest part of the whole Edit Mode section, Adding is the opposite.
Okay, let’s start off with how I had a button inside of another button;

<button
  onClick={() => {
    setModalVisibility(!modalVisibility);
  }}
>
  {editMode && <button>Add Shortcuts</button>}
</button>

Oh, how about when I accidentally force-added https:// to every single URL?

if (!tempUrl.startsWith("https://") || !tempUrl.startsWith("http://")) {
  tempUrl = `https://${url}`;
}

Okay I hope you get the point. I did a LOT of silly little mistakes that could’ve been avoided if I were just a LITTLE bit more careful while coding, but hey, you can’t improve if you don’t fail!

Other miscellaneous changes..

I did some miscellaneous changes too, like;

• Changing the background-color
• Changing how big the button grows when hovered over, from 10px -> 5px.
• Bolded most of the text in the website
• Learnt how to use Git’s Interactive Rebase! (This was supposed to be its own section but I fear the devlog is getting too long)
• Probably some more that I didn’t remember

Some Last Notes before I close this off

For the next update/devlog, I really wanna keep it simple and do the following changes;

• Style the Add Shortcuts Popup box
• When in Edit Mode, add the function to Edit already existing Shortcuts instead of having to delete then adding

And with that out of the way, Thank you for reading my devlog! See you next time!

Hello, World!

This is the first Devlog of my project, Perfect-Start. The goal of this project is to serve as the perfect (in terms of customization, flexibility, and performance) start screen of a browser, with the hopes of enhancing your browsing session!

First things first, I wanted to point out the fact that while making this project, I am STILL learning the basics of React (which is also what this website is made with), so forgive me for the horrible, unoptimized, and unclean code, and please bear with me.

I wanted to start the project out with;

1. A greeting (that I plan to make fully customizable)
   The greeting was the easiest, and also the most straight-forward to style! I plan on making the text and the overall accent color (of the whole page) to be customizable and set to whatever the user wants it to be.
2. A live-clock, alongside the timezone
   Live-clock was kind of tricky for me to figure out, as it used React’s useEffect hook that didn’t really settle inside my brain the first time, so I had to look up some code online as an anchor/reference and went from there. The timezone was easy enough though, and it was also pretty simple to style.
3. A (google) search bar
   This specific component I don’t know why took me too long to figure out. Should’ve paid more attention to HTML Forms I guess xD, this was also somewhat tricky to style but honestly I just messed around with the pixels. I also plan to change A LOT for the search bar. I don’t like how it shows previous search history (if that’s what it’s called) and how it lights up and stuff. I’ll probably change that next update!

For future updates, I plan on adding;

• Shortcuts Button
• Actual customization/settings button
• Turning each components into a widget
• Weathers is planned, but not 100% sure if I want that on there
• Add more widgets.. I guess
• Make the page Web Responsive (to fit device screens)

I am (somewhat) proud of its current state. Despite all the hassle I went through with styling the website (CSS is the bane of my existence), and having to adapt and learn a whole new Framework, I’d say this is a pretty good result!

If I’m going to be honest, I’m really nervous about posting these type of devlogs because of the amount of interesting and cool projects here, plus I was never one to ever “publish” my own projects, but thanks to Hack Club, I’ve taken a step into (hopefully) becoming a better developer and publishing my projects to the world!