DEV Community: Rémy Beumier

How to add a dark mode to your Next.js site

Rémy Beumier — Wed, 19 Apr 2023 09:52:08 +0000

When I started listing the features I wanted for my new website, a dark mode toggle was in the top tier list as it's becoming a standard. Even though I'm not a big supporter of dark mode, I know people love it and I was willing to tackle this challenge.

The CSS part

For this feature, we want to use CSS variables. We have a range of variables that will switch according to the color mode.
Here is a snippet example:

main {
  --text: #000000;
  --text2: #333333;
  --bg2: #eeeeee;
  --bg: #ffffff;
}

Here the dark mode style if the .dark class is applied. We will see the JavaScript later:

main.dark {
  --text: #ffffff;
  --text2: #eeeeee;
  --bg2: #333333;
  --bg: #000000;
}

To finalise the styling part, we use the prefers-color-scheme check to match users settings.
It needs to be overridden with the .light class.
This is done this way:

@media (prefers-color-scheme: dark) {
  main {
    --text: #ffffff;
    --text2: #eeeeee;
    --bg2: #333333;
    --bg: #000000;
  }
  main.light {
    --text: #000000;
    --text2: #333333;
    --bg2: #eeeeee;
    --bg: #ffffff;
  }
}

The JavaScript and Next.js part

Let's see how we can make this dark mode toggle with useEffect and useState.
First, let's create a button that will change the class of our main element.

When we click on the button we toggle the theme thanks to React hooks.

import { useState } from 'react';

