DEV Community: Lukas Müller

Conditional rendering for responsiveness in SSR applications

Lukas Müller — Mon, 25 Jan 2021 11:54:39 +0000

I recently ran into a problem in a Gatsby site I'm building. In one of the pages, an element should only be visible in the desktop view, not on mobile devices. To achieve this, I wrote a utility function ...

const isMobile = () => window.innerWidth < 768

... and then used that to conditionally render the element.

{ !isMobile() && <Element /> }

This works fine in the local preview of the site, but I ran into problem in the statically built version. <Element> received faulty classnames from its immediate sibling. I wasn't able to find out the exact cause of this but I inferred it had something to do with SSR (server side rendering) + conditional rendering based on the following:

1) the problem doesn't happen in the client side rendered version
2) the only affected element is the conditionally rendered one

My solution was to go away from conditional rendering (in the React sense) and just not display the element in mobile breakpoints.

.element {
    &--invisible-on-mobile {
        @media (max-width: 768px) {
          display: none;
        }
    }
}

This works fine and to me it seems that this is also the better way to approach this. Here's why:

Based on my understanding, when using SSR, upon page load, the browser receives a proper HTML document filled with the full content of the page. This is different to a classic client side rendered SPA which is empty on page load except for a root container into which the frontend framework (React, Vue, etc.) renders the application. In this approach, it makes sense to conditionally render things because the browser starts with nothing and asks itself the question "I have not rendered anything yet. What do I want to show the user?". It can then choose what to render based on the applications' state.
In a static build, however, the whole content is there already, so the browser renders it immediately. The question then becomes: "What do I hide from the user?" This seems easier and cleaner to solve with CSS.

Is there a flaw in my understanding of SSR? Or is this indeed the better approach to what I'm trying to achieve?

My functional approach to HackerRank's 'Mini-Max Sum' challenge

Lukas Müller — Thu, 24 Dec 2020 13:17:57 +0000

Problem: Given five positive integers, find the minimum and maximum values that can be calculated by summing exactly four of the five integers. Then print the respective minimum and maximum values as a single line of two space-separated long integers.

Link: https://www.hackerrank.com/challenges/mini-max-sum/problem

My thought process went like this:

1) The function will receive an array of 5 inputs and should calculate the sum of 4 of those. Thus, 1 value of the array should be removed (either the highest or the lowest). We can use Math.max and Math.min to find out which value needs to be removed.

2) The array could have identical values, in that case only one of them should be removed. For this, we can use Array.indexOf which only returns the index of the first match it finds.

3) To remove the value from the array, we can use Array.splice. Unfortunately, that function mutates the original array. Due to the fact that we need to find the minimum sum AND the maximum sum, we need to touch the array twice, thus mutation is not an option. And aside from that, mutation is against the rules of functional programming.

Is there a different Array function I could have used for this?

4) To get the sum of the other values in the array, we can use Array.reduce.

5) The processes of getting the minimum and maximum sum are equal exact for one function (Math.max for minimum and Math.min for maximum (opposite because the functions are used to remove the number that should be excluded from the calculation)). This calls for a curried function, meaning a function that receives as a parameter either Math.max or Math.min and returns the function that calculates the minimum or maximum sum, depending on the passed function.

This resulted in the following solution:

const removeNumberFromArrayAndSumRest = removalFn => arr => {
    const tmp = [].concat(arr);
    const toBeRemoved = removalFn(...tmp);
    tmp.splice(tmp.indexOf(toBeRemoved), 1);
    return tmp.reduce((a, b) => a + b);
}

// Complete the miniMaxSum function below.
const miniMaxSum = (arr) => {    
    console.log(`${removeNumberFromArrayAndSumRest(Math.max)(arr)} ${removeNumberFromArrayAndSumRest(Math.min)(arr)}`);
}

This might not be the best approach, but I'm pretty satisfied with it. Functional programming really is a marvel.

Does anyone here use HackerRank? What's your approach to this challenge?

My ridiculously unreadable but concise solution to the Compare Tuples challenge on HackerRank

Lukas Müller — Mon, 14 Dec 2020 18:44:24 +0000

Here's the challenge: https://www.hackerrank.com/challenges/compare-the-triplets/problem

Here's the definition of the challenge:

Alice and Bob each created one problem for HackerRank. A reviewer rates the two challenges, awarding points on a scale from 1 to 100 for three categories: problem clarity, originality, and difficulty.

The rating for Alice's challenge is the triplet a = (a[0], a[1], a[2]), and the rating for Bob's challenge is the triplet b = (b[0], b[1], b[2]).

