Forem: Ryan Dunton

Are libraries making us worse developers?

Ryan Dunton — Fri, 28 Feb 2020 15:36:17 +0000

Intro

A few days ago I was tasked with building a site with some parallax, scroll based animations. In order to make this happen I used the fantastic react-plx library. This was a task that was great use for a library because it handled a lot of the painstaking animation work quickly and was easy to setup.

The Code Situation

After some discussion we decided to only have the parallax effect be visible on desktop and render the components without animation on mobile. I was passing all my data into a parallax component which would render the parallax-ing element so I knew if I wanted to make the change I would have to make it here

// ParallaxAnimator.js


const ParallaxAnimator = ({ parallaxData, children }) => {

  return (
    <Plx parallaxData={parallaxData} className="parallax">
      {children}
    </Plx>
  );
};

The solve seems pretty simple. Add some lines of code that measure the screen width and render the content either with or without the Plx component accordingly.

// ParallaxAnimator.js


const ParallaxAnimator = ({ parallaxData, children }) => {
  const [windowWidth, setWindowWidth] = useState(null);
  const { mobileBreakpoint } = useContext(ThemeContext);

  // logic to decide what to render on resize
  useEffect(() => {
    const handleResize = () => setWindowWidth(window.innerWidth);
    window.addEventListener('resize', handleResize);
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  });

  // render without parallax component on resize
  if (windowWidth < mobileBreakpoint) {
      return <>{children}</>
  }

  return (
    <Plx parallaxData={parallaxData} className="parallax">
      {children}
    </Plx>
  );
};

However, my first instinct wasn't to write some fairly basic JS logic to do this myself. Instead of writing these extra 7 (!) lines of code, my first instinct was to reach for a library which left me with the following code which achieved the same result.

// ParallaxAnimator.js


const ParallaxAnimator = ({ parallaxData, children }) => {
  const { mobileBreakpoint } = useContext(ThemeContext);
  const isMobile = useMediaPredicate(mobileBreakpoint);

  if (isMobile) {
    return <>{children}</>;
  }

  return (
    <Plx parallaxData={parallaxData} className="parallax">
      {children}
    </Plx>
  );
};

The Question

Maybe this says more about me as a developer but I think it's a decent issue in the community as a whole. Is me using a library for this simple task the end of the world? No. But does it dilute my thinking and make me less aware of the tradeoffs involved in building a web application? I believe so. It also takes away a bit of the critical thinking skills that we should pride ourselves on as developers. We should enjoy making our own solutions even to simple problems such as this one.

So I pose the question, has library overuse, especially in React become too much the norm? I think I realized for me it has.

What I Learned Building a Side Project Without a Designer

Ryan Dunton — Tue, 22 Jan 2019 18:27:42 +0000

The Project

I LOVE the Oscars. When I say I love the Oscars, I really love the Oscars. My roommate and I watch every Oscar nominee in all 24 categories every year. It's one of my favorite traditions however, we usually track our progress by crossing off the movies we have seen from a physical list.

Over the weekend I decided to make a website to help us track our progress!

Final Product: www.theoscarwatch.com

Round 1: Myself as a Designer

I had a ton of fun building the site, but of course as a React developer all I cared about was how cool and fast I could move data around the site. Finally when all was said and done this was a snapshot of the result.

I was really proud of how fast and concise the site worked. However, the reaction from the rest of my friend group (non-developers) was lukewarm. Multiple comments of "can we spruce this up?" or "oh wow, nice good work". So finally, unhappy with how the site looked I called in one of my designer friends on Monday, the day before the nominations came out, to give me a hand.

Round 2: Working with a Designer: Electric Boogaloo

I had my designer friend come over after sending him a link the night before. He mocked up a quick design for how to change things. The first was killing the modal that displayed the data in favor of a dropdown menu. The second was making the scrolling area smaller. The third was adding a countdown timer. And the fourth was a revamping of the color scheme.

The final result looked like this:

Much cleaner, better looking and most importantly...much better received by non developers!

The whole thing reminded me of the scene from Silicon Valley where none of the non-engineers understand the awesomeness of the compression app.

Long story short, as developers we sometimes take designers for granted and we need to appreciate that they can bring value that we don't even think about.

OUR finished work: www.theoscarwatch.com

Insertion Sorting for Beginners in JS

Ryan Dunton — Thu, 17 Jan 2019 22:59:57 +0000