export default function Main(props) {
  const [theme, setTheme] = useState('');

  const switchTheme = () => {
    const newTheme = theme === 'light' ? 'dark' : 'light';
    setTheme(newTheme);
  };

  return (
    <main className={theme}>
      <button onClick={switchTheme} theme={theme}>
        {theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'}
      </button>
    </main>
  );
}

We have a functional button toggling between dark and light modes. However, it will not save anything and if we reload the page, we will face a light mode whatever we opted for. That's where we use localStorage.

In order to access the window object and therefore the localStorage, we must ensure the page has fully loaded. We do this with the useEffect(() => {...}, []).
We can then check localStorage and if there is an entry for theme we apply it.

We also update the switchTheme to save our theme preference in localStorage.

import { useEffect, useState } from 'react';

export default function Main(props) {
  const [theme, setTheme] = useState('');

  useEffect(() => {
    let localTheme = window.localStorage.getItem('theme');
    setTheme(localTheme);
  }, []);

  const switchTheme = () => {
    const newTheme = theme === 'light' ? 'dark' : 'light';
    window.localStorage.setItem('theme', newTheme);
    setTheme(newTheme);
  };

  return (
    <main className={theme}>
      <button onClick={switchTheme} theme={theme}>
        {theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'}
      </button>
    </main>
  );
}

We have a functional dark mode toggle in your Next.js app by now. In case of struggle, check the steps again or click the full solution link below.

TLDR: Codesandbox: Dark mode toggle in Next.js.

I really wanted to share my solution for this, as I found it particularly difficult to make it run, especially with the localStorage. I hope it will make your coding easier.

Don't hesitate to ask your questions and add remarks in the comments 🚀

Enjoy coding with Next.js!

Originally posted on https://remybeumier.be

Build a Carousel with Slick

Rémy Beumier — Wed, 07 Oct 2020 14:09:56 +0000

Are you looking to add a carousel or any sliding? I recently did and now take the time to share it with you. Let's see together how we can do this.

We will go through the steps of implementing Slick scripts and styles in order to integrate a sliding carousel as smoothly as possible.

Prepare your code

We can download the files by going to Slick website or Github.

You can also point to these CDN links for the CSS and JavaScript sources.

<link href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

Now we will need to create our Slick HTML element. It will be the parent to a list of div containing the content. The Slick parent will use the slick id and will have a data-slick attribute.

<div id="slick" data-slick='{}'>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

In this case there will be 6 slides defined by div elements. That's where we will add our content (cfr Codepen example).

We need an extra step to make our basic carousel working. In JavaScript we will initiate our Slick element.

$("#slick").slick({});

We now have a basic, Slick carousel. What if we need to change some settings?

Opt for our carousel settings

We can work with a wide range of settings.
Here are the most useful ones:

The sliding speed in ms: speed
The number of slides to show: slidesToShow
The number of slides to scroll: slidesToScroll
Whether the carousel slides indefinitely or not: infinite
The responsiveness: responsive

Those settings can be defined in the HTML inside the data-slick attribute but I would advise to define those inside the JavaScript.

$("#slick").slick({
  dots: true,
  infinite: true,
  speed: 300,
  slidesToShow: 3,
  slidesToScroll: 3
});

Our Carousel is now working following our new settings! Let's see how it could look like.

Live example on Codepen

Isn't an example worth a million words? 😄

A bit heavy since it uses jQuery, Slick is still a really straightforward integration.
Huge thanks to Ken Wheeler!

Keep playing to learn! 🔥

If you find value in what I offer don't hesitate and buy me a coffee 😇

Add animating numbers on your site with Odometer

Rémy Beumier — Wed, 23 Sep 2020 11:59:46 +0000

Are you looking to add some number animation on a project? I recently did and now take the time to share it with you. Let's see together how we can do this.

We will go through the steps of implementing Odometer scripts and styles in order to integrate numbers animation as smoothly as possible.

Prepare your code

We can download the files by going to Odometer website or Github.

There are no CDN but here are the CSS and Javascript sources.

<link href="https://github.hubspot.com/odometer/themes/odometer-theme-default.css" rel="stylesheet">
<script src="https://github.hubspot.com/odometer/odometer.js"></script>

Now we will want our html element to act as an odometer. Odometer requires us to add odometer id.

<p id="odometer"></p>

And last but not least, we need to make the animation happen. We need to change the number of your HTML element.

setTimeout(function(){
    odometer.innerHTML = 986;
}, 100);

We now have a basic, default styled odometer animation. What if we need to change the style?

Opt for our odometer style

We can select from a range of stylesheets created by Odomoter.

Please note that as of publication date (23 Sep 2020) the CSS on that Odometer page are not working. I hope it's fixed soon. In the meantime, adapt the CSS link I use in my example and Codepen.

We can also create our own odometer styling of course.

Live example on Codepen

Isn't an example worth a million words? 😄

It's a really light and straightforward integration.
Huge thank to HubSpot!

Keep playing to learn! 🔥

If you find value in what I offer don't hesitate and buy me a coffee 😇

Add Animations On Scroll with AOS

Rémy Beumier — Tue, 12 May 2020 08:18:34 +0000

Did you ever wish your website to have those fancy animations firing when you scroll down the page? I did and I recently took the time to learn one way to achieve it. Let's see together how we can do this.

We will go through the steps of implementing AOS scripts and styles in order to manage on scroll animation as easily as possible.

Prepare your code

We can download the files by going to AOS website, Github or Downloading their file.

If we are more into CDN's, here are the CSS and Javascript sources.

<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

Now we will want to add data-aos attributes on our element to be animated.

<section data-aos="fade-left"></section>

And last but not least, we need to initiate the script with this single line.

AOS.init();

We now have a basic, default on scroll animation. What if we need to change some animation settings?

Opt for your settings

There are two sets of options we have influence on in this library. The global settings you can only change when you initiate the script and the attribute settings you can define at initiation but also through HTML attributes.

AOS.init({
  // Global settings:
  disable: false, // accepts following values: 'phone', 'tablet', 'mobile', boolean, expression or function
  startEvent: 'DOMContentLoaded', // name of the event dispatched on the document, that AOS should initialize on
  initClassName: 'aos-init', // class applied after initialization
  animatedClassName: 'aos-animate', // class applied on animation
  useClassNames: false, // if true, will add content of `data-aos` as classes on scroll
  disableMutationObserver: false, // disables automatic mutations' detections (advanced)
  debounceDelay: 50, // the delay on debounce used while resizing window (advanced)
  throttleDelay: 99, // the delay on throttle used while scrolling the page (advanced)

  // Settings that can be overridden on per-element basis, by `data-aos-*` attributes:
  offset: 120, // offset (in px) from the original trigger point
  delay: 0, // values from 0 to 3000, with step 50ms
  duration: 400, // values from 0 to 3000, with step 50ms
  easing: 'ease', // default easing for AOS animations
  once: false, // whether animation should happen only once - while scrolling down
  mirror: false, // whether elements should animate out while scrolling past them
  anchorPlacement: 'top-bottom', // defines which position of the element regarding to window should trigger the animation
});

As it is the only setting that is not so clear, we will see how to disable AOS. We can use predefined value of mobile or desktop but if we want a specific pixel value, here is what we need to do.

AOS.init({
  // AOS would work only for windows bigger than or equal to 768px
  disable: function() { var maxWidth = 768; return window.innerWidth < maxWidth; }
});

We have determined settings for all the animations. What if we want a specific component to behave differently than the others?

Chose your animation

Here the 3 types of animation present in AOS library. They are specified in the data-aos attribute as I already mentioned.

Fade animations
Flip animations
Zoom animations

You can also define other parameters as listed in the Init settings. The goal is to define a different duration, easing, delay, anchor or offset.
This is what an element could look like.

<section data-aos="zoom-out" 
         data-aos-duration="3000" 
         data-aos-easing="linear" 
         data-aos-delay="1000">
</section>

We saw how a single element can be animated on its own based on AOS pre-built attributes. What if we want a totally new animation?

Create your own animation

AOS allow us to create your own animations, without touching a bit of Javascript. Let's see how a few CSS lines can do wonders.
We need to work on two states:

Before animation
After animation

/* Before animation*/
[data-aos="my-animation"] {
  transform: rotate(360deg) scale(0.5);
  opacity: 0;
  transition-property: transform, opacity;
}
/* After animation */
[data-aos="my-animation"].aos-animate {
  transform: rotate(0) scale(1);
  opacity: 1;
}

The browser will do the work; animating from one state to the other.
We only need to specify our new animation on one HTML element with the attribute data-aos="my-animation".

Live example on Codepen

Isn't an example worth a million words? 😄

After the integration of AOS on my first project, I must say I'm impressed. It is way more straightforward than I imagined it would be!
Huge thank to michalsnik!

Keep playing to learn! 🔥

If you find value in what I offer don't hesitate and buy me a coffee 😇

How to show code in a page; Prism code highlighter

Rémy Beumier — Fri, 24 Apr 2020 14:58:25 +0000

I recently had to create some documentation at work and needed to highlight several pieces of code for each component. I took it for granted since it's built in in most mature platform such as Github or Dev.to. What a mistake.

I needed to find a solution that would show my code extract in a clear and neat way alongside my text. That's how I came across Prism. And today we will see how to manage such an integration and how to cope with the few difficulties here and there.

Integrate Prism

Prism.js' highlighter is very lightweight and relies on both a CSS and a JS file. We have three integration options: Copy-pasting, downloading or using a CDN.

The first two options start from the Prism.js' download page. We can see default options are selected but we can change it to fit our needs. Indeed we can opt for our preferred theme, languages and plugins.

Once we are satisfied with our settings, we can directly copy the codes from the page or download the files.

The third option expects a CDN provider, let it be cdnjs or jsDelivr where we select the right link to match our desired settings.

Work with Prism

As an example I will use the default settings and use a CDN. That means that what we need to do is to integrate those CDN links in the HTML code.



<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/themes/prism.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/prism.min.js"></script>

Now let's see how we can write the elements to be highlighted by Prism.
First we use a pre element with a nested code element. This code element will define the language in its class (ie: language-css). And finally inside of it, we will write our code to be highlighted.



<pre>
  <code class="language-css">
    img {
      display: block;
      width: 100%;
      height: auto;
    }
  </code>
</pre>

And this is how Prism would render it.

Fix unexpected spaces

The highlighted version of our CSS above faces one problem. Because of how pre elements work, Prism takes unexpected line breaks and extra spaces (used for better code clarity) into account. Let's fix this with an old trick of commenting out.



<pre>
  <code class="language-css"><!--
  -->img {
    display: block;
    width: 100%;
    height: auto;
  }<!--
  --></code>
</pre>

See the difference below.

Work with HTML

We saw that CSS is easy, and it goes the same way with JS. However, HTML is more complicated, because Prism doesn't know where to start highlighting. The way to work with HTML is to replace all the < with <. We can also replace all the > with >. While the second step isn't mandatory I still do it because it feels safer.



<pre>
  <code class="language-markup"><!--
  -->&lt;div&gt;
    &lt;img src="example.png"&gt;
  &lt;/div&gt;<!--
  --></code>
</pre>

Giving this result.

I recommend the plugin Unescaped markdwon if you work heavily with HTML code to highlight. The plugin will handle the replacements.

Live example on Codepen

Isn't an example worth a million words? 😄

Prism has tons of settings. Take your time to explore and find the ones fitting your needs.

Keep playing to learn! 🔥

If you find value in what I offer don't hesitate and buy me a coffee 😇

Note: As stated in my introduction, of course we can use Markdown as it is in Dev.to or Github; We could also use Codepen or JsFiddle. Sometimes we just don't benefit from these tools and that's where Prism is so handful.

Google Maps: Show multiple markers and add your event on click

Rémy Beumier — Wed, 08 Apr 2020 10:00:30 +0000

I recently had a request to integrate Google Maps into a website. I thought It would be fairly straightforward as I integrated some maps before and it was all about an iframe. However going through the requirements, I discovered it wouldn't be that simple.

The map request had 3 main points:

Show the different firm offices on a map
Be sober and follow firm's brand guidelines
Show custom information when clicking on an office

Searching for possibilities I quickly came across the Google Maps API. It is of course more complex than the iframe I was used to but it is also a far more flexible tool!

Note: a dev version of the map will wait for you at the end of the article.

1. Initialize the map

First, I had to get the map rendering on my page. To initialize the map, you need to work with basic HTML, a bit of CSS and JavaScript as Google shows you.

In HTML we create a div that we will later point to in the script and we add the Google Maps API link with a callback function. In the most basic way, it would look like this.

<div id="map-canvas"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=&callback=initMap"></script>

In CSS we need to define a certain height to the #map-canvas element. Of course it would look better with more styling, but let's keep to the basics at the moment.

#map-canvas {
  height: 400px;
}

In JavaScript we create a function that will initialize the map. In this example we defined the center as the center of Belgium and the zoom to 7. It is up to you to define other values to show any place in the world.

var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map-canvas'), {
    center: {lat: 50.641111, lng: 4.668056},
    zoom: 7
  });
}

