DEV Community: Moszio

CSS GRID

Moszio — Thu, 29 Dec 2022 03:29:51 +0000

Here we are CSS Grid. I don't know how about you but I am very shaky with Grid. You can do setup in many different ways and all the column rows etc... just gets very confusing at some times and I can't visualize it in my head.

So I just recently started to learn a way that makes so much sense.
It requires a bit more setup but it will really make it worth it at the end of the day. At least it did for me. As I made this discovery I wanted to share as I was really struggling to get a strong understanding of how to use Grid.

The magic word is grid-template-areas. You only have to use this and you will have a beautiful arrangement where you only have to worry about the parent element but not the child.

Lets imagine we want to build this grid. (of course responsive in todays world)

Before you would use grid columns, rows, heights, spans etc to have this not so complicated display it was hard to wrap your head around it.

now with grid-template-areas I think it makes a lot more sense.

our boxes will have simple setup with a class name box.

.box {
  border: 2px solid black;
}

Yes, no height, no width, no nothing :D!!!!!

and the area where our 5 boxes will live is going to be called box-grid
we will give it the following specifications.

.box-grid {
  display: grid;
  width: min(95%, 70rem);
  height: 100vh;
  margin-inline: auto;
  padding-block: 2rem;
  gap: 1.5rem;
  grid-auto-columns: 1fr;
  grid-template-areas:
    'one'
    'two'
    'three'
    'four'
    'five';
}

Yes it is a bit strange. It has to be string and just like above the way you give the value to grid-template-areas is as many rows you want you will place the areas under each other. so lets say I want to have in this case 5 boxes on top of each other. Then the above syntax will have to be done.
Now if you leave it just this way will not do a lot.
You have to define which is 'one', 'two', 'three', 'four', 'five'.
Here is how to do it:

.box:nth-child(1) {
  grid-area: one;
}
.box:nth-child(2) {
  grid-area: two;
}
.box:nth-child(3) {
  grid-area: three;
}
.box:nth-child(4) {
  grid-area: four;
}
.box:nth-child(5) {
  grid-area: five;
}

With the nth-child(number) you will basically select the children in this case the box classes and you tell each one of them which name they will listen to.

Now if you check your display everything should be on top of each other and will take up all the space they have in the parent element which if box-grid.
This is amazing but we don't have our design ready yet. So far simple, now the best part comes. How this will be responsive. Lets say we want to give a specific layout to different screen sizes.
It is super simple:


@media (min-width: 30em) {
  .box-grid{
    grid-template-areas:
      'one two'
      'one three'
      'four four'
      'five five';
  }
}


@media (min-width: 50em) {
  .box-grid{
    grid-template-areas:
      'one two two three'
      'one four five five';
  }
}

With the help of @media query and the names we have defined above (one, two, three, four, five) you basically tell CSS at what breakpoints should those boxes be display in what specific way.
In my example at

breakpoint 30em:

4 rows
2 columns

breakpoint 50em:

2 rows
4 columns

And that's it. You don't have to worry about box sizes or gaps or auto margins or anything as grid will just populate whatever space it has in the parent element, based on your grid-template-areas.

I hope this helps to understand grid in a bit more straight forward way.

Next.js custom API

Moszio — Mon, 31 Oct 2022 16:47:52 +0000

Custom API with Next.js

Continuing my previous Next.js article. I wanted to post a smaller section about creating your custom API.
It is very simple and only requires a few steps so you can create your own API and make some of your pages more dynamic.

Let's say in our case we create a file with random data and this data can be fetched within our application.
Of course you could use external sources too like SQL etc. but for now I just make my own database with JS.

We start we creating a JS file called data.js in the main folder.
(assuming you have some structure already and you start your application based on my previous blog).
We can add any data in here. but I just place something random for now.
My folder will have an array of object. Ensure what ever data will be placed in here the objects need to have an id.

export const projects = [
  {
    id: '1',
    title: 'Project1',
    description: 'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae beatae ullam est voluptatum voluptatem incidunt accusantium dicta ad? Quasi necessitatibus at maiores sunt? Doloribus odit, expedita aliquam eius harum ipsa!',
    link: 'https://github.com/SomeonesGithub',
  },
  {
    id: '2',
    title: 'Project2',
    description: 'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae beatae ullam est voluptatum voluptatem incidunt accusantium dicta ad? Quasi necessitatibus at maiores sunt? Doloribus odit, expedita aliquam eius harum ipsa!',
    link: 'https://github.com/SomeonesGithub',
  },
  {
    id: '3',
    title: 'Project3',
    description: 'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae beatae ullam est voluptatum voluptatem incidunt accusantium dicta ad? Quasi necessitatibus at maiores sunt? Doloribus odit, expedita aliquam eius harum ipsa!',
    link: 'https://github.com/Moszio/Meal-Randomizer-App',
  },
]

