Forem: Magda Rosłaniec

How to prepare Django project before pushing on GitHub

Magda Rosłaniec — Sun, 11 Dec 2022 10:52:12 +0000

This article is 2nd of Let's learn Django together in which we created a virtual environment and started a simple Diary project.

At one point, we would like to make our application live. Or at least to show the code to someone. Or simply have the history of our changes. Or store our code somewhere online. We can do it using a control version. The most popular version control system is called Git, and the most popular hosting provider is GitHub.

Part 2: How to prepare project before adding Git (version control)

Content

Step 1: Create .gitignore file
Step 2: Install python-decouple
Step 3: Store all sensitive data in .env file
Step 4: How to use python-decouple in settings.py file
Step 5: How to change Secret Key

Step 1: Create .gitignore file

The file should be created in the main folder. There we write titles of all files we don't want to add to Git and push on GitHub. We usually don't want to have files with our virtual environment or settings for our code editor. We shouldn't store media files on GitHub (if we were adding them to our local database and don't want to have them live) as well as our local database. We can generate a .gitignore file using a gitignore.io website and copy it into our .gitignore

Step 2: Install python-decouple

python-decouple is the library that separates the instance settings from code and allows to make changes in settings without redeploying the application. By instance settings, I mean all the secrets like secret_key, your database settings and passwords to your database or your Amazon S3 bucket and so on.

We need only an additional file called: .env and then we don't need different types of setting files (at least in a small app like the one we are building)

Let's install the python-decouple library. (https://pypi.org/project/python-decouple/) First, we need to make sure that we have our virtual environment activated. If not, we need to do it now:
pipenv shell
Be careful because python-decouple or decouple are not the same. There is also django-decouple library, but it isn't supported any longer.

pipenv install python-decouple

Now we can create a .env file. It also should be in the main folder.

Step 3: Store all sensitive data in .env file

What should we store in .env file?

Secret key:

We can start with storing there SECRET_KEY, that was generated when we were creating our project and we can find it in the website/settings.py file. Of course, everyone needs to use the secret key from their own application, not the one I'm posting below.

# SECURITY WARNING: keep the secret key used in production secret!

SECRET_KEY="u*all#5570^61u-*02l5m2f#sjs$^bq=z7$^5)pen^#)0yb#^%"

Debug

Another variable is DEBUG. As we can read in settings, we shouldn't have DEBUG = True when we want to have our application live. It is an excellent tool to use locally. It allows us to see errors we made in our code and more easily find them and also find the solutions. Thanks to it, our media and static will also be applied locally.

# SECURITY WARNING: don't run with debug turned on in production!

DEBUG = True

But on production, it can lead to leaks of information like local variables, settings, libraries used and so on. So it is useful to set DEGUB to False on production and to True locally. We can do it adding DEBUG=True to .env file.

At the moment, we are storing only 2 variables in our .env file. While building the project, we may add some more things there.

Step 4: How to use python-decouple in settings.py file

Now we need to import config object from decouple library in settings.py

Let's add from decouple import config at the top of the file (even though the library is called python-decouple).

And then, we have to change our configuration parameters using config like this:

SECRET_KEY = config('SECRET_KEY')
DEBUG = config('DEBUG', default=False, cast=bool)

Now we can initialize Git and push our code on GitHub or GitLab or Bitbucket. The instruction to install Git: https://www.atlassian.com/git/tutorials/install-git

Step 5: How to change Secret Key

You should never push your SECRET_KEY on GitHub.

But if you did it, there is always a possibility to generate a new secret key. You can use a tool like this: https://djecrety.ir/ or you can run this command in your command line:

python -c 'from django.core.management.utils import get_random_secret_key; print(get_random_secret_key())'

And add generated key to the .env file remembering about using only config('SECRET_KEY') in settings.py file.

In this part we:

Created .gitingore file
Installed python-decouple library
Created .env file and stored there our secret key
Used config object from decouple library to link variables from .env file with settings.py
Learned how to create a new secret key if needed.

Commands used in the terminal (specific for Python/Django project)

pipenv shell
pipenv install python-decouple

In my next article I will write about adding an app to a Django project and about using templates (html files)

Let's learn Django together (part 1)

Magda Rosłaniec — Thu, 08 Dec 2022 17:38:04 +0000

I was fascinated by Django sometime ago. Then I started to learn fronted frameworks and didn't have time for Django. Now I want to refresh my Django knowledge and share what I've learned.

In this series of blog articles, I want to describe how to create a simple CRUD Django project similar to my diary app: https://diary-by-makneta.herokuapp.com/. I'm going to describe the process of initialising a Django project, creating a user profile, public and private diary entries.

Part 1: How to start a Django project.

Content:

Step1: Install or check Python version
Step 2: Make sure you have pip installed
Step 3: Create a virtual environment
Step 4: Let's install Django
Step 5: Start a Django project
Step 6: Run the project now
Step 7: Add small changes in website/settings.py

In this part, we will be using a terminal a lot. Make sure that you know where to find the command line/terminal on your computer. If you are on Linux pressing ctrl + alt + t should open the terminal for you. Other than that, please check before starting the project.

If you are using a code editor like VS Code or Pycharm, you can also find the terminal there.

Django is a server-side web framework written in Python, so if we want to write our first project in this framework, we need to have Python installed first.

Step 1: Install or check Python version

In this project, we are using Python 3.10 version. You can check it by typing in your command line:

python --version

If you type python or pip in the command line and it doesn’t work, try python3, pip3.

Some Operations Systems have Python installed already, but if you are unsure or you need to upgrade to a newer version, please read this great Real Python article. It covers Python installation on different OS. https://realpython.com/installing-python/
As I said, I'm using Python 3.10 but I'm sure that 3.7, 3.8 or 3.9 will work as well.

Step 2: Make sure you have pip installed

We also need pip. It is the standard package manager for Python. It means that we need it to install any Python library. We can quickly check the version of pip in our command line by typing:

pip --version

or

pip3 –version

If you don't have pip, please read this part of pip documentation: https://pip.pypa.io/en/stable/installation/

My pip version at the moment of writing this article is 22.3.1, and it's already up to date. If you would like to upgrade your pip, please type:

pip install -U pip

Now when we have Python and pip ready, we can start our Django project.

Step 3: Create a virtual environment

A good practice is to start every Python project within a virtual environment. The virtual environment is like a box in which we can put our project with all libraries we need. This way we can have a few projects with a different version of Django each.

There are several different virtual environments available, but we are using pipenv.
pipenv is not only a virtualenv but also a package tool. In a project with pipenv, we will be using pipenv instead of pip to install new libraries.

First, we need to install pipenv.

pip3 install --user pipenv

Now let's create a folder for our project. I called my folder diary-project (you can call it as you wish) and go into this folder

mkdir diary-project cd diary-project

We've already installed pipenv, and now we can use it to create a virtual environment for our project. As I wrote it before, I'm using Python 3.10 for this project, so now, I'm telling the pipenv what Python version it should be using.

pipenv --python 3.10

This will create a virtualenv for this project. And we can see that there is a new file in our folder - Pipfile. It was generated automatically. It will contain the record of all libraries used in the project.