Earlier this week I wrote a post outlining a basic bubble sorting algorithm. Today I am going to tackle the insertion sort algorithm. The motivation behind these posts being that I understand what they are but need to tighten up my actual understanding of them, considering I'm a professional dev who uses JS all day every day.

What is Insertion Sort?

Insertion sort is a method of sorting an array by dividing the array into a 'sorted' portion and 'unsorted' portion. Then we compare the unsorted item to see if it is larger than the previous element, if not we insert the new item. Basically we are looking from left to right and sorting as we go.

Let's start building our insertionSort function.

Step 1

const insertionSort = arr => {
  const len = arr.length;
  return arr;
};

I have always found it better to save the array length in a variable instead of continually referencing arr.length.

Step 2

const insertionSort = arr => {
  const len = arr.length;
  for (let i = 0; i < len; i++) {
    //
  }
  return arr;
};

Now we have a for loop looping over each element of the array, and we will do our sorting inside of it.

Step 3

const insertionSort = arr => {
  const len = arr.length;
  for (let i = 0; i < len; i++) {
    let el = arr[i];
    let j;
  }
  return arr;
};

Set up a variable el to hold the current value and initialize another variable j and set it outside of our next for loop to maintain appropriate scoping.

Step 4

const insertionSort = arr => {
  const len = arr.length;
  for (let i = 0; i < len; i++) {
    let el = arr[i];
    let j;

    for (j = i - 1; j >= 0 && arr[j] > el; j--) {
      arr[j + 1] = arr[j];
    }
  }
  return arr;
};

Now we set up a for loop inside our first for loop. We assign j the value of our current array position minus 1 and evaluate it against if it is greater than 0 and if the current element is smaller than the starting loop element.

Step 5

const insertionSort = arr => {
  const len = arr.length;
  for (let i = 0; i < len; i++) {
    let el = arr[i];
    let j;

    for (j = i - 1; j >= 0 && arr[j] > el; j--) {
      arr[j + 1] = arr[j];
    }
    arr[j + 1] = el;
  }
  return arr;
};

Finally we add assign the value el to the current index position in the array. Using j+1 because we are initially setting the value of j to i-1.

There is the basics of an insertion sort algorithm!

Bubble Sorting for Beginners in JS

Ryan Dunton — Tue, 15 Jan 2019 19:54:54 +0000

As someone who uses Javascript all day, every day for work I realized I took a lot of basic algorithm tasks for granted so I have decided to dive into the basics in blog posts for the next few weeks, starting today with BUBBLE SORT.

What is Bubble Sort?

Bubble Sort is a method for sorting arrays by comparing each array element to the element behind it. So, if you had an array with [3,5,4, 2] the bubble sort function would compare "3" to "5" then compare "5" to "4" and so on until the array is sorted.

Best Way to Bubble Sort

The best way I have found/built to bubble sort looks like the below:

const bubbleSort = arr => {
  let swapped;
  do {
    swapped = false;
    for (let i = 0; i < arr.length; i++) {
      if (arr[i] > arr[i + 1]) {
        let tmp = arr[i];
        arr[i] = arr[i + 1];
        arr[i + 1] = tmp;
        swapped = true;
      }
    }
  } while (swapped);
  return arr;
};

Code Breakdown

Now let's break this code down snippet by snippet.

const bubbleSort = arr => {
  let swapped;
  do {} while (swapped);
  return arr;
}

Here we initialize a swapped variable and set up a do/while loop to run while swapped is equal to true, then return the array.

const bubbleSort = arr => {
  let swapped;
  do {
    swapped = false;
    for (let i = 0; i < arr.length; i++) {
      // do stuff here  
    }
  } while (swapped);
  return arr;
}

Now we have set up the function to loop over each element of the array.

const bubbleSort = arr => {
  let swapped;
  do {
    swapped = false;
    for (let i = 0; i < arr.length; i++) {
      if (arr[i] > arr[i + 1]) {
        // if element > the next element
      } 
    }
  } while (swapped);
  return arr;
}

If the element is greater than the element behind it in the array we want to do something (swap) with it.

const bubbleSort = arr => {
  let swapped;
  do {
    swapped = false;
    for (let i = 0; i < arr.length; i++) {
      if (arr[i] > arr[i + 1]) {
        let tmp = arr[i];
        arr[i] = arr[i + 1];
        arr[i + 1] = tmp;
        swapped = true;
      }
    }
  } while (swapped);
  return arr;
};