2. Make the map responsive

Of course the map had to be responsive for the client. As I often have to make videos responsive I used the same technique. The technique relies on padding of a parent div set to a certain ratio.

Actually, this trick works for all iframe; Youtube as well!

<div class="container">
  <div id="map-container">
    <div id="map-canvas"></div>
  </div>
</div>

.container {
  position: relative;
  width: 100%;
  max-width: 600px;
  margin: auto;
}

#map-container {
  padding: 56.25% 0 0 0;
  height: 0;
  position: relative;
  }

#map-canvas {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
}

3. Make the map zoom responsive

I had my map container behaving responsively but I had issues with the zoom of the map. Indeed the map could become too small for its content. Here is how I fixed it.

We create a variable responsiveZoom that checks the window size and give a zoom level accordingly. We add an event listener on window resize that zooms in or out on certain breaking points.

var responsiveZoom = (window.innerWidth < 768) ? 6.75 : 7.75;

window.addEventListener("resize", function() {
  if (window.innerWidth < 768) responsiveZoom = 6.75
  else if (window.innerWidth > 768) responsiveZoom = 7.75
  map.setZoom(responsiveZoom);
});

4. Create new markers

Next, I figured out how to add my own markers on the map.

We need to add the different markers corresponding to the different offices. Let's pick some random point for the example and here is how to proceed if we don't know latitude and longitude values:

