DEV Community: Margarita Humanitarian Foundation

Managing multiple versions of Python using pyenv and virtualenvwrapper

Prathamesh Desai — Fri, 05 Nov 2021 16:50:28 +0000

Are you scared to use multiple versions of Python on your system? Don't worry this article will guide you towards the ultimate Python setup on Ubuntu.

Sometimes we need to work simultaneously on multiple different projects which require different versions of Python and upgrading one Python version may break another project. It's also very hard to manage package installations manually respective to each Python environment and to switch between them. This is where pyenv comes into play to make your life easier.

What is pyenv anyway?

The pyenv Readme describes it best:

pyenv lets you easily switch between multiple versions of Python. It's simple, unobtrusive, and follows the UNIX tradition of single-purpose tools that do one thing well. It makes managing different versions of Python very easy and user friendly.

How do I install it on Ubuntu?

Let's update our local package index first:

sudo apt-get update

Install most common Python interpreter and compile dependencies:

sudo apt-get install aria2 build-essential curl git libbz2-dev libffi-dev liblzma-dev libncurses5-dev libncursesw5-dev libreadline-dev libsqlite3-dev libssl-dev llvm make tk-dev wget xz-utils zlib1g-dev --yes;

Install pyenv:

curl -L https://github.com/pyenv/pyenv-installer/raw/master/bin/pyenv-installer | bash

Install pyenv's virtualenvwrapper plugin:

git clone https://github.com/pyenv/pyenv-virtualenvwrapper.git "${HOME}/.pyenv/plugins/pyenv-virtualenvwrapper"

Initialize and configure pyenv in your .bashrc file:

#### pyenv config
if [ -f "$HOME/.pyenv/bin/pyenv" ] && ! type -P pyenv &>/dev/null ; then
  export PYTHON_CONFIGURE_OPTS="--enable-shared"
  export CFLAGS="-O2"
  export PYTHON_BUILD_ARIA2_OPTS="-x 10 -k 1M"
  export PYENV_ROOT="${HOME}/.pyenv"
  export PATH="${PYENV_ROOT}/bin:${PATH}"
  eval "$(pyenv init --path)"
  eval "$(pyenv init -)"
  eval "$(pyenv virtualenv-init -)"
  if [[ ! "$(pyenv which python)" == "/usr/bin/python" ]] ; then
    pyenv virtualenvwrapper_lazy;
  fi
fi

Close and reopen the terminal.

How do I install and use multiple versions of Python?

To view Python versions available that pyenv can easily auto-download:

pyenv install -l

You can check the current available and active versions of Python on your system by using the following command:

pyenv versions

To install a new Python version:

pyenv install <version>
Eg:- pyenv install 3.9.6

I recommend that you activate all Python versions that you have installed:

pyenv global 3.10.0 3.9.6 3.8.11 3.7.11 3.6.14 2.7.18

NOTE: The order of versions we put in the above command matters as the first version will be the default version.
In this case 3.10.0 will be the default version as it comes first.

Download virtual environment tools for each corresponding Python version:

python3.9 -m pip install virtualenv virtualenvwrapper

Wait, but what is virtualenv and virtualenvwrapper?

As explained by bogotobogo:

A Virtual Environment enables us to keep the dependencies required by different projects in separate places, by creating virtual Python environments.

In other words, virtualenv is a tool to create isolated Python environments. The virtualenv creates a folder which contains all the necessary executables to use the packages that a Python project would need.

So, each project can have its own dependencies, regardless of what dependencies every other project has.

How to use virtualenvwrapper?

Creating a virtual environment:

#Creates a virtual env with default Python version
mkvirtualenv myenv

#Creates a virtual env with specified Python version 3.8 for the below case:
mkvirtualenv -p python3.10 myenv

#Mark the current directory as the virtualenv-linked Project Directory to automatically go to the Project Directory when activating it.
mkvirtualenv -p python3.10 -a $(pwd) myenv2

Deactivating the virtual env:

deactivate

Start the virtualenv:

workon <name of virtual env>
E.g workon myenv

Credits

This blog post is based on:

An informal tutorial that Fábio C. Barrionuevo da Luz gave me the other day in the Cookiecutter Discord. This blog post is just a glimpse of pyenv, virtualenv, virtualenvwrapper can do. A detailed and in-depth guide about these tools can be found here.
I am very thankful to Fabio and Audrey Roy Greenfeld for their patient and generous guidance. This article would not have been possible without them.

