Image for post
Image for post
Photo made with Canva.

Why Do We Need WebAssembly?

Today web and mobile applications are the primary vehicles for providing software solutions to users around the world. Applications that we had only in desktop apps today are available for browsers like graphics, photo and video editors; music and video players; and so on.

To use a sophisticated tool in a web browser, sometimes you need to use a specific language, not JavaScript. We have to use a language that provides an easy way to build that type of application. …


AI optimization algorithms

A drawing of a brain with one side in black and white and the other in multiple colors.
A drawing of a brain with one side in black and white and the other in multiple colors.
Photo made with Canva.

The goal of linear programming is to minimize a cost function that has some number of variables (x₁, x₂, x₃) all the way up to x𝑛. Those variables are involved in things that I want to know the values to, and they might be multiplied by a coefficient and then added together.

With linear programming, we are just dealing with linear equations, so we’re not going to square or cube anything.

Also, we’ll have some linear constraints:

  • a₁x₁ + a₂x₂ + … + a𝑛x𝑛 ≤ b
  • a₁x₁ + a₂x₂ + … + a𝑛x𝑛 = b

With the following bound for each…


Image for post
Image for post
Designed by https://dribbble.com/Rvachev

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. …


AI Optimization Algorithm

Image for post
Image for post

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. …


Image for post
Image for post

One of the main purposes of Web Components is to provide encapsulation — being able keeping the markup structure and style hidden and separate from other code on the page so that different parts do not clash; this way the code can be kept nice and clean.

Shadow DOM gives us scoped style encapsulation and a means to let in as much (or as little) of the outside world as we choose.

But what if I want to make my component customizable for some style properties?

This article covers the basics of using CSS Custom Properties to penetrate the Shadow DOM and let your web component be customizable. …


Image for post
Image for post

In my last post, I showed you how to create, test, and build a monorepo repository. 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. …


How to use JSDoc to type your JavaScript code

Image for post
Image for post

TypeScript is not suitable for all projects, but if you want to have Typed JavaScript in your current project, this is probably a great strategy to start with.

We’ll see how to configure your project to have this support and how to use the JSDoc to add type to your code.

Let’s Create Our Project

Step 1: Install a bundler and the TypeScript on dev dependencies

First, we have to install the TypeScript. The TypeScript will check the types on our code based on the JSDoc. In this example, I will use the microbundle bundler to minify our code and produce ESM, CJS, UMD bundles.

$ npm init -y
$ npm i -D typescript microbundle

Step 2: Configure the TypeScript

We have to configure the TypeScript to allow .js files and to check them. For that, create the file tsconfig.json with the props "allowJs": true and "checkJs": true. With the declaration property, it will generate .d.ts files for every JavaScript file inside your project. The complete tsconfig.json


The simplest way to load an asset (JavaScript, CSS, Image) using JavaScript or TypeScript

Image for post
Image for post

Web apps often use third-party APIs to provide a feature on a specific route of the application. Many of these APIs are heavy and don’t have a package on NPM. The usual way to add these APIs on a web app is by adding it to the main HTML file. Using this approach will affect a lot the page load time. If it’s a JavaScript file, for example, it will download, compile, and execute the script.

What if we could avoid loading these APIs on the page first load? This would help the page content load quicker, reduce overall network data usage, and lower-end devices, reduce memory usage. …


Image for post
Image for post

I showed you the best practices to create a JavaScript SDK in last article. One of the best practices that I described was the importance of controlling the package’s version and share the codebase between them.

In this article, I’ll show how monorepo can help you to achieve those principles.

What is Monorepo?

In a nutshell, monorepo is a strategy where you will have all the application’s code in the same repository.

There are some cases that a monorepo fits well. For example, when you have an application with a mobile app, backend, frontend, and so on. …


Image for post
Image for post

Currently, making an SDK has become a common way for companies to make their services more useful to customers who need further customization. SDKs not only let you create new tools efficiently but also make the process easier for everyone involved because everything is pre-built. In this first article, we’re going to see the best tools to build your JavaScript SDK.

What is an SDK?

A software development kit (SDK) is a set of tools that provides a developer with the ability to build a custom app that can be added on, or connected to, another program. …

About

Cesar William Alvarenga

Software Engineer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store