Virtual environment (Python)

Create a virtual environment for your Python app in a few steps. (For Linux and OS X). Go inside the directory where you want your virtual environment and type in the terminal:

This command will create a directory called myvenv with the virtual environment.

Start your virtual environment by running:

Now that you inside the virtual environment (you will know it because the prompt of the console is prefixed with ( myenv )) you can install whatever you need using pip. To get the latest version of pip type:

When working within a virtual environment, python will automatically refer to the correct version so you don’t need to specify anything.

Create a requirements.text file and add packages inside.

Run the following to install them:

The end! Happy coding!

Junior developer interview questions

I am looking for my first job as a Junior developer and during my interviews I was asked the following:

  • Difference between === and ==:
    • === Compares the value ad the type (true / false).
    • == Compares only type.
  • Difference between slack and heap memories:
    • Slack memory: local variables and function call.
    • Heap memory: store objects.
  • Difference between data type and data structure:
    • Data type: the most basic classification. (int, string, var).
    • Data structure: collection of data types. (stacks (LIFO(last in first out)), queues, linked lists, binary tree)
  • Difference between padding and margin:
    • padding¬†is the space between the content and the¬†border, whereas¬†margin¬†is the space outside the border.

Time complexity

  • You can get it counting the number of operations
  • Time complexity is defined as a function using Big O notation.
  • n is the size of the input.
  • O is the worst case scenario.
  • The O function is the growth rate in function of the input size n.

O(1) Constant : odd or even / look up table / check if item in array is null / print first element from a list / find on a map.

O(log n) Logarithmic: find in sorted array with binary search.

O(n) Linear: find max in unsorted array / duplicate elements in array with Hash map / find / print all values.

Algorithms running times:

Factorial complexity(no good),

exponential complexity(no good),

polinomial complexity (no good),

linearithmic complexity (middle point),

linear time complexity (good)(for loop in one level array, searching, printing) O(n),

logarithmic complexity (good) O(log n),

constant time complexity (best one)(swap variables). O(1)

Time Conversion

Problem from Hackerranck.

I am practising algorithms and tried this one today.

I first get the two first characters of the string ‘s’, the ones that represent the hour and change them to a number with parseInt and assign them to the variable hour.

If this variable hour is bigger than 12 I rest 12, if it is equals 12, hour would be the string ’00’ and for the rest of the cases I add 12.

Then I add hour to a substring of the argument without the two first characters and delete the two last characters too, the one that should be “AM” or “PM”.

My solution:

SuperGenPy

Creating a Django app with a Postgres db using Docker Compose.

I was following this great tutorial.

To run the app:

docker-compose up command from the top level directory for your project.

The app should be running at port 8000 on your Docker host.

Now that I have my app set and running I want to start creating my content.

I want to create an app where users can login/logout securely and perform CRUD operations with their logins.  That means I will need a Login model. Each login will have some attributes too: a version, length, hash, type and prefix.

Some webs ask you to change your password many times so you can store in this interface the number of the version where you are currently, and don’t have to remember it. Same thing happens with that extras that some webs ask you, like a specific length, or special characters that the SuperGenPass don’t use. If a web asks me about a special character I put it at the beginning of the generated password. This interface would be a great place where you can store all info without compromising your security.

Creating my model.

To be tidy, I am going to create a new app, dashboard, and let know to Django to use it, in supergenpy/settings.py I add ‘dashboard’ to INSTALLED_APPS.

I create my Login model inside models.py and run my migrations:

docker-compose run web python manage.py migrate --noinput

Now, what I want is to see my Login model! For that I create a superuser.

I need the id of my docker-compose container:

docker-compose ps -q

and I run the following command

docker exec -it container_id python manage.py createsuperuser

When you run this command, the server has to be running.

