DEV Community: Hermes

Understanding flex-basis and flex-grow

Hermes — Fri, 03 Dec 2021 01:49:06 +0000

I recently started The Odin Project and I hit a wall during the FlexBox section. I had a bit of trouble understanding exactly how flex-basis in particular functioned relative to different flex-grow and flex-shrink values so after going taking time to go through different resources, I've found a way that helped me understand which is just through a bit of ratio math.

Terminologies

flex-basis - This defines the default size of an element before the remaining space is distributed. It can be a length (e.g. 20%, 5rem, etc.) or a keyword. Default value of auto which takes width/height instead depending on flex-direction. If no width/height is set then it uses the content size.

flex-grow - This defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion. It dictates what amount of the available space inside the flex container the item should take up. Default value of 0.

You can think of flex-basis as a virtual width or the width that the entire flex system sees relative to a particular element. Set a flex-basis of 50px to the fourth element and observe the change.

The boxes are colored along with the container to show you changes in width/increase in available space in container

The 4th box decreases in size by 50px and the available space increases +50px. It basically put up part of its width as being free to take. If the code were running on your browser natively and you checked the flex section in your developer tools, you would see something like:

Notice how the final size says 50px , comment out the flex-basis styling and notice it goes back to the set width which is because the default value of flex-basis is auto and so it defaults to the width of the item.

Now add the flex-basis styling back and then set a flex-grow of 1 to the box and observe the changes.

By increasing its flex-grow, we've given it permission to grow and essentially take up any available space . Notice that it takes up the 150px space that is available.

Like before, temporarily comment out flex-basis and see what changes, this time since it's width is back to 100px , the available space is 100px and it still takes it all. Add the flex-basis value back.

Set a flex-grow of 1 to the 3rd box and observe the changes.

This time the 4th box takes only 75px of space, same goes for the third box. Why? Well, now we gave the 3rd box permission to grow and it will do that. It will want to take a piece out of the available space just like the 4th does. How do they decide how the space is allocated? simply by ratio.

Assume the flex-grow values of items in a flex-container as a ratio of how much available space it will get.

Box #1 - 0 Box #2 - 0 Box #3 - 1 Box #4 - 1 free space - 150px

What is listed above is the flex-grow values for the items in the flex container and the available space in the container. Lets see some simple ratio math.

Box #1

(0/(0+0+1+1)) * 150px = 0px Box 1 = 100px + 0px.

Box #2

(0/(0+0+1+1)) * 150px = 0px Box 2 = 100px + 0px.

Box #3

(1/(0+0+1+1)) * 150px = 75px Box 3 = 100px + 75px

Box #4

(1/(0+0+1+1)) * 150px = 75px Box 4 = 50px + 75px

Remember Box 4 lost 50px of its width when it set its flex-basis to 50px

As you can see, rather than box 3 and 4 splitting 100px which is the available space by default, they ended up splitting up 150px because has a flex-basis of 50px which you can interpret as having a perceived width(in terms of the entire flex system) of 50px.

If two elements have the same flex-grow value, they will receive the same amount of space from the available space.(in most cases)

Lets spice things up a bit, don't revert any current chances to the css code, give the 1st box a flex basis of 80px and a flex-grow of 1, also give Box 2 a flex-grow of 2. Using the previous approach, you can deduce how much space will be allocated to each element.

Now that Box 1 has a flex-basis of 80px,you can say its adding 20px of its width to the available space. So now the available space becomes 100px + 50px + 20px = 170px

Box #1

(1/(1+2+1+1)) * 170px = 34px Box 1 = 80px + 34px = 114px

Box #2

(2/(1+2+1+1)) * 170px = 68px Box 2 = 100px + 68px = 168px

Box #3

(1/(1+2+1+1)) * 170px = 34px Box 3 = 100px + 34px = 134px

Box #4

(1/(1+2+1+1)) * 170px = 34px Box 4 = 50px + 34px = 84px

You can see the new width of the boxes, it can be verified through the developer tools or you can set the width of that black box and check it against each of the flex items by moving it around in its container.

Note that if we increased the flex-basis of an item here higher than its own width, it will increase in width in this flex system. To get the increase in width, just get the difference between its set width and the flex-basis . If it has a flex-grow higher than 0, the same ratio approach will still work as long as you realize that the specific item basically took a chunk out of the available space before the allocation of space to all items begins.

