In this article, you will learn how these tools work by building an AI application to generate images.

Create the application

We'll start by creating a React + TypeScript application using Vite. Run the following command in your terminal:

npm create vite@latest

You'll then have to answer three questions so Vite understands how to configure your project.

✔ Project name: aimages
✔ Select a framework: › React
✔ Select a variant: › TypeScript

Lastly, you need to install and configure TailwindCSS.

Run the 2 commands below (in that order). The first command installs tailwindcss and its peer dependencies. The second command generates the tailwind.config.js and postcss.config.js files.

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init -p

Now open the tailwind.config.js file and modify the code as follows:

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

The above code configures TailwindCSS, specifying which files the framework should scan for class usage. It's set to check the index.html file and any JavaScript or TypeScript files in the src directory. It also lets you customize the theme, colors, fonts, and many other things.

Lastly, open /src/styles.css and add the TailwindCSS directives at the top of the file:

@tailwind base;
@tailwind components;
@tailwind utilities;

You're done with the project configuration! Now, upload the project on GitHub before proceeding to the next stage. You'll see later why!

The problem with building user interfaces

Before going further, let's highlight the main issues with building user interfaces.

One of the main issues with building user interfaces is that you don't have live visual feedback when building them. You make the changes in your editor, save them, and preview them in the browser. Then, if you're not happy with the changes, you have to repeat the process.

That results in a lot of switching between the IDE and the browser. While it might seem like a minor inconvenience, those seconds of waiting for the browser to refresh, plus the mental shift required, add up over time. Over the course of a day, this switching results in a substantial amount of wasted time.

It also results in a break of flow. Every disruption (like switching between applications) breaks the flow, leading to longer task completion times and possibly more errors.

On top of that, collaborating with others can be tedious and time-consuming. The usual way of collaborating involves working on the app, pushing the changes to GitHub, and deploying them. Only after that can the other collaborators check your work. That results in a substantial amount of time lost on unproductive things, such as waiting for the changes to deploy. So, the traditional approach can be quite cumbersome and inefficient.

In this article, you'll see a complementary tool you can use with your favorite IDE to build user interfaces better and faster.

A visual React IDE

Codux is a free visual IDE for React + TypeScript applications. It enables you to work on the projects in real-time through a visual editor. All the changes you make to the component's properties, styles, and structure (JSX) are reflected automatically on the screen.

Important mention: Codux is not meant to replace your favourite IDE. It's a complementary tool that you can use alongside your IDE.

You can build and modify your interfaces using the panels and controllers provided by Codux. As the image shows, you can set CSS properties & classes and different element states, for example.

And, of course, you also have the code editor at the bottom if you want to make specific changes by writing code.

Note: Whether you make the changes using the visual editor, the built-in code editor, or your usual IDE, they will always be in sync!

Codux also supports all the popular styling solutions such as CSS, Sass, CSS/Sass modules, Stylable, and TailwindCSS. The application we're building uses TailwindCSS, for example.

Component playground

Another cool feature of Codux is the playground feature that enables you to share your work (components) with others.

In the playground mode, people can view and edit your components without setting up a local development environment and the other prerequisites.

Let's see it in action. At the beginning of the article, I mentioned that you must upload the project on GitHub. The reason is that the Playground requires your project to be hosted on GitHub.

To share your board (or component), click the "Share" button on the right.

Mention: The shared board is public, which means anyone with the link can see it. Be careful.

Codux will then ask you to create a link name for the board. Choose a name and click the button "Create Link" (the first time you do it) and "Publish" (afterwards).

Mention: Each time you make a change, you need to click the "Update Link" button before sharing the board. Otherwise, your changes won't be applied & visible on the shared board.

You can now copy the link and share it with other people. When they access the link, they'll see the online version of Codux (see the picture below).

Anyone with the link to the shared board can see it and make changes, including the text, colors, images, and even the code. That makes it an ideal tool for collaborating, where everyone can share & apply their feedback in a simple and direct way.

This way, developers can focus on the work that matters rather than wasting valuable time pushing and pulling changes to/from each other.

It's important to mention, though, that the changes on the shared board don't affect the original board and won't be applied to it. That would be a cool feature, though!

Add the project to Codux

Let's continue by importing the project we created earlier into Codux. Click on the "Open Local Project" option and select the project folder.

After that, Codux prompts you to run the configuration scripts, which install the required package to work on the project in this IDE.

Once the installation is done, click "Scan for components" so Codux imports all the components.

Then, you can see all the available components in the sidebar. In our case, we only have one - App - since it's a new project.

You can create new components by clicking the "+ New Component" button, but more on that later.

As you might've observed, there are "components" and "boards". A "Board" is a concept introduced by Codux, and it represents a fixture for your components so that Codux can automatically render it and allow you to edit it visually.

To create a "board", click on the component and then click the button "+ Create Board". That'll open a menu where you can set the starting point, the board name, and the board path.

You can leave the default options and click "Create".

And this is the board view, where you can edit the components visually.

Configure TailwindCSS

For TailwindCSS to work in Codux, you need to perform some customizations in addition to the Tailwind setup process you did at the beginning of the article.

Create the codux.config.js in the root folder of the project, and add the following object:

{
  "$schema": "https://wixplosives.github.io/codux-config-schema/codux.config.schema.json",
  "boardGlobalSetup": "./src/_codux/board-global-setup.ts"
}

Then, create the board-global-setup.ts in the ./src/_codux folder and add the following import:

import "../index.css";

Done! Now, you can see the TailwindCSS classes in the Codux IDE.

For more information about this configuration, check this link.

Build the app

In the following sections, we'll start building the application.

Create the components folder

Let's start by creating a component folder for all the components. You can either do it from your IDE, terminal, or Codux. This is how you can do it from Codux:

Click the highlighted icon to see the project files. After that, create the folder as you would create it on your machine. Right-click on the src folder and click New Folder.

Creating components from Codux

If you want to create components using the interactive process from Codux, you need to set the components path. You can do that by adding this code in codux.config.json:

{
  "$schema": "https://wixplosives.github.io/codux-config-schema/codux.config.schema.json",
  "boardGlobalSetup": "./src/_codux/board-global-setup.ts",
  "newComponent": {
    "componentsPath": "src/components"
  }
}

Now, you can create components using the visual interface.

Layout component

Create the Layout component in the components folder. We'll use the layout on all the pages.

You can follow the next steps using your usual IDE or Codux.

Tip 💡: You're fine either way because the code is automatically in sync between the two. Whether you use Codux or your editor, both will contain the same code without you having to do anything. That's neat!

Now open the Layout component and add the following code:

type LayoutProps = {
  children: React.ReactNode;
};

export default function Layout({ children }: LayoutProps) {
  return (
    <>
      <main>{children}</main>
    </>
  );
}

Refactor App.tsx

Then go to the App.tsx file and replace the content with the following code:

import Layout from "./components/Layout";
import "./App.css";
import { useState } from "react";

function App() {
  const [inputValue, setInputValue] = useState("");
  const [imageURL, setImageURL] = useState("");
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<null | string>(null);

  const fetchImage = async (prompt: string) => {
    const response = await fetch("http://localhost:3000/api/genimg", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ value: prompt }),
    });

    if (response.ok) {
      const data = await response.json();

      if (Array.isArray(data) && data.length > 0) {
        return data[0];
      }

      throw new Error("Unexpected server response");
    } else {
      throw new Error(response.statusText);
    }
  };

  const onInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
    setInputValue(e.target.value);
  };

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    setLoading(true);
    setError(null);

    try {
      const url = await fetchImage(inputValue);
      setImageURL(url);
    } catch (err) {
      if (err instanceof Error) {
        setError(err.message);
      } else {
        setError("An unexpected error occurred");
      }
    } finally {
      setLoading(false);
    }
  };

  return (
    <>
      <Layout>
        <section>
          <div>
            <div>
              <h1>PromptPix AI</h1>
              <p>
                Dive into the world of AI-driven creativity with PromptPix AI,
                where your words become vivid visuals. Simply input your idea,
                and watch as our advanced algorithms craft the image you
                envisioned.
              </p>
            </div>
            <form onSubmit={handleSubmit}>
              <div>
                <label htmlFor="prompt">Image prompt</label>
                <textarea
                  id="prompt"
                  placeholder="Enter your prompt"
                  value={inputValue}
                  onChange={onInputChange}
                />
              </div>
              <button type="submit" disabled={inputValue.length === 0}>
                Generate
              </button>
            </form>
          </div>
          <div>
            {loading && (
              <div>
                <p>Your image is being generated...</p>
                <div>
                  <div>
                    <div>
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="44"
                        height="44"
                        viewBox="0 0 24 24"
                        strokeWidth="2"
                        stroke="currentColor"
                        fill="none"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                      >
                        <path
                          stroke="none"
                          d="M0 0h24v24H0z"
                          fill="none"
                        ></path>
                        <path d="M12 6l0 -3"></path>
                        <path d="M16.25 7.75l2.15 -2.15"></path>
                        <path d="M18 12l3 0"></path>
                        <path d="M16.25 16.25l2.15 2.15"></path>
                        <path d="M12 18l0 3"></path>
                        <path d="M7.75 16.25l-2.15 2.15"></path>
                        <path d="M6 12l-3 0"></path>
                        <path d="M7.75 7.75l-2.15 -2.15"></path>
                      </svg>
                    </div>
                  </div>
                </div>
              </div>
            )}

            {imageURL && !loading && (
              <div>
                <p>Find your generated image below</p>
                <img
                  src={imageURL}
                  width={600}
                  height={600}
                  alt="Generated image"
                />
              </div>
            )}

            {!imageURL && !loading && (
              <div>
                <p>Your image will appear below</p>
                <div>
                  <div>
                    <div>
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="44"
                        height="44"
                        viewBox="0 0 24 24"
                        strokeWidth="2"
                        stroke="currentColor"
                        fill="none"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                      >
                        <path
                          stroke="none"
                          d="M0 0h24v24H0z"
                          fill="none"
                        ></path>
                        <path d="M15 8h.01"></path>
                        <path d="M11.5 21h-5.5a3 3 0 0 1 -3 -3v-12a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v5.5"></path>
                        <path d="M18 18m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path>
                        <path d="M20.2 20.2l1.8 1.8"></path>
                        <path d="M3 16l5 -5c.928 -.893 2.072 -.893 3 0l2 2"></path>
                      </svg>
                    </div>
                  </div>
                </div>
              </div>
            )}

            {error && <div>{error}</div>}
          </div>
        </section>
      </Layout>
    </>
  );
}

