DEV Community: blackwellsmith

How to customize your React tab icon and attachment for newbies by a newbie.

blackwellsmith — Sun, 31 May 2020 23:49:45 +0000

Recently I posted my resume on a Slack channel for a peer review. One fellow developer had somethings to say about my portfolio website. As this was an opportunity to learn from someone with way more experience, I dove in and waited for his input on what he would do differently. First off having "here" highlighted as my link was practically unforgivable. Easy enough done. Get some space between the title and the navbar everything was to cozy. Done. Run my portfolio on Netlify and get a proper domain. Done.

The final suggestion wasn't very difficult but I couldn't figure it out easily. Change the favicon.ico for my tab and attachment should describe what the site is about. It shouldn't say React app, that is a no no. It should say my name and portfolio.

Starting with the favicon.ico file, the react atom had to go. That file was deleted. I found a key with a 'B' on it, looks fun. Downloaded a ico file from a free site and created a new favicon.ico file with the new icon.

Next I needed to change the text on the attachment. This should be simple and it is. For some reason my Google Fu wasn't treating me well so I started looking around in the code. The answer was in there. Just had to find "Web site created using create-react-app" in the code somewhere and replace it. Eventually I found it in a meta tag on line 9 of the index.html file. This was also the place where favicon.ico was referenced. I was in the right place, figuring out how to make the last change was pretty easy.

In the manifest.json file under "short_name" object it said "React App". I deleted my previous build file. Replaced "React App" with my name and started my production build. Pushed it to github and deployed. My attachment was looking proper.

The head tag of your index.html seems to be the sweet spot for your attachment. You can change the color in a meta tag. I am not sure of what else you can do here. Surely you are only limited by your imagination and determination. This is what I have for now...

Coding Challenges: How to get over the hump

blackwellsmith — Sun, 24 May 2020 15:08:36 +0000

I have been hitting the coding challenges on Hackerrank pretty hard. At first I would google the parts of the problem and find that jazzy ES6 feature that would help make my code beautiful and succinct. Wouldn't that be nice. Problem was I didn't learning how to solve problems with code. I didn't understand how to solve problems with basic plain ole JS.

This issue truly came to light when I signed up on Skillz and did a mock technical interview. As a very sociable person, talking with someone that has way more experience than me isn't intimidating, it's an opportunity. I took this opportunity to find out what my short comings would be. Everything was going great. My interviewer presented the problem he gives to every Junior hire at his firm. Then came the crickets. I stumbled through the iteration, eked out the if statements and created a poorly named variable that eventually returned correctly. Passing the verbal communication part and failed the coding part. Why couldn't I get it? I understood what needed to happen in the problem. Those jazzy ES6 features eluded me and Google Fu couldn't save this interview.

The feed back was simple, you don't know the basics well enough to pass a Junior interview. Not shocked but bummed out. The interviewer laid it out for me in very basic terms. Most data comes in form of objects, array or array of objects. Then it came the golden goose, Iterate through your data, filter out with comparison operator or save specific data to a well named variable and return data. This nugget was a true turning point.

From that point on, a new approach to coding challenges was born. At first it was really hard, the commitment to avoiding Google eventually got me over the hump. Using the basics helped me understand JS more. Using skills that I have is more impressive then trying to impress with ES6 features I can't remember and don't understand. When I am writing more complex code in the future the basics will be the building blocks of those jazzy ES6 features. For now this what I got..

This is very exciting!

blackwellsmith — Wed, 18 Mar 2020 14:13:25 +0000

My final assessment has been a smashing success. This is very exciting! This is in the context of me finishing my boot camp journey. This is very exciting! could be referencing a trip to Antarctica, getting a new car or seeing old friends for dinner. The exact same phrase could be referencing thousands of possible contexts. 'This' in JavaScript is behaving in a similar way, as the context of my phrase has a relationship with what is going on around it. 'This' could be referencing many different objects in your code. ...this is where it can get tricky. The context of 'this' is defined by the scope of how and where it is referenced in the code. The object in the currently executing code, owns 'this'. My goal is to define 'this' as concise as possible without being verbose as other tutorials and posts can get confusing with all the examples. As these examples are important and guide us, basic understanding brings light, to more complex models.

The global executing context 'this' references the global object (outside of a function or object). Also referred to as the window. Functions, function expressions, variables declared at the global scope and with 'var' inside a function become part of the window object, automatically, implicitly. Any variable declared without let, const or var will also be available globally. As a warning setting variables with 'var' is not recommended as it can lead to Name Collision. When different parts of your code, that are interconnected and are using variables of the same name( the names of these variable collide ). Leading to weird and unpredictable behavior.

The window object can be referenced with 'this' or 'window' outside of a object or function. Within an object or method the window can be accessed with 'window'. In a function or function expression that doesn't have an object to the left of it, references 'this' as the window. Inside of our friend the arrow functions 'this' always references the window object. These edge cases keep showing up which make it difficult to grasp the logic. So be careful.

Local context references 'this' as the object or function that it is called in. 'This' declared inside a function or class constructor by using this dot notation( this.variable = "YO" ), sets the variable to the local 'this', explicitly pointing to the object. 'This' can reference an object key with this dot notation( this.key ), will equal the value of the key referenced in that object. Objects implicitly set key value pairs to 'this', allowing methods access to the properties of the object.

The context of 'this' can be passed down into an inner function, by setting 'this' to a new variable( let _this = this ). Now '_this' can be accessed by the inner function as a reference to the 'this' of the outer function. The reverse can't be said, the 'this' of an inner function cannot be accessed by an outer function or the window object.

This is just the beginning, learning JavaScript can be confusing. Context is everything, it points to whatever piece of information you are working with. Learn context, learn JavaScript.

Final Project: Heard

blackwellsmith — Thu, 05 Mar 2020 15:56:33 +0000

Twelve months ago, returning "Hello world!", simple array manipulation, basic math, and loops in python was the extent of my abilities. That was fun... it opened my eyes though. You really have to apply yourself if you want to make a career of programming. In comes the search for a course. Applied to a few online programs, took a few tests, then I stumbled upon Flatiron and I was sold. They had everything. They pushed me, they challenged me but they also picked me up. Now we are at the end of the curriculum. Job search services are in full affect but something was missing. A way to keep track of all the suggestions made by my career coach. Why not make a job search journal for this? I had come up with my final project!

The basic requirements are build a Rails API, use React for our front end, use Redux for client side data management and make sure it works upon assessment day. So I decided to make a job search journal, keeping track of contacts, daily accomplishments and setting goals. I am calling it Heard.

On the landing page we will see our bootstrap navbar and a slick-react carousel sharing information about Heard. Using Rails sessions controller and the bcrpyt gem, during signup the password is encrypted and emails are checked for proper formatting. When a user makes a login post request the sessions controller validates the credentials, authenticates user, sets a current_user, authorizing the user to the restful API and returns a cookie that is stored in the browser for future use. In the App component, Heard then checks to see if a currentUser exists and then presents the logged in navbar. The currentUser value is kept in the Redux store and is validated by the cookie whenever the page reloads or you visit the page at a later time. Heard uses react-router, this help us define the correct route for each component and set a value for each component in the URL. After selecting a page from the navbar, you are routed to that component displaying a contact list, your daily journal entries or to the goal page where you can create and update your dream job goal. Creating new journal entries and contacts follows the React/Redux flow of handling onChange events(typing in the form inputs). Passing that input into the actions, actions calling the reducers, reducers updating state on and passing the state back to the form compotent. The component then passes the updated state as a value in the forms, with the help of mapStateToProps and connect. Upon submit the data saved in the form is passed as a POST fetch request where the instance is saved to the DB and the store is update with the new entry.

This has been a wild journey so far, the beginning of life full of learning and evolving.