[React] Rendering dynamic list of content

Hermes — Tue, 02 Nov 2021 07:23:19 +0000

OK so we have a project and in that project, we want to render some list of data that is dynamic and for example changes when the user clicks a button. Lets see how this is done in react, it's quite straightforward and you can probably already guess that it involves the use of states.

I'm going to use a very basic project I prepared to illustrate this topic. A simple react app that lets the user to input some text and it gets rendered on the screen for the user to see.

Take a look at the full source code here because I'm not going through how to build the entire project, only the rendering of the dynamic list of data.

Project Structure

Body
- Body.js
- Body.css
Card
- Card.js
- Card.css
App.js
index.js
styles.css

Card - A component which is meant to house other components and give them a sort of cover.(Bad naming on my part I guess)



import "./Card.css";

const Card = (props) => {
  const classes = "card " + props.className;

  return <div className={classes}>{props.children}</div>;
};

export default Card;

The children prop is a default prop that returns whatever is the component encapsulates. In this case it will return the other components that are encapsulated by the Card component and put them in a div

Goal - The component which handles the dynamic list of data.



import Card from "../Card/Card";
import "./Goal.css";

const Goal = (props) => {
  return (
    <div>
      {props.items.map((indiv) => (
        <Card className="set-goal" key={indiv.key}>
          {indiv._output}
        </Card>
      ))}
    </div>
  );
};

export default Goal;

This component takes the list of dynamic content as a prop(items which will be a state) and encapsulates the all of the items in the list with the Card component.

Body - The main component where the other components are brought together to form the app.



const goalsList = [
  {
    key: 0,
    _output: ""
  }
];

// TESTING STYLED COMPONENTS LIB, GOAL INPUT IS A COMPONENT WITH ITS OWN UNIQUE STYLING
const GoalInput = styled.input`
  background-color: ${(props) => (props.invalid ? "bisque" : "transparent")};
  border-color: ${(props) => (props.invalid ? "red" : "beige")};
  border-width: 1px;
  width: 85%;
  height: 1.5rem;

  &:focus {
    outline: none;
  }
`;

const Body = () => {
  // STATES USED IN THE APP
  const [goals, setGoals] = useState(goalsList);
  const [isValid, setIsValid] = useState(true);

  // CALLED WHEN THE TEXT IN THE INPUT ELEMENT CHANGES
  const validGoalsInput = (event) => {
    if (event.target.value.trim().length > 1) {
      setIsValid(true);
    } else {
      setIsValid(false);
    }
  };

  // CALLED WHEN THE USER CLICKS THE ADD BUTTON
  const addHandler = () => {
    let goalText = document.getElementById("goalText");
    // UPDATE THE LIST OF GOALS STATE IF THE INPUT ISNT EMPTY/WHITESPACE OR JUST A CHARACTER
    if (goalText.value.trim().length > 1) {
      if (isValid === false) {
        setIsValid(true);
      }
      setGoals((prevGoals) => {
        if (prevGoals.length === 1 && prevGoals[0]._output === "") {
          return [
            {
              key: 0,
              _output: goalText.value
            }
          ];
        } else {
          return [
            {
              key: prevGoals.length,
              _output: goalText.value
            },
            ...prevGoals
          ];
        }
      });
      goalText.value = "";
    } else {
      setIsValid(false);
    }
  };

  return (
    <div>
      <Card className="card-body">
        <div className="goals-text">My Goals</div>
        <div>
          <GoalInput
            invalid={!isValid}
            type="text"
            id="goalText"
            onChange={validGoalsInput}
          />
        </div>
        <div className="goals-button">
          <button onClick={addHandler}>Add Goal</button>
        </div>
      </Card>
      <Goal items={goals} />
    </div>
  );
};

export default Body;

We want to render a 'list' of content so we create a dummy array goalsList which has one js object in it. The array will serve as the initial value of the state which holds the dynamic list of content. It has a key and _output attribute.

The key attribute is just there as a best practice, we will use it to allow React to render our list efficiently.

The _output attribute will contain the text which the user inputs in the react app.

The next piece of code isn't important to the topic; just me getting to know how to use the styled components external lib.

So straight into our Body component, we define two state variables;

goals - The state which holds our dynamic list

isValid - This state will be a boolean which tells us if what the user inputted is valid

Lets skip the other code for now and jump straight to the structure of the Body component.



