DEV Community: sdll

Day 3: Navbar to CSS Grids

sdll — Sun, 02 Aug 2020 18:11:49 +0000

Collapsing Menu Bar

My navbar is up, woot! At first my hamburger menu wasn't quite showing up until I realized that its bc of how we sized things on flex and width within the .menu-content-container🤦🏻‍♀️

CSS Grids & Data

Where the struggle begins: my lack of familiarity w/ React Router. My "Trending Posts" do not show up on Home in place of my 404.

page-rend.js

import React from "react";
import { useRouteMatch } from "react-router-dom";

const generatePage = (page) => {
  const component = () => require(`./pages/${page}`).default;

  try {
    return React.createElement(component());
  } catch (err) {
    console.warn(err);
    return React.createElement(() => 404);
  }
};

export default function PageRenderer() {
  const {
    params: { page },
  } = useRouteMatch();

  return generatePage();
}

home.js

import React from "react";
import { PostMasonry } from "../components/common";
import trending from "../assets/mocks/trending";

const trendingConfig = {
  1: {
    gridArea: "1 / 2 / 3 / 3",
  },
};

export default function Home() {
  return (
    <section className="container home">
      <div className="row">
        <h2>Trending Posts</h2>
        <PostMasonry posts={trending} columns={3} />
      </div>
    </section>
  );
}

app.js

import React from "react";
import Navigation from "./components/nav";
import "./assets/scss/base.scss";

import {
  BrowserRouter as Router,
  Switch,
  Route,
  Redirect,
} from "react-router-dom";
import PageRenderer from "./page-rend";

function App() {
  const user = {
    firstName: "Thit",
    lastName: "Nguyen",
  };

  return (
    <Router>
      <div className="App">
        <Navigation user={user} />
        <Switch>
          <Route path="/:page" component={PageRenderer} />
          <Route path="/" render={() => <Redirect to="/home" />} />
          <Route component={() => 404} />
        </Switch>
      </div>
    </Router>
  );
}

export default App;

Possible Resolutions/Pace Is the Trick

I've got a hunch that it has something to do with how the <Router> and <Switch> component categories are set up because, everything else seems to check out.

So for now, I'm going to dive into the documentation and search for sources to get a better understanding of how all of this processes before going any further.

So far, learning React these past few days has taught me:

Patience
Punctuation
Literalness
Humility

Image Credit 一 bluumind

SCSS & React dir Inception

sdll — Sun, 26 Jul 2020 02:02:05 +0000

SCSS w/ React for my Navbar

Following a tutorial that is 3-4 months out from the release date of newer pkgs, shows exactly how hard the dev world is pusshin! It's really motivating actually 😆

So I followed this awesome post on Hackernoon! This and some help from the Reactiflux community, really a fantastic group of people! Hopefully I can show my gratitude in future contributions, once we get past our /. ./ typos lol!

In short, react-app would only respond to src/base.scss not src/assets/base.scss while trying to @use 'assets/scss_nav' so we did away w/ the extra dirs and linking which resolved✨

Upon further perusal of the React Docs I found React's method of processing our files (specifically for create-react-app) is quite unique which may be the reason why it didn't process correctly? What do you think?

sdll imagining their directory communicating w/ ours 🤔

At any rate, I am now in the process of learning about React Router. Wish me luck! ⚛️

Create-React-App or Die Tryin'

sdll — Sat, 25 Jul 2020 08:37:11 +0000

VSCode: Humble Beginnings

Yesterday, I started tinkering w/ VSCode and managed to learn about some really useful extensions [i.e, Auto Tags, Emmet, and Snippets] Known for configuring every setting on every digital device - this aspect was fun...until we got to the config files for linting 🤯

It's pretty important to have spellcheck/auto-correct/auto-format-on-save stuff, the formulaic editions©, running when working on projects. It really helps you type less to avoid strain and makes the experience much more enjoyable.

😲 OMG now we can focus on the 99 reasons why we Failed to compile 🌶

Dependencies

FFW>> TIL about the complexity of dependencies and how import is akin to linking stuff like Google Fonts and Font Awesome icons in an index.html; oversimplification? Mm..hope not lol. At some point I was able to install:

homebrew
npm
yarn
react
node-css
???

Tbh, there were just sooo many idr. Will have to check my zsh later for accuracy. It's really tough to get a full list of dependencies/packages w/r/t your project, get comfy w/ your directory (file) structure and configure the respective .rc or .json file.

Oh configs, truly where the journey begins 🧗🏻‍♀️

sdll Decides on a Blog

At this point I had scoured all of YT and 3 search engines on 2 browsers (never mind the IP) to find a 1/2 way decent tutorial. I won't sing my praises just yet; shameless self-promos, vague instructions, the best ones have low video quality, the worst ones post great taglines but are just knock-offs of the good ones >.<"

The difficult part about this: the misinformation about what the best superficial tools are but not exactly how to build anything relevant or structurally sound.

I'm determined, to share my experience w/ others 🚫🧢

Onward we must clack! So far, so good, minus an issue w/ using import to access .scss for my navbar. Stay tuned!