We need to save the arr[i] element to the tmp variable because we are going to overwrite it with the value of the element behind it (arr[i+1]). Then we reassign the value of the element behind it (arr[i+1]) to equal tmp.

This was my best try at a basic Bubble Sort function, let me know if you find a more elegant solution!

Flattening an Array, a Performance Test

Ryan Dunton — Mon, 17 Dec 2018 21:47:46 +0000

The Question

What is the most efficient way to flatten an array in Javascript? This questions comes up often in interviews and also has some practical use cases, which is rare for interview questions.

By "flattening" an array, we mean taking a multidimensional array and turning it into a regular "single" dimensional array. I'm not sure if that is the right phrasing but I'm going with it. See an example below.



let initialArray = [[0, 1], [2, 3], [4, 5]];

let flattenedArray = [0, 1, 2, 3, 4, 5]

Possible Solutions

So what is the most efficient way to go about this? Well I sketched out four possible solutions.

Solution 1: Concat + Apply



let flattenedArray = Array.prototype.concat.apply([], initialArray);

This is a fairly simple one line solution. We create a new array and concat each element onto it.

Solution 2: Use a Reduce



let flattenedArray = initialArray.reduce((a, b) => {
  return a.concat(b);
});

We execute a concat function on each first level element in the array. Then concat it onto the previous element. Giving us a new flattened array.

Solution 3: The Faithful Loop



let flattenedArray = [];
for (let i = 0; i < initialArray.length; i++) {
  let current = initialArray[i];
  for (let j = 0; j < initialArray.length - 1; j++)
    flattenedArray.push(current[j]);
}

The most basic solution. We loop through the first level arrays, loop through the internal arrays and push them up to an empty array. I should note, this is a lot more written code than our other solutions.

Solution 4: A ForEach Loop



let flattenedArray = [];
initialArray.forEach(entry => {
  flattenedArray = flattenedArray.concat(entry);
});

A little more modern approach. We loop through each first level array, concat it with the other and reassign the flattenedArray.

Testing the Results

So which is the fastest?

Full test results here . Wow! The old fashioned "for" loop was by far the fastest.

Going be a straight operations per second metric the classical for loop performs best! This was actually fairly shocking to me. Does anyone have a better flattening method?

Recreating the StateOfJS Survey Animation Part 2

Ryan Dunton — Thu, 06 Dec 2018 17:50:37 +0000

This is part 2 of my attempt to recreate the 2018 State of JS Animation. Part 1 can be found here

A look at my finished attempt.

When we left off I had a page that looked like this:

And each Letter component has the following state which runs on mount

this.setState({
      minTop: -offsetTop - margin,
      maxTop: windowHeight - elementHeight + margin - offsetTop,
      maxRight: windowWidth - elementX - (elementWidth - margin),
      minLeft: -offsetLeft - margin,
      animationType,
      currentLeftOrRight,
      currentTopOrBottom
    });

Now that each component knows its minTop, maxTop, maxRight, minLeft and the animationType we can make the animation function.

Since we are using GreenSock's TweenLite we can move to a new x,y coordinate, we just have to get the coordinates. We can get the coordinates with a simple switch statement and give it random opposite coordinates within the max/min range.

const getNewCoordinates = (minTop, maxTop, minLeft, maxRight, currentSide) => {
  let xDirection, yDirection, x, y;
  // alternate sides
  switch (currentSide) {
    case "left":
      xDirection = "right";
      x = maxRight;
      y = Math.random() * maxTop + minTop;
      break;
    case "right":
      xDirection = "left";
      x = minLeft;
      y = Math.random() * maxTop + minTop;
      break;
    case "top":
      yDirection = "bottom";
      x = Math.random() * minLeft + maxRight;
      y = minTop;
      break;
    case "bottom":
      yDirection = "top";
      x = Math.random() * minLeft + maxRight;
      y = maxTop;
      break;
    default:
      break;
  }
  return { x, y, xDirection, yDirection };
};

So now we pass that information to a tween animation that updates state but and viola! We have letters moving around the screen and call a flipAnimation function that just changes the animationType from "x" to "y" and refires the animation at the end of each animation.

moveAnimation = () => {
    this.animation = TweenLite.to(
      this.letterElement,
      this.state.animationTime,
      {
        x: this.state.x,
        y: this.state.y,
        ease: Linear.easeNone,
        onComplete: this.flipAnimation
      }
    );
  };