return (
    <div>
      <Card className="card-body">
        <div className="goals-text">My Goals</div>
        <div>
          <GoalInput
            invalid={!isValid}
            type="text"
            id="goalText"
            onChange={validGoalsInput}
          />
        </div>
        <div className="goals-button">
          <button onClick={addHandler}>Add Goal</button>
        </div>
      </Card>
      <Goal items={goals} />
    </div>
  );

The structure should be clear from just looking at the code itself, GoalInput is just a styled component(created with styled component lib) encapsulated in a Card.

It takes a prop invalid which is used for dynamic styling.
It determines when we add a different styling to the input element based on the value of the isValid state which tells us whether what the user inputted is valid or not.

The onChange event triggers when the value our input element changes.



const validGoalsInput = (event) => {
    if (event.target.value.trim().length > 1) {
      setIsValid(true);
    } else {
      setIsValid(false);
    }
  };

We're calling an event handler which just sets the boolean value of the isValid state based on whether the user input is empty, one character, or whitespace.

Then there's the Goal component which handles our dynamic list and a simple button with an event handler addHandler set for when it is clicked.



const addHandler = () => {
    let goalText = document.getElementById("goalText");
    // UPDATE THE LIST OF GOALS STATE IF THE INPUT ISNT EMPTY/WHITESPACE OR JUST A CHARACTER
    if (isValid === true) {
      setGoals((prevGoals) => {
        if (prevGoals.length === 1 && prevGoals[0]._output === "") {
          return [
            {
              key: 0,
              _output: goalText.value
            }
          ];
        } else {
          return [
            {
              key: prevGoals.length,
              _output: goalText.value
            },
            ...prevGoals
          ];
        }
      });
      goalText.value = "";
    }
  };

First we get the input element through its id and keep that in a variable, then we check if the isValid prop is set to true, that would indicate that what is currently in the input element is valid.

If it's valid, we update the goals state; We check if we're currently adding the first actual content apart from the dummy value in the state, if yes then we simply return an array which contains only one item effectively overwriting the dummy value.



return [
            {
              key: 0,
              _output: goalText.value
            }
          ];

If no, we return an array which contains a new item and the previous values in the state, thereby updating our goals state with new data. The value in the input element is cleared after that.



return [
            {
              key: prevGoals.length,
              _output: goalText.value
            },
            ...prevGoals
          ];

When you're updating a state and you're depending on the current value of the state before it is updated, you should wrap the entire update process in a function which takes a parameter; the parameter being the current value of the state.



setGoals((prevGoals) => {
        if (prevGoals.length === 1 && prevGoals[0]._output === "") {
          return [
            {
              key: 0,
              _output: goalText.value
            }
          ];
        } else {
          return [
            {
              key: prevGoals.length,
              _output: goalText.value
            },
            ...prevGoals
          ];
        }
      });

Notice how the entire updating process is in a function which takes a parameter prevGoals

The goals state is passed to the Goals Component as a prop item.

The component uses map() to apply a Card component with a unique class that sets the styling.

The key prop is a default prop that is available to Components by default. It's used in a scenario like this where we're rendering an array/list of content. It enables React to render the list effectively, giving each item in the array a sort of unique identity.

Without the key prop everything will still work fine but there can be some performance loss(in large scale apps, ours is too small to notice any performance hiccups)

A more in-depth explanation of the key prop can be gotten from in the article below

Understanding the importance of the key prop in React 🗝

Franco D'Alessio ・ Apr 1 '20

#webdev #react #javascript

React Series - 3 [State]

Hermes — Tue, 12 Oct 2021 22:44:28 +0000

State is an object in a component which holds some form of data relevant to the component it is created in.

A State object is private to the component it is created in, It can be thought of as dynamic data managed by a component, unlike props which are just ‘static’ data that you pass into the component to render some form of information.

Any modification to the value of a state object will cause the component instance it is created in to re-render itself to show the updated value.

Originally 'states' were only usable in class-based component but with the addition of a new feature called 'Hooks' gave functional component the ability to use those extra features that class-based components had.

How to use States

Lets look at a simple project to illustrate states. Visit this sandbox.
It's just a simple interface for 'buying' a game.

import React,{ useState, useRef } from 'react';

In our component GamePick, we import react along with useState and useRef, both of which are React Hooks.

We also import the CSS file for our component.

