DEV Community: Maxime

Embed responsive YouTube videos in 2021

Maxime — Tue, 14 Dec 2021 00:16:10 +0000

If you just want the code, scroll down.

The history

For a long time, web developers have had to rely on obscure CSS tricks to embed responsive YouTube videos on their website.

If you've ever had to do this yourself, you probably relied on a trick similar to this:

.video-container {
  position: relative;
  padding-bottom: 56.25%;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Combined with markup like this:

<div class="video-container">
  <iframe
    src="https://www.youtube.com/embed/msizPweg3kE"
    frameborder="0"
    allow="accelerometer; autoplay; encrypted-media; gyroscope;"
    allowfullscreen></iframe>
</div>

What's the 56.25% number? It represents of the aspect ratio of the video, which is usually 16/9 on YouTube (9 is 56.25% of 16.)

Using the aspect-ratio property

Create a class and use the aspect-ratio property to automatically set the width and height of your video based on its container:

.video {
  aspect-ratio: 16 / 9;
  width: 100%;
}

In your HTML, apply the class you created (.video, in my case) to your iframe:

<iframe
  class="video"
  src="https://www.youtube.com/embed/msizPweg3kE"
  frameborder="0"
  allow="accelerometer; autoplay; encrypted-media; gyroscope;"
  allowfullscreen></iframe>

And that's it! No need for fancy tricks anymore.

Browser support

This feature is safe to use in all modern browsers, as you can see on caniuse.com. If you need to support older browsers, I recommend using the supports media query to make your UI consistent:

@supports not (aspect-ratio: 1) {
  /* ... implement your fallback here */
}

Header image by Christian Wiediger on Unsplash

Coding challenges in interviews

Maxime — Mon, 07 Oct 2019 16:53:01 +0000

I'm interested in hearing people's thoughts about coding challenges in the interview process. After years of iteration as a hiring manager, I have had the most success with take-home challenges. Here's an abbreviated example prompt:

Using the frontend technology of your choice, build an application that lets users search through an image API (such as Unsplash or Pixabay) and save the images they like locally.

Please send us your code when you are satisfied with your work. Note that we value clear, readable, and maintainable code. We expect this exercise to take a maximum of 4 hours. Please email us if you need any clarification.

The point of not having a deadline for submission is to be cognizant of people's busy lives and schedules - looking for a job is a time-consuming process. The open-ended requirements allow people to use the technology they're the most comfortable with because I want to see people's best work.

However, I've received feedback saying that some candidates prefer alternatives to take-home challenges:

whiteboarding solutions with someone in real life
live-coding a small app or algorithm (remotely or on-site)

But to me, the most surprising piece of feedback was that some people don't want to be tested: they expect their title and experience to speak for itself. My opinion is that code challenges aren't about proving or disproving one's experience: they're about understanding how one thinks, collaborates, and problem-solves, and there's no way to glean that from a resume.

Discuss 🔉

So, in order to improve the lives and chances of everyone involved, I turn to you, friendly dev.to folks:

what do you think about coding challenges and take-home tests?
if you could pick, how would you demonstrate your coding and problem-solving skills to an interviewer?
are there some biases or problems you'd like to call out with any of the methods you've experienced?

Chaining catch blocks with async/await

Maxime — Tue, 02 Jul 2019 23:39:02 +0000

When you're working with an API within a large application, it can become tedious and repetitive to handle errors on a case-by-case basis.

Consider this API call wrapped into a function:

async function getRandomDog() {
  const response = await axios.get('https://dog.ceo/api/breeds/image/random');
  return response;
}

// Display a random dog image
getRandomDog().then(response => {
  const image = document.createElement("img");
  image.setAttribute("src", response.data.message);
  image.setAttribute("width", "400");
  document.body.appendChild(image);
});

This works fine, but we should probably handle errors in case our API call fails:

// Display a random dog image
getRandomDog()
  .then(url => {
    const image = document.createElement("img");
    image.setAttribute("src", response.data.message);
    image.setAttribute("width", "400");
    document.body.appendChild(image);
  })
  .catch(error => {
    alert("Unable to find a dog :(");
  });

We now tell the users if the API fails, but we'd also like to log the incident so that we know there's a problem with our app. In a real application, we'd have access to a logging service, but for simplicity's sake we'll use console.log:

async function getRandomDog() {
  const response = await axios
    .get("https://dog.ceo/api/breeds/image/random")
    .catch(error => {
      console.log(error);
      return error;
    });
  return response.data.message;
}

Assuming that the logError works properly, we should now be notified when our API fails. However, our users won't see the alert anymore because we've already caught the error. That's not a great user experience!

Our first instinct might be to try chaining catch blocks, but that won't work:

const data = await axios
  .get("https://dog.ceo/api/breeds/image/random")
  .catch(error => {
    console.log(error);
  })
  .catch(error => {
    // This block will never get called
    alert("Something went wrong");
  });

My favorite solution to this is to throw the error again to trigger the new catch block in our code:

const data = await axios.get("https://fake.api.com")
  .catch(error => {
    console.log(error);
    throw error;
  })
  .catch(error => {
    alert("Something went wrong");
  });

Now, when our API call fails, we'll log the error to our reporting system and notify the user. Win win!

If we have multiple endpoints, we could also go one step further and centralize the error reporting. For instance:

function handleAPIError(error) {
  const { status } = error.response;

  switch (status) {
    case 400:
      console.log("Error: invalid request");
      break;
    case 401:
      console.log("Error: not authenticated");
      break;
    case 500:
      console.log("Error: server problems");
      break;
  }

  throw error;
}

async function getRandomDog() {
  const response = await axios
    .get("https://dog.ceo/api/breeds/image/random")
    .catch(handleAPIError);
  return response;
}

async function getRandomCat() {
  const response = await axios
    .get("https://api.thecatapi.com/v1/images/search")
    .catch(handleAPIError);
  return response;
}

We've now implemented an error handler that can be reused across our API helpers. It allows the errors to filter through to the frontend so that we can display the proper error message to our users.

Here's a Pen with infinite cats, dogs, and errors:

Thank you for reading! Let me know what you think, and I'd love to know how you handle errors in your apps.

Building an Exit Popup with JavaScript

Maxime — Sat, 08 Jun 2019 01:01:47 +0000

I recently built a system that shows a popup to users when they are about to exit a site. I thought I would share my approach and a couple of tricks I've learned along the way. I'm going to stick with vanilla JavaScript to make this as approachable as possible.

Disclaimer: exit popups can annoy users, so I recommend using them in moderation!

Markup and styling

Let's write some markup for our popup:

<div id="popup" class="popup__wrapper">
  <div class="popup__container">
    <h1 class="popup__title">Thank you for visiting!</h1>
    <p>Have a wonderful day 💁</p>
  </div>
</div>

The popup__wrapper is a transparent overlay that goes over the page. The popup__container will wrap the content we'd like to display.

Here's the CSS I used:

* {
  box-sizing: border-box;
}

#popup {
  display: none;
}

