
One of my drives stopped working and had a quarter of its storage capability left so I decided to use it as a new dev environment.

What I started off doing was looking into virtual machines. I've known about them but have never set it up, so I used this as an opportunity to do something new.

I downloaded and set up VirtualBox. Next was deciding what operating system to use. Browsed the many options, looking at Linux distros. I've installed Linux Mint on an older computer in the past but I wanted something new.

I decided to use Ubuntu. Getting it to work was simple, downloading the iso file and plugging it into the Ubuntu VirtualBox instance and it worked.

Afterwards setting up my Ubuntu user account as a super user granting it all permissions was an interesting experience using VIM to say the least.

Everything is now up and running smoothly, ready for the new year.


New Dev Environment using VM and Ubuntu


Quickly wanted to list some technologies I'm looking at getting into at some point.

- TypeScript
- GSAP / ThreeJS / animation on the web
- Picking up a new language
- Everything backend

## TypeScript

Superset of JavaScript, great for strictly typing JavaScript code so it doesn't get tangled making dev life easier.

## GSAP / ThreeJS / animation on the web

I enjoy being creative and rendering advanced animations beyond built in CSS would be a fun adventure. These technologies are packed with powerful tools to create some next level designs. Examples [here](https://threejs.org/) and [here](https://greensock.com/showcase/).

## Picking up a new language

My main programming language is JavaScript, picking up another language would be beneficial in many ways. The two I'm most interested in are Python and C#. These languages also open a bunch of doors into different things I'd like to try.

## Everything backend

I have a surface level understanding of backend using Node. Websockets, caching, better error handling, deeper api knowledge, jwt, databases and more are technologies I need to pick up and improve on.

Here are some topics I've come across involving the backend including examples from my GitHub:

- User data validation - creating user validation [here](https://github.com/almirmujic/mern-ecommerce/blob/main/server/util/userValidation.js), [endpoints here](https://github.com/almirmujic/mern-ecommerce/blob/main/server/routes/user.js), and sending the requests [here](https://github.com/almirmujic/mern-ecommerce/blob/main/client/src/context/AuthContext.js)
- Creating endpoints to connect the front and back
- ORM and schema creation for modeling how backend data should be and connecting it to non-relational databases (MongoDB)
- Securely salting and hashing passwords - example [here](https://github.com/almirmujic/mern-ecommerce/blob/613c71b61a1f2bc8a5421e3995f9a4ab2dda1251/server/routes/user.js#L16), validating [here](https://github.com/almirmujic/mern-ecommerce/blob/613c71b61a1f2bc8a5421e3995f9a4ab2dda1251/server/routes/user.js#L52) using bcrypt library

--

This is just a start, there's a lot more I need to dig into in this area.


Tech I'm looking into


I've built a shortcut to quickly implement context into any project fast. I'll break down how to create the shortcut and how to use it.

Visual Studio Code is a prerequisite for this.

While your code editor is up, press Shift + Command + P on Mac OR Shift + Ctrl + P on Windows.

Type the word snippets into the search bar and select Configure User Snippets.

A dropdown of language options will appear and we want to have this snippet available for js and jsx files, so look for the javascript.json option and paste this into the object as a key value pair:

```
  "Create React Function Context": {
    "prefix": "rfcon",
    "body": [
      "import { createContext } from 'react';",
      "",
      "export const NameContext = createContext();",
      "",
      "export function NameProvider({ children }) {",
      "  return (",
      "    <NameContext.Provider value={{ test: 'hello' }}>",
      "      {children}",
      "    </NameContext.Provider>",
      "  );",
      "}",
      "",
      "// import {NameProvider} from './context/NameContext.js'",
      "// wrap App with NameProvider",
      ""
    ],
    "description": "Snippet for React Function Context"
  }
```

You want your json file to look similar to this:
![context snippet](/../assets/5/snippet.png)

Repeat the process for jsx files by selecting javascriptreact.json instead of javascript.json in the dropdown of language file types.

You want to have a key value pair in the json object to equate to your snippet settings.

The prefix option is set to rfcon for simplicity, it can be set to whatever you would like. This is what you would type in the file to get it to pop-up as an option.

This snippet includes commented out code to lead the developer into wrapping their own application with the provider they've just created.

## TypeScript

The body of this snippet can easily be modified with a few adjustments to suit TypeScript as well, just find the typescript/typescriptreact options in the dropdown and edit the body to fit TypeScript's rulesets.


Custom React context snippet


Just want to quickly break down a few [react routing](https://reactrouter.com/docs/en/v6/upgrading/v5) changes in the latest v6 update using a codeblock from a project I just started. This is simply just a foundation I started the other day but was surprised to the changes and wanted to make note.
![Both new and old routing image](/../assets/4/combined.png)


Quick React routing example - v6


After college I chose to continue studying web development and designing on my own and that included learning JavaScript in depth. During this time I knew I'd have to eventually choose a framework or library to use because that was the direction things were heading, having a powerful toolset to build blazing fast applications.

Picked React because of the plethora of articles and forums I read, some word of mouth from people I know too, sharing how this library was on the rise.

Fast forward and React is still what I use as my main toolset for UI development with Node as my primary backend environment at the moment; having JavaScript on both sides has made transitioning into full-stack development a smooth experience.

React fit like a glove. Straightforward to implement, fast, great ecosystem of third party tools capable of creating new exciting features, well documented, and a large growing community behind it.


Why I use React


I want to briefly share just a few core reasons as to why styled-components are a fantastic solution for styling needs and why I enjoy using them.

## Ease of use

Simply by installing the package with a package manager such as npm or yarn and configuring it to suit the module bundler of the project (Webpack, Parcel, etc.), we end up importing it into the desired file:

```js
import styled from 'styled-components';
```

and styling our components becomes a breeze, removing the bloat of adding styles within the structure of the code or creating an external stylesheet.

```js
const OurStyledButton = styled.button`
  all: unset;
  background: #4b5563;
  color: #fff;
  padding: 1rem;
  border-radius: 9px;
`;

const OurComponent = () => {
  return <OurStyledButton>Button Text Here</OurStyledButton>;
};

export default OurComponent;
```

**Bonus**: these components are easily exportable and capable of reusability for more of a uniform codebase. Quick example below.

```
const AnotherStyledButton = styled.button`
  //custom code here
`;

const LandingSection = styled.section`
  //custom code here
`;

export { AnotherStyledButton, LandingSection };
```

and importing it:

```
import { AnotherStyledButton, LandingSection } from './FileNameHere';
```

## Built in SCSS capability

No more external SCSS files necessary, styled-components are here to save the day. This is one of my favorite features this package provides. Freely nest styles for each element within the component, implement interactive styles like hover, and create media queries on the fly all within the same component in the same file.

```javascript
const ParentDiv = styled.div`
  //custom styles here

  .childDiv {
    background-color: #1ea1ea;
  }

  &:hover {
    cursor: pointer;
  }

  @media (min-width: 768px) {
    // custom styles here
  }
`;

const CustomComponent = () => {
  return (
    <ParentDiv>
      <div className=".childDiv" />
    </ParentDiv>
  );
};

export default CustomComponent;
```

## Changing Styles

Changing or updating the styles of a styled component is intuitive and quick to implement. By passing down props that change, usually based on user interactions, we can change the styles we want to present and create a better user experience. Heres an example from a recent project I worked on:
![alt text here](/../assets/2/theme-button.png)
This is a fairly straight forward example that gets to the point. When the user toggles dark/light mode we change the background and color of the component to fit the theme.

## Conclusion

So after going over just a few of the reasons as to why I consider styled-components a great solution for projects, they're simple yet powerful ones that in the end creates a great developer experience.


Reasons to use styled-components


I enjoy blending technical and creative skills when working on projects. Improving, changing, experimenting, and growing are important concepts to me. Developing and designing give me opportunities to do these things.

To anyone who reads my notes, I appreciate it. Feel free to contact me with any thoughts or questions.

Almir