In functional components, a state is defined using the 'useState()' hook. It takes in the initial value of the state as its parameter and returns an array with two values; The value passed into it as a parameter and a function which can be used for updating the state object.

In functional components states can't be modified like normal variables, only through the use of the function that useState returns.

const [purchaseOutput, setPurchaseOutput] = useState("No purchases made.");
const [priceVal, setPriceVal] = useState();
const currentProduct = useRef("");

In the definition of our component, we create a state and using de-structuring; We pass it into a variable purchaseOutput, and give also pass its updating function into variable setPurchaseOutput.

Another state is also created which will handle prices of the products. We will like for the price in the input element to be changed when a different option is selected.

We define a ref object currentProduct using the useRef() hook. It is responsible for knowing what the current selected option is.

useRef() essentially lets us define an object that exists throughout the lifetime of the component instance it is defined in. In this case, think of it as being similar to useState except that when a ref objects' value is updated/modified, it doesn't cause the component to re-render itself. The value of an object created using useRef is accessed and modified using the .current method not a function like states. A proper explanation.

Moving ahead to the JSX code, we have a simple select element along with a disabled input element and a button, all enclosed in divs' and given classes for styling. The states are put where they are needed in the JSX code.

className is the equivalent of writing a normal class attribute in HTML

In our select element, we listen for the onChange event and call selectHandler function when an option is picked.

const selectHandler = (event) => {
        setPriceVal(prices[event.target.value]);
        currentProduct.current = event.target.value;
    }

In the selectHandler function, we simply update the value of the priceVal state (which is the value shown in the input element) and we update currentProduct and set it's value to the current option selected.

We also listen for an onClick event on the button and call buyHandler function when it is triggered.

const buyHandler = () => {
        if (currentProduct.current !== "")
        {
            setPurchaseOutput(`${products[currentProduct.current]} purchased for ${prices[currentProduct.current]}.`);
        }
    }

Here we're simply updating the purchaseOutput state only if the option selected isn't the default value in the element.

Try out the app in the sandbox to understand the code better.

Comment below if you didn't understand something properly and I will try to help you. Thanks for reading

React Series - #2 [Component & Props]

Hermes — Sun, 03 Oct 2021 22:48:27 +0000

React Component

A Component can seen as a core element of every React UI.

A UI made with react is essentially a combination of multiple components, the components are defined once and can be re-used in multiple parts of the UI and through the use of the Props System they can be dynamic.

Components can either be defined through the use of functions or classes with the latter being used for complex components.

// FUNCTION SYNTAX
const App = () => {
  return(
    <div>
      Hello World
    </div>
    )
}

// CLASS SYNTAX
class App extends React.Component {
  render()
  {
    return(
      <div>Hello World</div>
    )
  }
}

A component defined using classes has to extend the React.Component class and define a render method which specifies what exactly that component renders visually on the page.

Props System

React Components can accept input called props(properties) which allows for the same component displaying different information in the same format, just like how the return value of a function might be based on the arguments passed. Lets see what this looks like:

const App = (props) => {
  return (
    <div>Hello {props.name}</div>
  )
}

ReactDOM.render(<App name="Hermes"/>,document.querySelector('#root'));

We have added a bit dynamism to the App component, the name can be specified now. Now if we need to output 'Hello' statements for different names, we would just need to call the component with different names. This illustrates 'Re-usability' of components in react.

const Hello = (props) => {
  return (
    <div>Hello {props.name}</div>
  )
}

const App = () => {
  return (
    <div>
      <Hello name="Hermes"/>
      <Hello name="Jack" />
      <Hello name="Jill" />
    </div>
  )
}

ReactDOM.render(<App />,document.querySelector('#root'));

Another Example : https://codepen.io/truepadawan/pen/BaZMBov

Thanks for reading, drop a follow to find out when I drop the next in the series as I learn react.

React Series - #1 [ Intro ]

Hermes — Thu, 30 Sep 2021 01:04:27 +0000

I've decided to dive into React and will be making a blog-series on react as I learn it.

Note: Take a look atthis post first to get a feel of some JavaScript syntax that is used in React.

React is a popular JavaScript library used mostly in building user-interfaces.

Let's have a look at what a React application(not really an app) looks like:

First, To setup a simple react-environment, make sure node-js is installed, then open the terminal and navigate(in-terminal) to a directory where you would like the react-project to be in then write this command in the terminal

npx create-react-app name-of-project