export default App;

This component contains the barebone application without any style applied.

Note: Everything is in the App file for illustrative purposes. It's easier to showcase the tool this way. You'll see the final application on GitHub.

Style the app with Codux

Let's start by styling the Layout component first. Double click App in the Elements tab (left-hand side column).

That opens a new tree, where you should see the Layout component. Double click on Layout, and then select main.

The Elements tab shows you all the HTML elements from your code.

To add Tailwind classes to HTML elements, click the "Properties" icon from the right-hand side. Then, search for the "className" property.

Once there, add the following Tailwind classes:

flex min-h-screen flex-col justify-center items-center

These classes set up a flex container with a minimum height equal to the viewport height, arrange its children in a column, and center them vertically and horizontally within the container.

You should see the changes reflected immediately, both visually and in the code.

Pretty cool, right?

Now, let's switch to your favorite IDE to see how easy it is to use them together. Open the index.css file and add this block:

body {
  @apply bg-gray-50;
}

App component

Continue by adding the following classes to the section element from the App component:

container flex flex-col gap-6 py-8 md:max-w-[64rem] md:py-12 lg:py-24

These classes modify the section to be a flexible container with column direction, vertical gap between child elements of 6 units, vertical padding of 8 units (increased to 12 units on medium screens and 24 units on large screens), and a maximum width of 64rem on medium and larger screens.

Similarly, apply the following classes to the first div element:

bg-white shadow-md rounded border border-slate-200 p-14 text-center

These TailwindCSS utility classes apply a white background, a medium shadow, rounded corners, a slate-colored border, padding on all sides of 14 units, and center-aligned text.

This is how the application looks up to this point.

The next steps are as follows:

• stylize the heading + description

• stylize the form

• stylize the part where the image will appear

• create the API

Let's style the heading and description through your IDE (VS Code, in my case) to see the auto-sync in action.

Replace the 2nd div element with the following code:

<div className="mx-auto flex w-full flex-col md:max-w-[58rem]">
   <h1 className="font-heading text-2xl mb-4 sm:text-4xl text-center">
      PromptPix AI
   </h1>
   <p className="text-sm sm:text-base text-center mb-4">
      Dive into the world of AI-driven creativity with PromptPix AI,
      where your words become vivid visuals. Simply input your idea,
      and watch as our advanced algorithms craft the image you
      envisioned.
   </p>
</div>

The screenshot below illustrates how your code should look:

If you navigate back to Codux, you will see the changes applied in the visual area and the code editor from the bottom of the page.

Similarly, all the changes made in Codux are available in your IDE.

As an exercise, add the following classes to these elements:

• the form element - space-y-6

• the div element inside the form - flex flex-col items-center gap-4

• the label element - text-sm sm:text-base

• the textarea element - border border-slate-200 rounded p-2 w-3/4 h-32 resize-none

• the button element:

`${
inputValue.length === 0
? "bg-white text-gray-800 font-semibold py-2 px-4 border border-slate-400 rounded shadow opacity-50 hover:opacity-50 cursor-not-allowed"
: "bg-white hover:bg-slate-100 text-gray-800 font-semibold py-2 px-4 border border-slate-400 rounded shadow"
}`

This is how the application looks like with all the above classes applied:

Looks pretty good already, right?

The last step involves styling the part where the generated image will appear. We'll make the initial div element (that's displayed before entering any prompt) a flex container with its children arranged in a column, centered horizontally, with a gap of 24px between each child and a top margin of 48px - flex flex-col items-center gap-6 mt-12.

You can add them as usual using the "className" field from Codux.

Apply the same Tailwind classes to the other 2 div elements that display the loading state and the generated image.

Lastly, stylize the error:

{error && (
<div className="text-center w-1/2 mx-auto bg-red-500 mt-2 rounded border border-red-800">
   {error}
</div>
)}

Now you're done with the user interface!

Codux offers much more

In building this application, you mostly applied classes and visualized the results in real-time. However, Codux offers much more.

With Codux, you can test your application on multiple viewports and make the changes live for each viewport.

Besides that, we added the classes manually for each element. But you can also use the "Computed Styles" tab to stylize the elements. Instead of writing code manually, you can style elements interactively.

A favorite feature of mine is the ability to open the code for a specific element. You can select the particular element, right-click on it, and open it in the code editor/IDE.

The image illustrates how Codux highlights the relevant code for the selected element. Neat, right?

As you can see, there are lots of cool features in Codux. I encourage you to download it and explore it. It's free!

Some valuable resources to help you:

• Build React Apps with Codux Visual IDE for Faster UI Workflow

• Learn How to Build a Standout Portfolio Website Using Codux

• Craft a Real-Time Weather App From the Ground Up With Codux

• Learn All About Visual Component Styling, Including Class Creation and Shaping State, Variables and Computed Styles

The Backend Code for Generating the Image

You are probably using a different programming language & framework than me. Instead of wasting your time taking you through a painful process of building the backend in a technology you're not interested in, I'll share the code for the API route straightaway.

import express, { Request, Response } from "express";
import Replicate from "replicate";
import cors from "cors";

const app = express();
const port = 3030;

app.use(express.json());
app.use(cors());

app.options("/api/genimg", (req: Request, res: Response) => {
  // Pre-flight request. Reply successfully:
  res.status(200).end();
});

app.post("/api/genimg", async (req: Request, res: Response) => {
  const { value } = req.body;

  try {
    const replicate = new Replicate({
      auth: process.env.REPLICATE_API_TOKEN || "",
    });

    const result = await replicate.run(
      "stability-ai/stable-diffusion:a00d0b7dcbb9c3fbb34ba87d2d5b46c56969c84a628bf778a7fdaec30b1b99c5",
      {
        input: {
          prompt: value,
          image_dimensions: "1024x1024",
          num_inference_steps: 50,
          num_outputs: 1,
          guideance_scale: 7.5,
          prompt_strength: 0.8,
          scheduler: "KarrasDPM",
        },
      }
    );

    res.status(200).json(result);
  } catch (error) {
    console.error("Failed to generate image. Error:", error);
    res.status(500).json({ message: "Failed to generate image" });
  }
});

app.all("/api/genimg", (req: Request, res: Response) => {
  res.status(405).json({ message: "Method Not Allowed" });
});