Context in React

Sahil — Tue, 26 Oct 2021 18:09:25 +0000

What's this Context in ReactJS everyone's talking about! So according to the React Documentation " Context provides a way to pass data through the component tree without having to pass props down manually at every level."

So we can see it's a way to pass data through the component tree without props at every level. Well isn't it amazing! because it's like having global variables or in react terms something like global props. Let's take an example and go through the Context with React to get a good idea about it.

Very simple usage for such a feature might be using Themes (Dark Theme/Light Theme) for your React Application (NOTE: We must use Context for only the states which would not change regularly). As themes are supposed to be passed to various components to change their appearance on say a click of a button anywhere in the component tree.

Now if we had usual props used to pass the data we might end up in trouble why? Let's say we have one application with a main component within it a brand component and a cards section inside it as shown below:

Now say you have a state maintained in Main Component and then use in cards section so you would have to pass it down all through from main to display and then get it in Cards component. This is a very basic structure and this approach is not very practical in web applications with complex structures.

That's where the React Context comes to the rescue. Context provides a very simple structure for this purpose. Let's walk through the steps for using Context:

You might have to create a context that we are gonna use for storing the global props and you might wanna do it in a separate component (For example here a theme Context is created).

 const ThemeContext = React.createContext();

Then you have to create a ContextProvider component which would wrap all the components of the app and it must contain all the states that are to be passed to each and every component which is wrapped in it.

export const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState('light');
  const [backgroundColor, setBackgroundColor] = useState('bg-gray-100');
  const [textColor, setTextColor] = useState('black');
  const [cardsBackgroundColor, setCardsBackgroundColor] = useState('bg-white');
  const toggleTheme = () => {
    if (theme === 'light') {
      window.localStorage.setItem('theme', 'dark');
      setThemeColor('dark');
    } else {
      window.localStorage.setItem('theme', 'light');
      setThemeColor('light');
    }
  };

 return (
    <ThemeContext.Provider
      value={{
        backgroundColor,
        textColor,
        cardsBackgroundColor,
        toggleTheme,
        theme,
      }}
    >
      {children}
    </ThemeContext.Provider>
  );
};

So to use Context we actually need to wrap everything inside those Context and we do that generally by wrapping the whole App inside ReactDOM.render().
Now that's all left is to use Context where we might wanna use it, but before we do that we would require to import Context wherever we want to use it. To keep all the things simple you might wanna expose a custom hook to keep the import of Context minimal.

export const useContextTheme = () => {
  return useContext(ThemeContext);
};

Finally Now we want to use our created Context, for that we would require the custom hook created by us in the previous step we import it and we are free to use it however we wish!

Import the context:

import { useContextTheme } from 'components/ThemeContext';

Use inside your component:

  const { toggleTheme, cardsBackgroundColor, theme } = useContextTheme();

Hurray! you are good to go for creating and using your own Contexts!

The Props Object

Sonny Brown — Fri, 08 Oct 2021 02:18:52 +0000

What is the Props Object?

Okay, so you've probably gotten far enough into React to feel like you can do some damage. You want to go deeper and start making components... then you run into props.

const MyComponent = (props) => {
...
}

Okay. It's an argument. But why?

Every React Component gets a props object.

All you have to do is create a function with a capital letter, React does some magic and, presto chango, you have a props object.

How do we use it... properly? 😎

Let's take a look at MyGreetingComponent.

const MyGreetingComponent = (props) => {
  return (
    <div className="greeting">
        {props.hello && <h2>Hello {props.name} from MyComponent</h2>}
        {!props.hello && <h2>Good Bye!</h2>}
    </div>
  );
};

Which when rendered with hello: true and name: 'Joe' looks like:

Now the code to call it

...
<div id="greeting-section">
  <MyGreetingComponent hello name="Joe" />
</div>

Here we are passing data (hello name="Joe") to our component through what seem to be HTML attributes.

But really we're passing an object as an argument

const props = Object.freeze({ hello: true,
name: "Joe",
children: undefined })

...
<div id="greeting-section">
  {MyGreetingComponent(props)}
</div>

STOP

And take a moment to study these two code blocks

Here they are again

