Environment variables let you store secrets you don’t want to expose for security reasons. So, they are useful in concealing private information such as API keys and other secrets. 

The normal way many developers create environment variables is to create a `.env` file and put the variable identifiers and values there:
```js
NEXT_PUBLIC_APP_TOP_SECRET=MyAppTopSecret
NEXT_PUBLIC_API_KEY=mYaPiKeY
```

But you can also create them inside the `next.config.js` file. The benefit is that you won’t need to prefix the variables with `NEXT_PUBLIC_` as you can see in the code snippet above.

## How to Create env Variables Inside `next.config.js` File
Creating environment variables inside the `next.config.js` file is not a straightforward process, it is not hard though. What I mean is, you cannot just put them inside the `next.config.js` file as you do inside the `env` file.

To create environment variables inside the `next.config.js` file, you have to define an `env` key as a part of the `nextConfig` object and put them inside of it in a `key:value` pair:
```js
env: {
    APP_TOP_SECRET: 'MyAppTopSecret',
    API_KEY: 'mYaPiKeY',
  },
```

If you are using the latest version of Next JS, the whole file would look like this:
```js
const nextConfig = {
  // env variables start
  env: {
    APP_TOP_SECRET: 'MyAppTopSecret',
    API_KEY: 'mYaPiKeY',
  },
  // env variables end
};
```

## How to Use Environment Variables of a `next.config.js` File
The reason why you created the environment variables is to use them. So, to use the variables, prefix their names with `process.env.` like this:

```js
process.env.APP_TOP_SECRET
process.env.API_KEY
```
And if you want to display them in the browser, you can put them inside curly braces:

