Galen's Adventures in Programming

Today started with the discovery that my "Display Deck" page wasn't showing the pictures for cards (due somehow to Foundation overriding my styling for image tags) but ended with my having finally found and implemented a color scheme I like.   I had initially tried to use colors from the original board game's box/styling, but their colors are really drab, and pink/purple/blue is a timeless combination.  I played around with CSS :hover selectors, and designed my own icons for my NavBar.  I had spent a lot of time last night trying to find icons that I liked online, but I woke up this morning with the realization that the icons I wanted were all composed of rectangles - which I can do with divs and CSS (so I made my own!)

I got to meet up with my former Launch Academy crew last night, and they told me that they've been using Enzyme to test their React Apps.  I guess that means I have a new goal on my plate? Today I've been working on a few CodeFight challenges.  I'm always amused when I come back to a problem that really stumped me when I first saw it, and the answer is immediately clear.  The last problem I was working on involved being given a string, and having to find the shortest way to add letters only to the end of it to form a palindrome.   Because it was something immediately simple to try, I first set about finding the longest way to make a palindrome, then looked to see if there was a pattern that would lead me to an answer to the actual problem.  I realized that I would need to try adding 1 letter from the front to the end, then test it.  If that didn't work, I would add 2 letters from the front (in reverse order) to the end, and test that - etc. With most of the CodeFight

Yesterday and today I learned how important it is to work on a branch other than  the master.  I had fallen prey to the thought that "I'm only making a small change, it shouldn't matter" but, because that's the way things go, it wasn't a small change and I was left re-writing functions that I had deemed unnecessary and stupidly deleted (and then going onto my own GitHub page to compare with my old code.)  It was a situation that I'm glad happened to me in a forum where no one would be impacted, and hopefully having happened once I can keep it from happening again when it really matters. I added my Verify Page back into the flow of things, and wanted to have an optional field where a User could enter notes about a specific card.  However, because I was taking everything in the DesignContainer's this.state and putting it into a JSON literal before passing it to the Verify Page, it kept telling me that my optional note was blank, so the form couldn

Today I wrote my first Jest test.  It wasn't complicated or anything, but it's still more than I knew yesterday! The main thing I did today was my homework for Launch Academy.  It was fun alternating between Ruby (which is what my homework covers) and Javascript.  As far as App improvements go, I added a card preview to my DesignForm, so that users can see what they are making while doing so.  That gets rid of the need for a VerifyCard page, but the highlight of that page is that I had a button set up with an onClick to save the card to the JSON file, and also a Link to the Deck page.  I'm not sure how to combine the Link effects with my onSubmit() function, so that will be a job for another day.  Also, my form needs a little more CSS love to be more adaptable to window-size changes.  At full-screen the preview card floats beautifully to the right, and at half-screen the preview card is centered with the form underneath it, but in between sizes it floats to the left eve

Today I made sure that all of the card types were rendering correctly, not only in Display Deck but also on the Verify page.  I also made it so that a user can choose the type of card they want from a drop-down menu. I decided that it might be a good idea to get rid of the Verify page, and to instead show an "in-progress" card on the form page.  This is also a good way to show off what React can do, because it can update itself as the user changes their mind.  Of course, they would have to select a type of card before anything else would work (because the CSS styling depends on the type of card to know placement,) so that would be a point that needed a new error message. Another big accomplishment for me today was that I changed my single CSS file into multiple smaller SCSS files.  This was really helpful when I realized that all of my card images were a couple of pixels off from each other, leading to a lot of CSS rules just to display a single card.  I'm going to tr

Today I spent a lot of time playing around in CSS to try and get my cards to look like real Dominion cards.  This involved a lot of layering of divs, and minute pixel changes.  There is a pretty big community of people who design their own Dominion cards, so I was able to find a blank background relatively easily.  From there, it was a matter of making sure that each portion of the card is entered where it should be. My biggest issue right now is that things don't scale correctly if the screen is minimized past the width of a card - I could set each card's `min-width`, but I'd rather go in and try to set all of my pixel requirements to percentages.  Percentages should (theoretically) scale accurately with everything, so that the card can be moved as a single unit. Once all of the percentages are set, I'll make it so that the user can select a 'type' of card to design, which will change the look of the finished card.

Today I added a button on the VerifyPage for Users to go back and edit their information before it is sent to the JSON.  I also (finally, because this has been bugging me for a while now) DRY'd up the code that generates the design-a-card form.   A lot of the problems I had with both of those issues previously was that I was trying to save all of my data on App, and Router was not happy about passing down changing props to child components.  Now that I have my 3 main page components coming from App, and the rest of the components being rendered within those pages, it's a lot easier to move data from one page to the next.   I added some CSS to the whole site, so now it looks a little better than plain text on a white background.  There are some obvious style issues: Buttons should all be styled to match (and to not be plain blue boxes) When a full deck is being displayed, the cards are not all a set size, so the grid looks messy Because Dominion has multiple types  of c

My goals today were simple: 1. Make the user's name save to a JSON file so it is accessible from everywhere in the app 2. Make CSS work  3. Have my Deck Container display all of the cards in to JSON file The main complication today was that I needed to add a new loader to my "webpack.config" file.  Once that was fixed, my CSS file was picked up and integrated the same way it always was in the past.  I've never had to set it up for myself on a React app before, though, so it was really good practice having to search for a solution. I decided that I needed another layer of organization within my App files.   I had separated things into components, constants, and containers, but then I had my App.js rendering only a couple containers that, in turn, generated more containers.  It made way more sense to create a new classification "Page."  Now App renders things only from my Page folder, and each Page then renders its child components.  I feel like I