Now we can activate the virtual environment:

pipenv shell

There should be the name of the folder in brackets at the beginning of the line in our terminal (diary-project). If we want to stop using the virtual environment, it is enough to type exit in the command line or ctrl+d.

We need to remember to activate the virtual environment every time we start working on our project. If we don't activate it, we can be surprised that some dependencies don't work.

Every time we install a new library/package using pipenv install <package name>, a new dependency will occur in the Pipfile. And after the first pipenv install <package name> a new file should be generated: Pipfile.lock. The Pipfile.lock contains the exact versions of packages as well as hashes to support more secure verification. We should not change this file manually. If missing, it can be generated with the pipenv lock command.

Both Pipfile and Pipfile.lock should be added to git. But we will take care of it in our later parts of that tutorial.

Step 4: Let's install Django

If we want to install the current version of Django, it is enough to write:

pipenv install django

and we will have the latest Django 4.1 version (in December 2022)

We can also install the specific version like this:

pipenv install "django=1.11"

(it will install the latest of Django 1.11 version)
or

pipenv install "django<3.0"

(it will install the latest version lower than 3.0)

If we want to check what version of Django we have just installed, we should type:

django-admin --version

in our terminal.

Now we are ready to start our project.

Step 5: Start a Django project

First, we start a project, and then we can create apps. In Django, the project is the entire application and all its parts. Each part of the project that can be separated from the project should be created as a separate app. In our case, we will create one project called website and two apps called: users and diary.

We've already seen that by installing Django, we also installed a new command: django-admin. Now we will use this command to create our project. Let's type in the command line:

django-admin startproject website .

After this command, our folders' structure should look like this (you shouldn't have README.md file at the moment because you haven't been initialising Git yet)

website is the name of our project and don't forget about adding the dot at the end. We do it to avoid nested folders. Now, we have two more elements in our diary-project folder. One of them is the manage.py file.

From now on, every time we want to run any command connected to our project, we need to make sure we are in the folder that contains the manage.py file. This is our tool to execute Django-specific tasks. We will be using it while creating new apps, running the local server, or updating the database schema, and so on.

But we are more interested in our website folder. It contains a few files. The 2 most important for us are urls.py and settings.py.

In each file, we already have some code that initialises our project. website/urls.py file is the place where we store the URL configuration for our website. Each page on the internet needs its own address - its URL. At the moment we have an URL of the admin site of our project in website/urls.py, and after creating new apps, we will be adding the "address" of the app to our main urls.py file.

settings.py has a lot of useful stuff stored for us. While our project is growing, we will be adding new settings or changing the current ones a bit.

Step 6: Run the project now

So far, we haven't written a single line of code, but we can run the local server to see our project.
Let's write in the terminal:

python manage.py runserver

And press enter. Our local server should be active now, and we should see some warnings in our terminal. It says that we didn't apply migrations and our project can work unproperly. From that warning, we can read that there are some built-in apps: admin, auth(for authentication), contenttype, and sessions.
But at the moment we don't want to apply any migrations. We won't be doing it until we create our Custom User model.

But we can also see that our development (local) server is running at http://127.0.0.1:8000/ . We can hold the ctrl key while pressing the link with our mouse or we can type 127.0.0.1:8000 in the browser tab to see our app running.

If you look carefully at your diary-project folder, you will see a new file: db.sqlite3. It is a small database that is prepared for us and can be used mostly locally. SQLite is not a popular database for live applications but it’s built-in in Django to check if our database scheme is up to date.

Step 7: Add small changes in website/settings.py

To start playing a bit we can do 2 things in website.settings.py file:

If we want, we can change the language of the project. For example, if I would like to create a project in my native language Polish, I can go to settings.py: and find LANGUAGE_CODE = 'en-us' and change the language to pl LANGUAGE_CODE = 'pl'. If I save it, the server will restart itself, and I can see that Django's welcoming page is in Polish.

I can also change time zone to TIME_ZONE = "Europe/Warsaw". We need to use timezone by continent and capital city.
If you need help with timezones, you can check this Wikipedia's List: https://en.wikipedia.org/wiki/List_of_tz_database_time_zones

In the next section we are going to learn how to prepare our project for adding Git.

In this part we:

Checked Python's version
Checked and upgraded pip's version
Installed and activated pipenv -- a virtual environment and a package manager in one tool
Installed Django
Started our Django project
Changed language and timezone in our project

Commands used in the terminal (if python or pip doesn’t work, try python3, pip3)

python --version
pip install -U pip
pip install --user pipenv
mkdir diary-project
cd diary-project
pipenv --python 3.10
pipenv shell
pipenv install django
django-admin --version
django-admin startproject website .
python manage.py runserver

Functions. Learning Go - part 3.

Magda Rosłaniec — Tue, 07 Jun 2022 20:34:20 +0000

My today’s subject is functions.
Functions are the core of programming in Go.

We can declare our own functions and call them in every place in the package.
Usually, the name of the function starts in lower case but the function which name starts in a capital letter can be used outside the package.
Each function can take zero or more arguments.
If our function takes arguments we have to declare their types. We write the name of a parameter and its type in parenthesis just after the function name. If we want to pass more than one argument we need to separate each declaration with a coma.

 func sum(a int, b int) {
    fmt.Println(a + b)
 }

If the arguments are the same type, we can add the type to
the last one only. func sum(a, b int) it means that both
parameters’ type is the same.

4.
Now, we can call our function inside the main() function.
We can’t forget about passing the arguments (of course, if
the function requires any).

 package main 
    import “fmt” 

 func main() {
    sum(5, 7)
 }

 func sum(a int, b int) {
    fmt.Println(a + b)
 }

If we want to be able to use the output of our function, we need to return something. A function that only prints the results doesn’t “last long”. In the example above, the function only prints the sum of two numbers but then, the result is removed. Our sum function could be very helpful if we would like to build a simple calculator but only when we add a return statement. One more thing. We already declared the types of arguments that our function takes, now we also have to declare the type of the value the function returns. We are adding it after the brackets with parameters. Let’s add those two elements to our sum function:

 func sum (a, b int) int {
    return a + b 
 }

Functions can return more than one value, so we have to declare all those values. Then we put them all into another pair of brackets. Let’s look at the divide function. Working on our calculator we should remember that it’s not possible to divide by zero. We have to handle such a case.

 func divide(a, b float64) (float64, error) {
    if b == 0.0 {
        return 0, errors.New(“You can’t divide by  zero”) //1
    }
 return a / b, nil //2
 }

Now, as we declared that our function will return two values, we have to have those two values in every return statement. That’s why in the first if block (1) we have two elements one of them can be zero and the other will be the information about the error.
If argument b is not equal to zero, the next block (2) will be executed. Here we also need to return 2 values: the result of the division and nil. Nil informs us that there are no mistakes in our function.

I think those are the very basics of functions in Go.