```js
<h2>My Environment Variables</h2>
<p>My App's Top Secret = {process.env.APP_TOP_SECRET}</p>
<p>My API Key = {process.env.API_KEY}</p>
```
![Screenshot 2023-03-27 at 14.47.23.png](https://media.graphassets.com/bYFBZOeNS460jchZj7Ok)

Thank you for reading. Don’t hesitate to share the article so others who need it can read it.


How to Create Environment Variables Inside next.config.js File and Use them

Making a website, whether large or small with CSS from scratch could be a tedious process. So, you might want to do things as fast as you can. That's what CSS generators do.

CSS generators are tools available online that you can use to add design effects such as shadows, waves, buttons, shadings, overlays, and several other designs to your websites. There are even CSS generators for implementing layouts with little effort.

In this article, I want to show you five CSS generators that will remain useful beyond 2023. I have used these tools myself, which have been very influential in my development process.


## 5 Awesome CSS generators for your Web Projects
### CSS Grid Generator Sarah Drasner
![ss1.png](https://media.graphassets.com/dzG7FdueQO2uMSnKRqhl)

This is an easy-to-use tool for generating grid layouts for your website. I'm the kind of person that always want to use CSS grid but finds it hard to put its syntax to mind, so this tool has been very useful for me.
You can start using the CSS grid generator by clicking this [link](https://cssgrid-generator.netlify.app/).


### Glassmorphism CSS Generator by Marko Denic
![ss2.bmp](https://media.graphassets.com/zs5PefMS4OqttjwWBi8M)

Glassmorphism design became popular back in 2020-2021. Since then, it's become a mainstay amongst designers and developers.

If you don’t have the time to write your own glassmorphic design from scratch, you can use [Glassmorphism CSS Generator by Marko Denic](https://markodenic.com/tools/glassmorphism-css-generator/) 


### FlatUIColors
![ss3.png](https://media.graphassets.com/73eYxuVTQ42eyNyqkD7K)

If you find it hard to come up with colors for your projects, you can use [FlatUIColors](https://flatuicolors.com/). You can select from several pallets and many colors you never knew existed.


### Neumorphism Generator by Adam Giebl
![ss4.png](https://media.graphassets.com/XDS3xqAsRRuxpHTlwmQz)

Just like glassmorphism design, neumorphism became popular back in 2021. Though it's now losing momentum, neumorphism remains an aesthetically clean design that is pleasing to the eyes.

You can generate your own neumorphism [here](https://neumorphism.io/#e0e0e0).


### Wave Generator by Z Creative Lab
![ss5.png](https://media.graphassets.com/Mr8zMAlRSYGuVOFoK5R7)

You've probably seen wavy designs on many websites. If you want to create yours, you don't have to do it all from scratch. You can generate a bunch of waves [here](https://getwaves.io/).

Thank you for reading. If you find the generators useful, you can bookmark the page so you can easily come back to them. 

Share this article with your friends too so they can get access to the generators.

5 Awesome CSS Generators for your Web Projects in 2023

CSS variables, AKA CSS custom properties came into existence due to the need to have a consistent and maintainable CSS stylesheet. Instead of repeatedly defining the same style declaration over and over again, why not define it once, use it in multiple style declarations, and change it all in one place? 

That's the big void CSS variable has been able to fill – help you achieve the **DRY (do not repeat yourself) principle**.

The first working draft of CSS variables was published back in 2012. But CSS variables never became popular until after 2017 due to browser support. Since then, CSS variable has become a mainstay amongst developers. 

In this article, we are going to take a look at CSS variables in detail by showing you how to: 
- define it
- use it with the `var()` function
- and change it in one place so it reflects everywhere it is used.


## What is a CSS variable?
CSS variables, also called "custom properties" is a reusable value developers define in their stylesheets to reduce repetition. You can define them locally and globally in your stylesheet. You can even target them with JavaScript and do whatever you want with them.

## Benefits of CSS Variables
- easier identification of properties – `bg-dark` is easier to identify than `#040705`
- easier to maintain code 
- a lot more readable code
- one declaration, use anywhere


## How Do you Create a New Variable in CSS?
The syntax for creating a CSS variable is not complicated to grasp at once. You can declare a CSS variable globally or locally in your style sheet.


## How to Declare a CSS Variable Globally
To create a CSS variable globally, you can use the `:root` pseudo-selector or the `html` element selector. But it is advisable to use the `:root` pseudo-selector because it is the root CSS. Hence, it is more specific.
```css
:root {
   --background-dark: #040705;
   --background-light: #f1f1f1;
   --big-font: 2.5rem;
   --small-font: 1.5rem;
}
```
Once you declare a CSS variable like this, you can use it anywhere in your stylesheet. In a framework like Next JS, you can declare several CSS variables in the `global.css` file and use it in every other stylesheet. Amazing!


## How to Declare a CSS Variable Locally
To declare a CSS variable locally, you define it right inside the selector you want to use it.
```css
h1 {
    --text-color: #2babab;
    --font-weight: bolder;
}
```
Now that you've created the CSS variables, there should be a way to use them. Properly put, reuse them. CSS provides the `var()` function for that. And that's what we are going to look at next in this article.


## What Does var() Do in CSS?
The `var()` function is what allows you to reuse a CSS variable in your stylesheet. All you have to do is type out your property and put the name of the variable inside the `var()` function. The syntax looks like this:
```css
selector {
      property: var(--name-of-CSS-variable)
}
```
Remember we declare some global and local CSS variables previously, let's see how to reuse them now. I want to make the background color of the whole page black, so I can reuse the `--background-dark` variable this way:
```css
body {
    background-color: var(--background-dark);
}
```

Here's what it looks like:

![ss1.png](https://media.graphassets.com/wRaiHaSG65YQqKiDs8zg)


The dark background color reflects on the page. Notice I have a greenish text on the web page. And the default color of HTML texts is black (`#000`). I was able to change the color of the text with the local variable I declared the other time like this:
```css
h1 {
    --text-color: #2babab;
    --font-weight: bolder;

    color: var(--text-color);
}
```
That's how you can reuse a local variable!


## Can you Change CSS variables?
Technically, any variable can be changed. CSS variable is not an exception to this. Once you change the variable in one place, it reflects anywhere you're reusing it.

I have changed our global `background-dark` variable to a greenish color and the local `text-color` variable to a dark color:
```css
:root {
    --background-dark: #2babab;
}

h1 {
    --text-color: #040705;
    --font-weight: bolder;

    color: var(--text-color);
}
```

Now, things have changed in the browser:

![ss2.png](https://media.graphassets.com/yVCccp5HSxbapqWWWC5e)


## Wrapping Up
The introduction of CSS variables is a game-changer in modern CSS. With CSS variables, it is now possible to write simple, consistent, and easy-to-maintain stylesheets with CSS variables. 

In addition, these days, we can easily switch style declarations around to make cool themes for websites.

I hope this article helps you learn how to use CSS variables in your projects. Make sure you share the article with your friends on social media so it can get to them too.

The CSS var() Function – How to Create and Use CSS Variables 

In Python, you can convert one data type to another. For instance, integers to strings and vice versa, floats to strings, and many others. 

However, one conversion Python won't allow you to do is to convert a string structured as a floating point number (a number with a decimal point) to an integer. For example, converting "5.20" to an integer. This results in the **ValueError: invalid literal for int() with base 10:** error.
```py
print(int("5.20"))

# Traceback (most recent call last):
#   File "value_error.py", line 1, in <module>
#     print(int("5.20"))
# ValueError: invalid literal for int() with base 10: '5.20'
```

This error also occurs if you try to convert a string of letters to an integer:
```py
print(int("Python"))

# Traceback (most recent call last):
#   File "value_error.py", line 1, in <module>
#     print(int("Python"))
# ValueError: invalid literal for int() with base 10: 'Python'
```

In this article, you'll learn about how to fix this error in Python so you can avoid it in the future.

## What Causes ValueError: invalid literal for int() with base 10 in Python?
What causes this error is already in the error message – the `int()` method expects an integer. Any number with a decimal point is not an integer. Hence, such a number is not in base 10.

This means you cannot convert a floating point number formatted as a string to an integer with the `int()` method.

## How do I fix this ValueError invalid literal for int with base 10 error in Python?
To fix this error, Python provides a method for converting such numbers formatted as a string – the `float()` method. So, whenever you have a number with a decimal point you want to convert, you should use the `float()` method instead of `int()`.

```py
print(float("5.20"))

# Output 5.2
```

If you want the string as an integer, you can use the combination of the `int()` and `float()` methods – convert the number to a float first, then convert it back to an integer:
```py
num = "5.20"
# convert the number to float
floated_num = float(num)

# convert the floating point number to an integer
intNum = int(floated_num)

print(intNum)
# 5
```

Here's how to do it all in one line:
```py
print(int(float("5.20")))
# 5
```

You can also use `try...except…` to prevent this error. If the string cannot be converted to an integer, the `except` block will run:
```py
num = '128.4'

try:
    res = int(num)
except ValueError:
    res = 0

print(res) 
# 0
```

If the string can be converted to an integer, the try block will run:
```py
num = '128'

try:
    res = int(num)
except ValueError:
    res = 0

print(res) 
# 128
```

If you find the article helpful, share it with your friends on social media.

ValueError: invalid literal for int() with base 10: in Python [Fixed]

If you create websites and web applications with React, then you are writing some JSX. You might have even had some indecision naming your files with either the `.js` or `.jsx` extensions. 

I used to create all my React files with the `.js` extension until I realized I can use `.jsx` too. Then I started having indecision choosing between the two. I finally cleared my confusion and started using both file extensions appropriately. 

So, in this article, I want to show you the difference between the `.js` and `.jsx` file extensions. And which of them to use when you have to too. But before I show you what the difference between the two is, let me tell you what JSX is.

## What is JSX?
Some developers and writers have referred to JSX as JavaScript XML, and others call it JavaScript Syntax extension. But the JavaScript Syntax extension is what makes sense to me the most.
	
By definition, JSX is a syntactic sugar of the `React.createElement()` method that allows developers to write HTML in React. 

React is a JavaScript library. When you're writing React, you're also writing some JavaScript. That's why **JSX was created to address clashes that might arise from the combination of HTML and JavaScript**. 

One of those clashes is JavaScript's reserved keyword "class", and the class attribute of HTML. In this case, className becomes the JSX word for the class attribute of HTML.


JSX also gives you the ability to **embed JavaScript right inside HTML (the JSX)** between curly braces this way:
```html
<h1>Hello there! 2 + 2 is {2 + 2}</h1>
```

![ss1.png](https://media.graphassets.com/6oCjp49uSpa9lFm271UD)

To do this in vanilla JavaScript, you have to create a script, target those elements with DOM and then add them together.

## Difference between js and jsx File Extension
The notable difference between a `.js` file and `.jsx` is that in a `.js` file, you're writing JavaScript and in `.jsx` file, you're writing  JSX. Of course, you can still write JSX  inside a `.js` file, but having a separate file for JSX and vanilla JavaScript would reduce confusion in a large React codebase.

Another difference between a `.js` and `.jsx` file is that code editors and their themes might have different syntax highlighting for JavaScript and JSX. Once you separate the two in your codebase, things could become easier for you visually. 

## Should I Use js or jsx Extension?
You can leverage the notable difference between a `.js` and `.jsx` file to make things easy for yourself while writing React. Create a `jsx` file to signal that the file contains some JSX in addition to JavaScript. And if you have just a `.js` file, it means you don't have any JSX inside of it. 

If you find this article helpful, share it on your favorite social media platforms 

What is the Difference between a .js and .jsx File in React?

The `role` attribute of HTML is one of the attributes that help developers make websites and related technologies conform to the best practices of accessibility. That’s because accessibility is an important aspect of web development to put in mind while making websites, web applications, and even mobile applications.

But before we dive into what the `role` attribute entails, let's look at what attributes are first.

## What are Attributes in HTML?
An attribute provides additional information about an HTML element. The most common attributes developers use in HTML and JSX are `class` and `id`. 

With `id`, you get to add unique identifiers to elements:
```html
<nav id="navbar">
   <ul id="navItem">
   ...
   </ul>
</nav>
```
And with `class`, you can group together similar elements:
```html
<nav id="navbar">
      <ul id="navItem">
        <li class="navItem"><a href="">Home</a></li>
        <li class="navItem"><a href="">Services</a></li>
        <li class="navItem"><a href="">Blog</a></li>
        <li class="navItem"><a href="">Contact</a></li>
      </ul>
</nav>
```

There are lots of other attributes such as `href` for defining URL in `<a>` tags, `src` for providing the path to a file, especially images, `height`, `width`, and many more.

## What is the Role Attribute in HTML?
The role attribute was defined as a part of ARIA 1.0. ARIA stands for **Accessible Rich Internet Applications** by the World Wide Web Consortium (W3C). Developers use it in the HTML and JSX markup to tell assistive technologies what the purpose (role) of an element is. 

One of those assistive technologies is a screen reader. We'll take a look at those assistive technologies when in the next section of this article.

You might think the HTML elements are enough to tell assistive what the role of an attribute is, but that’s not the case on all occasions. This is because developers can format one element to look like the other. For instance, we can even format a `div` to look like a button.

## Why Use Role Attribute in HTML5?
As I pointed out earlier, accessibility is an important aspect of web development. Persons with disabilities (PWD) should have access to web development too. 

These persons with disabilities (PWD) use assistive technologies such as:
- **screen readers** and **braille displays** for blind people
- **Eye tracker** for those with high mobility issues
- **screen magnifiers** for people with low vision

Because these people use assistive technologies, you as a developer need to define the `role` attribute in any element that might confuse the assistive technologies. The most common of that scenario is using the `<a>` tag to define a button as done below:

![role.png](https://media.graphassets.com/GTaxshrjRAqvKU16s4Iq)

In this case, you have to define a role attribute to tell those assistive technologies that it’s a button. Otherwise, assistive technologies would identify it as a link. 

That way, that button won't confuse assistive technologies and your website become more accessible to persons with disabilities (PWD):
```html
<a href="#" class="btn" role="button">Start Here</a>
```
Apart from "button", the role attribute can accept several other values and that's what we'll look at next.

## HTML Role Attribute Values
Apart from "button", the role attribute can take several other values such as `layout`, `banner`, `link`, `logo`, `main`, and many more.
For instance, you can leverage the `role` attribute to tell assistive technology about the logo of your website. It doesn’t matter whether the logo is text or an image:
```html
<h1 role="logo">Kolade Chris</h1>
```
If you're formatting a `div` as the wrapper for the main content of a website instead of the `<main>` tag, you can assign it the role of `main` to tell assistive technologies it represents the main content of your website.
```html
<div role="main">
   ...
</div>
``` 

## Conclusion
The `role` attribute is a game changer in making websites more accessible to persons with disabilities (PWD). You should always use it when the name of an element is not enough to tell assistive technologies what the element is about.

If you find this article useful, share it on social media with your friends.

All Articles