Search Google Maps for our place, or set our marker anywhere.
Right-click on the marker and select "More info on this place".
Copy the latitude and longitude values

And here is how to add the markers in the code.

// inside mapInit function
var markerGrandPlace = new google.maps.Marker({
  position: new google.maps.LatLng(50.846759, 4.352446),
  map: map,
  title: "Brussels Grand-Place"
});

5. Create new events

On the custom markers, I had to add an event listener to zoom in the map and to display specific information about the office.
Here is how we can add such event.

// inside mapInit function
google.maps.event.addListener(markerGrandPlace, "click", function() {
  map.panTo(this.getPosition());
  map.setZoom(20);
});

It handles the zooming and we can add any code we want in order to show other piece of information. We won't cover that, there is one approach in the Codepen solution below.

6. Style your map

Remember the map had to follow some styling guidelines? Well Google Maps has this covered with an helpful tool: the Styling Wizard.

We can play around with the tool and get the desired level of info shown, the right colors, fonts etc.

If we want to change the markers icons, Google has a small collection of colors but we can use any image of course.

// inside mapInit function
var markerGrandPlace = new google.maps.Marker({
  position: new google.maps.LatLng(50.846759, 4.352446),
  map: map,
  title: "Brussels Grand-Place",
  icon: "http://maps.google.com/mapfiles/ms/icons/blue-dot.png"
});