I applied the same principles that I used for switching between the "Design a Card" page and the "Verify Card" page to the Home Page of the app.  The User Experience is now: 1. User is asked for their name 2. User is greeted by name, asked if they want to (A) Design a Card or (B) See their Deck (option A) Design a Card: 1. User enters new card information 2. User is taken to a screen and shown what they enter and can (Aa) Verify or (Ab) Go Back to change it. (option Aa) 1. New Card is added to JSON file deck 2. User is sent to View Deck page (option Ab) ---this isn't done yet--- 1. User goes back to option A, but their form now has all of the old info in it (option B) ---this isn't done yet--- 1. User clicks button to "See their deck" - this fetches the current deck from the JSON file (this part is done) 2. User is then shown a display of all of their cards (I'm still deciding how I want this to look) 3. User can click on

I solved yesterday's problem with a little restructuring.  My goal flow was: 1. User fills in form 2. User is shown a preview 3. User saves preview (and changes are committed to the JSON deck) I was trying to have the form and the preview be different routes tied to App, but kept getting the error that I was trying to change Router routes.  It occurred to me that I didn't need to go to a new page using Router - I could create different components for the form and the preview, and store them inside a single page.  My new flow: Parent: App Child of App: DesignContainer (stateful) Child of DesignContainer: DesignForm Child of DesignContainer: VerifyPage Since Design Container is where I am now storing all of my form's input values, it can tell when a full form has been submitted - then it hits a conditional that renders VerifyPage instead of DesignForm. So sure, the browser won't be displaying new paths for the DesignForm and VerifyPage, but at least a user

Ideally, I would like to have users enter their card information, and (if the form is complete) then be redirected to a "verify" page that would show what they had created.  I thought I had found the perfect solution in react-router's Redirect, but after hours of reading people online implementing it in various ways and having it be the solution to all of their problems, I still hadn't been able to get it to work for me. Using a Link tag is all well and good, but I don't want to automatically link somewhere - I thought about swapping my <SubmitButton> with a Link tag once the form was complete, but then realized that wouldn't work because I was using an event listener for onSubmit, rather than onClick.  I'd rather keep it that way for functionality's sake, but tomorrow I might try changing it just to see if I can get the reaction I want from the button. I did discover that I had been taught to use React Router version 3, whereas the majori

Today I set out to fix what I thought would be a simple tweak: I didn't want a user to be able to submit a partially full form.  This resulted in my discovering the Object.entries() method - which looks like it could be extremely useful in the future.   In my own words: Object.entries() can be used to loop over all key[value] pairs in a Javascript object.  It returns an array of arrays.  Each smaller array is composed so that the item at index 0 will be your key, and the item at index 1 will be your value.  It does not mutate the original object, which is helpful when you're working with stateful components in React and only want to change your state within setState(). I also felt like my initial dropdown menu solution was taking up way too many lines of code for how little it was accomplishing, and remembered that there's a <select> tag that is exactly what I was looking for!  The roadblock there was finding a way to set a default value without using "sele

Up until now I had only used a type="text" input tag in my React Forms - yesterday and today I worked to add both a dropdown menu and a radio button to my repertoire. The Radio button was really interesting. It was cool trying to craft a "handleChange" function that would update my state accordingly. Of course, I also had to edit my JSON sample cards to make sure that all of my card objects had a "potions" key. The dropdown menu is, at the moment, absurdly ugly (but functional.) I wanted to see exactly when each piece of CSS was triggered, which has resulted in some crazy color changes. It was really helpful for learning, but the day is quickly approaching when I will need to spend some serious time on style as opposed to new features. Before then, though, I have to fix one major design flaw - right now, all of my code works as long as the user gives accurate input. However, when has a user ever consistently done that? MiniGoals: - add error

Today I was sucked in by all of the input possibilities for Forms! I'm working on adding a radio button to my Card Designer form, and a drop down menu to allow users to add "Sir" or "Lady" in front of their names. I also went line by line through the JSON-related code that I had found elsewhere and implemented, so that I was not only able to use the code, but also to understand what it was doing. At Launch Academy we are taught that code should be written to be as readable as possible, and that comments should be almost superfluous. I feel a little self-conscious, therefore, leaving commented notes up on Github. This is a project where learning is more important than the final product, though, so you will have to forgive my note-taking. If I end up with a useable app by the end of this process, I will definitely strip my comments out first.

I had never intended on doing daily posts, so clearly I am not setting enough work for myself.  😀 Mini-Goals: Edit form to include fields other than type="text" Look into Regular Expressions to verify user input Spend time with Foundation to feel more comfortable using columns to help with design Implement React Router

It's not the most elegant of wire-frames, but I tried to map out the flow between pages within the app, and to give each page a unique url that reflected where I was in that flow.  Armed with my wire-frame, I am going to start with what is the most important part of my app – the form taking in user input and creating a new card.   Creating the form is simple, but I've always either saved all of my data in state within an App file, or had JSON files set up for me.  Therefore, it seems that some quality time with JSON is required. Mini-goals:   Create User Input Form Research Json  Create a repository on GitHub

Taking online courses and reading docs are both great ways to learn, but until you apply those skills to a project of your own you can’t know that you truly understand what you have been learning.   My goal in this break between programming bootcamps is to create an app for users to design their own kingdom card for the game Dominion.   (Obligatory mention that I do not own the game Dominion – this is just a personal project to better implement the skills I’ve been learning.)   I have tons of features in mind, but I’m going to break the project into “mini-goals.” First, I am going to wire-frame pages for the app.   This will give me a structure to follow as I continue, and help me break down what components/containers I will need for the app.   The framework I will be using is React, specifically taking advantage of React Router. React Router has been a frustrating challenge in itself, because I have had trouble finding documentation that clearly lays out how it differs f