(If you can see that numbers of li elements are weird - like a bunch of 1 - I don't know how to fix it here)

Learning Go - day 2

Magda Rosłaniec — Wed, 25 May 2022 16:38:02 +0000

I should rather title it - part 2 not day 2 because I learned all those things in one day but it took me 4 days to write those notes and still they are not full. But writing is also part of learning.

1. For loops and if statements

for loops and if statements are quite simple to use. But to use them correctly we need to understand two things: blocks and scopes.

What's a block?

Code in Go can be divided into segments that are called blocks. Blocks are usually parts of the code between curly brackets. They can be nested. When we are creating a for loop, everything that's between curly brackets is a block. If we put if statements inside a for loop, every part of code between moustache (curly) brackets creates a block.

for num := 1; num <= 10; num++ {
    if num % 2 == 0 {
        fmt.Println(num, "is an even number.")
    } else if num % 2 != 0 {
    fmt.Println(num, "is an odd number.")
    }
}

So there are 3 blocks of code in the example above.

What's the scope?

The scope of variables is connected with blocks. When we declare a variable, it will be recognizable only within a block in which we declared it and blocks there are nested inside that block. So when we declare a variable inside one part of an if statement, it won't work in another part of if statement as well as outside the if-else clause.

If I would like to change the previous code a bit and add a variable called answer like that:

for num := 1; num <= 10; num++ {        
    if num %2 == 0 {
        answer := "is an even number."
    } else if num%2 != 0 {
    answer := "is an odd number."       
    }       
    fmt.Println(num, answer)
}

Go won't let me do it. For the first two "answers" it will tell that the variable is declared and never used. And for the last "answer" it will say that this is an undeclared name.

To fix it I need to declare the answer variable in the first block - for loop - like that:

for num := 1; num <= 10; num++ {    
    var answer string   
    if num %2 == 0 {
    answer = "is an even number."
    } else if num%2 != 0 {
    answer = "is an odd number."        
    }       
    fmt.Println(num, answer)
}

What is continue and break?

Sometimes we want to finish the loop when a particular condition is met. So then we use the break statement.
Let's imagine that we're looking for a number divided by 5 in a range from 1 to 10 (10 is included). And we're happy with the very first number we get.

for n := 1; n <= 10;n++ {       
    if n % 5 == 0 {
        fmt.Println(n, "is divided by 5")
    break
    } else {
    fmt.Println(n, "is not divided by 5")
    }
}

This short program will be running only as long as it comes to the very first number that can be divided by five: 5.

After running this loop (of course, it should be put inside the function to make it work in Go) we will see such an output:

1 is not divided by 5
2 is not divided by 5
3 is not divided by 5
4 is not divided by 5
5 is divided by 5

As we can see, my program stopped before checking all the numbers in the range.

Continue doesn't stop the loop, but if we have something after continue within the block in that statement, it won't check the code, only will go immediately to the next iteration of the loop.

for n := 1; n <= 10;n++ {       
    if n % 5 == 0 {
        fmt.Println(n, "is divided by 5")
    continue
        if (n == 5) {
        fmt.Println("It's 5.")
    }
    } else {
        fmt.Println(n, "is not divided by 5")
    }
}

// output
1 is not divided by 5
2 is not divided by 5
3 is not divided by 5
4 is not divided by 5
5 is divided by 5
6 is not divided by 5
7 is not divided by 5
8 is not divided by 5
9 is not divided by 5
10 is divided by 5

The output shows that the block after continue wasn't executed at all.

2. There's a package for everything

So far, I haven't been using many methods in Go but have noticed that to use almost all the functions and methods that are provided by Go, I first need to import the packages that contain them.

If I want to print output, I need the fmt library and then one of the Print() functions. If I want to trim the next line character, I need the strings package and the TrimSpace() function.

But things are getting a bit complicated when we want to use methods that are connected to values of a certain type.

For example, when we want to get only a year from a date, we first have to import the time package. Then we will access the date using the Now() function that we need to assign to a variable. And only then we will use the method called Year().

package main 

import (
    "fmt"
    "time"
)

func main() {
    var now time.Time = time.Now();
    var year int = now.Year()   
    fmt.Println(year)   
}

In that function, the first (now) variable's type is time.Time. The second (year) variable's type is an integer.

Some of those methods return 2 values while we need and have only one variable.
When we want to take input from a user, we need the bufio package and NewReader() function. In the code below I'm assigning bufio.NewReader(os.Stdin) to the reader variable.

reader := bufio.NewReader(os.Stdin)

The type of this variable is bufio.Reader. It's something very new to me. I was trying to print out the reader variable and it showed me something like that &{[0.....0] 0x0000e010 00 -1 -1}. At the moment I only understand that it's something binary.

In other to be able to use the input from the command line, the next step is to assign the reader variable to another variable but we also have to call another method - ReadString - on it.

input := reader.ReadString('\n') // it's got an error

The rune \n in the brackets means the end of input data.

But we are not ready yet. The ReadString method wants to return us 2 values but we have only one variable assigned. One value is the input from the command line but the other value is usually the information about errors. Now, we have to handle the error.

We will do it by adding the second variable:

fmt.Print("Give me a number: ")
reader := bufio.NewReader(os.Stdin)

input, err := reader.ReadString('\n') // error again

fmt.Println(input)

The code won't compile again, because we always have to use all the declared values. We have two options.

Use _ (underscore) instead of err.

input, _ := reader.ReadString('\n')

This way we will ignore all information about errors from input data.

Or we can handle the error. Now we need one more package log and Fatal() function that will print us what error we have and will terminate our program.

input, err := reader.ReadString('\n')   
log.Fatal(err)  
fmt.Println(input)

But again, using log.Fatal(err) like that will stop the program even though the command line user typed something.

We have to use if statement to show only when errors are not nil. (nil is a zero value - everything I know so far about nil)

package main

import (
    "fmt"
    "bufio"
    "os"
    "log"
)

func main() {
    fmt.Print("Give me a number: ")
    reader := bufio.NewReader(os.Stdin)

    input, err := reader.ReadString('\n')
    if err != nil {
        log.Fatal(err)
    }   
    fmt.Println(input)
}

So many lines to only print the input data from the terminal.

One more thing to make packages more confusing ;-)

Sometimes we want to import a package, for example, rand for generating random numbers but in the part of the code with imports, we need to give the import path - math/rand. It's so because packages that are from similar categories are grouped. And rand package is group together with other libraries for mathematical operations.

package main 

import (
    "fmt"
    "math/rand"
)

func main() {
    target := rand.Intn(100) + 1
    fmt.Println(target)
}

The code above generates a random number in the range from 1 to 100. But only in theory. If we want to run this, we could see the same number. Every time we will run it.

How to generate more random numbers? It's a story for another occasion.

Learning Golang - day 1

Magda Rosłaniec — Sat, 21 May 2022 20:35:46 +0000

I just decided to start learning Go again. I was learning it a bit last autumn, but then I had a very rough time in my personal life and also decided to start looking for a frontend job with vanilla JavaScript. I got a job where I can learn on the job anything I need for it. So in my free time, after work, I want to focus on something a bit different.

My plan is to learn a bit each day and preferably take some notes. I have quite a lot of materials - books, and online courses. I also read a lot good about Go documentation and tutorial in the docs. In order not to struggle with analysis paralysis, I want to use one resource at a time starting from Head First Go.