app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}`);
});

This TypeScript code sets up an Express server that listens on port 3030 and has CORS enabled. It defines three routes, all for the path "/api/genimg". The OPTIONS route is for handling pre-flight CORS requests. The POST route accepts a JSON body with a "value" property, uses it as a prompt to generate an image using the Replicate API, and returns the result. If there's an error during this process, it logs it and returns a 500 status code with a failure message. The ALL route is a catch-all that returns a 405 status code, indicating that the method used is not allowed. The server listens on the specified port and logs a message to the console when it's running.

This way, you can adapt the code to your programming language & framework of your choice.

Note: You can check the whole application code (both server and client) by accessing this GitHub link.

An ending note

Building applications comes with challenges that can slow down the development process and make collaboration difficult. One of the main challenges is the constant need to switch between different tools. That takes up considerable time and can break your concentration and flow. Moreover, collaborating with others is cumbersome, often requiring several steps before others can test your work.

This is where Codux steps in to make the whole process smoother and more efficient. Codux enables you to visualize changes as you make them without constantly switching between multiple tools. Moreover, it offers a visual user interface that makes it easier to build applications by allowing you to create things with a couple of clicks. But perhaps most importantly, it allows for real-time collaboration, enabling people to work together seamlessly.

Before closing, I want to mention again that Codux is not here to replace your IDE and other tools you might use. Think of Codux as another tool in your developer toolbox.

Disclaimer: This article is sponsored by Wix.

The article was originally published on my blog - catalins.tech

The issues with the traditional backend

The conventional approach to developing full-stack applications involves the tedious and time-consuming process of building the entire application from scratch.

The backend development requires setting and configuring servers, implementing the business logic, and managing databases. Building and maintaining a complex backend from scratch would take substantial resources. So why reinvent the wheel when you can use an existing solution that you can tailor to your needs with code? But more on that later.

It's important to mention that a custom-built backend might be the most appropriate solution in specific scenarios. However, in most cases, an existing solution that you can tailor to your needs through code is more than sufficient. It allows you to speed up the development process and move faster by automating the most tedious work. It also frees up resources so you can focus on business-critical tasks. Besides that, you do not need to choose one or the other. You can have the best of both worlds, as you will see later.

The main pain points are as follows:

• complex and lengthy development process

• a substantial amount of resources required

• slow time-to-market

• maintenance required

• scalability and security are difficult

Headless API solutions

The alternative to custom-built backend applications are the Headless API solutions. A Headless API is an architectural design where the user interface (frontend) is decoupled from the business logic and data storage (backend). The backend exposes the data through an API. The frontend then uses the API to communicate with the backend.

There are multiple advantages to this approach:

1. The obvious one is the faster development process, since you only need to develop and focus on one part of the application - the frontend. The faster development process also enables you to reduce the time required to enter the market, which is essential in such a competitive landscape.

2. Since you are using an existing solution for your backend, you save valuable resources (finances and time) that you can use on other tasks that are more critical to the business.

3. Another advantage is that you have complete freedom when choosing which frontend technologies to use since the application parts are decoupled.

4. The Headless APIs are developed and maintained by teams of developers who focus exclusively on those APIs, which means these solutions might provide better security and scalability than a custom-built solution.

But now you might ask: "Where do I find these APIs?".

That's where Wix Headless comes into the picture. Wix recently released their Headless APIs, enabling developers to implement Wix's robust business solutions using composable APIs and SDK. You can use them with any tech stack across different platforms and devices.

Some of the current available Headless APIs are as follows:

• bookings - The "bookings" API enables you to integrate booking features into your app. It provides features like scheduling and managing appointments, syncing staff calendars, setting up automated reminders, and more.

• eCommerce - This API allows you to manage orders, inventory, shipping and finances from one central place. It provides secure payments, optimized checkouts and automated sales taxes.

• CMS - The CMS solution offers an API for creating and managing content.

• events - It allows you to build applications for hosting in-person or online events, sell tickets, manage guests, accept secure payments, and more.

• pricing plans - You can use this headless API to create a members-only platform and offer exclusive access.

You can check all APIs here.

It's important to emphasize that you do not need to choose between the Headless APIs and a custom-built backend. Instead, you can have the best of both worlds since the Headless APIs can be integrated with other internal or 3rd party services.

Customize the APIs

I do not believe in one-size-fits-all solutions. At one point, you will want to modify or extend the functionality through code. You can do that by using the Wix Headless SDK.

You can use the SDK by installing the required packages:

• @wix/api-client - the package is required to create the API client and to set up the OAuth. When you create the API client, you must provide the modules you want to use (e.g. the eCommerce Headless API).

• @wix/{api-name} - the api-name should be replaced with the name of the Headless API you need (e.g. "@wix/ecom", "@wix/pricing-plans", "@wix/bookings" and so on). These packages return the modules you pass to the API client configuration and the ones that allow you to interact with the chosen Headless API.

That's all you need to interact with the Headless APIs.

Headless API Examples

In this section, you will see various demos and their code. They are basic, and their sole purpose is to illustrate the basic usage of the Headless APIs.

Headless CMS

One of the available Headless APIs is the CMS API which provides a user-friendly dashboard for creating and managing content. Let's say we have a landing page for the following APIs:

• bookings

• eCommerce

• events & tickets

• subscriptions

The app makes a request to the CMS backend to fetch information such as the title, slug, and description for each Headless API (see them at the bottom of the page). This is what the landing page looks like:

And here's the code that fetches the data:

import Link from 'next/link'
import Cookies from 'js-cookie';
import { useEffect, useState } from 'react';

import { createClient, OAuthStrategy } from '@wix/api-client';
import { items } from '@wix/data';

const myWixClient = createClient({
  modules: { items },
  auth: OAuthStrategy({
    clientId: `<your-client-id>`,
    tokens: JSON.parse(Cookies.get('session') || null)
  })
});

export default function Examples() {
  const [examples, setExamples] = useState([]);

  async function fetchExamples() {
    const examples = await myWixClient.items.queryDataItems({ dataCollectionId: 'examples' }).ascending('orderId').find();
    setExamples(examples.items);
  }

  useEffect(() => { fetchExamples(); }, []);

  return (
    <footer>
      {examples.map((example) => (
        <Link href={example.data.slug} key={example._id}>
          <section>
            <h2>{example.data.title} <span>-&gt;</span></h2>
            <p>{example.data.description}</p>
          </section>
        </Link>
      ))}
    </footer>
  )
}

The first step involves adding all the required imports at the top of the file. The next step is to create and configure the Wix API client. It requires you to specify the modules you want to use (items from the @wix/data package in this case) and the clientId for the OAuth strategy.

After that, you use the Wix client to fetch and display the data on the page. As the figure illustrates, it's a simple application. However, you can check a more complex application using the Headless CMS here.

Bookings API

Another API available is the bookings API, which enables you to integrate booking features into your applications. For example, you can set up flexible booking features based on location and availability, schedule or manage appointments, sync staff calendars, set up automated reminders and more.

The figure below illustrates an example using the bookings API, where users can select a service and a time slot.

After you choose a service and a time slot, you are redirected to a new page where you need to enter your details for the purchase. Once all the details are entered, you can add the purchase to the cart or book it straight away.

In this case, I clicked the "Add to Cart" button, which took me to the cart page. You can enter a promo code or add a note on this page. Once you are done, you can click the "Checkout" button to finalize the purchase.

The code is similar to the previous example in the sense that you need to create the Wix client and pass the appropriate modules. After that, it's the usual React code.

import Cookies from 'js-cookie';
import { useEffect, useState } from 'react';

import { createClient, OAuthStrategy } from '@wix/api-client';
import { availabilityCalendar, services } from '@wix/bookings';
import { redirects } from '@wix/redirects';

const myWixClient = createClient({
  modules: { services, availabilityCalendar, redirects },
  auth: OAuthStrategy({
    clientId: `<your-client-id>`,
    tokens: JSON.parse(Cookies.get('session') || null)
  })
});

export default function Booking() {
  const [serviceList, setServiceList] = useState([]);
  const [availabilityEntries, setAvailabilityEntries] = useState([]);

  async function fetchServices() {
    const serviceList = await myWixClient.services.queryServices().find();
    setServiceList(serviceList.items);
  }

  async function fetchAvailability(service) {
    const today = new Date();
    const tomorrow = new Date(today);
    tomorrow.setDate(tomorrow.getDate() + 1);

    const availability = await myWixClient.availabilityCalendar.queryAvailability({
      filter: { serviceId: [service._id], startDate: today.toISOString(), endDate: tomorrow.toISOString() }
    }, { timezone: 'UTC' });
    setAvailabilityEntries(availability.availabilityEntries);
  }

  async function createRedirect(slotAvailability) {
    const redirect = await myWixClient.redirects.createRedirectSession({
      bookingsCheckout: { slotAvailability, timezone: 'UTC' },
      callbacks: { postFlowUrl: window.location.href }
    });
    window.location = redirect.redirectSession.fullUrl;
  }

  useEffect(() => { fetchServices(); }, []);

  return (
    <main>
      <div>
        <h2>Choose a Service:</h2>
        {serviceList.map((service) => {
          return <section key={service._id} onClick={() => fetchAvailability(service)}>{service.name}</section>;
        })}
      </div>
      <div>
        <h2>Choose a Slot:</h2>
        {availabilityEntries.map((entry) => {
          return <section key={entry.slot.startDate} onClick={() => createRedirect(entry)}>{new Date(entry.slot.startDate).toLocaleString()}</section>;
        })}
      </div>
    </main>
  )
}

Even though the example application is quite basic, it demonstrates how valuable and powerful the headless APIs are. They provide many features out of the box without requiring you to do any backend work.

Moreover, it provides a visual interface for managing the backend data. In this example, you can add, edit or remove services using the Wix dashboard. It also enables you to accept payments and manage orders. As a result, one is not required to be a developer to manage the backend.

With that being said, you can check more complex applications using the Headless Bookings API here:

• Bookings app for a professional coach

• Bookings app for a personal trainer

More examples

This article presented two example applications to illustrate the usage of the APIs. All the examples shown in this article, and some more, are available in this repository. Moreover, there are a handful of production-ready templates you can use as a starter. Check them out here. They are more complex, and thus, they show how to build a production-ready application using these APIs.

Conclusion

The Headless APIs are excellent alternatives to building custom backend applications from scratch. However, you do not always have to choose between the two solutions. If you already have a custom-built backend, you can integrate these APIs into your existing backend application without requiring a total overhaul.

One of the most important benefits of using an existing solution is saving valuable resources such as finances and time. These resources can then be spent on more business-critical tasks.

In addition to that, these Headless APIs reduce or even eliminate the complex and lengthy development cycles. As a result, your product can reach the market sooner. The faster the time-to-market, the better.

Lastly, they are built and maintained by teams of experienced developers. They are made with scalability and security in mind. That means you do not have to worry when the business gets bigger and requires more resources & better security because they handle that for you.

In conclusion, whatever approach you take, you can be assured that these APIs will provide many benefits and save valuable resources.

The article was originally posted on my blog - Rethink Full-Stack Development: Is a Custom Backend the Best Choice?

That's the case with developers. However, sometimes it can be difficult to find remote developer jobs. As a result, below you can see 7 websites to find remote developer jobs:

• We Work Remotely
• Stackoverflow Remote Developer Jobs
• Remote Jobs
• Remote OK
• Remote Developer Jobs
• Remote Leads
• Remotive
• Remote Leaf
• Companies with open remote positions

Hopefully, the list helps you find a remote developer position. If you find it useful, share it with others!

These repositories include information about:

• How the web works (DNS, HTTP, and many more subjects)
• Data Structures and Algorithms
• How to design large-scale systems (System Design)
• Application Security
• JavaScript Algorithms

1. Coding Interview University

The Coding Interview repository is one of the most comprehensive resources for interview preparation. The repository started as a study plan of the repository owner, which he used to become a software engineer.

In this repository, you can find information about Data Structures, Algorithms, Dynamic Programming, Object-Oriented Programming, Design Patterns and more.

I recommend you to check the repository here and explore it on your own. Be aware that it's comprehensive and you do not have to learn everything or everything at once. Nonetheless, the resource is extremely handy to prepare for interviews.

2. Tech Interview Handbook

Another useful resource is the Tech Interview Handbook. It covers information about technical interviews but not only. It also covers the job application (resume, cover letter), the interview process (behavioural questions, what questions to ask in the interview), and the post-interview (negotiation).

Thus, you learn more than just Data Structures, Algorithms and other technical subjects. The Tech Interview Handbook is a handy resource, and I encourage you to check it here.

3. The System Design Primer

For small side projects, we might get away without planning or too much thinking. However, building large-scale systems is a different game. Learning how to design scalable systems will help you become a software engineer.

Thus, the System Design Primer repository is a collection of materials and resources from the internet. The owner of the repository put together resources and materials from different sources. Besides, the repository is continuously updated, so keep an eye on it!

The repo contains a study guide, how to approach system design questions, and solutions to the questions. I highly recommend it, and I use it as well to learn more about designing scalable applications.

4. Interview Resources

The Interview repository does not have a description or a guide on how you should use it. It only lists links to other resources, and it groups these links by their topic. For instance, there is the Algorithms section that includes:

• Books
• Coding Practice
• Guides
• Misc

I like this repository in particular, because of the number of resources included. Also, I like that they are categorised by type. Besides that, it deserves an extra point for having similar repositories at the end. That is additional resources to prepare for your interviews. Do check out the repository!

5. How To Secure Anything

Security was, is, and will always be an essential topic when building applications. If your applications are not secure, it can result in disastrous consequences.

Therefore, security is not something to take lightly. As a result, here we have the repository How To Secure Anything. The nice thing about this repository is that the information applies to securing anything, not only applications. The repository owner claims to "aim to document a process for securing anything, whether it's a medieval castle, an art museum, or a computer network".

The repository is very well laid-out, and it includes a lot of extra materials to supplement your learning. I cannot recommend it enough!

6. How The Web Works

In the interview for my first developer job, I was asked: what happens when you type a URL in a browser?. Probably, you encountered the same question, or maybe you will in the future.

Thus, you can find the answer to such questions in the repo called How Web Works. You can find information about how DNS, HTTP protocol and server work or about DOM Tree, Render Tree, page painting and so on.

It is a handy repository to learn the basics of how the web works. Moreover, the repository includes additional links to explore some subjects in-depth.

7. JavaScript Algorithms

The JavaScript Algorithms repository is more tailored to JavaScript positions. Although, if you understand the concepts, and know how to implement them in JavaScript, you will most likely know how to implement them in other languages too.

Each Data Structure and Algorithm comes with its separate README, and it also includes links to further material. Thus, if you do not understand a concept, you can always follow the additional material for extra information.

Although I want to mention that some information might be scarce, and you might need additional learning material; nonetheless, the repository is excellent to practice Algorithms and Data Structures.

Conclusion

I hope these resources help you ace your next technical interview. The resources from the article are super helpful; especially if you use them together.

The list from the article is not exhaustive, but it should cover anything you might encounter in an interview. As always, I am open to suggestions. Thus, if you know other great resources, feel free to drop them in the comments!

If you enjoyed the article, subscribe to our newsletter above to stay up-to-date with all the articles! Additionally, it would help if you would share the article on social media. Thank you!

In this article, you can find a list of resources that will help you improve your CSS skills and speed up CSS development. More specifically, there are twelve fantastic resources!

Some of them are learning resources from where you can learn the CSS fundamentals, whereas others are generators that help you save time! Without further ado, let's see the resources!

1. Awesome CSS Learning

"Awesome CSS Learning" is a GitHub repository that contains links to amazing CSS learning resources. This resource is mainly about the language and its modules.

You can find links to learn concepts such as:

• Fundamental concepts
• CSS units
• Selectors
• Custom properties (aka CSS variables)
• Layout
• Animation
• Related

If you are looking for resources to learn the CSS fundamentals, this repository is excellent!

2. CSS Waves Generator

This CSS generator allows you to create SVG waves, which you can use in any way you want.

You can choose:

• the shape of the waves
• the direction
• the colour
• the opacity
• the "curviness"

It's a nice, handy tool that you can use to generate some section separators or art for your website.

3. Magic of CSS

This GitHub repository is the repository behind the Magic of CSS website. According to its GitHub description, it's a CSS course, and it's for web developers who want to be "magicians".

The "Magic of CSS" course is split into six chapters:

• Chapter 1: The Box
• Chapter 2: Layout
• Chapter 3: Tables
• Chapter 4: Color
• Chapter 5: Typography
• Chapter 6: Transitions

Essentially, this course teaches you the fundamentals of CSS. One of the best thing about this course is that it includes links to further material. For instance, if you want to learn more about a concept, you can use the linked resources.

4. CSS Separator Generator

Split your website section with style! This CSS generator allows you to generate fancy section separators.

You can customise the separator, and you can see the preview in real-time. Once you decide what separator to use, the website gives you the HTML and CSS.

The above figure illustrates the generator in action. It's a super handy tool that improves the design of your website!

5. Spin Kit

SpinKit is a CSS package that allows you to use simple animated loading spinners. It only uses transform and opacity to create smooth, nice looking and easily customisable animations.

To use SpinKit, you have to install it via bower or npm. After that, all you have to do is to use the class you want for your animation. For instance, if you wish to use the "pulse" animation, you need to use the sk-pulse class:

<div class="sk-pulse">
.... your code
</div>

It's a handy CSS package, and you can see all the animations on the SpinKit's official website. You can test all animations and see how they look before using them.

6. Shadow Generator

This shadow generator application allows you to create and customise shadows (box-shadow). See a picture with the generator below!

You can customise the:

• layers of shadows
• final transparency
• final vertical distance
• final blur strength
• reduce spread

It's a great resource because you can see how the shadow looks in real-time. If you want to create beautiful shadows, I recommend you this generator.

7. CSS Hover

The "CSS Hover" package is a collection of hover effects you use on links, buttons, logos, SVGs and more. You can use and modify them as you see fit!

You can use this package in three ways:

• install it via npm
• install it via bower
• download the CSS file directly

If you do not want to install it or add all the animations to your project, simply open the CSS file and copy only the effect you want. You can check each hover effect on the Hover's official website.

8. CSS Grid Generator

The CSS grid generator allows you to create a custom CSS grid. You can specify the number of columns and rows. Additionally, you can set the column and row gaps in pixels.

There is not much to say about the generator other than it's fantastic! See the application in the picture above.

9. Awesome CSS

The "Awesome CSS" repository is a curated list of CSS resources. According to its description, it's a list of "awesome frameworks, style guides, and other cool nuggets for writing amazing CSS".

It's important to note that it does not include material to learn CSS. This resource is recommended for people who already know CSS, or at least the basics.

Some of the information you can find in this repository include:

• Parsers
• Preprocessors
• Frameworks
• Toolkits
• CSS Structure

... and more. It's worth checking it out!

10. CSS Clip Path Maker

"The clip-path property allows you to make complex shapes in CSS by clipping an element to a basic shape (circle, ellipse, polygon, or inset) or an SVG source.

Thus, the CSS clip-path maker allows you to generate clip-path values to spice up your website! You can see the generator in action below.

11. Fancy Border Generator

Say goodbye to boring borders. From now on, you can use this border generator to create some beautiful borders!

You might ask - how is that possible? It's possible because by specifying eight values for the border-radius property, you can build organic-looking shapes. The generator is awesome!

12. Gradients Generator

The usual linear gradients usually have hard edges where they start and/or end. However, you can make them look smoother by easing them.

The figure below illustrates the difference between a linear gradient and easing. You can see that easing a linear gradient makes it look much better!

It's important to note that it's not yet a CSS feature. You can a PostCSS/Figma plugin for it or the editor from the website.

Conclusion

I hope you find these CSS resources. If you do, share the article on social media so other people can benefit!

Also, if you have other suggestions, leave them in the comments below!

Thus, the purpose of this article is to shine some light, and guide you towards the best resources to learn JavaScript. Especially as a beginner. Therefore, let us see the best resources.

FreeCodeCamp

The first resource on the list is FreeCodeCamp. FreeCodeCamp provides an excellent introduction to JavaScript. Moreover, it dives into advanced topics as well. It takes you from no knowledge to an intermediate level.

However, once you dive into the advanced topics, you might have to supplement the learning with additional resources. Or with their YouTube channel. By the way, talking about their YouTube channel, it is another excellent resource. They have many JavaScript tutorials created by professional developers.

Thus, you can get to an advanced level just by using the FreeCodeCamp platform and their YouTube channel.

Check:

• FreeCodeCamp curriculum
• FreeCodeCamp YouTube channel

You Don’t Know JavaScript

The book series “You Don’t Know JavaScript” is one of the best resources to learn JavaScript, if not the best. This series is split into six books, and it takes you from zero knowledge to an advanced level. It teaches you about the scope, closures, “this” keyword, object prototype, types & grammar, async, performance, and ES6 & beyond.

The series is written by Kyle Simpson, who is a very knowledgeable person, and an active JavaScript developer. The good thing is that, like FreeCodeCamp, YDKJS series is free. Of course, you can, and you should buy them to support the author if you can afford it.

The “You Don’t Know JavaScript” series is my go-to manual. Whenever I want to refresh concepts or learn new ones, I use this resource first. It is well-written, detailed, to the point, and always following the ECMAScript specification.

Check:

• You Don’t Know JavaScript

JavaScript30

Practising by building application yourself is critical in programming. As a result, I want to recommend you JavaScript30, which focuses exclusively on building JavaScript applications. It does not use any frameworks, compilers, boilerplates, and so on. It is purely vanilla JavaScript.

The JavaScript30 course is for beginners and intermediate. It is going to teach you the JavaScript fundamentals and how to work with the Document Object Model (DOM). Bear in mind; you should already have basic JavaScript knowledge before starting the course. The purpose of the course is to make you apply that knowledge.

JavaScript30 is entirely free, as well. Until this point, you have three excellent resources to skyrocket your JavaScript skills for free!

Check:

• JavaScript30

MDN Web Docs JavaScript

MDN cannot miss from this article, as it is an excellent website. Thus, it is no surprise that their JavaScript tutorial is fantastic.

The online tutorial is split into four parts:

1. Complete beginners
2. JavaScript Guide
3. Intermediate
4. Advanced

As with the other resource listed in the article, you can go from a basic level to an advanced level. Besides that, the course is written and maintained by professional developers.

Therefore, you can bet on the tutorial provided by MDN. It is of the highest quality.

Check:

• MDN JavaScript

JavaScript.info

The last resource I want to mention is JavaScript.info, which is a superb website for reference. It contains information on basic JavaScript, advanced concepts, and Document Object Model.

The website is split into three parts:

1. The JavaScript Language – start from scratch and go on to advanced concepts like OOP. The focus is on the language itself here.
2. Browser: Document, Events, Interfaces – learn how to manage the browser page: add elements, manipulate their size and position, dynamically create interfaces and interact with the visitor.
3. Additional Articles – a list of extra topics that assume you’ve covered the first two parts of the tutorial. There is no clear hierarchy here; you can read articles in the order you want.

The information is dense, and to the point. You can use the website as your primary study guide, or you can use it in conjuncture with the other resources.

Check:

• JavaScript.info

Conclusion

The list in this article is not exhaustive, but it covers some of the best resources to learn JavaScript. By using these resources, you can get to a pretty advanced level, and even get a job offer. For the best results, try to mix them because you can learn something from all of them.

And the best thing: they are entirely free (except for printed copies of YDKJS, which you can buy if you want to support the author).

If you enjoyed the article, consider sharing it so more people can benefit from it! Also, feel free to @me on Twitter with your opinions.

They have varying difficulty, some being easier than others. Also, each course has its particularities. For instance, some teach you sessions; some do not. Therefore, they complement each other, even though there is an overlap between them.

Though, remember that nothing helps you more than building projects yourself. Follow the courses, and then put to use what you learned! Also, it's important to note that the courses are in no particular order. Without further ado, let's jump in.

Mozilla MDN Node.js/Express Tutorial

Mozilla MDN is an excellent website with many tutorials, including a tutorial on Node.js and Express. In the tutorial, you learn the concepts by building an online library. The application allows users to add books, authors, and genres. It also shows what the books are written by each author, and to what genre they belong to.

But the question is - what do you learn in this tutorial? You learn:

• About Node and Express. What they are, how they work, and what their benefits are.
• How to set-up a Node (Express) development environment.
• To perform CRUD operations.
• How to create relationships between data. (e.g. Authors and Books)
• The MVC pattern - controllers, views, models, routes.
• How to use MongoDB and Mongoose with Node.js and Express.
• To create a front-end for your application using Pug.
• How to deploy your application to production.

Do not be fooled by the simplistic look of the application because the tutorial is not a design/front-end tutorial. The tutorial provides a lot of invaluable information on building a back-end application ready to deploy to production.

The verdict? I highly recommend the tutorial, and you can check it on the MDN's website.

FreecodeCamp Tutorial

Another excellent tutorial on Node and Express is the tutorial from FreecodeCamp. Similar to Mozilla MDN, the tutorial takes you from no knowledge on the subject to advanced concepts like authentication. Besides that, you are going to build multiple applications, not just one. Thus, there are lots of opportunities to practice what you learn.

Without further ado, let's see some of the things you learn by following FreecodeCamp's curriculum:

• Introduction to Node and Express.
• Learn how to serve HTML files and static assets (images, CSS, JavaScript, and others).
• Implement Middlewares.
• Learn about Query/Route Parameters.
• Get and parse data from POST requests.
• Use MongoDB and Mongoose to store data in a database and manipulate it.
• Set up authentication and authorization with Passport.
• Implement CRUD operations.

I extracted the most important topics, but the curriculum covers a lot more. Freecodecamp is a great way to get up and running with Node.js and Express. You would need to complete the material with other resources for advanced concepts and best practices, though.

To conclude, Freecodecamp is one of the best resources because you do not have to set up your environment. That means you can focus just on coding and not other things. Besides that, the information is valuable, and you can learn a lot of stuff for free.

The Complete Node.js Developer by Andrew Mead

This course is one of the best to introduce you to the world of Node.js and Express. During this course, you build four web applications. Each application has a purpose, and it teaches you a handful of concepts. Thus, you learn a lot by building those four projects.

Some of the concepts you learn in this course are:

• Learning about Node.js Package Manager - NPM.
• Designing a REST API.
• Version Control with Git.
• Uploading files and images.
• Sending emails.
• You also learn about ES6 and ES7.
• How to authenticate users with JWT - JSON Web Token.
• Testing with Jest.
• Debugging with VS Code and Google Chrome.

As usual, I highlighted the most important concepts you learn in the course. However, there are more concepts you learn. The course well-thought and you can use it to start with Node.js and Express or to fill gaps you have in your knowledge. The reason this course stands out is that the instructor goes into great detail about each concept. The explanations are not rushed, which makes it easier to follow along and learn better.

Do I recommend the course? Yes; I did the course twice, and I cannot recommend it enough. The course is suitable whether you are a beginner or an intermediate developer.

Learn Node by Wes Bos

From all the Node.js courses, the best-looking application you are going to build is in Wes Bos's course. The design of the application is catchy, beautiful and professional.

However, I want to mention I had troubles following the course in the beginning when I had no Node.js knowledge. I had to postpone it and follow another course to learn the basics. The course feels advanced, and there are other courses more suited for complete beginners. Though, keep in mind that this is my experience, and it might not be right for you.

Now let's see what this course covers, and you learn by following it. You learn how to:

• Implement CRUD operations.
• Implement REST API points.
• Use the MVC pattern for your application.
• Add routing and pagination.
• Implement file uploading.
• Set up a templating engine like Pug.
• Deploy to production, on various providers.
• Send emails to users.
• Storing data in a MongoDB database, and manipulating that data.
• Implement authentication and authorization.

As with the other courses, these are just some of the topics. The course covers a lot more topics, which you can find learnnode.com.

Do I recommend the course? Yes. It's a great course where you learn a ton of concepts by building a real-world application. The only blocker might be that it's a paid course. Otherwise, it's an all-around great course.

NodeJS - The Complete Guide by Maximilian Schwarzmüller

This Node.js course is a little bit different in the sense that it covers more topics than just Node.js and Express. Even though the focus is on these two technologies, you learn others too. For instance, it teaches TypeScript and Deno, which is a bonus. You get more than you paid for.

Besides the usual Node.js and Express concepts you learn, which are taught in the other courses too, you also learn:

• Vanilla JavaScript and ES6 concepts.
• To use SQL with Node.js and Express.
• Advanced authentication and testing.
• What GraphQL is and how to use it.
• How to add Stripe payments.

As usual, these are not the only subjects. However, these are the concepts that differentiate the course from other courses. You get all the regular information about Node.js and Express, plus these other concepts and technologies.

The verdict? The course is worth its money. It goes well-beyond Node.js and Express, and it teaches you other cool and useful concepts and technologies. You can check the course here.

Conclusion

These are the top five Node.js/Express courses I recommend. They can take you from no knowledge to an advanced level. Of course, I have to mention that these are not the only ones. Also, they are the top five based on my experience.

I recommend all courses from this article because you cannot go wrong with any of them. However, if you have more suggestions, feel free to leave them in the comments. I would like to see more good courses.

If you find the article helpful, it would help us a lot if you could share it with others. If you do share it, tag us so we can see it! Thank you!

1. BlockSite

The "BlockSite" extension is excellent for blocking distractions and staying focused. It stops procrastination by allowing you to block distracting and harmful websites.

Each time you try to access a blocked website, you will get an error. Thus, are you addicted to social media websites? No problem! You can block them, so they do not distract you!

The above image shows what you see when "BlockSite" runs and you try to access a blocked website. Also, you can whitelist certain websites and block all the others.

2. Pomodoro Assistant

If you are not aware of the Pomodoro technique, it's a time management method where you use a timer to break down work into intervals. Each work interval is 25 minutes in length, followed by a short break.

Thus, the Pomodoro extension allows you to use the Pomodoro technique. Of course, you can change the duration of the work intervals and breaks. Customize them as you see fit.

The picture above shows the extension and how customizable it is! See how your productivity increases with this browser extension.

3. JSON Formatter

Working with JSON data in the browser can be a nuisance, especially when there is a lot of data. The extension, JSON Formatter, displays the JSON data in a way that's easier to absorb and understand.

This extension provides features such as:

• clickable URLs
• syntax highlighting
• indentation
• collapsible sections

The above screenshot shows an example of using JSON Formatter. If you want to see how the raw data looks, without using a JSON extension, access this link in your browser.

4. Daily.dev

Daily Dev is a developer news aggregator that runs in the browser. Each time you open a new browser tab, you will get all the news from the developer world. It gathers news from more than 350 sources, and it's the easiest way to stay up-to-date with the latest tech news!

Why would you use this extension instead of other sources?

• it's effortless - you only have to install it in your browser, and you get all the news without any effort from your side
• no registration needed - you do not have to register to use it or read the news
• it's free

The screenshot above illustrates the extension in my browser.

5. Clear Cache

Sometimes you want to clear your browser cache, and you know that it takes a few clicks to do it. Luckily, there is a browser extension that allows you to clear your data with one click.

The screenshot above illustrates a part of the application. You can see that you can customize what data to clear. You can choose between App Cache, Cache, Cookies, Downloads, File Systems, Form Data, History, Indexed DB, Local Storage, Plugin Data, Passwords and WebSQL.

Clear Cache extension improves your productivity because you can clear your cache in one click, eliminating multiple steps.

6. Wappalyzer

Wappalyzer is a browser extension that allows you to see the technologies behind web sites and web applications.

With this extension, you can find the following information:

• the CMS used
• the framework, e-commerce platform or JavaScript library used
• payment processors
• marketing and analytics tools

The image above illustrates the extension in action. The Wappalyzer shows the technologies used to build our blog - codelounge.dev.

7. Open in VS Code

"Open in VS Code" is a handy feature that does just what the name says - it allows you to open Github and GitLab links in VS Code.

It's a huge time saver because it eliminates time-consuming steps such as downloading the files and manually opening them in VS Code. All you have to do is to right-click on the file and click on the option saying "Open in VS Code". The image below illustrates that.

8. CSSViewer

The "CSS Viewer" extension allows you to inspect elements from web sites and see their CSS properties. It's a time-saver because you can quickly see the CSS of elements rather than inspecting it and searching for the CSS separately.

You can see the "CSS Viewer" extension in action in the image above.

9. Fake filler

Sometimes, when you test your applications, you need to enter dummy information into forms. Rather than completing the forms manually, why not use the "Fake filler" extensions which does that for you automatically?

This browser extension saves you a lot of time, as it completes the fields with random data within seconds. It's a true time-saver, and I highly recommend it! You can see it in the figure below.

10. Devo

Devo is a browser extension that helps you to stay up-to-date with the latest dev news! This browser extension curates information from sources such as:

• GitHub trending
• Hacker News
• Product Hunt

And many more. You can see the extension in the picture below.

Note: It's important to note that you cannot use Devo and Daily Dev at the same time. You have to choose between them. Also, if you would ask me, I prefer the Daily Dev extension rather than this one.

13. Lorem Ipsum Generator

There are various use cases where you might want a big chunk of placeholder text. Luckily, the "Lorem Ipsum Generator" can help with that!

This browser extension allows you to generate random text between 1 to 5 paragraphs and 1 to 20 sentences per paragraph.

The image above illustrates the extension in actions. It's super handy when you have to use placeholder text!

14. Web Developer Checklist

The "Web Developer Checklist" extension analyses web pages and checks for violations of best practices. It's a convenient tool that allows web developers to discover problems with any website on the internet.

All you have to do is install the extension and then run it on any websites you want to check. Depending on the website, it will tell you what the issues are and how can they be improved or fixed. If you care about SEO, speed, accessibility, and so on, you want this extension!

15. EditThisCookie

This browser extension is a cookie manager that allows you to do the following with cookies:

• add
• delete
• edit
• search
• protect & block

"EditThisCookie" is one of the most popular cookie managers, with 2,000,000+ downloads and 4.5 out of 5 stars (rated by 11,450 people). Besides that, it's Open Source (you can contribute to it) and it supports over twenty languages. I highly recommend it!

The above image illustrates an example with some of its features.

16. QuickCode

The "QuickCode" browser extension curates free online programming courses and displays them in your browser tab! It includes lessons from companies/platforms/Universities such as Udacity, Coursera, Udemy, EDX and many more.

You can also browser courses by the programming language. You can choose from Java, Python, JavaScript, Node, Vue, and many more! The figure below shows the extension!

Conclusion

These browser extensions are helpful, and they increase your productivity! However, the list is not exhaustive, so feel free to add more in the comments!

We're looking forward to seeing other suggestions!

Also, it's important to note that some might be available for other browsers, whereas some might not! The browser extensions from this article are recommended for the Chrome browser. However, most of them are available in other browsers too!

While there are multiple ways to go around this topic, today, I will focus on how to do that using GitHub's REST API. For this task, I chose to play with the integration using a pre-existent Node JS app.

You will find only the integration logic in the code snippets below rather than a full-fledged working app.

Getting started

The first thing I did was install GitHub's library, Octokit REST is one of the libraries you can use for this. An alternative to this is Octokit Core (more functionalities; yet these are not required for what I'm trying to achieve today).

Once installed, I generated a personal access token. This one is needed for making the requests. To generate a token, go to Personal Access Tokens page on GitHub and simply add a new one to the list (only select repo).

The last thing I did before getting into the action was to fork this repo.

Connecting to your Repository

With all of the pre-requisites ready, I created a new .js file using the configs below.

const { Octokit } = require('@octokit/rest');
const octokit = new Octokit({
    auth: 'my-personal-access-token',
});

const owner = 'my-username';
const repo = 'Hello-World';
author = {
    name: 'My Name',
    email: 'myemail@domain.com',
};
const url =  '/repos/{owner}/{repo}/{path}'; // leave this as is
const ref =  'heads/master'; // 'master' represents the name of my primary branch

I then authenticated a new octokit instance, used to make calls to GitHub. The rest of the configs were needed on a global scope for various actions (more on that, down below).

Pulling data

Easiest thing to do with the current setup is to retrieve the contents of the repo. To do that, I created a new function where I made a request to octokit, specifying the path of the wanted content:

const getContents = async () => {
    const { data } = await octokit.request({
        owner,
        repo,
        url,
        method: 'GET',
        path: 'contents', // gets the whole repo
    });
    console.log(data)
}

getContents();

Et voila! The request returns a list with one object corresponding to the README file from the forked repo. If I had a more complex structure in the repo and wanted to retrieve data from a specific folder, I could have changed the path to something like this: 'contents/src/components/component1'; where src is at the root and component1 contains one or more files.

Going back to my object, we can see that it contains information such as links, name, path & type of the file, and a property sha. This represents the hash of the file, and you can think of it as an ID. SHAs play a significant role when it comes to working with this API, so you'll see that property being used over and over again.

[
  {
    name: 'README',
    path: 'README',
    sha: '980a0d5f19a64b4b30a87d4206aade58726b60e3',
    size: 13,
    url: 'https://api.github.com/repos/my-username/Hello-World/contents/README?ref=master',
    html_url: 'https://github.com/my-username/Hello-World/blob/master/README',
    git_url: 'https://api.github.com/repos/my-username/Hello-World/git/blobs/980a0d5f19a64b4b30a87d4206aade58726b60e3',
    download_url: 'https://raw.githubusercontent.com/my-username/Hello-World/master/README',
    type: 'file',
    _links: {
      self: 'https://api.github.com/repos/my-username/Hello-World/contents/README?ref=master',
      git: 'https://api.github.com/repos/my-username/Hello-World/git/blobs/980a0d5f19a64b4b30a87d4206aade58726b60e3',
      html: 'https://github.com/my-username/Hello-World/blob/master/README'
    }
  }
]

Pushing data

Now, if I want to push a file to the repo, things get complicated. To do that, I need to:

• make sure I'm "up to date" with the branch I'm on (currently master) by getting the latest commit (git pull)
• create a new list of files that will be added to the commit (git add .)
• create a new commit (git commit)
• push the changes (git push origin HEAD)

The way to achieve is by first pulling the data. To do that, I got the ref to the latest commit:

const pushContents = async () => {
    const commits = await octokit.repos.listCommits({
        owner,
        repo,
    });

    const latestCommitSHA = commits.data[0].sha;
}

Only the SHA of the latest commit is needed, so I extracted it from the commits variable.

Next, I faked the files which are going to be committed. These are later added to a git tree (the hierarchy structure between files in a Git repository). For that, I followed the format implied by the API.

const pushContents = async () => {
    ...
    const files = [{
        mode: '100644',
        path: 'src/file1.txt',
        content: 'Hello world 1', //whatever
    },{
        mode: '100644',
        path: 'src/file2.txt',
        content: 'Hello world 2',
    }];
}

The format above explained:

• mode: type of the item, 100644 = file
• path: location, name and extension of the file
• content: this one is optional, whatever you want to add inside the file (if the file already has content, you'll need to create a blob)

With the files set, I went ahead and created the tree.

const pushContents = async () => {
    ...
    const {
        data: { sha: treeSHA },
    } =  await octokit.git.createTree({
        owner,
        repo,
        tree: files,
        base_tree: latestCommitSHA,
    });
}

The tree needs to include the files and the sha of my latest commit (to keep track of the data existing inside the repo). If you want to overwrite the repo completely, omit base_tree.

With the new tree in place, I created a new commit. I specified the sha of the tree, the sha of the latest commit, and my commit message. Without specifying the latest commit in parents, it is like trying to push without being up to date.

const pushContents = async () => {
    ...
    const {
        data: { sha: newCommitSHA },
    } =  await octokit.git.createCommit({
        owner,
        repo,
        author,
        tree: treeSHA,
        message: 'Changes via API',
        parents: [latestCommitSHA],
    });
}

Once I had the commit ready, the only thing left to do was to push the changes.

const pushContents = async () => {
    ...
    const response = await octokit.git.updateRef({
        owner,
        repo,
        ref,
        sha: newCommitSHA,
    });
}

Done! Two new files have been added to my repo, under the folder src. Below you can find the full example:

const  pushFiles  =  async () => {
    //git pull
    const commits =  await octokit.repos.listCommits({
        owner,
        repo,
    });

    const latestCommitSHA = commits.data[0].sha;

    // make changes
    const files = [{
        mode: '100644',
        path: 'src/file1.txt',
        content: 'Hello world 1', //whatever
    },{
        mode: '100644',
        path: 'src/file2.txt',
        content: 'Hello world 2',
    }];

    // git add .
    const {
        data: { sha: treeSHA },
    } =  await octokit.git.createTree({
        owner,
        repo,
        tree: files,
        base_tree: latestCommitSHA,
    });

    // git commit -m 'Changes via API'
    const {
        data: { sha: newCommitSHA },
    } =  await octokit.git.createCommit({
        owner,
        repo,
        author,
        tree: treeSHA,
        message: 'Changes via API',
        parents: [latestCommitSHA],
    });

    // git push origin HEAD
    const result = await octokit.git.updateRef({
        owner,
        repo,
        ref,
        sha: newCommitSHA,
    });
};

Next steps

Updating the existing files or deleting ones follows the same principle. To do that, target the tree, add what's changed, then commit and push. For easiness, make a function out of each step you need to go through, which return the SHAs.

Therefore, in this article, you can see a handful of websites that pay you to write technical articles for them. You can see their name, the URL, and the approximate sum they pay you.

Websites that pay for technical articles

These companies/publications pay from $100 to $800 per article. It depends on the topic of the article, the complexity and the level of knowledge.

If you are just starting out with technical writing, I recommend pitching companies that pay at the lower end because you are more likely to get the gig! Publications that pay more for articles, usually have higher requirements. However, that does not mean you should do it that way! Approach any publication you want, and shoot your shot.

Thus, let's see the websites you can pitch to write for them.

• Twilio

  • Up to $500 per article
  • You are not required to use Twilio. You need to write articles with examples, though.

• TestDriven Io

  • Up to $500 per article
  • Web development tutorials designed to teach critical skills needed to test, launch, scale, and optimize applications.

• Hasura

  • Up to $300 per article
  • Articles including Hasura or GraphQL.

• Digital Ocean

  • Up to $400 per article
  • Articles about OSS, infrastructure, cloud hosting, Linux, and more. It's not limited to their products, though!

• Auth0

  • Up to $300 per article
  • You pick topics from a list of possible articles.

• Soshace

  • Up to $100 per article
  • You pick topics from a list of possible articles.

• CSS-Tricks

  • Up to $250 per article
  • They have a list of possible topics. However, you can submit yours as well!

• WPHub

  • Up to $200 per article
  • Tutorials about Wordpress.

• Tutorialspoint

  • Up to $500 per article
  • Various technical topics. You can pick from a list of topics.

• Fauna

  • Up to $500 per article
  • Content focused on technical education for topics related to application development and Fauna, with working sample code, wherever applicable. They have a list of possible topics.

• Smashing Magazine

  • Unknown (In 2016 they paid up to $250)
  • You can submit tutorials, guides and case studies.

• Code Tuts+

  • $100 for tips, and $250 for tutorials
  • Pick from a list of possible articles.

• Vonage

  • Up to $500 per article
  • Technical tutorials.

• CircleCI

  • Up to $300 per article
  • You can pick from a list of possible topics.

• Clubhouse Io

  • Up to $600 per article
  • Pick from a list of possible topics. Technical tutorials, and how-to guides.

• TypingDNA

  • Up to $500 per article
  • Technical articles/tutorials related to TypingDNA.

• LogRocket

  • Up to $350 per article
  • Technical articles about Front-end. Tutorials on React, Redux, Vue.js, webpack, Wasm, MobX, GraphQL, JavaScript, etc. Frontend development best practices. Product/UI/UX design

• Draft

  • Up to $500 per article
  • Choose for a list of possible topics

Conclusion

In the article, you can see some of the most popular publications. However, it's not an exhaustive list and new resources will be added or removed. Subscribe to the newsletter (from the beginning of the post) to stay updated!

Therefore, writing technical articles is a great way to create an additional income. I hope this article helps you!

If you enjoyed the article, consider sharing it so more people can benefit from it!

As a result, in this article, you can see a handful of programming projects suited to beginners.

If you are learning JavaScript or want to deepen your knowledge, I recommend checking my favourite course - JavaScript Web Projects.

1. String reversal application

For this project, you could create a simple web application that allows you to enter a string. After you enter the string, the application should display back the reversed string.

For instance, if you enter the string "project", it should return "tcejorp". Such an application is beneficial because, in some interviews, they ask candidates to reverse a string. Thus, the project it's a great practice!

2. Binary to decimal converter

Another project you could create is a binary-to-decimal converter. Additionally, you can customize your algorithm to accept the reverse as well - decimal to binary.

The converter should allow the users to enter strings of up to 8 binary digits, 0's and 1's, in any sequence. After that, it should display the equivalent decimal number.

3. Palindrome application

A palindrome is a word that reads the same backward as forward. There are some popular palindromes such as:

• Madam, I'm Adam
• Never odd or even
• Madam
• Racecar

Thus, try to write an algorithm that takes a string and checks if it's a palindrome or not. If it is a palindrome, return it. To make it more interesting, you could create a web application that everyone can access.

Writing such an algorithm is super useful because you might encounter it in coding interviews.

4. Weather application

Building a weather application is a great way to practise working with APIs. Firstly, try to find a free API that allows you to fetch data. Then, use the API to display the weather forecast for a given city.

For instance, it should allow the user to input a city like London and then return the:

• temperature
• wind speed
• weather icon (e.g. sunny, windy, rain, etc.)

Of course, you can display more information, but for the beginning, these are sufficient! Building a weather application helped me a lot when I learnt Vanilla JavaScript and React!

5. Vowels counter

The name says it all - build an application that allows people to enter a string and then return the number of vowels.

The project teaches you essential concepts, and especially how to work with strings. I highly recommend it!

6. Calculator

A great way to learn and practise DOM manipulation is by building a JavaScript calculator. Besides that, you can practise your CSS skills to stylize it.

Your calculator should support the basic operations:

• adding numbers
• subtracting numbers
• dividing numbers
• multiplying numbers

7. Alarm clock

Building an alarm clock would help you get more comfortable with the command line. You could create a simple application that accepts two command-line arguments:

1. when to go off (what hour)
2. a YouTube link to an alarm clock sound

After the alarm clock goes off, it should open the YouTube link you specified!

8. List The Capital City

Build a project that allows people to enter the name of a country and then returns the capital city. For instance, if I enter my country - Romania, it should return the city Bucharest, because that is the capital.

You can use the list of national capitals from Wikipedia for your application.

9. Pomodoro clock

The Pomodoro technique is an excellent time management method. If you never heard about it until now, you can read more about it here. It's a great project to kill two birds with one stone - improve your time management, and practice your programming skills.

Your application should allow people to start, pause, stop and reset the timer. Also, the user should be able to set a timer with any number of minutes, which represents the focus session. Once the focus session is done, the clock should ring and start a break session. The break session should be 5 minutes.

10. Dollars to cents

Converting dollars to cents is a coding problem you can come across in coding interviews. I even came across one.

Your application should allow people to enter a value such as $4.98 and return the cents. In this case, it would be 498 cents. This project enables you to practice fundamental programming concepts such as loops and if conditions, for instance.

Conclusion

These ten projects are great to practise your programming skills. Of course, the list is not exhaustive, and there are other projects you can build. I'd be more than happy to see some of your recommendations in the comments!

To recap, some of the projects you can build are as follows:

• String reversal application
• Binary to decimal converter
• Palindrome application
• Weather application
• Vowels counter
• Calculator
• Alarm clock
• List The Capital City
• Pomodoro clock
• Dollars to cents

1. freeCodeCamp

freeCodeCamp is one of the most well-known and popular platforms to learn how to code. There is 3000 hours worth of material! However, do not let the big number of hours - 3000 - scare you! You do not have to learn everything, and even if you want, you can do that over a long period of time.

freeCodeCamp offers the following paths and certifications:

• Responsive Web Design
• JavaScript Algorithms and Data Structures
• Front End Development
• Data Visualization
• APIs and Microservices
• Quality Assurance
• Scientific Computing with Python
• Data Analysis with Python
• Information Security
• Machine Learning with Python

Besides that, it offers a section dedicated to coding interview preparations. As a result, freeCodeCamp is a great resource to learn programming for free through practice. That means you learn by doing, which is one of the most efficient ways to learn how to code.

2. The Odin Project

The Odin Project is another excellent resource where you learn programming by doing. They offer a Full Stack curriculum that helps you start your journey in Web Development.

They teach technologies such as HTML, CSS, JavaScript, Git, SQL databases, Node.js, Ruby, Ruby on Rails. What paths do they offer? They provide the following paths:

• Foundations - This is an introduction to the foundations of Web Development. You learn how to set up your development environment, the Git basics, JavaScript basics and so on.
• Full Stack JavaScript - This path teaches you how to create web applications and sites from scratch using plain JavaScript, Node.js, CSS and HTML.
• Full Stack Ruby on Rails - It's similar to the other Full Stack path, except that it teaches you Ruby on Rails rather than Node.js

The Odin Project is a great resource, and the best thing about it, is that you can join a supportive, dedicated community. They have their own Discord server where you can join and network with like-minded people.

3. Blogging communities

These blogging communities are great because you can find a variety of subjects from a variety of writers.

Such a blogging community is Hashnode, where you can read on a variety of topics such as:

• JavaScript
• Python
• Web Development

These topics are just some examples, but you can find a lot more on Hashnode. Besides that, there are authors of all levels. If you want to read advanced tutorials, you can do so. On the other hand, if you are a beginner and looking for likewise material, you can find that too.

However, there are other blogging communities such as:

• Medium
• HackerNoon
• freeCodeCamp blog

4. Khan Academy

The Khan Academy specifies on their home page that "you can learn anything". That's primarily true because they have an extensive curriculum where you can learn Computing subjects and subjects adjacent to Computing.

However, focusing on the Computing subjects, you can use the Khan Academy to learn subjects such as:

• HTML and CSS
• JavaScript
• Algorithms
• Data Structures
• Cryptography
• Advanced JavaScript such as drawing, animation, games, visualizations

The best thing about the Khan Academy is that anyone can use it to learn how to code. It does not matter your age; you can use it to learn how to program!

5. SoloLearn

SoloLearn is another resource where you can learn to code for free. One thing that differentiates SoloLearn from other resources is that they have a mobile application as well.

So what? You might ask. That means you can learn to code anywhere and on almost any device. You are not tied to your laptop or any other machine. Each time you want to code, you can do so anywhere by pulling out your phone.

SoloLearn has a variety of courses to choose from, such as:

• Python
• JavaScript
• Java
• CSS
• SQL
• React + Redux

And many more. I invite you to visit their platform and pick the course you want to learn! The best thing about SoloLearn is the variety of courses they have.

6. Udacity

Udacity is a well-known platform, and it provides 188 free courses. Their free courses are from fields such as:

• artificial intelligence
• cloud computing
• cybersecurity
• data science
• programming & development

Besides that, they have courses on career development, which is an essential topic as well. With Udacity, you can develop your technical skills, but the soft skills as well!

7. YouTube channels

YouTube channels are a great way to learn how to program for free. There are a plethora of channels you can choose from. However, in this article, I will suggest you some searching terms for YouTube instead of specific channels.

The reason for suggesting searching terms rather than channels is because everyone has their preferences. If I like a channel, you might not. And vice-versa. Thus, by browsing searching terms, you can find the channels you want.

The topics you could search for are:

• Web Development
• Web Design
• Python
• JavaScript
• Java
• Full Stack Tutorial

Of course, these are just a few examples, but the sky is the limit. There is a ton of content for free! Make the most of it.

8. Codecademy

On Codecademy, you can choose between three areas:

• Web Development - This path prepares you to build basic websites and interactive web apps using HTML, CSS and JavaScript.
• Programming and Computer Science - This path introduces you to the world of programming with Python.
• Data Science - It teaches you SQL and Python to build the skills you need to analyze data.

Their free plan provides you with enough lesson. However, if you want access to everything, you can upgrade to the paid plan. The best thing about Codecademy is that they have a mobile app so you can practice coding on the go!

9. Edabit

Edabit describes themselves as the Duolingo for learning how to code. They added gamification to make the process of learning more enjoyable. By solving challenges, you gain XP and unlock achievements.

You can learn programming languages such as JavaScript, Python, Java, Ruby and more. They also have two beginner tutorials that teach you coding with JavaScript or Python, depending on what you want to learn. Once you learn the basics, you can go to the Challenges and practice what you learnt! Edabit is a great resource.

10. EDX

EDX is one of the best resources because you can learn programming from real college courses created by the world's leading universities, such as Harvard and MIT. And that's for free!

There is no barrier anymore. You do not have to go to the world's leading universities to take their excellent courses. You can do it online. Isn't that great?

On EDX, you can learn essential coding skills needed for frontend and/or backend web development, machine learning, IOS, Android, and much more. They have a great collection of courses taught by professionals, and I highly recommend it!

11. Coursera

Like EDX, Coursera hosts courses from top universities like Yale, Michigan, Stanford, and leading companies like Google and IBM.

They have courses on web development, Java, C, SQL, R and many more. They have 123 courses in total. The best thing about Coursera is that they provide you with courses from leading universities, companies and professionals!

12. GitHub's Lab

GitHub's lab is one of my favourite resources because they have lots of resources, and they are varied as well. First and foremost, you can learn essential skills: version control with Git.

Working as a developer means that you work with a version control system as well. It does not matter whether that's GitHub, GitLab, BitBucket or any other system. These version control systems allow teams to track changes. Thus, on the GitHub's lab websites, you can learn about VCS by using GitHub.

Besides learning about VCS, you can learn about DevOps, language and tools such as:

• CircleCI, Travis CI
• HTML
• Node with Express
• Python
• Ruby

These are just some examples from their website, but you can learn more tools and technologies. The best thing about this resource is the variety of tutorials!

13. Scotch

On their homepage, they have the following description - fun and practical web development tutorials. That means you can learn about web development topics such as:

• Vue
• React
• CSS
• JavaScript
• Node
• Python

And many more. Besides that, Scotch has three free courses that teach you Vanilla JavaScript, Vue and React from scratch. Scotch is a great resource to learn about a wide variety of topics!

14. MIT

Why bother to join the Massachusetts Institute of Technology (MIT) University when you can take their courses online? MIT offers great introductory courses to programming. Their courses are split into three categories:

• General Introductions to Programming - These courses introduce you to the principles of computer science. It also helps you begin to develop programming skills. It uses the Python programming language.
• Language-Specific Courses - Introductions to programming with other programming languages than Python.
• Follow-up Courses - More advanced courses.

The best thing about MIT is that the resources are top quality! You are taught by MIT University professors.

15. SitePoint

The SitePoint blog covers a wide range of topics. Even though they have paid courses, they have a lot of free resources as well!

You can find information and resources about topics such as:

• HTML and CSS
• JavaScript
• Design & UX
• WordPress
• PHP

If you want access to even more resources, you can pay a monthly fee. After that, you'll have access to all their resources - articles, books and video courses.

16. CSS-Tricks

Even though it has CSS in its name and is one of the most popular CSS resources, CSS-Tricks covers other areas! Their website description is as follows - Daily articles about CSS, HTML, JavaScript, and all things related to web design and development.

Thus, you can learn about HTML, CSS, JavaScript, web development and web design concepts. Additionally, it has a newsletter that curates the best news around web development.

17. HTML Dog

The name "HTML Dog" is a bit misleading because you can learn about CSS and JavaScript too. That means you can learn about the three pillars of Web Development.

There are nine tutorials, three tutorials for each language. HTML, CSS and JavaScript tutorials are split into three levels:

• Beginner - Step-by-step guides taking you from 0.
• Intermediate - It teaches you more concepts, crossing the basic level.
• Advanced - It explores the depths of each language.

If you want to learn Web Development, HTML Dog is a great resource! The best thing about it is that it has a reference page. That is, whenever you forget a concept, you can go back to the webpage and remind yourself about it.

18. CoderByte

CoderByte is a website for coding challenges and technical interview preparation. In software development, practice is essential. Coding is about building stuff rather than memorizing concepts.

As a result, CoderByte is a great resource to practice what you learned using the other free resources. You can find:

• Data Structures and Algorithms coding problems
• Interview preparation resources
• JavaScript and Python material

Challenge your knowledge with CoderByte.

19. Codewars

Similar to CoderByte, Codewars allows you to practice programming concepts through programming exercises.

There are a plethora of coding exercises to choose from. Moreover, you can choose between a multitude of programming languages to solve the problems. Codewars provides a fun, valuable and efficient way to practice your knowledge or learn new concepts1

20. Bento

Bento is a platform where you can choose between 100+ web development topics. The best part of it? They are free!

Some of the topics you can choose from are HTML, CSS, JavaScript, Python and SQL. These are just a few topics, but you can learn more tools and technologies. They also have paths such as:

• Web Development Fundamentals
• Front-Ent & BackendBackend Tracks
• Databases

The best thing about it is that it has a page with trending articles from the development community. Thus, you can find great articles that are outside Bento.

Conclusion

These are the best places to learn coding for free I could find on the internet. Some of them help you learn concepts, while others allow you to practice what you learnt. I advise you to use them together, rather than picking one.

If you know more great resources, feel free to drop them in the comments!

Article written for Asayer and published on their blog originally.

Contributing to open-source projects is a great way to improve your programming skills and contribute to the community. Also, it's important to note that contributing to open-source projects is not all about coding. You can contribute in other ways. For example:

• organise code
• write or improve the documentation
• design stuff
• review code

Before going further, I advise you to read the code of conduct and the contribution guidelines. Please read them carefully before you start contributing because it explains what is expected from you. It also describes the workflow required to make contributions. The Open-Source guide has a great article on this subject - Your Code of Conduct.

Are you ready to make your first contributions? Let's do it!

1. Find a project

Finding a project to contribute to is a difficult task. I advise you to start small and pick a small project at first. Why? Things move faster in a small project, and it's more likely to get your first contribution. But if you feel adventurous, you can start with a bigger project!

Moving further, there are a handful of useful websites which you can use to find projects and issues suited for beginners. Here is a non-exhaustive list:

• goodfirstissues.com - This website is great because it only contains issues that are suited for first time contributors; that is, for beginners. You can filter projects by programming language and repository.
• goodfirstissue.dev - More or less, the same thing as the above website. Good First Issue curates easy pickings from popular open-source projects and helps you make your first contribution to open-source.
• up-for-grabs.net - This website is a list of projects which have curated tasks specifically for new contributors.
• github.com/explore - This is the explore page from Github itself. You can find lots of projects, but you have to search for issues suited for beginners manually.

These websites should be more than enough to find a project. If not, you pick a tool that you use daily and contribute to that if it's open-source.

2. Basic Git workflow

This article assumes basic knowledge of Git. The Git workflow you will be using is as follows:

1. Fork the repository to your GitHub account.
2. Clone the project on your machine.
3. Create a branch before making changes.
4. Make your changes.
5. Commit and push your changes.
6. Open a pull request.

The above workflow is the most basic one, and it's enough to contribute to open source projects. It's important to note that there are other variants, as well. However, you will use this one in the tutorial.

3. Fork the project

Let's assume you found the perfect project to contribute. I will use the OSS-Contribution repository I created a while ago for this tutorial.

Figure 1

Go to the repository page, and click on the Fork button, as shown in figure 1 above!

Why fork it first and not clone it directly? When you fork a project, you make a copy of it in your account. As a result, you can work on it without affecting the original repository. Forking creates a separate copy, whereas cloning downloads the project on your machine. Also, you cannot make changes to the repository if you only clone it. Only authorised people can make changes. By forking the project, you can make changes and submit pull requests.

After the forking is complete, it will redirect you to your copy of the project. Now it's time to move onto the next step.

4. Clone the project

Now clone the project from your account. Go to the repository page to find the link.

Figure 2

To find the forked repository URL, click on the green button saying Code and copy the URL as shown in figure 2.

After copying the link, go to your terminal and run the following command (replace the URL with yours):

git clone https://github.com/catalinstech/OSS-Contribution.git

Wait for the repository to download and then open it in your favourite code editor.

5. Create a branch

Before making any changes to the codebase, it's important to create a new branch. Branches allow people to work on the project without getting into conflict with each other. Also, each branch is independent of others, so your branch's changes are not visible in another branch (unless they are merged).

In the simplest words, your branch holds the changes you make to the project. Also, read the branch naming convention of each project. All projects specify how you should name your branches. Some examples are:

• your_name/issue_fix - E.g. catalinpit/add-name-768
• issue_number-issue - E.g. ET182-Fix-broken-navbar

Moving on, you can create a new branch and switch to it as follows:

git branch <your_branch_name>
git checkout <your_branch_name>

Alternatively, you can do the same thing in one command as follows:

git checkout -b <your_branch_name>

Now that you created a new branch, you are ready to make changes! Move onto the next section.

6. Make changes

Figure 3

The next step is to make changes in the repository. I cannot advise you about making changes because it depends on each repository.

However, using my Github example repository, I added a new Twitter account in the README file. Now you need to commit and push your changes, which you will do in the next step.

7. Publish your changes

The first step is to add all your changes to the staging area. Basically, the add command includes your updates from a particular file in the next commit. It specifies what "to send to Github", in the simplest terms ever.

Run either of the following commands:

git add . 

// or

git add README.md (your file name might differ)

git add . adds all your changes to the staging area. For instance, if you made changes in 10 files, it adds all those files. On the other hand, you can handpick changes by specifying the file name, as in the second version above. It only includes the files you specify.

Commit your changes

You included the updates in the staging area, but now you have to commit them as well. Committing files means saving your updates to the local repository. Think of it as saving a Word document after making changes.

git commit -m "Added my name to the README"

You can see the git commit command in action above. The `-m' flag stands for "message", and it allows you to summarise your changes. That means you should describe what you did in the project. Try to make the commit messages as concise and descriptive as possible. At the same time, it does not mean you should write a novel.