The task is to find their comparison points by comparing a[0] with b[0], a[1] with b[1], and a[2] with b[2].

If a[i] > b[i], then Alice is awarded 1 point.
If a[i] < b[i], then Bob is awarded 1 point.
If a[i] = b[i], then neither person receives a point.

Comparison points is the total points a person earned.

Given a and b, determine their respective comparison points.

My initial approach was a simple if/else loop, filling the 2 positions of a previously defined array, and then returning that array.

Something along the lines of this:

function compareTriplets(a, b) {
  let counterA = 0,
      counterB = 0;
  for (let i=0; i < a.length; i++){
      if (a[i] > b[i]) {
          counterA++;
      } else if (a[i] < b[i]) {
          counterB++;
      }
  }

  return [counterA, counterB];
}

This is obviously a fine enough solution and what I would probably write in a real project.

But I thought: "I bet can write this in one line". And so I did:

const compareTriplets = (a, b) => [[a, b], [b, a]].map((c, i) => c[0].reduce((acc, _curr, i) => acc + (c[0][i] > c[1][i]), 0));

And it works! And I'm sure there's ways to make it even more concise. And there's definitely a way to extend it to accept a hypothetically infinite (within the limits of JS) amount of arrays.

As said before, I would never write something like this for a real project. The reason is that it's completely unreadable. It would probably take me 10 minutes to understand the code I produced if I came across it in a legacy project or I wouldn't even get that far because I would think to myself "which self-important twat wrote this?" and close my editor out of frustration.

Anyway, it was a fun mind challenge and I think I might understand .map() and .reduce() a bit better now :)

TIL: Adding a maintenance redirect to a Gatsby page hosted on Netlify

Lukas Müller — Sun, 13 Dec 2020 16:32:17 +0000

Today, I needed to take a website offline, because it wasn't ready to be shown to the world yet. What I wanted was to show a "we're under maintenance" screen, when the user visits the site. It should also automatically redirect any traffic to that screen, so if the user tried to visit /subpage, they would be redirected to /maintenance. Here's how I did it with my Gatsby page hosted on Netlify.

Step 1:

Create a branch in my repository where I will add the maintenance screen.
I called it maintenance.

git checkout -b maintenance

Step 2:

Make Netlify deploy this newly created branch. By default, Netlify only deploys your production branch. That's usually master, or it was in my case. To change this, I go to Settings > Build & Deploy > Deploy contexts, click edit and choose Let me add individual branches under Branch deploys. Then I add my branch name maintenance.

Step 3:

Add the screen to my Gatsby project.
I did this by creating a new folder called maintenance in pages and added an index.tsx and a styles.scss. This page pretty much just says "Here's going to be the new home of this project", has links to social media and basic styling. Gatsby will automatically create a route for this, so when I visit page-name.com/maintenance, I get the screen.

Step 4:

Add the redirect.
One way of getting Netlify to do the redirect I want is to add a file called _redirects to the directory that Netlify uses to serve the website and put the redirects in there. In the case of Gatsby which has its own build process, it's not trivial to get the file into the public folder, where it needs to be.
To get Gatsby to put the file there, I created a folder called static (on the root of my project) and put the file in there. Gatsby takes all these files and puts them into public during the build process.
The content of the file is very simple:

/* /maintenance 301!

This redirects any traffic on the page to /maintenance with the status code 301.

These changes are pushed to the maintenance branch.

Step 5:

Deploy the published branch.
I open the deployment status page with the deploy log. There, I can find a button that says "publish deploy".

This will make the branch maintenance the base of my production site. Now, when I visit the main URL e.g. https://page-name.com, I see the maintenance screen.

To undo this, I can just go to one of the older deploys and click "publish deploy" there. This will bring back the master branch to the production site. I can obviously also just make a new commit to the master branch, go into that deploy log and press "publish deploy" there.

Further Notes:

My site is connected to a Contentful instance. When content is updated, a webhook is triggered and a new deployment starts. In Netlify, by default, auto-publishing for the master branch (or whatever you've set as your production branch) is enabled. This will, after having built the site, set the production site to the master branch again, effectively undoing Step 5. To stop Netlify from doing this, just press the "Stop auto publishing" button in the deploys list page in the Netlify UI.

References:

https://community.netlify.com/t/support-guide-what-s-the-easiest-way-to-create-a-temporary-maintenance-page-for-my-site/338
https://docs.netlify.com/routing/redirects/#syntax-for-the-redirects-file
https://docs.netlify.com/site-deploys/overview/#branch-deploy-controls
https://levelup.gitconnected.com/how-to-add-netlify-redirects-to-a-gatsby-site-ae678518cc91?gi=f922113a6c6f