So now we have letters moving around the screen, all we need to do is get them to "go home" on hover.

We know from Greensock that the 'home' location is x:0,y:0. So we call a function when the App home state is set to true that moves all the Letters to 0,0 and give it a faster animationTime for a cool little effect.

returnToHome = () => {
    if (this.state.x !== 0) {
      this.setState({
        x: 0,
        y: 0,
        animationTime: 0.5,
        endAnimation: true
      });
    }
  };

The only tricky part left is "restarting" the animations on end of hover. We can check if our this.props.isHome equals false and the this.state.endAnimation equals true. Which means the user is no longer hovering but the component is not animating yet, so we call the animation.

if (!this.props.isHome && this.state.endAnimation) {
      this.setState({
        endAnimation: false
      });
      this.flipAnimation();
    }

Boom! Now we have a passable prototype. I still need to add resize functions and some mobile compatibility but other than that it is ready for the world.

Obviously I blew through some steps but the full code can be found on Github.

Integrating React and Greensock was suprisingly easy and I hope to do it again!

Recreating the StateOfJS Survey Animation

Ryan Dunton — Wed, 05 Dec 2018 22:47:15 +0000

The Task

If you follow the world of Javascript, chances are you came across the awesome new "State of Javascript 2018" survey. If not, you can check it out here. I loved the animation at the beginning of it and set about trying to recreate it. Now I will walk through what I did.

My final product can be viewed here. Not ready yet to be viewed on mobile.

Caveat

I have never worked with Greensock inside of React before, so I'm sure this is a really sloppy and brute force way to approach the problem. I encourage other people to give it a go :)

Project Overview

The example we are trying to emulate uses blocks to spell out "State of Javascript 2018" with a button to view the survey. I decided to spell out my name, "Ryan Dunton", and have a button that on hover, allows the user to view my actual name spelled out by the blocks.

I started by setting up an App component to hold my animating blocks. I give the App two state properties "home and margin". The home property will monitor if the elements should be at their starting position and the margin property will allow me to pass the margin property through as props and make it easier to calculate the animation container.

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      home: false,
      margin: 20
    };
  }

Then I gave the App some Letter Components with props for setting up the initial animation

        <Letter
            data="R"
            borderColor="red"
            isHome={this.state.home}
            animationType={"y"}
            currentLeftOrRight={"left"}
            currentTopOrBottom={"top"}
            margin={this.state.margin}
          />

I also add a Button component and pass it a function to change the App's this.state.home to true on hover.

(I'm using Styled Components so if this looks funky you can ignore it)

       <ButtonWrapper>
          <EnterButton
            buttonText="Who am I?"
            checkForHover={this.checkForHover}
            removeHover={this.removeHover}
          />
        </ButtonWrapper>

Going into my Letter Component I need to find store MaxX, MaxY, MinX and MinY value because I am going to send each element to either the Max or Min of one of the axis and generate a random number within a range of the other. I decided to store this data in the Letter Component's state. I also wanted to monitor what "animationType" is being used, basically if it is moving to an X or Y max/min and the current side it is aligned with. I also needed to monitor if the animation was ended and the time/length of the animation. So the initial state of the Letter Component looks like this:

      class Letter extends Component {
        constructor(props) {
        super(props);
        this.state = {
          x: 0,
          y: 0,
          animationTime: 2,
          minTop: 0,
          maxTop: 0,
          maxRight: 0,
          minLeft: 0,
          currentLeftOrRight: null,
          currentTopOrBottom: null,
          animationType: "",
          endAnimation: false
        };

I then need to set these value when the component mounts because I need to calculate its position on the screen. The most difficult part was figuring out the exact container dimensions. This is where passing the margin property through as a prop is helpful because I can reference it in the ComponentDidMount state calculations:

this.setState({
      minTop: -offsetTop - margin,
      maxTop: windowHeight - elementHeight + margin - offsetTop,
      maxRight: windowWidth - elementX - (elementWidth - margin),
      minLeft: -offsetLeft - margin,
      animationType,
      currentLeftOrRight,
      currentTopOrBottom
    });

as well as passing it through to a Styled Component:

const StyledLetter = styled.div`
  margin: ${props => props.margin}px;
`;

So now I have a page that looks like the below with each Letter knowing all the information it needs to do for its animation.

This is already way too long, so I'll end here and post a followup piece soon!