Push your changes

The last step is to "push" the changes to the remote repository. Until you "push" your changes, they are only available in your local repository. That is, nobody can see them except yourself.

To push your changes, run the following command:

git push -u origin <your-branch-name>

You are almost done now! The next and last step is to create a Pull Request, which you'll see in the next chapter.

8. Open a pull request

Figure 4

Suppose you followed all the steps from the seventh step - 7. Publish your changes - you should get a link in your terminal to open a pull request. Figure 4 (above) illustrates what you should see in your terminal.

If you do not get the same output for some reason, you can go to the repository URL > Pull requests tab > click on the Compare & pull request. See figure 5 below.

Figure 5

Whatever option you choose, a new window should open where you can create the pull request. Figure 6 illustrates that!

Be careful, though! Before submitting the pull request, make sure you read the contribution guidelines. At the minimum, add a descriptive title and description!

Figure 6

Click on the green button saying Create pull request, and you are done! All you have to do is to wait for PR comments. Well done!

Why do you need a PR?

By opening a pull request, other people can see the changes you've made to the codebase. Additionally, it allows other members to do a code review, which in turn might help you improve your skills and code. Thus, you can get valuable feedback!

Also, some changes might not be approved for various reasons, such as:

• poor code quality
• inefficient implementation ... and many others.

By creating pull requests, you protect the codebase from unwanted additions. Without pull requests, everyone can merge whatever they want to the main branch. Thus, the code quality will suffer.

In conclusion, pull requests helps and allows developers to:

• maintain a high-quality codebase
• avoid introducing (too many) bugs (because it can happen with PRs as well)
• get feedback on the code
• improve their skills and code

Conclusion

Well done for learning the most basic Git workflow you can use to make OSS contributions. Also, well done for making your first open-source contribution if you followed the article!