7. Get your API key

In order to benefit from all these tools, I needed to get an API key from Google. Indeed the API is not free and given the quality of the service, it makes total sense.

We will need to create a billing account by clicking on get started and following the steps.
Once we have it, we can paste it in our call to the Google Maps API.

// replace 'YOUR_API_KEY' with your actual key
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
    async defer></script>

8. Restrict your key

The last step we need to pay attention to is the restriction of our key. We will be able to do it at the end of our key registration. It adds some protection to our API key by specifying where it could be used: A website, an app or a specific URL.

Live example on Codepen

Isn't an example worth a million words? 😄

Hopefully, this article will have teach you some about Google Maps API or helped you creating out-of-the-box maps.

Keep playing to learn! 🔥

If you find value in what I offer don't hesitate and buy me a coffee 😇

Note: I am sharing a specific case that you could reproduce or get inspired from. If you want more info about the Google Maps API and its possibilities, go for it!

How to add Emoji's in your website, using HTML, CSS or JavaScript

Rémy Beumier — Fri, 07 Feb 2020 08:46:10 +0000

Emoji's first appeared in 1997 on Japanese mobile phones. They are the descendants of the Emoticons; which are those basic text-based imitation of emotions ;-) – Yes, this is an actual example.

Emoji's grew in popularity years after years by being included in more and more computer, mobile devices, applications, games etc. They are so popular nowadays that they account for a part of the popular culture.

We are using those communication helpers, especially in the younger generations. But how do they work? To stay light, let's say that Emoji's are characters; very much like letters, punctuation marks or symbols.

👽 📞 🏠

Can you find this movie?

How did I integrate those Emoji's into my article? How could I do it anywhere on the web?

We will see different techniques available in HTML, CSS and JavaScript. They rely on two methods; copy-pasting and codepoint.
First find your Emoji, then follow the steps in the language you want.

HTML

The most straightforward way. You can paste the previously chosen Emoji.

<p>🔥</p>

Your other option is to use the codepoint of the Emoji and replacing U+ with &#x.

<p>&#x1F525</p>

CSS

In CSS you need to use the ::before or ::after pseudo-element coupled with the content property where you paste the Emoji as the value.

/* You need an HTML element with the class 'element' */
.element::before {
  content: "🔥";
}

The same way, you can use codepoint replacing U+ with \0.

/* You need an HTML element with the class 'element' */
.element::before {
  content: "\01F525";
}

JavaScript

In JavaScript you need to specify the innerHTML by pasting the Emoji.

/* You need an HTML element with the class 'element' */
document.querySelector(".element").innerHTML = "🔥";

Similarly, you can use the String method fromCodePoint mixed with the codepoint value where you replace U+ with 0x.

/* You need an HTML element with the class 'element' */
document.querySelector(".element").innerHTML = String.fromCodePoint(0x1F525);

Live example on Codepen

Isn't an example worth a million words? 😄

All major Browsers support the Emoji's so there is no excuse.
Try it yourself and use Emoji's all over the web!

Keep playing to learn! 🔥

If you find value in what I offer don't hesitate and buy me a coffee 😇

The movie described with Emoji's is E.T.

Note: There are plenty of options to have Emoji's integrated that I am not covering in this article. Icon fonts or SVG's are examples, it's up to you to decide what you will use.