DEV Community: Williams Oluwafemi

Creating simple, clean yet beautiful UI layouts with Neomorphic designs

Williams Oluwafemi — Tue, 04 Feb 2020 09:03:12 +0000

If like me, you get bored of repetitive and templated designs easily, then you probably are always looking for the next breath of fresh air design wise, Neomorphic designs ahve been around for a while now. While some people still dont think its here to stay, others have joined the bandwagon and so have i.

So i thought what else could be better to show i believe neomorphic designs are here to stay than to redesign my personal site to such standards. Below are screenshots, do let me kow what you think about Neomorphic Design and my implementation in the comment section

Link to live project, theres also a dark mode ;)
here

EDIT:
Here is a link to the repo

https://github.com/vvilliam5/aboutme

Break The Psychological Barriers Holding Back Your Career

Williams Oluwafemi — Thu, 02 Jan 2020 10:02:38 +0000

We tend to find reasons to blame others when our careers are not moving forward. Most of the time we don’t look critically at ourselves. It could be attributed to a bad boss, back-stabbing coworkers, bad luck or some sort of discrimination and prejudice.

These things, unfortunately, occur all too often in the workplace. Those are not the only reasons that hold you back. Sometimes you are your own worst enemy and do harm to your career development and advancement.

People have negative thoughts that play on endless loops. We experience feelings of anxiety and insecurity. Many of us have a fear of failure and are scared of the unknown. This prohibits us from taking action and moving forward in our careers.

To become successful, it’s important to counter these bad thoughts and feelings. You need to adopt a positive mindset which motivates you into action. Waiting, wanting and wishing for a miracle to happen is not a realistic plan. What’s required is a burning desire to achieve a desired goal, along with assertive actions.

We have all experienced difficult and and some traumatic events in our younger years. You may be thirty or fifty years old, but still view the world through the eyes of young, afraid kid who was bullied in school. These feelings are real, but you have to find a way to effectively deal with and rise above it. Incessantly reliving bad events from the past will inhibit you from living in the present. The constant negativity will eat-up your energy and restrain you from achieving great things.

To move forward with your career and succeed you must let go of the past. Stop reliving bad memories and quit being the victim. You can’t undo the past but you can build a bright new future. Forgive yourself and others so that you can move on with your life and career with a clean slate. Clear you mind to focus on the present moment and your goals for the future.

You may feel stuck in a rut but don’t know what to do next. Time goes by and you become increasingly frustrated. It’s easy to start getting resentful and angry at your situation. You will promise that a change will be made next week or after the New Year.

Stop saying it and start doing something positive. Take constructive steps to move forward. Keep in mind, an object in motion stays in motion. If you don’t move forward, you are falling behind. It’s too easy to become complacent and take the path of least resistance by staying in a bad situation.

It gets harder to change the longer you remain in a bad work relationship. Acknowledge your feelings and start taking proactive steps. Devise a plan to change your circumstances. Write down the ideas to keep yourself honest, then take proactive measures every day. Push forward even if you’re tired and don’t want to do it. By cultivating these habits you will build mental and emotional muscle. You will become stronger, more confident and feel better about yourself as you take charge of your life.

We teach our children that if they try hard enough they can become anything they desire. Somehow as we get older, we’re not so sure about this. As grown working adults we doubt our abilities. After some setbacks, we believe that great success is solely for other people and not us. You need to heed your parent’s advice. Use the unique skills, attributes and gifts that you possess and relentlessly build upon them to achieve want you want in your career and life.

To succeed you need to let-go of the past, ignore the negative voices in your head, take bold initiatives and don’t give-in to excuses.

This article was first published
here

Quick Tutorial - Routing with React

Williams Oluwafemi — Tue, 24 Dec 2019 22:57:34 +0000

So you built that beautiful web app, Man and God were pleased with it, but whenever you try to route your app using the anchor tag, you lose all your App data, and you wonder why, maybe the gods aren't pleased after all? Probably not, using an anchor tag generally fetches a fresh version of your html file(short version) and to route in react you would have to use a package called react-router-dom. First you need to install the package, on your command prompt/terminal run

npm install --save react-router-dom

then import the package into your app

import {BrowserRouter, Route, Link} from 'react-router-dom'

So now to create your components that you want to route between

const Homepage = () => {
return(
<div>This is hoempage</div>
<Link to="/aboutus" class="button primary">Click to go to About Us</Link>
)
}
const AboutUs = () => {
return(
<div>This is About Us
<Link to="/" class="button primary">Click to go to back home</Link>
</div>
)
}