This will use a package "create-react-app"( used for generating react projects ) to generate a react project in a folder "name-of-project". It downloads the react library along with some other dependencies and useful tools, then sets up a template for a project.

With the react environment successfully setup there should be a couple of folders like 'public, src, node_modules'.
public: holds static files like the html files
src: holds the react source code we're working on
node_modules: holds dependencies of the project

Delete the files in 'src' folder and then create a fresh js file in there called 'index.js' and we can begin to code in React.

Copy this code snippet into the js file :

import React from 'react';
import ReactDOM from 'react-dom';

const App = () => {
  return (
    <div>Hello World!</div>
  )
}

ReactDOM.render(<App />,document.querySelector('#root'));

First we're importing the react and react-dom library and assigning it to a variable "React" and "ReactDOM".
react-dom library allows react to interact with the DOM.

We define a React Component using arrow function syntax which returns what looks like a HTML div tag with the string "Hello World!" but in reality is just JSX (Javascript XML) which is used with React to describe what the UI should look like.

JSX doesn't have to be used but it makes things better and more readable, the non-JSX equivalent of the code is:

React.createElement("div", null, "Hello World!");

which might not look bad when we replace the JSX code with it, but when you start writing more complex code, it can potentially mess up the beauty of your code.

Then we use the react-dom to render the react component we created inside a div with "id" of 'root'. The app component is wrapped in JSX syntax which is better than having to write something like react.default.createElement(App, null).

Note : The HTML file that contains the div is in the 'public' folder

Run npm start in the react project folder to run your project, it will open the page in your browser.

Thanks for reading this short blog, Drop a follow to be informed when I drop the continuation of this post

React Series - #1 [ Intro ]

Hermes — Thu, 30 Sep 2021 00:23:51 +0000

I've decided to dive into React and will be making a blog-series on react as I learn it.

Note: Take a look atthis post first to get a feel of some JavaScript syntax that is used in React.

React is a popular JavaScript library used mostly in building user-interfaces.

Let's have a look at what a React application(not really an app) looks like:

npx create-react-app name-of-project

Delete the files in 'src' folder and then create a fresh js file in there called 'index.js' and we can begin to code in React.

CS50x Final Project Update

Hermes — Sat, 28 Aug 2021 12:00:53 +0000

My Project

I'm finally at the climax of the Harvard's CS50x course with only the Final Project remaining. I decided to do a News site using some of the new things I've learned in CS50x. I use the default HTML CSS Js for Front-end and Flask as my Back-end along with a News API gotten from newsapi.org

Progress

So far I've gotten a few things done which are

Register and Login Page with validation
Database for storing user-data
The main page which displays News gotten from the API
Lazy-Loading: More news are loaded as the user scrolls to the bottom of the page
Searching for specific news
Filter out news by categories e.g Sports, Business, Tech

I'm currently thinking of removing the ability to create accounts because I can't think of a way to utilize it, I originally wanted it to be that the user can choose their interests and only get news based on that but now I'm not sure if it's even necessary to implement that. But I will try to implement the feature, if I can't then I will remove the ability to create an account.

2021 CS50x - WEEK 9 UPDATE

Hermes — Sun, 15 Aug 2021 11:37:40 +0000

I just finished CS50X - Week 9 which is on Flask MicroFramework and I'm impressed with myself for reaching this far in the course, and hopefully I reach the end.

CS50X - WEEK 9 teaches about Web Application using Flask, it teaches how data is passed and manipulated between client and server side in webpages. The lecture was very intuitive on the topic as usual.
In the weeks' problem set, you were tasked with basically coding the backend and frontend of a website which allows users to trade stocks, the technologies used are SQL for storing user information, Python(Flask) for the backend, HTML|CSS for the webpages along with the use of Jinja Templating and also the iexcloud.io API for getting information on stocks. You're provided with boilerplate code for just basic things and some helper functions to give you a foundation to build on with the end product looking similar to CS50x Staffs' Solution

I recommend beginners like myself to take this course because it teaches a lot on different coding paths and its also free. You can register here

I'm moving to week 10 now which is on Coding Ethics, I'm basically at the climax of the course and will start considering what I want to do for the Final Project.

Harvard's CS50X(Intro to Computer Science) is a free course that teaches the art of programming

2021 CS50x - WEEK 8 2nd Update

Hermes — Wed, 04 Aug 2021 11:45:15 +0000