// Code block #1
...
<div id="greeting-section">
  <MyGreetingComponent hello name="Joe" />
</div>

// Code block #2

const props = Object.freeze({ hello: true,
name: "Joe",
children: undefined })

...
<div id="greeting-section">
  {MyGreetingComponent(props)}
</div>

These two code blocks are identical in function. This is what's going on under the hood in React when you use your component. It's just a function call with an immutable object as an argument.

So why is that important to know?

Well Because React is powerful, but confusing to look at. 🧐

For instance, hello is true? Yes! Because that's how you would interpret an HTML element that just has an attribute name. It becomes true just by stating it. That means React is going to do some magic and now the HTML hello becomes hello: true in the props object.

It can be difficult to look at HTML and Javascript (and CSS) in the same file. But sometimes things are just plain confusing.

Like...

What the heck is children props?

Let's look at our example again.

const props = Object.freeze({ hello: true,
name: "Joe",
children: undefined })

Let's simplify it for further examples

props = { hello: true,
name: "Joe",
children: undefined }

Notice that children is a prebuilt property in the props object. We didn't create it. Also it is pre-set to undefined. We've already discovered that the props object comes prebuilt into every React Component.

So why is this children property prebuilt into our props object?

Which, when called, looks like

<WrapperComponent>
  <MyComponent text={someExplainerText} />
  <div>Sometimes...</div>
  <div>many...</div>
  <div>many...</div>
  <div>many children!</div>
</WrapperComponent>

Which, when created, looks like

const WrapperComponent = (props) => ❴
    return <div className="wrapper" > ❴ props.children ❵ </div>
❵

Okay Captain (not so) Obvious

Let this all sink in. React seems to just make sense out of the box. But when it doesn't, it can really stump you. And it's usually about here with props that it trips people up. But after getting over this hump, React will seem to have

But

Let's look a little closer and see that it's potential and pain points really come from understanding what it's doing, again, under the hood.

props = ❴ hello: true,
          name: "Joe",
          children: [Object, Object,
          Object, Object, Object] ❵

In the console, props.children now looks like the above. The Objects here have the function calls to create each child.

We can maybe better think of it like this

props = ❴ hello: true,
          name: "Joe",
          children:
          [<MyComponent />,
          <div>, <div>, <div>, <div>] ❵

It takes some mental gymnastics to see it this way, but so does seeing HTML in Javascript in general.

But when it finally clicks, we see the props object is just passing down values, objects and functions from parent to child, just like Javascript does normally.

The catch is the data only goes from parent to child. But that also makes it clear because data is only going one way.

Final Thoughts

This article could have been called,

Why Does React Look Like HTML?

But that conversation becomes a distraction. For the geniuses at Facebook who created the React Library, the idea of HTML syntax being used in this way seemed to just make sense.

It didn't for me.

It took a while for this concept to click. But when it did, it helped a lot in making sense of props and eventually all of React. In the end

Remember it's all just Javascript

Therefore React has all of the "features" of Javascript. As an example, objects are passed as reference while primitives are not. So think about what that might mean to React when you're passing props as it checks the diff and decides what to re-render in the DOM tree. 🌲

You can find a lot of blog posts about data flow and state management in React which is the next step to take. Just beware, you'll find yourself down some deep rabbit holes, which can be fun but also very time consuming.

Announcing the Margarita Humanitarian Foundation Developer Blog

Audrey Roy Greenfeld — Sun, 03 Oct 2021 03:01:21 +0000

This blog is a friendly place for developers involved with Margarita Humanitarian Foundation's open source projects to share coding tips and tricks.

const help = (others) => {...}

All Our GitHub Contributors Invited

This offer is open to anyone who's had 1 or more pull requests merged into a project in the @margaritahumanitarian GitHub organization.

If you're not a contributor yet, see our repos for issues to work on. We welcome everyone! You can also ask for help getting started in https://discord.gg/kf3SKPMm

What to Write About

Anything that's fun or useful to other coders! For example:

TIL posts (Today I Learned)
Tips for getting into open source
Even super-short posts are fine, such as little React or Tailwind CSS tricks plus accompanying screenshots
Dev tricks that you want to keep notes on to remember later

What Is Margarita Humanitarian Foundation?

We're a nonprofit public charity helping those who need help the most. For more info, see margaritahumanitarian.org.