.popup__wrapper {
  background: rgba(0, 0, 0, .75);
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 10;
}

.popup__container {
  background: #fff;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 18px;
  margin: 100px auto;
  max-width: 100%;
  padding: 20px;
  width: 500px;
}

.popup__title {
  font-size: 26px;
  margin-bottom: 15px;
}

The most important bit is the display: none on the #popup selector: this hides the content until we want to show it.

Adding functionality

Let's now write a few lines of JavaScript to show the popup when the mouse leaves the window:

function onMouseOut(event) {
  // Remove this event listener
  document.removeEventListener("mouseout", onMouseOut);

  // Show the popup
  document.getElementById("popup").style.display = "block";
}

document.addEventListener("mouseout", onMouseOut);

The popup should now show up when your mouse leaves the window!

Here's a CodePen for reference:

Refining the system

When users want to leave a site, they usually move their mouse to the URL bar or the Back button at the top of their browser. To make popups a little less eager, we could use that to our advantage:

function onMouseOut(event) {
  // If the mouse is near the top of the window, show the popup
  if (event.clientY < 50) {
    // Remove this event listener
    document.removeEventListener("mouseout", onMouseOut);

    // Show the popup
    document.getElementById("popup").style.display = "block";
  }
}

document.addEventListener("mouseout", onMouseOut);

Fixing a Firefox bug

I noticed that the popup shows up when clicking or hovering on a <select> element in Firefox.

You can test this by adding a dropdown to the DOM and clicking on it in Firefox:

<div id="popup" class="popup__wrapper">
  <div class="popup__container">
    <h1 class="popup__title">Thank you for visiting!</h1>
    <p>Have a wonderful day 💁</p>
  </div>