Things I learned today:

1. Main structure of a file in Go:

package main
// the name of the package -  we call the function the same

import (
    "fmt"
    "reflect"
)

// Here we import other packages we are going to use in our code.


func main() {
    fmt.Println("Hello, Go!")
    fmt.Println(reflect.TypeOf("Hello, Go!"))
}

// Then goes the function with its body between moustache brackets.

2. Go is a strictly typed language.

It means that when we are creating a variable we should declare its type (string, boolean, int, float64 and so on) and while we can change the value of the variable, we can't change its type later on in the program.

3. There are at least 3 ways of declaring variables:

- we can declare a variable without assigning any value to it

var name string;
var age int;
var price float64;

This way, the value of each variable is 0 (for strings 0 means an empty string, for boolean it's false)

- when we declare a variable and assign a value, we don't have to declare the type because Go recognizes the type from the value

var city = "Warsaw"
var length = 3.5

Now, it knows that city is a string and length is a float64

- while declaring the variable with its value, we can use a shorter declaration form

quantity := 4
fruit := "apple"

4. We can convert types.

If we want to make mathematical calculations we can't add an integer to a float number in Go. We need to convert an integer into a float number. We can also convert a float number into an integer but it can change its value.

allApples := 3
eatenApples := 0.5
applesLeft := float64(allApples) - eatenApples
fmt.Println(applesLeft)

5. If we declare a variable, we need to use it.

Otherwise, we will have an error. The same imported but unused packages.

6. Variables and functions usually start with a lowercase.

But if we want to make it possible to use our package in another program and make some of the variables available there, we need to start them from an uppercase.

So far I've been using "fmt" package for printing the output of my code and it was possible thanks to the Println method.

It's been mostly the repetition of what I learned in the autumn. But I think it's a good start.

New project - pill tracker.

Magda Rosłaniec — Sun, 13 Jun 2021 22:16:08 +0000

This going to be a pretty small app. Firstly I want to create it in React.js and then recreate it in React Native. I need a mobile version more but I also want to learn CRUD operations in React in general. So I hope to kill two birds with one stone. Or maybe even 3 because it's not going to be not only a UI but also I will be working with a database.

User Story:

Mary needs to give her son medicines every day. The kid has to take the medicines for a longer period of time.
The doctor prescribes a few packs of the drugs, so Mary needs to call the doctor and make an appointment at least 2 weeks before the drugs are running out.
Mary has an app where she writes down the name of a drug, the amount of pills in the pack(s) she has, the dosing frequency and the dose.
She also wants to store the name and the telephone number of a doctor, the approximate date of running out of the drug as well as the date of the next appointment.
When she puts all the data, she wants to be notified when she needs to give the pill (with a nice sound), she wants to tick the tracker when she gives her son the pill and she wants to see how many doses are left.
She wants to be informed by the system that she needs to call the doctor. It could be a nice addition if that information was also sent by email/SMS to her husband.

As I wrote before, I'm going to be using React and React Native. I also want to use Redux and Sqlite for React Native. For styling, I'm choosing my favourite styled-components that can be used in React Native. And FontAwesome for icons.

Objects are not valid as a React child - Covid Map project part 5

Magda Rosłaniec — Sun, 09 May 2021 08:22:53 +0000

Last time I stopped at the point where I wanted to add data about all cases, deaths and so on. It seemed to be an easy task. I had the data fetched thanks to the useFetch() hook.
The next step was to create a DataAll.js component and pass the data to this component.

Things I did and problems I encountered.

I passed data to DataAll.js component and tried to go over them like usual:

 {!props.global ? null : (
        <StyledGridSection>
          {props.global.map((item) => {
            const {
              cases,
              critical,
              deaths,
              todayRecovered,
              todayCases,
              todayDeaths,
              updated,
            } = item;
     return (
       <>
        <div>{cases}</div>
        {/* only a small part of my code */}
      </>
       );
          })}
        </StyledGridSection>
      )}

But the only thing I was getting was an error:

Error: Objects are not valid as a React child (found: object with keys {}). If you meant to render a collection of children, use an array instead.

The error is pretty obvious but I wasn't sure how to resolve it. How to change an object into an array and where in my app I should do it? I was reading about different JS methods but eventually, I had to add square brackets around props.global while using map() method

 {[props.global].map((item) => {})}

Because I was dealing with large numbers that are difficult to read without commas or spaces, I used toLocaleString() method again.

 <LargeNums>{deaths.toLocaleString()}</LargeNums>

- this tag is from styled components.

I also wanted to change the date a bit. toLocaleString() method can also take arguments: language and options. I set language to "default" and in options, I specified that I want to have full weekday and month (without abbreviation), day and year as numbers and also time with 2-digit hour and minute.

     const options = {
              weekday: 'long',
              year: 'numeric',
              month: 'long',
              day: 'numeric',
              hour: '2-digit',
              minute: '2-digit',
            };

I still should refactor the code to get rid of each repetition of the StyledGridElem but I left it as it was. It's not perfect but it's working.

import React from 'react';
import { StyledGridSection, StyledSection, DateRow } from './modules/Sections';
import {
  SectionTitle,
  LargeNums,
  Subtitle,
  SubtitleGrid,
} from './modules/Titles';
import { StyledGridElem } from './modules/GridElem';

const DataAll = (props) => {
  return (
    <StyledSection>
      <SectionTitle>Worldwide</SectionTitle>
      {!props.global ? null : (
        <StyledGridSection>
          {[props.global].map((item) => {
            const {
              cases,
              critical,
              deaths,
              todayRecovered,
              todayCases,
              todayDeaths,
              updated,
            } = item;
            const options = {
              weekday: 'long',
              year: 'numeric',
              month: 'long',
              day: 'numeric',
              hour: '2-digit',
              minute: '2-digit',
            };
            const date = new Date(updated);


            return (
              <>              
                <StyledGridElem>
                  <SubtitleGrid>Total Cases:</SubtitleGrid>
                  <LargeNums>{cases.toLocaleString()}</LargeNums>
                </StyledGridElem>
                <StyledGridElem>
                  <SubtitleGrid>Critical: </SubtitleGrid>
                  <LargeNums>{critical.toLocaleString()}</LargeNums>
                </StyledGridElem>
                <StyledGridElem>
                  <SubtitleGrid>Deaths: </SubtitleGrid>
                  <LargeNums>{deaths.toLocaleString()}</LargeNums>
                </StyledGridElem>

                <StyledGridElem>
                  <SubtitleGrid>Today Cases: </SubtitleGrid>
                  <LargeNums>{todayCases.toLocaleString()}</LargeNums>
                </StyledGridElem>
                <StyledGridElem>
                  <SubtitleGrid>Today Recovered:</SubtitleGrid>
                  <LargeNums>{todayRecovered.toLocaleString()}</LargeNums>
                </StyledGridElem>
                <StyledGridElem>
                  <SubtitleGrid>Today Deaths:</SubtitleGrid>
                  <LargeNums>{todayDeaths.toLocaleString()}</LargeNums>
                </StyledGridElem>

                <DateRow>
                  <Subtitle>Updated: </Subtitle>
                  <p>{date.toLocaleString('default', options)}</p>
                </DateRow>
              </>
            );
          })}
        </StyledGridSection>
      )}
    </StyledSection>
  );
};

export default DataAll;

The part of the projects looks now like this:

Next steps:

Add news about covid
Add line or bar charts
Add search functionality
Change markers on a map

How to create tables with React Table library - Covid Map project day 4.

Magda Rosłaniec — Sun, 02 May 2021 10:40:18 +0000

In this series of posts, I'm describing my learning process while creating a React project. I'm quite awful at learning from courses and my preferred method is coming up with an idea for a project and then trying to find the solution to problems by reading docs, blog articles, watching bits of tutorials.

The main part of the project is a map with a marker for each country. When you click the marker, the popup will appear with information about Covid cases in that country. I have already described how to add leaflet.js map and how to create markers for each country
But I thought that it could be also useful to see the same info as a table.

I have data fetched (I was writing about it yesterday: How to fetch data from more than one API )

Things I've done (problems and my solutions):

I. At first I was thinking about doing the list of countries as a scrollable sidebar. But I didn't like how it looked like. Then I wanted to create a table but I didn't know how to make a table responsive or rather again scrollable and I also started wondering what would be the best way to add data to the table and then make it searchable and sortable.

I could spend time trying to reinvent the wheel but I decided to look for a library that can help me. Part of me still thinks that it's cheating but I keep convincing that part that using different libraries is also a skill.
I didn't want any massive CSS UI library so I decided to use react-table one.

How to add react-table to the project?

It is easy to start by adding yarn add react-table or npm install react-table --save

And then we can copy and paste quite a lot of code from documentation. They've got many examples on codesandbox.io.

I'm trying to create reusable components as well as separate UI components from the rest so I divided the code into 3 part.

First I created TableElements.js component in folder components/modules and there I pasted the CSS part. I'm using styled-components. So first I had to import them yarn add styled-components. And now time for my TableElements.js


import styled from 'styled-components'

export const Styles = styled.div`
  table {
    border-spacing: 0;
    border: 1px solid #e8eaed;
    overflow: auto;
    font-size: 0.9rem;
  tr {
    :first-child {
       display: none;
    }
    :last-child {
       td {
          border-bottom: 0;
        }
      }
    }
  th {
    :nth-child(2) {
        text-align: left;
        padding-left: 0;
    }
  }
  th,
  td {
      margin: 0;
      padding: 1rem;
      border-bottom: 1px solid #e8eaed;
      border-right: 0;
      :last-child {
        border-right: 0;
      }
    }
  }
`;

At first, I only changed the borders' colour and added overflow:auto to make the table scrollable.

Now I created Table.js component where I put all the code from the docs. It builds the table UI.

import React from 'react'
import {useTable} from 'react-table'

const Table = ({ columns, data}) => {

    const {
        getTableProps,
        getTableBodyProps,
        headerGroups,
        rows,
        prepareRow,
    } = useTable({
        columns,
        data
    })

    return (
     <table {...getTableProps()}>
      <thead>
        {headerGroups.map(headerGroup => (
          <tr {...headerGroup.getHeaderGroupProps()}>
            {headerGroup.headers.map(column => (
              <th {...column.getHeaderProps()}>{column.render('Header')}</th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody {...getTableBodyProps()}>
        {rows.map((row, i) => {
          prepareRow(row)
          return (
            <tr {...row.getRowProps()}>
              {row.cells.map(cell => {
                return <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
              })}
            </tr>
          )
        })}
      </tbody>
    </table>
  )
}

export default Table

The next step was adding the table to the CountryList.js component.

First we need to import Styles from TableElements.js, the Table.js component as well as useMemo() hook from react

import React, {useMemo} from 'react'
import {Styles} from './modules/TableElements'
import Table from './Table'

Then I have to pass countries data. I was showing last time how it goes through App.js to TableSection.js and then to CountryList. Yes, I'm jumping a bit between components. My plan was to reuse the TableSection to show there different kinds of tables. In the meanwhile, I also created some elements of this section using styled-components (but won't be showing them all here)

// TableSection.js
import React from 'react'
import CountryList from './CountryList'
import {StyledStatSection, StyledTableSection} from './modules/Sections'
import { SectionTitle} from './modules/Titles'
import {StyledButton} from './modules/Buttons'


const TableSection = (props) => {
    return (
        <StyledStatSection>
            <SectionTitle>Statistics</SectionTitle>
            <div>
              <StyledButton primary>Cases</StyledButton>
              <StyledButton>Vaccines</StyledButton>
            </div>
            <StyledTableSection>
              <CountryList  countries={props.countries} />
            </StyledTableSection>

        </StyledStatSection>
    )
}

export default TableSection

The whole useMemo() hook is taken from the documentation's example. I had to change only the headers into my own titles of columns. Accessors are used to build a data model for the columns. So in each column, I was taking the name of the variable from the API as an accessor.

const CountryList = ({countries}) => {
const columns = useMemo(
    () => [
    {
       Header: "Cases",
       columns: [
         {
          Header: "",
          accessor: "countryInfo.flag",
         },
         {
          Header: "Localization",
          accessor: "country"
         },
         {
         Header: "All Cases",
         accessor: "cases",
         },
         {
         Header: "Today's Cases",
         accessor: "todayCases",
         },
         {
         Header: "All Deaths",
         accessor: "deaths",
         },
         {
         Header: "Deaths Per Million",
         accessor: "deathsPerOneMillion",
         },
         {
         Header: "Deaths Today",
         accessor: "todayDeaths",
         },
        ]
     }
    ], []
  )
 return (
  !countries ? (<p>Loading...</p>) : (
     <Styles>    
       <Table columns={columns} data={countries} />
     </Styles>
    )           
   )   
  }

export default CountryList

So the table was working but I wasn't pleased with two things. I wanted to have flag images in the first column and I also wanted to format large numbers. All of this is possible because we can pass not only strings to accessors but also functions.

In the first column I added a fat arrow function that gets the cell's value - link to an image and passes it into <img> tag
Cell: ({cell: { value } }) => <img src={value} alt="Flag" width={30} />
The 3rd column and the next ones are displaying numbers. It's hard to read large numbers without any spaces so I created a small function to change it.

    const  formatLargeNums = (value) => {              
        return value.toLocaleString().replace(/,/gi, " ")
    }

And then I'm again adding it to the useMemo() hook
Cell: ({cell: { value }}) => formatLargeNums(value)

So my useMemo() hook again:

 const columns = useMemo(
    () => [
    {
      Header: "Cases",
      columns: [
        {
         Header: "",
         accessor: "countryInfo.flag",
         Cell: ({cell: { value } }) => <img src={value} alt="Flag" width={30} />                        
        },
        {
          Header: "Localization",
          accessor: "country"
        },
        {
          Header: "All Cases",
          accessor: "cases",
          Cell: ({cell: { value }}) => formatLargeNums(value)

         },
         {
           Header: "Today's Cases",
           accessor: "todayCases",
           Cell: ({cell: { value }}) => formatLargeNums(value)            
         },
         {
           Header: "All Deaths",
           accessor: "deaths",
           Cell: ({cell: { value }}) => formatLargeNums(value)          
          },
          {
           Header: "Deaths Per Million",
           accessor: "deathsPerOneMillion",
           Cell: ({cell: { value }}) => formatLargeNums(value)       
          },
          {
           Header: "Deaths Today",
           accessor: "todayDeaths",
           Cell: ({cell: { value }}) => formatLargeNums(value)
          },
        ]
      }
    ], []
  )

At the moment (after adding some more styling) the table looks like this:

As I wrote in the beginning I also wanted the table to be sortable. It's pretty easy with react-table. In the Table.js I had to add {useSortBy} in imports as well as in const at the top of the Table function

import React from 'react'
import {useTable, useSortBy} from 'react-table'

const Table = ({ columns, data}) => {

    const {
        getTableProps,
        getTableBodyProps,
        headerGroups,
        rows,
        prepareRow,
    } = useTable({
        columns,
        data
    },
    useSortBy
    )

    return (
// ....the same code as before

and then inside the return part of the function, we need to add getSortByToggleProps() to <th> tag together with className for descending and ascending sorting.

<th {...column.getHeaderProps(column.getSortByToggleProps)}
 className={
    column.isSorted
      ? column.isSortedDesc
          ? "sort-desc"
          : "sort-asc"
      : ""
    }
>
 {column.render('Header')}
</th>

Now, when we click on the column's header it sorts out the data but to make sure if it's descending or ascending order we can add arrows in CSS inside our table in TableElements.js / Styles

.sort-desc {
      :nth-child(n+3) {
        box-shadow: none !important;
    &:after {
      content: "↓";
      float: right;
      padding-left: 2px;
    }
      }

  }

  .sort-asc {
    :nth-child(n+3) {
      box-shadow: none !important;

     &:after {
      content: "↑";
      float: right;
      padding-left: 2px;
      }
    }   
  }

And I'm done with the Table part of my project. For now.
As you could notice, I wanted to add a table with data about vaccine coverage but I'm not sure about it.

Next steps:

Display global data - all cases, all deaths, all recovered and maybe all vaccine taken if I find the data.
Add searching to the table but I would like to join it somehow with the map.
Create custom markers, redesign popups and add layers to the map.

How to fetch data from more than one API in one project. Covid Map project - day 3.

Magda Rosłaniec — Sat, 01 May 2021 20:32:37 +0000

Last time I was writing about fetching the data from one API using a custom useFetch hook.
Part 2 Covid Map React project day 2
It was a few days ago. In the meanwhile, I decided to add a few more APIs and was trying to find out the best way of doing it. I felt a bit helpless because my app was crashing over and over again. In fact, it was not a problem with fetching the data but with displaying it. But this problem postponed my writing here.

Things I've done:

After all these trials and errors I decided to still be using useFetch hook but fetch data using Promise.all().
First, in App.js I created a list of URLs

  const urls = [
    'https://disease.sh/v3/covid-19/countries',
    'https://disease.sh/v3/covid-19/all',
    'https://disease.sh/v3/covid-19/historical?lastdays=30',
    'https://disease.sh/v3/covid-19/vaccine/coverage/countries?lastdays=30'
  ]

and pass the urls into the useFetch() function in useFetch.js file

const useFetch = (urls) =>

Then I created a bunch of variables and functions using useState.

 const [countries, setCountries] = useState(null);
    const [countrJson, setCountrJson] = useState(null);
    const [global, setGlobal] = useState(null);
    const [dataHistorical, setDataHistorical] = useState(null)
    const [dataVaccine, setDataVaccine] = useState(null)
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState(null);

Next, I change a bit the try part of my useEffect().

const res = await Promise.all(links.map((url) => fetch(url)))
const data = await Promise.all(res.map((r) => r.json()))

Promise.all() is the JavaScript method that goes over iterable (list of links in my case) and returns a single Promise for each link or if something goes wrong we have a message about an error.

My next step was to transform data from countries API into geoJson to display data on a map. I also need the same data as a simple json, so I created one more variable for it.
I set all the data as React states

  setCountries(geoJson)
  setCountrJson(data[0])
  setGlobal(data[1])
  setDataHistorical(data[2])
  setDataVaccine(data[3])
  setLoading(false)

I returned all the data

 return { countries, countrJson, global, dataHistorical, dataVaccine, loading, error}

To make it work I also had to access those variables in App.js component.

const { countries, countrJson, global, dataHistorical, dataVaccine, loading, error } = useFetch(urls)

useFetch.js

import { useState, useEffect } from 'react';

const useFetch = (urls) => {
    const [countries, setCountries] = useState(null);
    const [countrJson, setCountrJson] = useState(null);
    const [global, setGlobal] = useState(null);
    const [dataHistorical, setDataHistorical] = useState(null)
    const [dataVaccine, setDataVaccine] = useState(null)
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState(null);


    useEffect(() => {
        const fetchData = async () => {
            const links = urls
            console.log(links)
            setLoading(true);
            try {
              const res = await Promise.all(links.map((url) => fetch(url)))
              const data = await Promise.all(res.map((r) => r.json()))


              const geoJson = {
                type: "FeatureCollection",
                features: data[0].map((country = {}) => {
                  const { countryInfo = {}} = country;
                  const { lat, long: lng} = countryInfo;
                    return {
                       type: "Feature",
                       properties: {
                           ...country,
                       },
                       geometry: {
                           type: "Point",
                           coordinates: [lat, lng]
                       }
                    }
                  })
                }

                setCountries(geoJson)
                setCountrJson(data[0])
                setGlobal(data[1])
                setDataHistorical(data[2])
                setDataVaccine(data[3])
                setLoading(false)
            } catch (error) {
                console.log(`Failed to fetch data: ${error.message}`, error)
                setError(error)
            }


        }
        fetchData()
    },[])


    return { countries, countrJson, global, dataHistorical, dataVaccine, loading, error}
}

export default useFetch

And App.js

import './App.css';
import Map from './components/Map'
import Header from './components/Header'
import TableSection from './components/TableSection'
import { StyledMain } from './components/modules/Sections'

import useFetch from './useFetch'


function App() {

  const urls = [
    'https://disease.sh/v3/covid-19/countries',
    'https://disease.sh/v3/covid-19/all',
    'https://disease.sh/v3/covid-19/historical?lastdays=30',
    'https://disease.sh/v3/covid-19/vaccine/coverage/countries?lastdays=30'
  ]

const { countries, countrJson, global, dataHistorical, dataVaccine, loading, error } = useFetch(urls)

if (error) return <p>Error!</p>;

  return (
    <div className="App">
    <Header />
    {loading ? <p>Loading ...</p> :  <Map countries={countries} /> }
    <StyledMain>
    {loading ? "" : <TableSection countries={countrJson} /> }
    </StyledMain>
    </div>
  );
}

export default App;

As you can see, I don't use all the data from each API yet, but I wanted to have it solved somehow before going further.

I also refactored part of the code in Map.js to make the variables more readable.

 {props.countries ? props.countries.features.map(place => {
        const { coordinates } = place.geometry    
        const { flag, _id } = place.properties.countryInfo    
        const { country, cases, deaths, recovered, todayCases, todayDeaths, todayRecovered, updated } = place.properties;

        let date = new Date(updated)

        return (
        <Marker icon={redIcon} position={coordinates} key={place.properties.country}>
        <Popup  >
          <img src={flag} style={{width: "30px", height:"auto"}} />
          <h2>{country}</h2>
          <p><strong>Cases:</strong> {cases} | <strong>Cases Today:</strong> {todayCases}</p> 
          <p><strong>Deaths:</strong> {deaths} | <strong>Death Today:</strong> {todayDeaths}</p>
          <p><strong>Recovered:</strong> {recovered} | <strong>Recovered Today:</strong> {todayRecovered}</p>
          <p><strong>Last Update:</strong> {date.toLocaleDateString()}</p>
        </Popup>
        </Marker>
        )
      })
      : ""}

I think I will redo this part again but for now, the popup looks like that:

Next step:

Create a table to display data for each country.

Covid map - React project - day 2

Magda Rosłaniec — Sun, 25 Apr 2021 21:29:04 +0000

Yesterday I started a project using React, Leaflet.js and Open Disease Data API. In this series, I'm writing about things I'm doing and problems I'm encountering while creating this project.
Part 1: https://dev.to/makneta/covid-map-react-project-day-1-29fd

Things I've done on day 2:

Fetched data from disease.sh about each country
Formatted data into GeoJSON
Displayed a marker for each country with a popup that contains basic data

Problems I've encountered and my solutions:

1. I wanted to use another approach for storing data from an API and decided to create a custom useFetch hook.

While building a custom hook we are extracting component logic into a reusable function. So a custom hook is placed in a separate file in the src folder and it needs to start with use and it also has the ability to call other hooks.

In the useFetch function, I'm passing URL as a parameter and I'm using useState and useEffect with Fetch API. Almost the same as if I was fetching the data inside App.js or any component.

The function returns 3 elements: data from API, loading and error.

//useFetch.js

import { useState, useEffect } from 'react';

const useFetch = (url) => {
    const [data, setData] = useState(null);
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState(null);

    useEffect(() => {
       const fetchData = async () => {
        setLoading(true);
        try {            
            const res = await fetch(url);
            const json = await res.json();
            setData(json)          
            setLoading(false)
        } catch (error) {
          console.log(`Failed to fetch countries: ${error.message}`, error)
            setError(error)
        }
       };
       fetchData()
    }, [url])
    return { data, loading, error}
}

export default useFetch

The next step is to access the data, loading and error in the Map.js component.

//Map.js

import useFetch from '../useFetch';

const Mapt = () => {
  const url = 'https://disease.sh/v3/covid-19/countries'
    const { data, loading, error } = useFetch(url)
    console.log(data)    

    if (error) return <p>Error!</p>;
    if (loading) return <p>Loading...</p>;
  return (
      <MapContainer></MapContainer>
      )
}
export default Map

At the moment I'm not using any data yet.

2. To display the data on a map I needed to format them into GeoJSON.

What is GeoJSON?

From Wikipedia:

GeoJSON is an open standard format designed for representing simple geographical features, along with their non-spatial attributes. It is based on the JSON format.

On Leaflet.js we can find an example code of GeoJSON

// from Leaflet.js
var geojsonFeature = {
    "type": "Feature",
    "properties": {
        "name": "Coors Field",
        "amenity": "Baseball Stadium",
        "popupContent": "This is where the Rockies play!"
    },
    "geometry": {
        "type": "Point",
        "coordinates": [-104.99404, 39.75621]
    }
};

Now I need to do the same with my own data. At first, I was trying to create this GeoJSON in my Map.js file. But I was wrong. It needs to be done in the useFetch hook, just after fetching the response from API.

So I'm creating a geoJson object with the type "FeatureCollection". Because API contains hundreds of arrays I need to loop through all of them using map() to have access to those features.

// useFetch.js
// ... 
try {            
      const res = await fetch(url);
      const json = await res.json();

      const geoJson = {
          type: "FeatureCollection",
          features: json.map((country = {}) => {
          const { countryInfo = {}} = country;
          const { lat, long: lng} = countryInfo;
          return {
               type: "Feature",
               properties: {
                  ...country,
              },
               geometry: {
                  type: "Point",
                  coordinates: [lat, lng]
              }
            }
           })
        }
          setData(geoJson)
          setLoading(false)
        } 
// ...

Thanks to it I'm having access to all data from properties as well as coordinates. Those pairs of latitude (lat) and longitude(lng) are one per country.

3. Now I can access the data in `Map.js`. I'm using a ternary operator to check if there are any data and if data exists it's displaying the markers and popups, otherwise it should show nothing.

const Map = () => {
// I won't be rewriting the whole code only the part in which I'm displaying the Markers
// ...

return (
<MapContainer>
 {data ? data.features.map(country => {
   return (
    <Marker icon={redIcon} position={country.geometry.coordinates} key={country.properties.country}>
     <Popup>
       <h2>{country.properties.country}</h2>
       <p>Cases: {country.properties.cases}</p>
       <p>Deaths: {country.properties.deaths}</p>
       <p>Recovered: {country.properties.recovered}</p>
       <hr />
       <p>Cases Today: {country.properties.todayCases}</p>
       <p>Death Today: {country.properties.todayDeaths}</p>
       <p>Recovered Today: {country.properties.todayRecovered}</p>
        <hr />
        <p>Last Update: {country.properties.updated}</p>
      </Popup>
     </Marker>
        )
      })
    : null}
</MapContainer>
// ... 
)
}
export default Map

I'm aware that my Popups aren't clean. It can be done better.

At the moment the map looks like this:

Next step(s):

Refactor code in Popups part
Add country shapes and colours
Find out if I can create one useFetch for a few APIs

Covid map - React project day 1.

Magda Rosłaniec — Sat, 24 Apr 2021 21:51:21 +0000

I've been learning React for a while and I like doing it through writing projects. Yes, I use tutorials and courses although I don't follow them 1 to 1 in my projects.

Here I want to take notes for my new project: Covid map and post them in public. In this project, I want to show the number of Covid-19 cases for each country and maybe vaccine coverage.

Libraries and APIs I'm going to use:

React.js
Leaflet.js (https://leafletjs.com/) and React-Leaflet.js (https://react-leaflet.js.org/)
Open Disease Data https://disease.sh/

Things I've done so far:

Created project with npx create-react-app covid-map
Installed leaflet and react-leaflet with yarn add leaflet react-leaflet
Added MapContainer and Marker with Popup to Map component

Problems I've encountered so far:

After installing leaflet and react-leaflet, even though I copied the example code from react-leaflet website, the map looked weird. It turned out that I needed to import CSS from node_modules like that: import "leaflet/dist/leaflet.css"
I had a problem with displaying the Marker icon. Instead of the icon, I could only see a broken image. I found a piece of code that supposed to help:

import * as L from 'leaflet'
delete L.Icon.Default.prototype_getIconUrl;
 L.Icon.Default.mergeOptions({
      iconRetinaUrl: require("leaflet/dist/images/marker-icon-2x.png"),
      iconUrl: require("leaflet/dist/images/marker-icon.png"),
      shadowUrl: require("leaflet/dist/images/marker-shadow.png")
    });

But I couldn't make it work.

My solution

Instead, I used an icon from a small repo: https://github.com/pointhi/leaflet-color-markers

import * as L from 'leaflet'


const redIcon = new L.Icon({
  iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-red.png',
  shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
  iconSize: [25, 41],
  iconAnchor: [12, 41],
  popupAnchor: [1, -34],
  shadowSize: [41, 41]
});

<Marker icon={redIcon}><Marker>

I'm not sure yet if I use that icon in the project to the end.

Next step(s):

Fetch data from the API.
Add markers to all countries included in the Open Disease Data API for covid.
Add information about the number of Covid-19 cases and deaths to popup.

How to take part in 100 Days Of Code challenge when you're a newbie?

Magda Rosłaniec — Thu, 22 Apr 2021 22:17:33 +0000

Last time I was writing about finding the time to code regularly. Now I want to write how 100 Days Of Code can help in that.

What is the 100 Days Of Code challenge?

The challenge has 2 main rules:

code minimum 1 hour for 100 days in a row
tweet about your progress with hashtag #100daysofcode

When I started my first round there were some additional rules, so it quickly helped me to avoid the "tutorial hell" and make some friends on Twitter.
Those additional rules were (at least I remember them like that):

it counts when you work on side projects more than when you only watching tutorials,
interact with at least 2 people daily on Twitter who take part in this challenge.

If you code every day and tweet about your progress, don't forget to comment or at least like other people's tweets about the same challenge.
It is easier to stick to it when you feel a sense of community and you're amongst people with similar interests.

So this challenge is not only for code newbies. It is also for people who want to learn a new framework or programming language outside their work. But as I can see, it is the most popular among people who want to go into the programming world.

You can read more on the official website: https://www.100daysofcode.com/

But if you are a newbie, you can ask yourself "How can I do projects if I don't know how to code?".

We don't have to build a website or an application from day one. The project can be to learn to create simple websites in HTML and CSS or to learn Python and we CAN use tutorials for this. But the best way to learn anything is to solve problems. And we should use tutorials where we have to solve problems with minimal help only.

If you have never coded before and want to try, there are plenty of websites where you can do it for free.

The best resources (in my opinion) are with interactive editors to write the code. They present small chunks of material and then you have to use things you've learnt to build small projects.

Codecademy has a few languages to try. https://www.codecademy.com/learn
Parts of their courses are free and even more paid ones with projects. I don't like their subscription model but everyone should evaluate it on their own.
Another excellent place to start learning is
FreeCodeCamp https://www.freecodecamp.org/. Everything there is free - interactive exercises, projects, certificates, great forum/community.
And we shouldn't forget about KhanAcademy. They have lessons on computer programming and computer science. https://www.khanacademy.org/computing/computer-programming
They teach the basics of JavaScript, HTML & CSS, SQL but also algorithms or cryptography.

There are many more platforms that can help you learn to code but those are my top 3.

You can also use 100 Days Of Code to be better at solving problems. One way of doing it is solving coding exercises.
With minimal knowledge of JavaScript or Python (and a few other languages), you can start solving puzzles on Edabit.
https://edabit.com/challenges.

If you're stuck, there are always resources that can help you solve the problem. And you can also read the solutions if you're willing to lose (or don't earn) some points.
Reading other people solutions is also a great way of learning and reading code in small bits.

Why should I do it in public?

Posting even a few sentences about things you're learning is also learning in public. We can feel a bit uneasy with it. But I think it's great to overcome that feeling.

One of the benefits I've already mentioned is making friends. If you start interacting with people, you will start talking to many or a few more and more often.
When you commit to something publicly, you think about it more often and the probability that you start doing it is higher. In that way, you start creating a new habit.
If you have a problem on your way because you feel low, unmotivated or stuck, you can also seek help amongst other participants of 100 days of code challenge.

Have you tried 100 Days Of Code challenge? Do you think it can help in your coding journey?

Forem: Magda Rosłaniec

How to prepare Django project before pushing on GitHub

Part 2: How to prepare project before adding Git (version control)

Step 1: Create .gitignore file

Step 2: Install python-decouple

Step 3: Store all sensitive data in .env file

Step 4: How to use python-decouple in settings.py file

Step 5: How to change Secret Key

In this part we:

Commands used in the terminal (specific for Python/Django project)

Let's learn Django together (part 1)

Part 1: How to start a Django project.

Step 1: Install or check Python version

Step 2: Make sure you have pip installed

Step 3: Create a virtual environment

Step 4: Let's install Django

Step 5: Start a Django project

Step 6: Run the project now

Step 7: Add small changes in website/settings.py

In the next section we are going to learn how to prepare our project for adding Git.

In this part we:

Commands used in the terminal (if python or pip doesn’t work, try python3, pip3)

Functions. Learning Go - part 3.

Learning Go - day 2

1. For loops and if statements

What's a block?

What's the scope?

What is continue and break?

2. There's a package for everything

One more thing to make packages more confusing ;-)

Learning Golang - day 1

1. Main structure of a file in Go:

2. Go is a strictly typed language.

3. There are at least 3 ways of declaring variables:

4. We can convert types.

5. If we declare a variable, we need to use it.

6. Variables and functions usually start with a lowercase.

New project - pill tracker.

Objects are not valid as a React child - Covid Map project part 5

Things I did and problems I encountered.

The part of the projects looks now like this:

Next steps:

How to create tables with React Table library - Covid Map project day 4.

Things I've done (problems and my solutions):

How to add react-table to the project?

Next steps:

How to fetch data from more than one API in one project. Covid Map project - day 3.

Things I've done:

useFetch.js

And App.js

Next step:

Covid map - React project - day 2

Things I've done on day 2:

Problems I've encountered and my solutions:

1. I wanted to use another approach for storing data from an API and decided to create a custom useFetch hook.

2. To display the data on a map I needed to format them into GeoJSON.

3. Now I can access the data in Map.js. I'm using a ternary operator to check if there are any data and if data exists it's displaying the markers and popups, otherwise it should show nothing.

Next step(s):

Covid map - React project day 1.

Libraries and APIs I'm going to use:

Things I've done so far:

Problems I've encountered so far:

My solution

Next step(s):

How to take part in 100 Days Of Code challenge when you're a newbie?

What is the 100 Days Of Code challenge?

But if you are a newbie, you can ask yourself "How can I do projects if I don't know how to code?".

If you have never coded before and want to try, there are plenty of websites where you can do it for free.

Why should I do it in public?

3. Now I can access the data in `Map.js`. I'm using a ternary operator to check if there are any data and if data exists it's displaying the markers and popups, otherwise it should show nothing.