Ones this is done we can move to the next step.
In your pages folder you can find an other folder called api created an other folder within api and add a new file called index.js. You might have a premade file in there so lets just delete it for now.

in you index.js we will do 2 things first importing in your data.js file and we create a function that will handle this data.

import { projects } from '../../../data'

const handler = (req, res) => {
  res.status(200).json(projects)
}

export default handler

in our function we pass in the req, res which will be the request and response we are fetching and parsing to json.
Ones that is done. You can direct to your url and call this data.
In my case it will be http://localhost:3000/api/projects
and there you go you should see your custom api data in your browser.

Now that we have access to all the data. We want to be more specific and only get 1 particular object. This is when id can also come in handy.

Right now if you go to your URL and try to select one of your object with their ID it will throw out an error.
http://localhost:3000/api/projects/1

To fix that we will create a new file in the same api folder.
It will have the following naming convention: [id].js the bracket notation is essential to ensure our route is dynamic.

Ones you are in this file lets add the following.

import { projects } from '../../../data'

const idPointer = ({ query: { id } }, res) => {
  const filtered = projects.filter((project) => project.id === id)

  if (filtered.length > 0) {
    res.status(200).json(filtered[0])
  } else {
    res.status(404).json({ message: `The selected id: ${id} not found!` })
  }
}

export default idPointer

Again the data from our data.js file was imported and we create our function that will send a request and response. In our case we destructured the id or you could have done just with

re.query.id

The second part of the code is just to ensure if there is an item the data will be returned, but if there is no matching id with the number given in URL then it returns a custom error message.
Make sure to save everything and now you can select API with their id in url.
http://localhost:3000/api/projects/1

or if your try something like 6
http://localhost:3000/api/projects/6

it will throw out an error.

Hope this blog was helpful in your future custom API creation.

Thank you for reading this.

Next.js

Moszio — Thu, 20 Oct 2022 16:47:29 +0000

Recently I started interning at a Startup and they are using Next.js, which I have not used before but I have been working and gained some experience with React. React is a base requirement to learn Next.js. You might be able to start right away with Next.js, but for a better understanding starting with React is the right way to go.
Here I wanted to share my first experience and some of the basics I learned.

Next.js a React Framework for Production.
Creating you next.js application:
npx create-next-app name-of-your-app

Starting the server:
npm run dev
In your browser:
http://localhost:3000/
Now you should see a basic webpage.

One of the perks of Next.js is you don't have to use a 3rd party router like in React.js (react-router-dom).

Simply put your pages in your pages folder. The pages are react components.

*Router *
create a file in your pages folder. Page.js
in your Page.js file add the following. Just like you would create a react component:

const page = () => {
  return (
    <div>
      <h1>Page 1</h1>
    </div>
  )
}

export default page

"Keep your pages lower case and for your future components uppercase"

If you direct your browser to the following:
http://localhost:3000/page

You have your new end point and you are able to see whatever that page contains in this case just a simple Page 1 message.
As simple as that.

Adding title to your page
If you learned React. You would have to add this to your public/index.js file in react, but since we don't have it in Next.js we just simply add it to your index.js in page folder.

(note: in this folder I removed everything except the div)

import Head from 'next/head'

export default function Home() {
  return (
    <div>
      <Head>
        <title> My site</title>
        <meta name='keywords' content='website' />
      </Head>

      <h1>Welcome to next</h1>
    </div>
  )
}

Now you have a title to your page. You can repeat that to all your pages and it will dynamically change the title for all your pages.
Ensure you to import

import Head from 'next/head'

Styling your page using style components.
In this step we will create a folder called "components" in the main folder (not within pages) and within that file lets create a Layout file.
Here we will import our css style component.
You might see there are already 2 files lets rename the Home.module.css to Layout.module.css

import styles from '../styles/Layout.module.css'

const Layout = ({ children }) => {
  return (
    <div className={styles.container}>
      <main className={styles.main}>{children}</main>
    </div>
  )
}

export default Layout

To reference already existing styles we use the styles.name-of-style as seen above.

App.js file
This file will be something like a Navbar in React. Whatever you put in here like header, footer etc. will appear on every page.

Lets import our Layout component to app.js.

import '../styles/globals.css'
import Layout from '../components/Layout'
function MyApp({ Component, pageProps }) {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  )
}

export default MyApp

The "children" in this case will be the content you have added to your pages.(Page 1, Welcome to next, etc.) children will dynamically change that content based on what endpoint you are on.
You can also add other content to your Layout component to, if you add it to this file it will appear on all your pages. Give it a try like adding an h1 with any message. You will see that message on all pages with addition to the page content. In our case we will add a navbar.