</div>

<select>
  <option>Oh</option>
  <option>No</option>
</select>

This is very annoying!

After a few hours of iterations, I came to a solution:

function onMouseOut(event) {
  // If the mouse is near the top of the window, show the popup
  // Also, do NOT trigger when hovering or clicking on selects
  if (
    event.clientY < 50 &&
    event.relatedTarget == null &&
    event.target.nodeName.toLowerCase() !== 'select') {
    // Remove this event listener
    document.removeEventListener("mouseout", onMouseOut);

    // Show the popup
    document.getElementById("popup").style.display = "block";
  }
}

document.addEventListener("mouseout", onMouseOut);

The popup now works as expected in Firefox! Here's another CodePen with the improvements:

I hope this post was informative! Please let me know what you think in the comments below, and happy coding!

Subscribing to Mailchimp using Cloud Functions

Maxime — Tue, 29 Jan 2019 04:15:29 +0000

Hi, folks!

Here is a quick-and-dirty implementation of an email subscription system. Using a few lines of JavaScript and a serverless provider, I'll show you how to securely connect to Mailchimp's API and allow your users to subscribe to an email list.

Requirements:

A place to write frontend code, such as CodePen
A GitHub or Microsoft account to log in to Webtask
A Mailchimp account with an existing list

Setting up

You'll need 3 things from Mailchimp:

an API key which can be generated by going to Account > Extras > API keys. Check out Mailchimp's documentation if needed.
the id of our list, which can be found in List > Settings > List name and defaults.
the name server where the list is hosted, which can be found in the URL. For instance, the server name for https://us1.admin.mailchimp.com/ is us1.

Building the backend

Let's now head over to Webtask.io. Webtask is a free cloud function hosting service built by Auth0's wonderful developers. On their landing page, hit "Try it now" and sign up with the account of your choice.

Let's create a new function using the "Empty Function" template. Give the function a name and hit "Save" to be taken to the editor.

You'll see the boilerplate below:

/**
* @param context {WebtaskContext}
*/
module.exports = function(context, cb) {
  cb(null, { hello: context.query.name || 'Anonymous' });
};

Let's import Axios in order to run some HTTP requests. Click on the wrench icon and go to NPM Modules. Click "Add Module", look for Axios, and add it to your project.

You're now ready to communicate with Mailchimp! Here's some code just for you:

const axios = require('axios');

module.exports = function (context, callback) {
  // Fail early if no email was passed
  if (!context.body || !context.body.email) {
    callback('Missing email parameter');
    return;
  }

  const { email } = context.body;

  // Replace the 3 values below with your own
  const regionName = 'us1';
  const apiKey = 'xxxxxxxxxx';
  const listId = 'xxxxxxxxxx';
  const url = `https://${regionName}.api.mailchimp.com/3.0/lists/${listId}/members/`;

  axios
    .post(
      url,
      {
        // Tell Mailchimp to subscribe this email
        status: 'subscribed',
        // Note that Mailchimp takes an email_address field, not just email
        email_address: email,
      },
      {
        headers: {
          Authorization: `apikey ${apiKey}`,
        },
      }
    )
    .then(() => {
      // Things went well
      callback(null, { message: 'Email subscribed!' });
    })
    .catch(error => {
      // Things didn't go well
      callback(error.response.data);
    });
};

You're done! 🎉

Use a REST client like Postman or Insomnia to query your serverless endpoint. The URL can be copied from the bottom of Webtask's UI.

Building a frontend (optional)

If you'd like to build a frontend for this system, here's a barebones form with an input field and a Submit button.

The URL for the action attribute can be copied from the bottom of the Webtask editor.

<form action="your_webtask_url" method="POST">
    <label for="email">Email</label>
    <input type="email" name="email" placeholder="Enter your email" />
    <button type="submit">Subscribe</button>
</form>

Things I've learned

Webtask

When using what Webtask calls the "full-control" programming model, the context's body isn't parsed.

module.exports = function (context, req, res) {
  // context.body is an empty object
}

To work around that restriction, you'll have set up tasks through your CLI or send a pb=1 token when calling the endpoint. I recommend reading the documentation.

Mailchimp

Mailchimp's API returns a ton of useful information when something goes wrong. That data is nested deeper in the response object than I would expect:

.catch(error => {
  const { data } = error.response;

For example, if you reuse an email that's already in your list, you'll see the data below:

{
  "type": "http://developer.mailchimp.com/documentation/mailchimp/guides/error-glossary/",
  "title": "Member Exists",
  "status": 400,
  "detail": "test@domain.com is already a list member. Use PUT to insert or update list members."
}

Thank you for reading, and please let me know if I said anything dumb or incorrect!

Loading environment variables in JS apps

Maxime — Sat, 04 Aug 2018 20:47:43 +0000

How to store and consume environment variables for local development

APIs and third-party integrations require developers to use configuration data called environment or config variables. These variables are usually stored in password-protected places like CI tools or deployment pipelines, but how can we use them when we’re developing applications locally?

TL;DR:

Don’t store environment variables in source control
Use dotenv to read data from your .env file
create-react-app forces a namespace on environment variables

This short tutorial will explain one way of loading environment variables into your code when developing locally. The main benefit is that secrets such as API keys are not committed to source control to keep your application safer.

Requirements:

A Javascript application
A package manager (yarn and npm are great)
Node 7+

Set up the variables

Create a file called “.env” in the root of your repository. This file is called a “dot file” and is different from regular files in that it is usually hidden in file browsers.

Most IDEs will allow users to create files without a name, but if that’s not the case, head over to your terminal and cd into your application’s root folder.

touch .env

Next, set up your variables with the format key=value, delimited by line breaks:

API_KEY=abcde
API_URL=https://my-api.com/api

Finally, make sure the .env file is not committed to your repository. This can be achieved by opening (or creating) a .gitignore file and adding this line:

.env # This contains secrets, don't store in source control

Consume the variables

Head to your terminal to install dotenv with your preferred package manager:

# Using npm:
npm i dotenv

# Using yarn:
yarn add dotenv

You’re now ready to read from your .env file. Add this line of code as early as possible in your application. With React apps, that’s usually index.js or App.js, but it’s entirely up to your setup:

require('dotenv').config();

And that’s it! Your application should have access to environment variables via the process.env object. You can double-check by calling:

console.log(process.env);

If all is well, you should see something like:

{
 NODE_ENV: "development",
 API_KEY: "abcde",
 API_URL: "https://my-api.com/api"
}

🎉 You’re now ready to use environment variables in your application!

Now, for those of us that use create-react-app, there’s a catch, and I wish it was documented a little better.

Using create-react-app

Facebook’s create-react-app works a little differently. If you followed the steps above and haven’t ejected the application, all you should see is the NODE_ENV variable. That’s because create-react-app only allows the application to read variables with the REACT_APP_ prefix.

So in order to make our variables work, we’ll need to update our .env file like so:

REACT_APP_API_KEY=abcde
REACT_APP_API_URL=https://my-api.com/api

Once again, verify your setup by logging process.env to the console:

{
 NODE_ENV: "development",
 REACT_APP_API_KEY: "abcde",
 REACT_APP_API_URL: "https://my-api.com/api"
}

And you’re done 😎

Tips

Variables in .env files don’t require quotation marks unless there are spaces in the value.

NO_QUOTES=thisisokay
QUOTES="this contains spaces"

It’s good practice to create a .env.sample file to keep track of the variables the app should expect. Here’s what my own sample file looks like in my current project. Note that it explains where someone might be able to find those keys and URLs.

CONTENTFUL_SPACE_TOKEN="see Contentful dashboard"
CONTENTFUL_API_KEY="see Contentful dashboard"
S3_BUCKET_URL="check AWS"
SHOW_DEBUG_SIDEBAR="if true, show debug sidebar"

DEV Community: Maxime

Embed responsive YouTube videos in 2021

The history

Using the aspect-ratio property

Browser support

Coding challenges in interviews

Discuss 🔉

Chaining catch blocks with async/await

Building an Exit Popup with JavaScript

Markup and styling

Adding functionality

Refining the system

Fixing a Firefox bug

Subscribing to Mailchimp using Cloud Functions

Requirements:

Setting up

Building the backend

You're done! 🎉

Building a frontend (optional)

Things I've learned

Webtask

Mailchimp

Loading environment variables in JS apps

How to store and consume environment variables for local development

TL;DR:

Requirements:

Set up the variables

Consume the variables

Using create-react-app

Tips

Further reading: