DEV Community: John McDonald

How to Resolve Merge Conflicts Quickly, Every Time.

John McDonald — Wed, 31 Mar 2021 17:16:48 +0000

How to Fix Merge Conflicts

You have been working on a big nice new feature for a few days, or even weeks. All the code is refactored, all the comments are useful, no console prints or debugger lines to be found. It's all ready to ship. You make a pull request. It's almost there. SMACK You have unresolved conflicts. Please fix these before continuing.

The pain is immediate and intense.

Well not to worry. This is a quick step by step guide on how to handle conflicts when merging your branch into, for example, develop. It's simple and foolproof. Here we go.

Do the merge and resolve the conflicts locally:

git fetch
git checkout origin/DESTINATION
git merge origin/SOURCE

resolve conflicts...
- Commit File(s)
  
  git add
  git commit

Push the merge up as a new branch:

git push origin HEAD:refs/heads/branch-with-conflicts-resolved

Create new PR in Bitbucket and merge it. You have two options to finish
the merge now that you have resolved all conflicts.

Option 1.
```
Source:       <branch-with-conflicts-resolved>
Destination:  DESTINATION
```
Or...

Option 2.

  - First PR:

        Source:       <branch-with-conflicts-resolved>
        Destination:  branch

  - Complete that PR. Then in another PR:

        Source:       branch
        Destination:  DESTINATION

Now you have resolved your conflicts and merged. :-)

It may seem trivial now, but this is one of the most confusing and frustrating things for developers working in a large agile team environment, where the develop and main branches are changing hour to hour, and week to week, respectively. Hope you are well and happy coding!

Ace the Technical Interview: Part 1

John McDonald — Tue, 09 Feb 2021 23:25:45 +0000

Does your upcoming job interview have you sweating it? Don't worry, it's perfectly normal to feel nervous. However unlike other job interviews where you just have to look like a nice competent human being, developers and engineers are often required to "prove" their knowledge. That chokes up a lot of fresh developers.

I have your back. In my multi-part guide I'll give you the knowledge and confidence to walk into a big tech interview and shine like you're the next Bill Gates or Woz. 💯

This is a live document and chapters will be added below

Introduction - you are here ✔
How to talk through problems
More common Interview Questions

How To Talk Through Problems

Let's say the interviewer asks you to write a program that takes a string and reverses said string. Sounds simple right? Well, it is. But they aren't just looking for you to drop a solution on them. They want to see your problem solving process; How do you think? Here's an example below:

Ask the interviewer if there are any constraints, physical or otherwise. Does it need to be very memory efficient? or possibly, Do you need to check for errors? These are questions that let the interviewer know you're getting all the requirements before jumping into a solution.

Don't go overboard asking for every possible detail either, but a couple general questions really prove you can step back and assess what is needed, before you just impulsively write a function. You can also assess if you should focus on a specific Big O result, such as minimal time complexity, or if it's an IoT device, you may be concerned more about space complexity.

For more on Big O watch this video below

Let's code! As you're writing the solution, and I'll show you two solutions below, make sure you give a reason why you are writing each line, what is it doing to help you achieve your goal?
Finally you're done. Really it's that easy. You already know how to code, so don't sweat it.

But what if I don't know how to solve the problem?

Well, this can happen, so be prepared. Ask the interviewer for clarification if you think it will help you to solve the problem. If all else fails, explain in pseudocode as best you can what you would do, and explain that you would be reading documentation to find out the specific commands you use to implement your pseudo-solution.

Getting stuck with a problem you've never faced can happen, just remember, 'I don't know' is the WORST thing to say. In a real job you can't say I don't know, so an interview should be treated the same way.

Oh, and here is that solution. Two different methods. 😉

Testing React Apps the Right Way

John McDonald — Mon, 08 Feb 2021 08:18:25 +0000

I was having endless trouble with tests in my React app, and it was causing my build pipeline to fail as well.

After a few hours of reading documents and cobbling answers from around the forums I found a great, highly flexible solution. There are several places I needed to configure correctly so I'm listing them out below for anyone else that is trying to get their tests up and running and not having any luck.

Setup your package.json to include these dependencies, and jest configuration:

"devDependencies": {
    "@babel/plugin-transform-runtime": "^7.12.10",
    "@babel/preset-env": "7.12.11",
    "@babel/preset-react": "7.12.10",
    "babel-jest": "26.6.3",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "chai": "^4.2.0",
    "enzyme": "^3.11.0",
    "enzyme-adapter-react-16": "^1.15.5",
    "enzyme-to-json": "^3.6.1",
    "jest": "26.6.3",
    "node-sass": "4.14.1",
    "react-test-renderer": "17.0.1",
    "redux-mock-store": "^1.5.4"
  },

...other stuff---

"jest": {
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
      "\\.(css|less|scss)$": "<rootDir>/__mocks__/styleMock.js"
    }
  }

Basic test:

// <rootdir>/__tests__/app.test.js
import React from "react";
import { assert } from "chai";
import { shallow, configure } from "enzyme";
import Adapter from "enzyme-adapter-react-16";
import configureMockStore from "redux-mock-store";
import { Provider } from "react-redux";

import App from "../src/App"; // Component to Test

configure({ adapter: new Adapter() });

const mockStore = configureMockStore();
const store = mockStore({});

describe("Test Component", () => {
  it("render correctly App component", () => {
    const AppComponent = shallow(
      <Provider store={store}>
        <App />
      </Provider>
    ).exists();
    assert(AppComponent === true);
  });
});

Add these styleMock and filemock modules to prevent errors on jsx components importing css/scss and/or files:

// <rootdir>/__mocks__/styleMock.js
module.exports = {};

// <rootdir>/__mocks__/fileMock.js
module.exports = "test-file-stub";

// <rootdir>/babel.config.js
module.exports = {
  presets: ["@babel/preset-env", "@babel/preset-react"],
  plugins: [
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-transform-runtime",
  ],
};

👩‍💻👨‍💻 ...and now you should be able to run your tests with jest + enzyme, and in my case, chai.

Find Me Here

John McDonald — Mon, 08 Feb 2021 07:59:37 +0000

repl.it
alpinstang.com
alpinstang.github.io
dev.to
Stack Overflow
Twitter

Send Doge

Send Bitcoin

Let's learn Flexbox!

John McDonald — Mon, 08 Feb 2021 07:37:02 +0000

CSS Flexible Box Layout, commonly known as Flexbox, is a CSS 3 web layout model. It is in the W3C's candidate recommendation stage. The flex layout allows responsive elements within a container to be automatically arranged depending upon screen size.

Category Image Box with Image Zoom Effect Using Flex

While building an ecommerce website I needed a front page that really showcased the products and grabbed the potential customer's attention. Using a beautiful image with elegant category text and a smooth animation really did the trick. I've put the markup and css up on CodePen. I wrote the css in SASS.

CodePen Example

In the process I found a great image placeholder site. Rather than placeholder.com style gray boxes, it provides nice pretty sample images. I recommend it for prototyping and placeholder image content in development. Check it out here: Lorem Picsum

Happy coding!

John