Well I'm still in the problem set of Week 8 in Harvard's CS50x, this has been the longest I've spent on a problem(almost a week i think) in this course.

RECAP: The problem set tasks you with using HTML, CSS, Js, Bootstrap to build a website about anything that interests you. You have to learn those technologies yourself and complete the task. This is my first time working with Web Dev so it's new territory for me.

Specifications for the task:

I just want to create something simple and at the same time fulfill the specifications they provided. So far I've used HTML, CSS, and Javascript. I think I've used Bootstrap when I turned a link into a button like this:

<a id="" class="btn btn-success" href="" target="_blank">Text</a>

But my major problem is how to make the site look a particular way on mobile phones and computers of different screen size. So if you have any tips on how I could do that or even some Bootstrap tricks, drop a comment.

I'm taking freeCodeCamp's Web Design course but it seems a bit long.

Here's my progress so far with the page(Didn't even know what to do):

Drop tips on how to make it look good on different screen sizes

2021 CS50x - WEEK 8

Hermes — Sat, 31 Jul 2021 11:03:49 +0000

I've advanced to week 8 in Harvard's CS50x course which focuses on Web Development basically with HTML, CSS and JavaScript being the focus. The problem set for this week is to create a page using HTML,CSS,JavaScript and Bootstrap.

So far in the lecture I learned a fair bit about Web Dev (I'm into Software Dev) but the problem is a bit challenging for me because I have no experience in HTML, CSS/Bootstrap and Js so I've got to start learning them, at least the basics which is what I'm doing using freeCodeCamp.
But at the same time I'm also trying to see what I can do with my current little knowledge on HTML/CSS, the specifications for the problem set is a bit steep for me but I will definitely pull through(hopefully).

So far what I've been able to create with my skillset is:

I'm thinking of doing Khan Academy's HTML, CSS, Js lectures because I prefer video lectures to just texts on screen but so far I've been using freeCodeCamp and that's what I've been able to come up with, I still have a LOT to do and 3 more pages to create, not even done with the first, and I haven't used JavaScript or Bootstrap at all.

I will drop an update in a few days when I improve my skills and do something better.

Also please if you have any tips that can help, tell me in the comments.

CS50x 2021 - WEEK 7 (SQL)

Hermes — Mon, 26 Jul 2021 19:32:31 +0000

Finally completed CS50x Week 7 which deals with SQL....moving to Week 8 - HTML, CSS, JavaScript [Web Design]

Week 7 focuses on the principle of SQL and Relational Databases, basically the basics of SQL (syntax and keywords) and how it differs with CSV files, also it's use case and advantages....Nice Lecture overall

This week was the most impressive for me so far because the main problem set really makes you understand how to use SQL..In the problem set - A thief has stolen an item and left the city, you're tasked to basically become the detective and find out the identity of the thief, accomplice and what city he fled to using a bunch of tables in a database.

It's pretty confusing at first but if you have worked with SQL for a decent amount of time you'll probably find it easy but I've only used SQL few times when working with Qt GUI Framework. But this problem set really improved my knowledge on it a bunch because you'll have to interact with the data of different tables at the same time and also think effectively how you would use them...Very impressive problem if you're a beginner.

Gonna take a break before I move to HTML, CSS and JavaScript in WEEK 8. So far this course has been super impressive for a free course and I really advice beginners like myself to take it.

Harvard's Intro to Computer Science (CS50x) is free to enroll in

CS50x 2021 - WEEK 6 (PYTHON)

Hermes — Sat, 24 Jul 2021 12:40:12 +0000

Finally done with Week 6 of Harvard's CS50x course which was about PYTHON.

It was basically a quick intro into python syntax and conversions of some programs we wrote in former weeks(in C) into python to teach how python works.

It was very straightforward and simple to follow probably because the language is a lot easier to work with than C especially not needing to handle memory allocation and not defining what data type your variable is explicitly.

The problem set for Week 6 was to convert some of the previous problem sets we had done in C to Python...and another problem set called 'DNA' where we had to implement a program that identifies a person based on their DNA, It was pretty straightforward mostly except where you had to make a function that returns the longest consecutive repeats on a particular string in another larger string. I struggled writing that manually until i looked into ReGex in python which made it very easy with just a few lines of code.

It's nice to know about a new language, I will try to use it whenever I can like when doing LeetCode/HackerRank problems, I used C++ previously.

Moving to Week 7 (SQL).