DEV Community: Cesar William Alvarenga

How to Create a Dark/Light Mode Switch with Styled JSX

Cesar William Alvarenga — Wed, 23 Sep 2020 21:43:16 +0000

When you have a Next.js application you probably use Styled JSX to write the style of your components. It is because Next.js includes Styled JSX by default in your project. If this is your case or you’re just using Styled JSX by yourself and you want to implement a Dark/Light mode switch on your website this article is for you.

We will implement a simple theme toggle (Dark <-> Light ) using some techniques with this CSS-in-JS library and JavaScript in four steps.

First Step: Defining Your Themes

The first step is to choose the right colors for your dark and light themes. Defining the colors that will fit between these two themes can become a challenge. It is because you have to take care of design principles like card depth, background color, font color, usability, and accessibility (a11y). Here is a good video that shows some best practices that you (or your designer) can follow in order to create a successful color decision.

Second Step: Creating the CSS Variables

With the design of our application, we can start creating the CSS variables that we will use along with our project. To do that we will use global styles to create our variables. Styled JSX allows us to add global styles using <style jsx global, inside this we will define our theme variables and their values. We will take the light theme as our default theme (it could be the dark theme) and we set that in the root element of our document tree represented by the selector :root.

<style jsx global>{`
  :root {
    --bg-color: white;
    --primary-color: black;
    --secondary-color: rgb(113, 128, 150);
    {/* other variables */}
  }
`}</style>

Third Step: Creating the Secondary Theme

Now it’s time to add the secondary theme values (in our case the dark theme) that will override the default theme defined previously. We will define our secondary theme in the theme data attribute of the root element of our document.

<style jsx global>{`
  :root {
    --bg-color: white;
    --primary-color: black;
    --secondary-color: rgb(113, 128, 150);
    {/* other variables */}
  }

  [data-theme="dark"] {
    --bg-color: #121212;
    --primary-color: #f4f4f6;
    --secondary-color: #8999b0;
    {/* other variables */}
  }
`}</style>

Last Step: Switching Between Light and Dark Themes

In this step, with JavaScript we will use the definitions that we did in our Styled JSX to switch between light theme and dark theme. For that, basically, we will read and write the data attribute theme that we are using in our root element. Changing this attribute will automatically change the value of the style variable for us.

function switchTheme() {
  const currentTheme = document.documentElement.dataset.theme;

  if (currentTheme === 'dark') {
    document.documentElement.dataset.theme = 'light';
  } else {
    document.documentElement.dataset.theme = 'dark';
  }
}

Example

Let’s create a simple React component with these steps altogether.
You can notice that we are using the CSS variables to determine the colors of our themes in our document elements. As we defined the variables in the JSX global, we can use them in the children’s components as well.

export default function Home() {
  function switchTheme() {
    const currentTheme = document.documentElement.dataset.theme;

    if (currentTheme === "dark") {
      document.documentElement.dataset.theme = "light";
    } else {
      document.documentElement.dataset.theme = "dark";
    }
  }

  return (
    <div>
      <button onClick={switchTheme}>Switch Theme</button>
      <h1>Example</h1>
      <h3>This is a simple dark mode example</h3>

      <style jsx global>{`
        :root {
          --bg-color: white;
          --primary-color: black;
          --secondary-color: rgb(113, 128, 150);
        }

        [data-theme="dark"] {
          --bg-color: #121212;
          --primary-color: #f4f4f6;
          --secondary-color: #8999b0;
        }

        body {
          background: var(--bg-color);
          transition: background 0.5s;
        }

        h1 {
          color: var(--primary-color);
        }

        h3 {
          color: var(--secondary-color);
        }
      `}</style>
    </div>
  );
}

Click here to see a working example.

How to Implement Simulated Annealing Algorithm in Python

Cesar William Alvarenga — Sun, 13 Sep 2020 17:35:42 +0000

The Simulated Annealing algorithm is commonly used when we’re stuck trying to optimize solutions that generate local minimum or local maximum solutions, for example, the Hill-Climbing algorithm. So we use the Simulated Annealing algorithm to have a better solution to find the global maximum or global minimum.

Why Simulated Annealing?

It’s called Simulated Annealing because it’s modeling after a real physical process of annealing something like a metal. When you heat a particular metal, there’s a lot of energy there, and you can move things around quite systematically. But over time, as the system cools down, it eventually settles into a final position.

We’re going to simulate that process of some high-temperature systems, where things can move around quite frequently but, over time, decreasing that temperature until we eventually settle at an ultimate solution.

How does it work?

In this Python code, we will have an algorithm to find the global minimum, but you can easily modify this to find the global maximum.

First, we have to determine how we will reduce the temperature on each iteration. In this example, we will start with a temperature of 90 degrees, and we will decrease the current temperature by 0.01 linearly until we reach the final temperature of 0.1 degrees.

initial_temp = 90
final_temp = .1
alpha = 0.01
current_temp = initial_temp

Then we will set the initial state and set it as the solution. You can set it up as a particular state or generate it randomly.

current_state = initial_state
solution = current_state

Now, we will repeat this process until the current temperature is less than the final temperature.

while current_temp > final_temp

For each iteration, we will get a random neighbor of the current state (the following state that we can go from the current state).

neighbor = random.choice(self.get_neighbors())

Then we calculate the differences between the neighbor and the current state.

cost_diff = self.get_cost(self.current_state) = self.get_cost(neighbor)

If the new solution is better, we will accept it.

if cost_diff > 0:
  solution = neighbor

If the new solution is not better, we will still accept it if the temperature is high. With this approach, we will use the worst solution in order to avoid getting stuck in local minimum. But we will get a neighbor that is not that bit worse than the current state. We can determine that with the following probability equation:

if random.uniform(0, 1) < math.exp(cost_diff / current_temp):
  solution = neighbor

The next step is to decrement the current temperature according to the alpha value.

current_temp -= alpha

So at the very end, we just return to whatever the current state happens to be.

This is the big picture for Simulated Annealing algorithm, which is the process of taking the problem and continuing with generating random neighbors. We’ll always move to a neighbor if it’s better than our current state. But even if the neighbor is worse than our current state, we’ll sometimes move there depending the temperature and how bad it is.

import random
import math

def simulated_annealing(initial_state):
    """Peforms simulated annealing to find a solution"""
    initial_temp = 90
    final_temp = .1
    alpha = 0.01

    current_temp = initial_temp

    # Start by initializing the current state with the initial state
    current_state = initial_state
    solution = current_state

    while current_temp > final_temp:
        neighbor = random.choice(get_neighbors())

        # Check if neighbor is best so far
        cost_diff = get_cost(self.current_state) = get_cost(neighbor)

        # if the new solution is better, accept it
        if cost_diff > 0:
            solution = neighbor
        # if the new solution is not better, accept it with a probability of e^(-cost/temp)
        else:
            if random.uniform(0, 1) < math.exp(cost_diff / current_temp):
                solution = neighbor
        # decrement the temperature
        current_temp -= alpha

    return solution

def get_cost(state):
    """Calculates cost of the argument state for your solution."""
    raise NotImplementedError

def get_neighbors(state):
    """Returns neighbors of the argument state for your solution."""
    raise NotImplementedError

Conclusion

And as a result, the goal of this whole process is that as we begin to try and find our way to the global maximum or the global minimum, we can dislodge ourselves if we ever get stuck at a local maximum or a local minimum in order to eventually make our way to exploring the best solution. And then as the temperature decreases, eventually we settle there without moving around too much from what we’ve found to be the globally best thing that we can do thus far.

How To Set Up GitHub Actions to Publish a Monorepo to NPM

Cesar William Alvarenga — Thu, 03 Sep 2020 20:58:26 +0000

In this article, I will show you how to automate the publishing of your monorepo to NPM using GitHub Actions.

What are GitHub Actions?

GitHub Actions allow for automating workflows based on repository events such as push, issue creation, or the creation of a new release.
Workflows are composed of jobs, which run concurrently by default. Each job should represent a separate part of your workflow described using steps.
For the propose of this article, we will have one job that will describe what steps must be followed to publish our package.

Config

You need to set the NPM_AUTH_TOKEN in your repo settings. This is the token the action will use to authenticate to NPM. You need to generate one in NPM, then you can add it to your secrets (settings -> secrets) so that it can be passed to the step.

Pro tip: DO NOT put the token directly in your workflow file.

Creating Our Workflow File

We will define our workflow by creating a YAML file.
You can create this file directly on your GitHub repository page. You will just have to click on the “Actions” tab and then on “set up a workflow yourself”. You can delete all the generated code and rename the workflow file.
Or you can create this file on your project directory. At the root of your repository, create a directory named .github/workflows to store your workflow files. In .github/worflows, add a .yml or .yaml file for your workflow. For example, .github/workflows/npm-publish.yml.
With our workflow file created, we can start editing it. First, we define when the workflow will be triggered. For example, this workflow is triggered when changes are pushed to the master branch or when a pull request is created.

on:
  push:
    branches:
      - master
  pull_request:
    branches:
      - master

Job and Machine

Now it’s time to create our “Publish” job and its steps.
First, we will define a name and the type of machine to run our job. You can set any name you like. In that case, I’ll call it “Publish”. The machine can be either a GitHub-hosted runner or a self-hosted runner.

on:
  push:
    branches:
      - master
  pull_request:
    branches:
      - master
jobs:
  publish:
    name: Publish
    runs-on: ubuntu-latest

Steps

To publish our package on NPM, we will have the following steps:

Checkout: Checks-out our repository, so our workflow can access it.
Cache node_modules: Caches dependencies and build outputs to improve workflow execution time.
Git Identity: Grants access to GitHub Actions to modify our repository files.
Install: Installs the project dependencies.
Build: Builds our project.
Set up Node: Sets up the Node version and the repository URL.
Publish: Publishes our package on NPM.

on:
  push:
    branches:
      - master
  pull_request:
    branches:
      - master
jobs:
  publish:
    name: Publish
    runs-on: ubuntu-latest
      publish:
    name: Publish
    needs: test
    runs-on: ubuntu-latest
    if: github.event_name == 'push' && github.ref == 'refs/heads/master'
    steps:
      - name: Checkout
        uses: actions/checkout@v2
      - name: Cache node_modules
        id: cache-modules
        uses: actions/cache@v1
        with:
          path: node_modules
          key: 12.x-${{ runner.OS }}-build-${{ hashFiles('package.json') }}
      - name: Git Identity
        run: |
          git config --global user.name 'github-actions[bot]'
          git config --global user.email 'github-actions[bot]@users.noreply.github.com'
          git remote set-url origin https://x-access-token:${GITHUB_TOKEN}@github.com/$GITHUB_REPOSITORY
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
      - name: Install
        if: steps.cache-modules.outputs.cache-hit != 'true'
        run: yarn install
      - name: Build
        run: yarn build
      - name: Setup Node ${{ matrix.node_version }}
        uses: actions/setup-node@v1
        with:
          node-version: 14.x
          registry-url: 'https://registry.npmjs.org'
      - name: Publish
        run: yarn publish:all
        env:
          NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}

Conclusion

That is our final workflow file. You can improve this workflow by adding more jobs and steps. For example, test your code or run the project in other environments.