const App = () => {
<div>
<BrowserRouter>
<div>
<Route path="/" exact component={Homepage}></Route>
<Route path="/aboutus" component={AboutUs}></Route>
</div>
</BrowserRouter>
</div>
}

now you can route between pages, you might be wondering what the exact keyword is doing there, well it has to do with the way the BrowserRouter works, it creates an object called history which keeps track of the current url the user is visiting and uses it to also update the url as a user switches from 1 component to another and the way it works is, it queries the url and compares to the path that user is trying to visit and if it finds an occurrence in that path it renders the component, for example you are trying to access /aboutus, the BrowserRouter takes a look at the first route and checks if it contains "/", in this case it, does, so it renders it. To avoid this behavior, we add the exact attribute to the route to tell the Router that this component should only be rendered if the url is exactly '/'

You can copy out this code and play around with it, to learn more about the behavior of the react router :)

Awesome Starting Eleven Skillset for your resume

Williams Oluwafemi — Thu, 19 Dec 2019 12:28:18 +0000

Football fans gather here
So you want to update your resume, make it stand out and look really nice. Well so do I, trying to figure out how to achieve this, I came up with making my skill set in the formation of a starting eleven - football being my favorite sport (sorry American if you can't relate)

Click here to check it out live

Javascript - misconception of this

Williams Oluwafemi — Wed, 18 Dec 2019 09:32:20 +0000

Whether you are a seasoned engineer or new to coding, 1 common error you are likely to come across alot is 'Cannot read the value undefined of this'

It is a very confusing concept that puts many people off, so I'll be trying to explain concisely what this is

Take the following for example

function getLetters(a, b) {
let obj = {firstLetter: a, secondLetter: b} 
return (this.obj)
}

let display = getLetters(a, b)

We would expect display to equals to {a, b} right?
well no, what you would get is undefined

Lets see another example

let shoppingList = {
fruits: 'banana', 
cake: 'chocolate'
}
let getItems= function() {
console.log(this.fruits + '' + this.cake)
} 

let result = getItems(fruits, cake);

javascript
We would expect results to equal 'banana chocolate' right?
Nope what you get is an error

So what exactly is wrong? Well this is not what you think this is, one might think in the first example that this would refer to the obj and the fruit and cake keys in the second example but it does not

This actually gets its value at the function invocation, meaning the binding of a value happens when you invoke the function, and the object to the left of the invocation is what gets binded to the value of this

Illustration

let wishlist = {games: 'Xbox Scarlett'}

let viewWishlist = function (games) {
return this.games;
}

let result = wishList.viewWishList('PS5')

javascript
In this scenario, what will we expect the value of result to be? Well if you guessed 'Xbox Scarlett' you are absolutely right, the value of this was binded to the object that was invoked with the function, but you might ask, hey Williams, what if we don't call the function with a value to the left of the dot, what then becomes the value of this? Good question

The value of this in this situation will the global object, why? Because our rule still applies, what is to the left of the function invocation viewWishlist()? You can't see it but the function is actually being invoked with global object. Which is why the values of this is being binded to the global object

Now that that's out of the way, you might be wondering, hey Williams, what if I want to tell my function the object I want to be binded with the value of this, well you call the function with a call or apply function and pass the value you want to be binded to this as the first argument

viewWishList.call(objToBind, args)

So here the value of this is going to be binded to the object objToBind.

I hope with my illustrations I've been able to explain to you what this means and how to use it in your codes :)

Automated Testing - is it really worth it?

Williams Oluwafemi — Tue, 17 Dec 2019 08:45:14 +0000

'one of the challenges of being a software engineer is proving that your code works'

-Unknown

Well I buy into this, many times I find myself in a situation where I believe I just created a masterpiece, where everything functions properly (or at least makes me think it does) only for me to run into some serious logic errors. So what's the solution to this dilemma? Automated Testing?

Automated testing is writing a bunch of test suites to assert whether your piece of code is functioning as desired. A very popular testing framework I also work with is Mocha, which allows your import assertions styles whether BDD or TDD, it's so convenient because the syntax is near natural language, a popular assertion library to use hands in hand with Mocha is Chai which gives you the flexibilty of using multiple assertion styles.

Consider the following

So you want to create a function that accepts a card number and returns a the name of the card ie
detectNetwork('12365478635') should return either mastercard or visa depending on the first 3 characters or the length

detectNetwork = function (cardNumber) {
if(cardNumber.startaWith('31') && cardNumber.length == 16)
return 'Visa'
}

Creating this function is relatively easy, but how do you test it? Manually console log the function with the card number argument? Good idea, but what happens when you have numbers going into thousands? Console log them too? Probably not. That's where automated testing comes in

Simply write your test suites using for loops for larger numbers and voila, life is easy again, some thing as simple as

//TDD
const expect = chai.expect

describe('Visa', function() {

it('should return Visa for cardNumber with prefix 31 and length of 16', function() {
expect(detectNetwork('3143688426790').toEquals('Visa')
}

}

//BDD
const should = chai.should(()

describe('Visa', function() {

it('should return Visa for cardNumber with prefix 31 and length of 16', function() {
(detectNetwork('3143688426790').should.equals('Visa')
}

}

Another beat trick to get compiling your test cards is to store them in an array and call them with the test suite using a for loop.

You can get started with the Mocha and Chai with the links below

http://mochajs.com/

https://www.chaijs.com/

Using React - Context vs Redux

Williams Oluwafemi — Mon, 16 Dec 2019 09:18:16 +0000

Working with React, at some point would make you think there has to be a better way to manage your states across your application - well yes, Redux (walking in with some Pyro effects) Redux allows your manage your states through our your entire App using reducers. It also allows you create action creators, which automates the operations you perform on your states - not to mention a super useful plugin that helps you debug your react apps running on Redux

But here's the catch (not really) setting up redux can be somewhat tedious, you would have to install 2 dependencies, create your action creators, create your reducers then create your store. As a matter of fact, most blogs would advice you use redux only for complex and large apps, using Redux for a simple app without much logic is like Trump telling us to read the transcript (totally unnecessary)

So what that being said, when Context was introduced as a replacement (substitute maybe) for redux, there was jubilation all round, but like Trump after a couple years, allot are disappointed, but why? Well you see, context doesn't really replace redux. It's only gives you a pipe for you to pass your props to grand children of your App

It doesn't create a store neither does it facilitate action creators, not to mention the complex implementation and nasty code you create with it, especially when you are attempting to pull out multiple resources from connect to your App

OH did I mention, you have to create 2 components when using connect? One to create and 1 to use - the Provider and Consumer component(face palm)

But with all disappointments, there are still some who see it as a blessing. So you might ask which way should you go? I think that's left for you to decide after reading this post :)

The best text editor/IDE for beginners (and pros)

Williams Oluwafemi — Sat, 14 Dec 2019 16:57:46 +0000

So you just thought out a new project or you want to start coding, after you have chosen your preferred choice of language and frameworks, the next question is what text editors do you use to write out your codes?

Visual Studio Code is arguable the best free text editor out there, here are a few points to support my argument
autocomplete: have you ever had to rewrite the same code over and over again? (You should probably copy and paste) but with VS Code, you get suggestions on auto fill properties be it values or functions, as long as they are in the scope of the file, you are good to go
indenting: ive used quite a number of text editors and i have to say VS Code has the best auto indentation system. You dont have to worry about formatting your codes to make them clearer, just save your file and VS Code does all the magic for you
debugger: whilst most ides have good debuggers, VS Code's debugger is the easier to understand and work with
there are so much more add benefits of using VS Code like extensions, language adaptation etc, a very long list.
You can get started with VS Code in the link below

https://code.visualstudio.com/ :)

The Ultimate React Redux debugger

Williams Oluwafemi — Sat, 14 Dec 2019 10:29:59 +0000

I like me, you are also new to using Redux, you would agree with me, things can get complicated real quickly, and to make matters worse, the conventional google debugger isn't much helpful.

But i found a google chrome extension to help make your life a lot easier and make your coding more of a pleasant experience.

The name of the debugger is Redux-devtools-extensions, below is a link to my forked version of it

https://github.com/vvilliam5/redux-devtools-extension.git

It is awesome because it has a really nice GUI that shows you all your action creators and reducers, and your store as a whole, and you can click on actions to revisit the state of your app at that particular point in time, i am still exploring it, but these are still the cool features ive discovered so far. I be sure to update on my new findings.

It works as a chrome extension, just download, import your applyMiddleware and compose objects from the redux library and add this line of code to your App component

const composeEnhancers = window.REDUX_DEVTOOLS_EXTENSION_COMPOSE || compose;
const store = createStore(reducers, composeEnhancers(applyMiddleware()));

And your all done :)