As a next step we will create our actual Navbar that is going to reside on top of our page and it will be visible on every page.

create in your styles folder a Navbar.modules.css (modules will need to be added if you just want this CSS to be applied to that specific component.
We will add some CSS to this.

.nav {
  height: 60px;
  padding: 15px;
  background-color: rgb(255, 119, 119);
  color: rgb(0, 0, 0);
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.nav ul {
  display: flex;
  justify-content: center;
  align-items: center;
  list-style: none;
}

.nav ul li a {
  margin: 5px 15px;
  font-size: 25px;
}

Create in component folder Navbar.js then add the following.

On top we will import our newly created Navbar.modules.css file for styling purposes. when you import it you can name it whatever name you want it navStyle just make sure you use appropriate naming convention for readability.

We will also import Link just like in react router for guiding through our endpoints.

Ones everything is imported add the ul, li elements and within our li we also add the Link tag for the routing.

import navStyles from '../styles/Navbar.module.css'
import Link from 'next/link'

const Navbar = () => {
  return (
    <nav className={navStyles.nav}>
      <ul>
        <li>
          <Link href='/'> Home </Link>
        </li>
        <li>
          <Link href='/page'> Page </Link>
        </li>
      </ul>
    </nav>
  )
}

export default Navbar

Ones that's done we just have to import this component into our Layout file and add it outside your div. so it will always be the same on every page regardless of the content.

import styles from '../styles/Layout.module.css'
import Navbar from './Navbar'

const Layout = ({ children }) => {
  return (
    <>
      <Navbar></Navbar>
      <div className={styles.container}>
        <main className={styles.main}>{children}</main>
      </div>
    </>
  )
}

export default Layout

Now you should see your navbar on top and you can navigate between your pages.

This is it you have a Next.js basic Website with a navbar and routing.

Hope you enjoyed it.

If you need, there are several courses on youtube or you can use the Next.js documentation for additional information.

https://nextjs.org/docs

Redux for beginners

Moszio — Sun, 16 Oct 2022 13:53:48 +0000

I am in the middle of my project and I have been experimenting with REDUX recently. It was very intimidating to me at first so I wanted to share a small guide to sum up the most important things and to explain it in a very simple way. I hope it helps others.

Little about me I am a beginner Software Engineer so there might be better ways to do this or you can find cleaner code.

Why is Redux good?
Well basically you know how you have to pass down your states and props in React to use them in your components. Sometimes you have to pass it down to more then 1 component so it can be a bit of a pain. Redux helps you to access those functions/states in any component.

The following guide is based on a basic Counter Application.

A step by Step guide to Redux Basics

Very first thing setting up Redux:
create your react app:
npx create-react-app counter
cd into you react app
in your terminal:
npm install redux
npm install react-redux

There are 4 sections with Redux(at least what I know so far).

Sections:
REDUCER - pretty much your functions/states
STORE - your globalized state(this is what you will pass down to all your components so you can use your function anywhere)
ACTIONS - this will help you use the functions (like increment/decrement/changing true/ false etc.(
DISPATCH - to dispatch your actions

Of course under the hood there is lot more happening but again I just want to provide a simple guide.

/////////////////////////////////////////////////////////////
Step 1.
first setup files and folders
in src folder create:
actions folder
reducer folder

Step 2.
in action folder create:
index.js
in reducer folder create:
index.js
counter.js

Step 3.
in counter.js file

REDUCER:

const counterReducer = (state = 0, action) => {
  switch(action.type){
    case "INCREMENT":
      return state + action.payload;
    case "DECREMENT":
      return state - 1
    default:
        return 0
  }
};
export default counterReducer;

If you have multiple reducers a combiner can be used
Before using combiner import it from redux library:

import counterReducer from "./counter";
import { combineReducers } from "redux";

all reducers need to be imported to the combiner file in this case index.js in reducer folder.

Now that the Reducer is setup
We can move to next section which is Store

Step 4.
In this step we will work in the src/index.js file.
To start with lets import hooks and files.

import { createStore } from 'redux';
import allReducers from './reducers/index.js'
import { Provider } from 'react-redux';

after the import is added:

const store = createStore(
  allReducers,
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
)

When the store is created the allReduces file we created earlier will be added and an other line of code which basically allow you to check your work in the Dev Tools, otherwise you would have to work blindly.

The last thing needs to be setup in our current file is the Provider imported earlier.
Wrap your App component with the provider as follows.
Then pass the store variable to the Provider hook.

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<Provider store={store}>
  <React.StrictMode>
    <App />
  </React.StrictMode>
  </Provider>
);

Step 5
ACTIONS

in you action/index.js file

export const increment = (number) => {
    return {
        type : 'INCREMENT',
        payload: number
    }
}
export const decrement = () => {
    return {
        type : 'DECREMENT'
    }
}

**
Final Step
**

in you App.js filer
import hooks and files:

import { useSelector, useDispatch } from "react-redux";
import { increment, decrement } from "./actions";

useSelector will allow you to set the state of and display or use the result of that function

const counter = useSelector(state => state.counter)
const dispatch = useDispatch()

With the dispatch variable we can finally add functionality to our counter button. and the counter variable will keep track of the total of our counter.

return (
    <div className="App">
      <h1>Counter {counter}</h1>
      <button onClick={() => dispatch(increment(5))}>+</button>
      <button onClick={() => dispatch(decrement())}>-</button>
      <button onClick={() => dispatch(signIn())}>Change state</button>
    </div>
  );

We could also add other functionality with reducers like filter or true false statement and create conditional statements when logging in.

This got a little longer then expected but it should sum up the basics.
Hope this helps.

Phase 1 Flatiron School experience and suggestions!

Moszio — Fri, 05 Aug 2022 22:51:42 +0000

Introduction
I just finished my 6th week at Flatiron School. Time flies by... Just before entering phase-3 I wanted to share my experience and progress and some suggestions to anyone who is thinking to get started!

Week 1
Oh week one... the best word to describe it? Overwhelming.. Not only you have a whole new environment and new people, but you have to go through an immense amount of material. I was studying day and night with very little sleep, but I got through it and learned so much. I really started to love JavaScript as it was our main focus. There are just so much you can do with it.
My favorite of all is by far event listeners. There is nothing more rewarding then to see your buttons working and actually functioning.
Of course, there is a lot more then just event listeners to it.
My suggestion for anyone who decides to start this school? Be prepared learn some basics. Definitely learn some HTML and CSS because you are not going to have time to learn from scratch while you are learning JavaScript.

Week 2
Week 2 was for me deepening my knowledge about JavaScript get to know CRUD operations such as GET,POST,PATCH,DELETE.

let request = async () => {
 // initiate request to your choosen server
 let req = await fetch(`url`)
 let res = await req.json()
 console.log("data: ", res)
}
request()

Using an external API or a local host allows you to have more persistent websites and not just have everything erased after you refresh the page. The best thing about the API is the data it will provide you and you can build so much around that data.
Somehow coming up with a new website idea is a lot easier. Just lookup public APIs and you can build anything.

Week 3
It starts to feel like everything is coming together...
This is also the week of creating your own website as your first project.
When I first started to think about a website idea my first thought to get motivation is looking through public API-s, although it is a great way to get motivation there is just way too many options and you could feel like in candy store... Good luck making up your mind. You just want to try all of them.
So I decided to move away from creating my website based on API and instead I focused on my previous experiences and what am I passionate about. So I did and I have created something that I could call my own, what a great feeling.
**Suggestion **make sure whatever your idea is, before deep diving into coding first find a relevant API that provides you the necessary data.

Here is a list of API(no authorization required):
https://mixedanalytics.com/blog/list-actually-free-open-no-auth-needed-apis/

Just one more link to share:
https://developer.mozilla.org/en-US/
this website will become your best friend:)

If you are interested to get more information about the school and the program don't hesitate to DM me.

parseInt()!

Moszio — Fri, 15 Jul 2022 14:51:28 +0000

Introduction

The reason behind choosing this particular topic? As a student at Flatiron School we go through many challenges and many time you come across a challenge that requires you to google. I still have a lot to improve on my googling skills. See here comes in the choice of my topic. I just could not find the answer to this very simple question. I tried so many ways and even though you can find some answer they just seemed way to difficult.

"The challenge"
In that particular challenge you had to add a vote based on the value of your input field to your total vote count.

   <h4>Total Votes: <span id="vote-count">Character's Votes</span></h4>;
        <form id="votes-form">;
          <input type="text" placeholder="Enter Votes" id="votes" name="votes" />;
          <input type="submit" value="Add Votes" />;
        </form>;

It is nothing too complicated right? Well the answer was not so straight forward. Since the input is a string it will not be able to cumulate your votes.

This is when parseInt() comes useful.

 let count = 0;
 count =  parseInt(input.value) + count;
   characterVote.textContent = count;

This function will return an integer from the string argument and from now it will be able to cumulate your total count.

Hope this was useful! Feel free to reach out if you have or had the same struggle with parseInt() and strings :D.

Also here is a link to more information about parseInt():

MDN web docs_:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt