Forem: Kristina Hodges (Voroteliak)

Create a responsive map with Mapbox in React

Kristina Hodges (Voroteliak) — Wed, 02 Nov 2022 17:39:43 +0000

In one of my personal projects I wanted to implement a feature that would allow users to pin their travel destinations using dynamic map, with a React frontend and Ruby on Rails for the backend.

Let's dive in and look at how to create a fully responsive map with custom Markers using Mapbox in our React application.

SETTING UP

Using Mapbox requires an access token. Let's see how you can obtain your own Mapbox API key (it's super easy)

Step 1
In order to be able to use MapBox, we need to create a free Mapbox account to get an accessToken to be able to use the map on your website.

Go to https://www.mapbox.com/signup/ and create a Mapbox account.

Step 2
In order to get the token you will need to provide your billing information, but don't worry, Mapbox offers you 50,000 map loads free per month, which is very generous for doing all the local development as well as publishing small personal projects.

Create a new token using the blue button as below after signup, then copy it to the clipboard by clicking on the button.

Step 3.
Make sure you protect your token! Never post your token anywhere, or leave it unprotected. You don't want anyone taking advantage of your token.
To protect your token, in the root of your project, create an .env.local file and add your token to it:

/* .env.local */
REACT_APP_MAPBOX_ACCESS_TOKEN=YOUR_TOKEN_HERE

INSTALLATION
Using react-map-gl requires react >= 16.3.

In order to include MapBox into our React application, we will use react-map-gl, a set of React components created by engineers at Uber for Mapbox GL JS that can be easily included in our React application.

npm install --save react-map-gl mapbox-gl

STYLING
The current Mapbox-gl release requires its stylesheet to be included at all times. The marker, popup and navigation components in react-map-gl also need the stylesheet to work properly.

// app.js
import 'mapbox-gl/dist/mapbox-gl.css';

Time to DISPLAY MAP

To add a map, first we need to import the map into our component, in my case it is src/Map.js

import ReactMapGL from "react-map-gl";

Next, we will initialize default state for our map with the required coordinates: latitude, longitude, the size of the map(width, height), and zoom for the viewport.

 const [viewport, setViewport] = useState({
    latitude: 50.5821,
    longitude: 7.0216,
    width: "80vw",
    height: "80vh",
    zoom: 3,
  });

These values will all change as our user interacts with the map.

We are now ready to setup the MapGL component in the render method

<ReactMapGL
        {...viewport}
        mapboxApiAccessToken={process.env.REACT_APP_MAPBOX_TOKEN}
        mapStyle="mapbox://styles/cl9fv02ny000h14o0576ux3mj"
        onViewportChange={(viewport) => {
          setViewport(viewport);
        }}
>
</ReactMapGl>

mapStyle is used to select the type of map you want to render. You can create your own style through Mapbox studio or pick any of the predefined styles, copy the map style link and insert your mapStyle

onViewportChange is required in order to update viewport with new coordinates when a user interacts with the map

Save your changes. Now you should be able to see your interactive new Mapbox map!

Now, let's add some Place Markers on the map!

First, we need to import Marker at the top of our component.

import ReactMapGL, { Marker } from "react-map-gl";

The fun part is, you can you any icon or image as your Markers, I found the icon I want to use and imported it as well

import marker from "../assets/marker.png";

My custom backend holds locations data, which contains longitude and latitude, and I want to create a marker for each location.

The render below is modified to include the marker display in the form of a Pin Icon based on the locations data.

<ReactMapGL
        {...viewport}
        mapboxApiAccessToken={process.env.REACT_APP_MAPBOX_TOKEN}
        mapStyle="mapbox://styles/cl9fv02ny000h14o0576ux3mj"
        onViewportChange={(viewport) => {
          setViewport(viewport);
        }}
      >
        {locations.map((location) => (
          <Marker
            key={location.id}
            latitude={location.latitude}
            longitude={location.longitude}
          >
              <img src={marker} alt="place marker" />
          </Marker>
        ))}
</ReactMapGL>

...and just like that we have our beautiful interactive map with custom markers!

We looked at how to display a map with markers at specific coordinates in a React Application, using MapBox GL JS library through the components provided by the react-map-gl. This library provides a lot of functionalities and styling around maps and can be explored further depending on your interest and requirements.

Next time we will look at how to display Popups, navigation control and display a sidebar with coordinates of the map and its zoom level.

The art of handling errors with rescue_from and Rails

Kristina Hodges (Voroteliak) — Tue, 11 Oct 2022 13:07:59 +0000

In the Ruby programming language, exceptions are a common feature. About 30 different exception subclasses are defined in the Ruby standard library, some of which have their subclasses.

Let's go over how to use rescue exceptions in ruby and how to handle them.

Errors Are Actually Good
A quick preface before we go any deeper: errors should be embraced during the development stage of your code. While you certainly don’t want a user to hit an error page, embracing errors as a normal part of software development is a healthy mindset to get into.

What is an Exception?
An exception represents an error condition in a program. Exceptions are a mechanism for stopping a program's execution. Unhandled exceptions cause Ruby programs to crash.

What is Exception Handling?
Software systems are typically prone to errors. Exceptions are more likely to occur in systems that include human involvement because they attract errors on numerous levels.

Syntactical errors, network errors, form input errors, invalid authentication errors, and so on are all examples of errors. These can damage user experience and potentially emerge as security loopholes, allowing attackers to compromise the system if not addressed.

Exception handling prevents system failures and saves the user from annoying error messages.

When an error condition occurs, the programming language usually compels the program to terminate, and control of the program is lost. Exception handling allows you to maintain control and respond to what occurs after an error has occurred.

This offers you some flexibility to make changes, such as displaying friendly error messages, releasing resources, or quickly redirecting the user to a relevant website.

rescue_from and Rails
Starting from the release 2.0, Rails provides a clean way to rescue exceptions in a controller, mapping specific error classes to corresponding handlers.

rescue_from receives a series of exception classes or class names, and a trailing :with option with the name of a method or a Proc object to be called to handle them. Alternatively a block can be given.

Let's see an example. A call to ActiveRecord#find raises an ActiveRecord::RecordNotFound exception when the record passed as parameter doesn't exist. Assuming you want to display a nice error message, you need to rescue the exception in each action where a find call is performed.

This approach leads to lot of code duplication if you count the number of find calls for each action per model.

The rescue_from method is exactly the solution we are looking for. Instead of catching the exception at action-level, we instruct the controller to rescue all the ActiveRecord::RecordNotFound errors and forward the exception to the proper handler.

Voilà! Now you have much cleaner code and displaying friendly error messages :)

P.S. Example of React side finished error handling product

Building a Sinatra API backend with Active Record Associations

Kristina Hodges (Voroteliak) — Fri, 16 Sep 2022 16:50:31 +0000

In this blogpost let's go step by step and build your own Sinatra API backend that uses Active Record to access and persist data in a database

ActiveRecord and Sinatra
ActiveRecord can be used in conjunction with Sinatra to handle creating the data tables used to store the data being asked for by HTTP requests.

ActiveRecord is the model portion of MVC (model-view-controller) which is in charge of creating objects whose data is needed to persist within a SQL database. It helps developers create database migrations with methods put in place with a little bit of metaprogramming magic!

We build our data tables and data models out with ActiveRecord, and then control what data we are querying our database for within our Sinatra routes.

Step 1. Have a clear idea of what you want to create and what it'll look like
Try answering questions like “how many models am I going to have? How many views?” This should be clear before you move on and get started

Step 2. Create the necessary models for your project.
Think through your project, in terms of how many relations you’re going to have. You have to understand the type of relationship your tables will have, e.g., one-to-one, one-to-many, or many-to-many.

Step 3. Create a migration to create the Users table with ActiveRecord
Run the following command to create migrations for each model:

bundle exec rake db:create_migration NAME=create_users

The outcome should be timestamped files in the db>migrate folder: (for each model, you’ll perform its migration, one at a time.)

Inside each of the timestamped files, you’ll find an empty change method where you are to list the table attributes (columns) and the datatypes for each column

After filling in the attributes, you’ll get:

Step 3. Run migrations

Migrations will be done using the command:

bundle exec rake db:migrate

Your generated schema should look like this:

Step 4. Seeding data to your DB

In the seeds.rb file, you’ll have to specify how you want to seed your data.

Use the command:

bundle exec rake db:seed

Step 5. Finally, using Sinatra’s built-in routing methods, we can set up a response to fetch request from the front end.

This will return a list of “jsonified” Users by calling the .all and .order methods on a User class, which holds all of the User instances.

On the front end, if you are using a React front end, we can now use the users data we just fetched from the database and set a stateful variable equal to it.

From there, however we decide to display the data is up to us!

Breakdown of Declarative vs. Imperative programming

Kristina Hodges (Voroteliak) — Fri, 26 Aug 2022 01:28:00 +0000

JavaScript is an outstanding programming language that allows you to write code in different paradigms or combine them into a 'multi-paradigmatic' approach.

But what does that even mean?

A programming paradigm is an approach or a style of writing code. Most of the modern programming languages fall into two general paradigms: imperative and declarative.

So what is the difference?

Declarative programming is when you say what you want, and imperative language is when you say how to get what you want.

I like to think about it as the process of ordering a meal.

Imperative goes to a Subway restaurant and wants to order a sandwich. For that he chooses: size, type of bread, meat, veggies, cheese, extra ingredients, and a sauce, he also tells to heat up his bread. The waiter delivers exactly what he asked for.

On the other hand, Declarative goes to McDonald's and tells that he wants a double cheeseburger. Grabs the burger.

What is imperative programming?

Imperative programming is the oldest and most basic programming approach. Within the imperative paradigm, code describes a step-by-step process for a program’s execution.

Examples of imperative programming languages include:

Java
C
Pascal
Python
Ruby
Fortran
PHP

What is declarative programming?
In contrast with imperative programming, declarative programming describes what you want the program to achieve rather than how it should run.

In other words, within the declarative paradigm, you define the results you want a program to accomplish without describing its control flow.

Examples of declarative programming languages include:

SQL
Miranda
Prolog
Lisp
Many markup languages (e.g., HTML)

Let's look at some code:

Declarative programming describes what you’re trying to accomplish without defining how to do it.

For the first example which is an Imperative programming approach, it usually has more lines code, that’s the very obvious difference.
Another is, it explicitly follows a step-by-step instruction to get the even numbers from the array.
While in the declarative programming approach, it leverages an existing function, which is filter.

The differences are subtle, but hopefully you have a better background to understand them from now.

With experience, you are able to learn which situations call for which programming paradigms!

Dangerous world of innerHTML

Kristina Hodges (Voroteliak) — Fri, 05 Aug 2022 21:27:00 +0000

The innerHTML property is a part of the Document Object Model (DOM) that is used to set or return the HTML content of an element. Where the return value represents the text content of the HTML element. It allows JavaScript code to manipulate a website being displayed. More specifically, it sets or returns the HTML content (the inner HTML) of an element.

For beginners, innerHTML seems like the easiest and most elegant way to manipulate basic elements on the DOM. However, as your JS becomes more involved and your DOM increases in size, innerHTML will hurt performance and introduce security risks.

innerHTML is the source of a security risk: it can allow malicious actors to run JavaScript directly on your website. This can enable access to your backend server and any sensitive information stored there, such as user data and passwords.
In another scenario, a malicious script can be placed on your website and run every time a user accesses it, exposing your users directly to a security risk.

The vulnerability occurs when there is an opportunity for user input. For example, consider the following live code example:

The content of the input text field is printed beneath it when the user clicks submit. There are many use cases for this: chat apps, social media and profile editing.

Now, instead, of entering an innocent ‘about me’ text, enter the following: <img src="https://unsplash.it/200/200" onload="alert('User-run JavaScript!');" />.

And just like that, JavaScript is being run from the host website. In this case, we only create an alert. But the point here is what could be run.

ACCESS TO THE BACKEND SERVER
A fetch request could be made to the backend server that would not be rejected as foreign because it is being made from the host website. This provides a gateway for access to everything stored on your server.
MALICIOUS SCRIPT TARGETING THE END-USER
The opportunity for user-input could be use to place a script on the page that will run every time the page is accessed in the future. This script could scrape user information from the browser, including sensitive user information such as usernames and passwords.

Possible alternative

Methods such as .createElement(), appendChild(), append(), and removeChild() allow for safe DOM manipulation without the unintended consequences of innerHTML (and innerHTML+=, more specifically). Unless you’re simply setting the text inside of an HTML tag, such as a
or
, stay away from innerHTML.
It is recommended that instead of innerHTML you use:
- Element.SetHTML() to sanitize the text before it is inserted into the DOM.
- Node.textContent when inserting plain text, as this inserts it as raw text rather than parsing it as HTML.
1. Use .textContent or .innerText where possible When rendering text only to the DOM it is not necessary to use .innerHTML. Instead, can use other methods available to us to write content to the DOM: .textContent and .innerText. When using these, if HTML is included in the input, it will not be rendered as such, but as text only.
_Conclusion: _
There are plenty of use cases where it is perfectly safe to use .innerHTML to render content to the DOM. For example, .innerHTML is very useful and safe when rendering static content (and dynamic content you are completely in control of) to the DOM.

However, the security risks associated with .innerHTML occur when this is used when working with user input. In these cases: use .textContent or .innerText over .innerHTML when they can achieve the same outcome; if .innerHTML is necessary , employ a HTML sanitizer so purify user input.