DEV Community: Xiaohan Du

Improve SCSS structure

Xiaohan Du — Sun, 23 Aug 2020 10:10:41 +0000

A bad example

An example SCSS which is structured as:

.widget {
    background-color: red;
    .widget-body {
        background-color: black;
        .widget-link-block {
            background-color: yellow;
            .widget-link-block-menu {
                background-color: green;
            }
        }
    }
}

Which compiles to CSS:

.widget {
    background-color: red;
}

.widget .widget-body {
    background-color: black;
}

.widget .widget-body .widget-link-block {
    background-color: yellow;
}

.widget .widget-body .widget-link-block .widget-link-block-menu {
    background-color: green;
}

It has 2 disadvantages:

we are repeating keywords like 'widget'
the compiled CSS relies on HTML structure, i.e. it only works on the following HTML:

<div class='widget'>
  <div class='widget-body'>
    <div class='widget-link-block'>
      <div class='widget-link-block-menu'>

      </div>
    </div>
  </div>
</div>

Violating the hierarchy would cause them stop working:

<div class='widget-body'>
<div>

does not work

<div class='widget'>
  <div class='widget-body'>
    <div class='widget-link-block-menu'>
      <div class='widget-link-block'>

      </div>
    </div>
  </div>
</div>

does not work

Suggested method

Use SCSS properly and Follow BEM

The above SCSS example can be modified to:

.widget {
    background-color: red;
    &-body {
        background-color: black;
    }
    &__link {
        &__block {
            background-color: yellow;
            &__menu {
                background-color: green;
            }
        }
    }
}

which compiles to CSS:

.widget {
    background-color: red;
}

.widget-body {
    background-color: black;
}

.widget__link__block {
    background-color: yellow;
}

.widget__link__block__menu {
    background-color: green;
}

As you can see, the compiled CSS is more compact, less complex. When write SCSS, we no longer repeat writing '.widget'. More importantly, the compiled CSS no longer relies on HTML structure, it can be used like this:

<div class='widget'>
  <div class='widget-body'>
    <div class='widget__link__block'>
      <div class='widget__link__block__menu'>

      </div>
    </div>
  </div>
</div>

or in different order:

<div class='widget'>
  <div class='widget-body'>
    <div class='widget__link__block__menu'>
      <div class='widget__link__block'>

      </div>
    </div>
  </div>
</div>

or individually:

<div class='widget-body'>
</div>

Let’s build a full stack UK weather app using Node + React: part 2 — error handling

Xiaohan Du — Mon, 10 Aug 2020 13:23:03 +0000

Original post on Medium see here, code example in this article can be found in my Github Page.

In Part 1 we scaffolded a basic set up for our UK weather app and successfully fetched and displayed the weather data from Openweathermap API. An important point in part 1 was how user input data was stored in React state and sent to Node. You may have noticed that some errors happened when non-standard UK postcode was entered, thus in part 2 I’m going to show you my thoughts of handling these errors.

The error

Let’s take a look at what happens if entering a random postcode in the input field: aa123aa

The error is pretty much self-explanatory: response.result = undefined. Console.log(response) and we can see:

Openweathermap API returned a 404 error when a false postcode was entered.

How to handle the error?

Two possible issues could cause the error:

The input postcode did not conform to UK format, e.g. qwerty;
The input postcode conformed to UK format, but was not a valid UK postcode, e.g. aa123aa.

For 1, I’m going to add input validation using regex, for 2, I think there is no easy way to prevent a user from entering such postcode, so I’ll handle the error in getCoord method before the address information is fetched.

1. Input validation using regex

When clicking the Search button, handleSubmit method is called which also invokes getCoord method. I add an error state to store the validation status:

if(error === true) {
  // show error message
}
else {
  // remove error message
}

A very simple reminder message is placed next to he input field. In handleSubmit method, the input is validated as follows: if valid, execute getCoord and set error state to false; else set error state to true. The error message should be shown when error === true, and hide when error === false. Let take a look at Weather.js:

You may have noticed that here in handleInputChange method the error state is set to false. This is because if postcode is entered again, a user may already have noticed that he/she entered the wrong postcode, therefore the error message is removed immediately when the input state is changed (we don’t want to over-remind the user). Okay, so now the problem is how can we determine whether input is valid and run getCoord? We could try to add some regex in handleValidation method to address it.

Most UK postcodes follow a certain format thus implementing a regex myself to cover popular cases is possible, but if I want to cover all possible cases, doing it myself becomes infeasible quickly. I found a good solution in this popular Stack overflow answer, so the following code is added to handleValidation method:

handleValidation() {
    let regexConst = new RegExp('^([Gg][Ii][Rr] 0[Aa]{2})|((([A-Za-z][0-9]{1,2})|(([A-Za-z][A-Ha-hJ-Yj-y][0-9]{1,2})|(([AZa-z][0-9][A-Za-z])|([A-Za-z][A-Ha-hJ-Yj-y][0-9]?[A-Za-z]))))[0-9][A-Za-z]{2})$');
    return regexConst.test(this.state.postcodeInput);
}

As you can see, the regex pattern is very long, so I didn’t want to spend too much time on it and borrowed the Stack overflow answer. Let’s test it:

Good, now issue 1 is resolved. Issue 2 still persists: that is, if the input conforms UK postcode format and bypasses the regex, how can we handle the error?

2. Try {fetch API} catch {error}

From the console error we can see that the postcode API returned a 404 error, i.e. postcode not found. A simple try… catch statement can be used to catch the error and show the error message. The getCoord method is updated as follows:

async getCoord() {
  const postcodeAPI =   `http://api.postcodes.io/postcodes/${this.state.postcodeInput}`;
  let response;
  try {
    response = await fetch(postcodeAPI);
    if (!response.ok) throw new Error('Weather api request failed.');
    await response.json().then(response => {
      this.setState({
        addressData: response,
        coordinate: [response.result.latitude, response.result.longitude]
      });
      let coord = {
        latitude: this.state.coordinate[0],
        longitude: this.state.coordinate[1]
      }
      axios.post('http://localhost:4001/search-location', coord)
        .then((response) => {
          console.log(response);
          this.setState({
            displayResult: true
          });
        }, (error) => {
          console.log(error);
        });
    });
  }
  catch(e) {
    this.setState({error: true});
    console.log(e);
  }
}

If an invalid postcode is passed to the API, the response object would contain a property ok = false. Therefore this line is added: if (!response.ok) throw new Error(‘Weather api request failed.’); to immediately cease the try statement and catch the error. In the catch statement the error state is set to true such that the little reminder is shown next to the input field. Then the error is logged to the console with text ‘Weather api request failed’. No console error would be shown to the user. Let’s test it:

The 404 error in the console is default browser behaviour, so no need to worry about that. The try…catch statement threw the error and logged the message in the console, and the error state made sure that the reminder was displayed.

What’s next?

Now that the errors are handled, one step closer to a good UK weather app. Obviously the app could look a bit prettier, so in the next article I will get the app decorated and show you how to do it.
Hope it helps! 😁

Let’s build a full stack UK weather app using Node + React: part 1 — basic setup

Xiaohan Du — Wed, 05 Aug 2020 22:15:31 +0000

Original post on Medium see here, code example see my Github page

UK weather isn’t that great, if you want to be prepared and find out what weather is like in the UK, you may have 3 choices:

The easy way: look up in the sky
The intermediate choice: use BBC weather
The hard mode: build you own weather app!

In this article I will demo the hard mode here, yeah, why not ✌️.

The app is built using React JS as frontend and Node JS as backend. It also involves fetching weather data from Openweathermap API and UK geological data from Postcodes.io, so make sure you have both API ready. FYI Openweathermap API requires an API key and Postcodes.io does not.

Basic idea

Add a React component Weather.js contains a form element which allows user to input UK postcode. Weather.js should also contain a sub component WeatherResult.js which is only rendered when weather data is successfully fetched.
Weather.js passes the input postcode to Postcodes API and get the geological coordinates. The coordinates are then sent to Openweathermap API in the backend. The reason of sending coordinates rather than directly sending postcode to Openweathermap API is: we will be able to save the effort of regulating the user input to meet Openweathermap API requirements.
The Openweathermap API receives these coordinates. Node then gets the response and sends it back to WeatherResult.js.
WeatherResult.js renders the data and presents to the user. # File structure The main file structure is as follows (some less important files are ignored, such as node_modules):

full-stack-weather-app
├── backend
│ ├── index.js
.
.
.
├── frontend
│ ├── public
│ ├── src
│ │ ├── components
│ │ │ ├── Weather.js
│ │ │ ├── WeatherResult.js
│ ├── App.css
│ ├── App.js
.
.
.

where frontend folder is created via create-react-app: npx create-react-app frontend.

Frontend: set up `Weather.js`

We are going to render the application from App.js, so change default App.js to:

we could see that only Weather.js component is rendered. Let’s take a look at it:

Weather.js is quite long so we will take a look at getCoord method separately. Also let’s not worry about the CSS classes in the render method for the time being. Currently the component renders a plain form with no styling. There are several states: addressData is used to store the complete address data fetched from Postcodes API, coordinates are then extracted and stored in coordinate state. postcodeInput is used to store the input postcode when form input updates. Finally displayResult is a Boolean value which renders/hides WeatherResult component.

As user inputs postcode, the onChange event in form <input> element picks up the use input and invokes the handleInputChange method. postcodeInput state then receives and stores the postcode input. displayResult state is set to false such that when user inputs changes, weatherResult component is hidden (see the demo at the end).

Now let’s take a look at getCoord method:

The Postcodes API is open source and does not require an API key to use, thus we could directly use it in Weather.js. Variable postcodeAPI receives the postcode input and completes the API. Weather data is then fetched and coordinates are passed into coordinate state. A post request is sent to http://localhost:4001/search-location, here we specify the full endpoint, otherwise if using /search-location only, the post request would be sent to http://localhost:3000/search-location. Meanwhile we set state displayResult to true, such that the weatherResult component will only be rendered if a response is returned successfully.

Backend: wrap all in `index.js`

For backend, we will only have an index.js file for all functionalities. Let’s take a look at the file:

A global variable apiUrl is defined here to store the Openweathermap API, which follows the format: http://api.openweathermap.org/data/2.5/weather?lat=123&lon=321&appid=12345qwerty.

index.js does 3 jobs:

line 8–19: set the application to listen on port 4001,
line 21–38: send a post request to http://localhost:4001/search-location to obtain coordinates,
line 40–49: send a get request to http://localhost:4001/weather so the endpoint could receive the weather data.

So far you might ask a question: Why do we have to pass coord to Node? Wouldn’t it be easier to fetch weather data in React immediately follows user input?

The reason is that an API key should never be stored in frontend as it might be exposed to users through DevTools. As a result, user input needs to be passed to Node.

How did we do it? Remember in getCoord method we used an axios.post method to post object coord to http://localhost:4001/search-location? Here in index.js we fetch coord from it and insert into the Openweathermap API. Plus the API key is stored in .env file and never pushed to version control, so the potential issue of exposing API key to users is eliminated. For securely store API key in .env file and fetch it in Node, see my other article here.

Frontend: display weather in `WeatherResult.js`

On line 40 of index.js, the weather data has been sent to http://localhost:4001/weather, thus in WeatherResult.js we fetch weather data and display it as follows:

Recall in Weather.js line 56 we conditionally render WeatherResult component based on displayResult state, and fetchWeather method is only called on componentDidMount, thus no request is sent if WeatherResult component is not mounted. Open a terminal in ./frontend and type npm start, we get the React app running. Let’s give it a go:

It works!

Until now we have scaffolded a full stack weather app using Node as backend and React as front end. For me the most important thing to take home is how to send React state to Node. I think this is fairly useful if your website needs to take a user input and embed it into an API, and this API must be stored in Node.

In part 2 and part 3 we will deal with some error handling and HTML + SCSS to make the app prettier. Thanks for reading, see you later. 😁