Then, you can return to the browser and login in the admin dashboard (http://localhost:8000/admin/) with the credentials you have set up in the command line when creating the superuser.

After graduating

After a good break with family I am back in London to start looking for a job. Only one hour after I have opened my laptop I got a LinkedIn message from a fintech startup offering an opportunity for a developer. Half an hour later I had a phone call with them! Incredible!

The are looking for a developer working with javascript, node, react native and other softwares. I don’t have any experience with react native but asked them for a week, so I could study and try their code challenge!

Nervous!! But I got the following course. Let’s dive deep into it!

For what I have understood React Native is a fast framework where you can use your knowledge of React.js and JavaScript.

I doesn’t allow you to use HTML tags, it has its own special components compiled to native views:

<div> would be <View>

<input> would be <TextInput>

The logic of the app is not compiled. JS is thread hosted by React Native app. It runs inside a virtual machine inside your native app, the Javascript core, and you still have access to the native platform, the modules and the API. So you create your app with JS and these special components.

Creating a new native app.

There are two different ways:

-expo-cli tool, Expo is a third party service and it gives you a managed app development.Is simplifies the development but it has limits!

-and react native CLI. It is managed by the react team. Bare-bone development.

Expo is easier to use and if any case you need more flexibility you can “eject” and switch to the react native CLI.

Using Expo what you do is install an app, the Expo client, to your native device or simulator that is your phone, laptop… and so your app(all your code and configuration) can be loaded into the Expo App. Expo allows you to publish standalone apps too.

Complexity Theory cheat sheet

Space complexity: how much memory an algorithm needs

Time complexity: how much time an algorithm needs

We do care about time complexity, but how do we measure absolute time?

With the number of steps.

The algorithm’s running time depends on the number of items of the input, the input size.

The order of growth: how the algorithm will scale and behave with the input size.

For us it is very important the connexion between the running time and the input size.

Linear time complexity

Our goal is ended up with an approximately linear algorithm in terms of the input. If the algorithm needs 1 ms to process 10 items, 2 ms for 20 items and 10 ms for 100 items it is a linear algorithm. If the third step take for example 100 ms it wouldn’t be linear.

Asymptotic analysis

We only care about the big size inputs and we only keep the terms that grow fast as N becomes larger.

Complexity notations:

  1. The big ordo notation (o)

Describes the running time in terms of the input size.

f(n) = O( g(n) )

f is the running time

n is the input size

2. Big omega notation

It describes the limiting behaviour of a function.

f(n) =¬†ő©( g(n) )

3. Big theta notation

It describes the limiting behaviour of a function.

f(n) =¬†őė( g(n) )

Algorithms running times:

Factorial complexity(no good),

exponential complexity(no good),

polinomial complexity (no good),

linearithmic complexity (middle point),

linear time complexity (good)(for loop in one level array, searching, printing) O(N),

logarithmic complexity (good),

constant time complexity (best one)(swap variables). O(1)

Complexity classes:

P (polynomial),

NP (nondeterministic polynomial),

NP-complete (the hardest problems in NP),

NP-hard

Linear search

We have a one dimension array and want to search for a number.

Best case scenario: the first time item is the one we are looking for. O(1) running time.

Worst case scenario: the item is not in the array. O(N) running time.

Average case scenario: Item is uniformly distributed from the first index to the last index. O(N) running time.

Binary search

We want to find an item in an array, this time the array is sorted. We can use binary search only if the array is sorted.

If we know de index we can get it with O(1) constant time complexity.

If we don’t know the index we can start at the middle, on every iteration we can discard half the items.

Binary search has logarithmic running time. O(logN)

Bubble sort

Repeatedely steps through the list to be sorted, compares each pair of adjacent items and swaps them if they are in the wrong order.

It is too slows and impractical.

Has quadratic running time O(N2).

Redux (on process)

Redux helps us to create a single source of truth, to group the state of our components in a JavaScript object separate from our containers or components. We can get and update the state we want connecting our component to this separate object. We wrap our component tree so we have access to Redux functions. We can grab the state we want  and Redux will map it to our component as a prop.

We keep our state in the store. To update the data we have in the store we have to send an action, with a type and maybe a payload to the store, who send it to our reducer that holds information for how Redux can update that state depending on the type of the action. Actions and reducers are POJOS.

Any component ‘connected’ will be able to modify the state using an action we’ve defined.

We keep our state in one JS object, the store, and our actions and reducers on another two different JS objects.

Reducers will need a state and an action, and Actions will need a type property and an optional payload.

When we update the state it is very important not return null or undefined, that’s why we use a default return.

Reducers are pure functions. Our reducer never updates the previous state, creates a new state object.

The reducer updates the state but doesn’t persist these changes. To persist these changes we can reassign the return value of the reducer to a variable. We can encapsulate that in a function, in dispatch.

We dispatch an action to the store, who calls our reducer and returns to us a new state.

We create a store function ( which is a closure) to encapsulate the state (so we don’t change it by mistake in other places of our code), to encapsulate our dispatch function and to encapsulate a function to get the new state (getState). When we call this store function we get an JS object with our dispatch function as a method, which has access to state.

Redux works by having an action dispatched, which calls a reducer, and then renders the view.

Using Redux in an React app

To install Redux in my app I type into my console:

npm install --save redux 

npm install --save react-redux

npm install --save redux-thunk

  1. Initialize my store in index.js using createStore Redux function and pass it down to my top-level <App /> container.

To have access to the store in any of our components we import the react-redux function connectinto the component where we want to have access.

If we want some state we can use:

We can access these data as: this.props.whatEverWeWant. We can create our own customised props playing with the data of our store, with the state with have created in the state of our reducer. For example here we have whatEverWeWant only in the state, but if we want a prop like numberOfwhatEverWeWant we don’t modify our reducer, we can add numberOfwhatEverWeWant: state.whatEverWeWant.length¬†in our mapStateToProps and that’s it!

If we want to dispatch an action and update our store we do something like:

Then to be able to debug I have installed redux-devtools-extension and add this code to my index.js:

connect function

connect function listen to changes in the state.

When a change occurs it calls the function mapStateToProps()where we specified the info we want from the state and gives it to us as a prop. We have to write this function ourselves. This function¬†has access to the entire store’s state.

And then we finally specify which component of our app we are providing with this data.

If we don’t give a second argument to connect,(mapDispatchToProps would be the one), connect gives us the prop dispatch for free! This second method¬†allows us to customise how we send actions to our reducer. If it is not for this second argument, our component wouldn’t know anything about Redux and our store.

One pattern is to only connect Container components.

Redux Actions

Actions are POJOs that has a property of type.

We dispatch our action to the store (whit the dispatch method), the store passes the action to the reducer, that checks the type property to see what he has to do, what changes will make to the state. Remember reducer takes two parameters, state and action.

We should wrap our actions into functions, in case these actions have some parts that will need to change or add different payload properties (like a user to the list of user), and we pass those functions to the dispatch method. Those functions are called action creators.

We keep our React application separated from our Redux application by using the Provider component and the connect() function.

We don’t reference our store in our components. mapStateToProps() and mapDispatchToProps() allow us to separate concerns. The first one helps us to manage our state and the second one is an action creator, mapped as a prop. Our components only display state, they don’t manage it.

We pass these two functions to connect(). When connect()' executes it calls the first function, mapStateToProps, and pass it the current state. Then it calls the second function and passes it the dispatch function. The dispatch function takes an action, so don’t forget to import the action :). Then we can access this dispatch function as a prop.

Refactoring these methods.

This is equivalent to:

We can pass an anonymous function as first argument to connect, and we can pass a function, if we do this we have to do it as before, or an object and connect will pass it the dispatch function. If we pass an object, this one needs to contain key/value pairs for each action creator we want to become props. As of JavaScript ES6, when we have an object with a key and value with the same name, we can use the shorthand syntax and write { addItem }.

combineReducers()

It combines the different reducers we pass to it into one single reducer that we pass to our store.

npm

npm (Node Package Manager) is a command line tool and helps organizes and install packages in our JS project.

* Node is a JS runtime, to run JS locally in your computer instead of in a browser.

npm is automatically installed along with Node.js so to check if you already have it in you computer run:

node -v

If a version doesn’t appear you can use the Node Version Manager to install Node.js.

To check the version of npm:

npm -v

To update it:

npm install --global npm

npm works with the package.json file and has a command to create it: npm init

The package.json file includes info about the project and tells to npm which packages are required for the project. When we run npm install in a project with a package.json file, npm downloads and install all packages listed in the file from npmjs.com.

If you are working in a local environment running npm install creates the folder node_modules, with all the downloaded packages.

To install more packages than the listed in the package.json, run:

npm install <name_of_the_package>