DEV Community: Swislok-Dev

Bootcamp vs self-taught

Swislok-Dev — Sat, 24 Sep 2022 02:51:03 +0000

Learning to code take discipline, and a lot of reading. I first started learning how to code during a college course that wasn't even focused on code, but was still taught to understand the main idea of programming logic with a language.

Python was the language in question and after taking this course I went on my own to learn more about the language and how to use a programming language. This was hard for me since I was left alone not knowing which way to go or how to pick up techniques to use.

Bootcamp Learning

This was about the time that I decided that I needed to have a structure learning path to get me ready for what a job may need from a developer.

While most concepts taught in coding bootcamps involve a programming language or two, the major takeaway during a coding bootcamp is learning how to learning.

This is the most powerful tool any developer can have as the language or framework they work with is just the tool. Tools have instruction manuals, and programming languages have documentation.

Documentation is extensive for any language or framework and is where most programming starts when learning a new technology.

As most programming languages can be used the same way, just with different syntax, learning why different technologies exists becomes the real question.

Whether it a web application, embedded system software, mobile development or systems software, a different technology exists for the proficiency that they excel at.

This is the main point of any bootcamp for someone just starting out learning how to code.

Self-taught coder

Being a self-taught coder myself, many struggles are felt early on with not knowing which way to go or how to even start a project.

Not having the knowledge of how to use any programming language is only the first barrier. After that, its knowing what language to use and why.

Many programs exist to help self-taught learning and built knowledge enough to do something with, but fall flat when it comes time to choose a project and how to progress or even where to start.

Without being guided through simple exercises like implementing CRUD functions for a web app, or centering a <div> it may be difficult at first where the best place to start is.

Through extra learning and reading up on code projects in active and open development can help build up enough knowledge. This can help implement simple tasks which build into scalable projects later on through trial and error.

Conclusion

Being a self-taught programming can have tough, but learning from a fast pace code bootcamp can fly by so quickly that it may be hard to pick up the concept of building a project.

Learning where to start a project and how to use a particular technology will be the largest hurdle to overcome in the beginning and will eventually be a constant learning experience.

In the end, no matter how a developer started as a self-taught, bootcamper, or even a university student, all paths while learning how to be a programmer eventually become a self-taught route.

Lazy Load Images

Swislok-Dev — Mon, 19 Sep 2022 00:51:15 +0000

Lazy loading is a performance booster for any site that will render images.

Why Lazy Load?

The page upon arriving will begin to render all assets including every image on a page. If a page has too many photos, this will increase the time which users to the site will be able to see them.

Lazy loading is a technique to load images only when they are about to enter the viewport which gives several benefits.

Site Performance

With image loading being delayed, this will decrease the amount of the page that will need to be downloaded on initial page load. For images that are on the landing page and within the view, these images will get loaded first and be faster.

Bandwidth

Having a site hosted on Heroku or Netlify will have only a limited amount of bandwidth available, and lazy loading will help decrease the amount of bandwidth needed to load the page.

Load Images Lazily

A way of loading images can be done using HTML and JavaScript to change the <img src=""> from blank to information. The src gets read by the browser upon load and will be delayed with JavaScript by changing the src to what the image source will be.

Start with some basic image tag in HTML:

<img class="lazy-loading-image" data-src="./assets/some-image1.jpg" />
<img class="lazy-loading-image" data-src="./assets/some-image1.jpg" />
<img class="lazy-loading-image" data-src="./assets/some-image1.jpg" />

And now the JavaScript that will act on window scroll and start lazy loading:

document.addEventListener("DOMContentLoaded", () => {
  const images = document.querySelectorAll("img.lazy-loading-image");

  let lazyTimeout;

  const lazyLoad = () => {
    if (lazyTimeout) {
      clearTimeout(lazyTimeout);
    }

    lazyTimeout = setTimeout(() => {
      let scrollTop = window.pageYOffset;
      images.forEach((img) => {
        if (img.offsetTop < (window.innerHeight + scrollTop)) {
          img.src = img.dataset.src;
          img.classList.remove("lazy-loading-image");
        }
      });

      if (images.length === 0) {
        document.removeEventListener("scroll", lazyLoad);
        window.removeEventListener("resize", lazyload);
        window.removeEventListener("orientationChange", lazyload);
      }
    }, 10);
  }

  document.addEventListener("scroll", lazyload);
  window.addEventListener("resize", lazyload);
  window.addEventListener("orientationChange", lazyload);
})

There are plenty of third party options towards lazy loading as well, lazysizes or jQuery Lazy to name a couple.

And with that creating full pages full of images (or videos and iframes) can be loaded later rather than have the site become slowed down by unseen assets.

Animated Modal in React

Swislok-Dev — Sun, 11 Sep 2022 18:30:41 +0000

This will be a guide to setting up a modal that will pop in the center of the screen.

Create a Modal Component

import React from "react"

function Modal(props) {
  return (
    <div className="modal">
      <div className="modal-content">
        <div className="modal-header">
          <h4 className="modal-title">Modal Title</h4>
        </div>
        <div className="modal-body">Modal Body</div>
        <div className="modal-footer">
          <button className="button">Close</button>
        </div>
      </div>
    </div>
  )
};

export default Modal

Style the Modal

/* Modal */

.modal {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-content {
  width: 500px;
  background-color: #fff;
}

.modal-header, .modal-footer {
  padding: 10px;
}

.modal-body {
  padding: 10px;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}

Import to App.js

import React from "react"
import Modal from "./components/Modal/Modal"

function App() {
  return (
    <div className="App">
      <button >Show Modal</button>
      <Modal />
    </div>
  )
}

Show the modal

When the Show Modal button is pressed the modal should pop up.

Using state will allow the modal to show or be hidden depending on the current state. In Modal.js, add the following prop check for if the modal should be shown.

// Modal.js

function Modal(props) {
  if (!props.show) {
    return null
  }

...

}

Using useState add a state object to App.js:

import React, { useState } from "react"
import Modal from "./components/Modal/Modal.jsx"
import "./App.css"

function App() {
  const [show, setShow] = useState(false)
  return (
    <div className="App">
      <h1>Scratch Pad</h1>
      <button onClick={() => setShow(true)}>Show Modal</button>
      <Modal show={show}/>
    </div>
  )
}

export default App

Hide the modal

Update the following code to implement a way to close the modal without the need for a function by changing state props.

// App.js

<button onClick={() => setShow(true)}>Show Modal</button>
<Modal onClose={() => setShow(false)} show={show} />

// Modal.js

<div className="modal-footer">
  <button onClick={props.onClose} classname="button">Close</button>
</div>

Close modal on outside click

We should add a way for the modal to close on its own when clicked off the modal.

Functionality will remain as expected, ability to click content on the modal without closing, and be able to close by clicking the close button or off the modal.

// Modal.js

return (
  <div className="modal" onClick={props.onClose}>
    <div className="modal-content" 
         onClick={(e) => e.stopPropagation()}>
      ...
    </div>
  </div>
)

The modal should close when clicked outside of the modal content box, but do nothing when clicked inside.

Now to give it a drop-in animation

Animate the modal

Add in the following to give the modal a drop down animation when it has been opened.

.modal {
  ...
  opacity: 0;
  transition: all 0.3s ease-in-out;
  pointer-events: none;
}

.modal.show {
  opacity: 1;
  pointer-events: visible;
}

.modal-content {
  ...
  transform: translateY(-200px);
  transition: all 0.3s ease-in-out;
}

.modal-show .modal-content {
  transform: translateY(0);
}

And finally using useState hook handle the .show class.

// Modal.js

function Modal(props) {
  // if (!props.show) { return null } should be removed.
  return (
    <div className={`modal ${props.show ? "show" : ""}`} onClick={props.onClose}>
    ...
    </div>
  )
}

The null check should be removed since the show/hide functionality is being handled through CSS now.

And now you have a modal with a slight animation. Play with the transition/transform settings to make it behave in the manner that you wish.

A Programmer's Laptop

Swislok-Dev — Sun, 04 Sep 2022 16:35:46 +0000

How to choose a laptop for coding

Everyone has a different criteria when trying different laptops. For coding, many different factors are to be considered. Rather than place a list of items to consider first, I'll explain my journey through a few laptops I've owned and tried first hand.

Here are some things to consider

Coding Begins

When I first started coding I was using a Lenovo Yoga 2. I had a nice screen, but due to the glass touchscreen it was heavy. I looked up different laptop manufacturers and was settling on Lenovo.

The Lenovo ThinkPad is highly regarded as the best typing experience and that lineage started before Lenovo with the IBM ThinkPad.

I found myself a T460, a 14 inch display with a nice keyboard. For the next two years used this with Windows for coding in Python. I was happy in general, but when I started web dev bootcamp, was wanting a larger screen for working with multiple windows (as is the case for most web dev).

It's Too Big?

I later found myself looking at the 15 inch models of ThinkPads and got a T590, 15.6 inch display with a full keyboard including num pad. While I liked the larger screen for placing on a desk, most of my coding was done on my lap in my car during break time at work.

This became a problem as the extra size was becoming uncomfortable. I was able to get things done at home via the compatible dock for it with an extra monitor. I was then again wanting a different laptop with a 14 inch display on it.

I tried a few other 15 inch laptops, but the result was all the same. Cramped in small spaces, too much space taken up on the desk.

Docking Solution

The dock was a Lenovo dock that attached directly to the laptop which required it to lay down rather than stand up.

The dock was expensive and was determined to keep using this dock, but wanted the smaller screen size.

I came across the T14 by Lenovo which had an improved processor in it and the experience was really great. The dock was starting to become the issue. I really enjoyed the display now and processor speed along with a better integrated GPU which allowed very fast web page rendering along with some creative work on the side.

I then went a got a System 76 laptop which was branded as their "thin and light". I was almost 100% happy with this laptop. It was super light, almost 2 pounds, great display, larger than normal battery, physical dimensions made it able to be hauled anywhere with no issues and I made use of a new dock that required a USB type C cable for docking.

The problem with this was the keyboard. It was awful. Keys felt like something found on a toy and the arrow keys were so tiny you could press 3 directions at once.

Thin and Light

To get back to center I found a T470 which was familiar in all ways to the T460, just better internals (CPU, SDD, 16GB of RAM). This had a USB type C port which allowed me to maintain my current docking solution.

I really like the weight of the System 76 laptop and was on Lenovo's website again for their thin and light model, X1 Carbon.

This model just received an update and was seemingly everything that I could have wanted. Once I received this one I had everything. Great CPU, plenty of RAM, blazing fast SSD and a different aspect ratio of 16:10 which allows more vertical space; good for reading more lines of code.

Controversy Ensues

I finished my bootcamp with the X1 Carbon thinking I was going to keep this laptop forever. I had been running Linux for my time at the bootcamp and everything seemed perfect.

Being a bit of a perfectionist, during this time Apple had been doing some great things in terms of their Macbook lineup with the advent of the M1 (Apple Silicon) chip.

The chip offered beyond better performance than any other laptop and twice the battery life as well.

At this point I had covered everything about a laptop to consider other than the screen resolution. My past laptops had a 1080p display as that offered a balance of decent clarity and battery life.

Higher resolutions = more pixels = more battery used.

The M1 Macbook Air offered a higher resolution screen and better battery life which was very appealing now. It too had an aspect ratio of 16:10. The screen size was a little smaller (13.3 inches), but with a higher resolution comes a couple of trade-offs:

Clarity for coding
UI elements aren't skewed

So I got it.

I've been using the M1 Air every since and has everything a coder like me would need for my use case.

Things to Consider

Now is the list of my criteria when seeking out or seeing a new laptop on the market for how I would need it.

Display size
Aspect ratio
Battery life
Keyboard feel
Keyboard layout
Physical size
Weight
Docking solution

Hopefully this will help for some things to considered and what I've gone through for making a purchase for yourself in the future.

Make sure to try before you buy, buying and selling laptops can be quite tiresome!

Choosing an IDE

Swislok-Dev — Sun, 28 Aug 2022 19:55:00 +0000

Starting out writing code in 2018, I've used a few IDEs and code editors. While the likes of emacs or vim will do the job just fine I'll be focusing attention on some of the GUI IDEs that I've had experience with.

Getting Started

If you're just getting into coding then starting with a code editor will be the best choice. I personally started with Atom (which has lost support) as my first, and it was a good experience. At the time I was not aware of what version control was or how it was important.

Atom

Atom, created by GitHub, has a built in Git client which connects to GitHub for ease of use for maintaining your code base. I was rather fond of the syntax highlighting that was provided which helped a lot while I was learning how to code.

Atom has the ability to have a package manager installed so put add-ons in to enable the use of a built-in terminal, prettier, and other favorite packages and one-offs to enhance the experience.

Sublime Text

Sublime Text was an editor that I found to be quite nice as while I running an older computer at the time with minimal resources such as RAM. This editor also for the same feel as Atom regarding highlighting, but more importantly as it hardly used any RAM at all compared to Atom.

While Sublime does not have much going on, as for coding or scripting a Python Discord like I was doing, this worked for well for me for the next two years.

Sublime has the ability also to add a package manager and get third-party plug-ins, such as a code runner, that can help focus what kind of program you are working on.

For just starting out I would suggest Sublime due to its simplicity, ease of use, and the very low load on your computer resources.

Getting Focused

I knew there were other IDEs and code editors out there, the one that caught my eye was Microsoft Visual Studio Code (VS Code). My first thoughts were that it did "too much" for me, as I was still learning and wanted learn as I was going rather than let the editor do all the work.

VS Code

VS Code was suggested for the coding bootcamp I attended for a multitude of reasons:

syntax highlighting
built-in terminal
cross platform
built-in Git
debugger
support for many languages
plug-ins aka extensions
snippets
intelligent code completion

This editor is a whole lot of everything, and I felt that this was the only one ever needed for most anything.

Support for VS Code is available to many different machines, including 32 bit Intel and the Raspberry Pi!

While it can run on a Raspberry Pi, I would never recommend it as the Pi has very limited resources and VS Code takes up much of the reserves.

The extension that can be downloaded are plentiful. Support for different language/framework snippets, themes, fonts, previews, code runners, all from a GUI that makes it easy to see what you are getting. Installing/uninstalling is also made very easy with just a click of a button and a reload of VS Code.

IDE

IDEs (Integrated Development Environment) are tools that I've only used a handful of times as they are more suite towards a particular type of programming. Specifically, some will only have one or two programming languages that are focused.

Eclipse

While taking university classes, this IDE was brought up. Eclipse is primarily used for Java development. It requires a compiler which gets installed during initial installation. Recommended to leave the compiler setting alone until you have a better grasp on the settings. I made the unfortunate mistake of moving the compiler and caused Eclipse to cease working.

Fortunately, reinstalling got me going again with Java coding and later realized that I could also use this IDE for C/C++ coding as well.

JetBrains

JetBrains is not an IDE but the company behind many IDEs that are done quite well. IntelliJ is their most popular service as it has been ranked the number one favorite IDE for Java development.

Webstorm

Webstorm is a JetBrains product for JavaScript development. I have just started using this for the free trial and so far it seems to be everything a JS developer would ever need. Perhaps installing a plug-in like a formatter would be the only I've done and configured my keymap to the VS Code keymap.

Intelli-sense works wonderfully in my experience so far and I've had little trouble with code completion, in fact the code completion for a React project will auto import a component if the suggestion matches the component you happen to be typing.

// This import will get written when code completion is tabbed
import Home from "../components/Home.jsx"

function App () {
  return (
    <Home />
)

Microsoft Visual Studio

Visual Studio is primarily used for C# coding, but has the ability to be used for F# as well. F# is a Microsoft created language.

All tools like other full IDEs are included and are extensively used for applications like game development.

My experience is very limited, but from what I've been able to do it does seem to interpret C/C++ code as well. I wouldn't doubt more languages are supported as well.

Track flights with Express and React

Swislok-Dev — Mon, 22 Aug 2022 02:30:58 +0000

I recently built an application that is able to have a user input a flight number and return information about scheduled takeoff and landing times, as well as location, airport name, and the flight status.

Backend

The server is where all API calls are to be made. A server is not needed necessarily for this purpose, but allows for a database to be added at a later time with minimal conversion.

This will be a Node server using the Express.js framework to make things a little easier. If you have never used Express before, I made a bit of a starter guide to help out.

This app involves an API to source the flight information, you may choose a variety of different APIs which do similar things, but for this project I'll be using Flight Aware's API which requires a personal key.

Start of with creating a .env file in the root directory to set your API key.

Once you have your key stored, go over the documentation as there is quite a lot of information to get through to understand what data you should target.

Routes and Actions

The controller action will be named getFlightInfo, you haven't done so already, use npm install dotenv axios express to have the necessary packages installed.

flightsController.js

const axios = require("axios");
require("dotenv").config();

const getFlightInfo = (req, res) => {
  const ident = req.params.ident.toUpperCase();
  axios.get("https://aeroapi.flightaware.com/aeroapi/flights/" + ident, {
    headers: {
      Accept: "application/json; charset=UTF-8",
      "x-apikey": process.env.aeroapiKey,
    },
  })
  .then((resp) => {
    res.status(200).send(resp.data["flights"]);
  })
  .catch(() => {
    res.status(400).send({ message: "The flight nubmer is invalid" });
  });
};

module.exports = {
  getFlightInfo,
};

flightsRoutes.js

const express = require("express")
const router = express.Router()
const { getFlightInfo } = require("../controllers/flightsController")

router.get("/:ident", getFlightInfo)

module.exports = router

Endpoint "/flights/{:ident}"

This action will be able to find out info for a given flight number. The example that's used on the documentation site to test usage for the many endpoints is UAL4 which is the operator code followed by the flight number. In this case the ident being "UAL4" or "UA4", will give data about the flight from London, England to Houston, Texas.

NOTE:

This information will need to be parsed through as this flight flies once a day, EACH day (which is something I learned about flight numbers), in order to find the next or en route flight.

ASIDE
Flight numbers are static to the flight origin and destination, and with what airline is flying the route.

With this all up and configured, test it with a REST client to verify information is coming back successfully.

Frontend

Create a React directory or use the wonderful npx create-react-app <frontend-directory-name> to get React all ready to go. After the setup completes use npm install axios react-redux @reduxjs/toolkit to have axios, redux, and reduxjs/toolkit in the package files.

Call the API

Before making a call to the API, the next flight needs to be determined beforehand so that we have relevant data. I've created a features directory which holds a generic functions.js file, but you may want to place this in a helper directory of choice.

functions.js

const now = new Date();

export const convertISOTimeTDateTime = (time) => {
  return new Date(time);
};

export const findNextFlight = (flightsArray) => {
  let currentFlight;

  for (let i = 0; i < flightsArray.length; i++) {
    let flightTime = convertISOTimeToDateTime(flightsArray[i].scheduled_off);
    let nextFlight = flightsArray[i + 1];
    if (flightTime > now && nextFlight.status !== "Scheduled") {
      if (nextFlight.status.includes("En Route")) {
        currentFlight = nextFlight;
        return currentFlight;
      }
      currentFlight = flightsArray[i];
    } else {
    }
  }
  return currentFlight;
};

Every date object returned from the API will be in ISO 8601 format, and for human readability, a conversion will be needed.

flightsService.js

export const getFlightInfo = async (flightNumber) => {
  const response = await axios.get(`/api/flights/${flightNumber}`)
  return response.data
}

This will call the backend to fetch current flights based on the flight number used.

We'll create a slice function to use this call and load the redux store with all the flights data.

flightsSlice.js

import { createSlice, createAsyncThunk } from "@reduxjs/toolkit"; 
import flightsService from "./flightsService";

const initialState = {
  message: "",
  flights: [],
};

export const getFlights = createAsyncThunk(
  "flights/:ident",
  async (flightNumber, thunkAPI) => {
    try {
      return await flightsService.getFlightInfo(flightNumber);
    } catch (error) {
      const message =
        (error.response &&
          error.response.data &&
          error.response.data.message) ||
        error.message ||
        error.toString();
      return thunkAPI.rejectWithValue(message);
    }
  }
);

export const flightsSlice = createSlice ({
  name: "flight",
  initialState,
  reducers: { reset: () => initialState},
  extraReducers: (builder) => {
    builder
      .addCase(getFlights.fulfilled, (state, action) => {
        state.flights = action.payload;
      })
      .addCase(getFlights.rejected, (state, action) => {
        state.message = action.payload;
      });
  },
});

export default flightsSlice.reducer;

Display flight info

With all functions set and data ready create a home page or some place for the container.

Flights.jsx

import React, { useState } from "react";
import { getFlights } from "../features/flights/flightsSlice.js";
import { useDispatch, useSelector } from "react-redux";
import * as functions from "../features/functions";
import FlightItem from "../components/FlightItem";

function Flights() {
  const dispatch = useDispatch();
  const { flights, isLoading } = useSelector((state) => state.flightsState);
  const [flightNumber, setFlightNumber] = useState("");

  const listFlights = () => {
    const nextFlight = functions.findNextFlight(flights);
    return <FlightItem nextFlight={nextFlight} flightNumber={flightNumber} />;
  };

  const onChange = (e) => {
    setFlightNumber(e.target.value);
  };

  const onSubmit = (e) => {
    e.preventDefault();
    dispatch(getFlights(flightNumber));
  };

return (
    <section id="flights-page">
      <form id="flight-search" onSubmit={onSubmit}>
        <input
          type="text"
          name="flightNumber"
          autoFocus
          value={flightNumber}
          onChange={(e) => onChange(e)}
          placeholder="Enter flight number"
        />
        <input type="submit" value="Find Flight" />
      </form>
      <div className="info-text">
        {flights.length <= 0 ? <h2>Find a Flight</h2> : null}
      </div>
      {flights.length > 0 ? listFlights() : null}
    </section>
  );
}

export default Flights;

This, with the algo to find the next flight, will present the FlightItem component.

FlightItem.jsx

import React from "react";

export default function FlightItem({ nextFlight, flightNumber }) {
  const convertDate = (date) => {
    if (date) {
      const toDateString = new Date(date);
      const newDate = toDateString.toUTCString().split("GMT")[0];
      return newDate;
    }
  };

  const displayFlightNumber = (flightNumber) => {
    return flightNumber.toUpperCase();
  };

  const placeDate = () => {
    let date = new Date();
    return convertDate(date);
  };

  return (
    <>
      <div className="grid-container flight-item-grid">
        <div className="flight-heading">
          <h2>
            Flight
            <br />
            {displayFlightNumber(flightNumber)}
          </h2>

          <h3>{nextFlight.status}</h3>
          <h4>{placeDate()} UTC</h4>
        </div>

        <div className="flight-grid-item">
          <h3 className="departure-heading">Departure</h3>
          <h3 className="arrival-heading">Arrival</h3>
          <table className="departure-table">
            <tbody>
              <tr>
                <td>Scheduled Takeoff</td>
                <td>{convertDate(nextFlight.scheduled_off)}</td>
              </tr>
              <tr>
                <td>Actual Takeoff</td>
                <td>{convertDate(nextFlight.actual_off)}</td>
              </tr>
              <tr>
                <td>Airport</td>
                <td>{nextFlight.origin.code_iata}</td>
              </tr>
              <tr>
                <td>Terminal</td>
                <td>{nextFlight.terminal_origin}</td>
              </tr>
              <tr>
                <td>Gate</td>
                <td>{nextFlight.gate_origin}</td>
              </tr>
            </tbody>
          </table>

          <table className="arrival-table">
            <tbody>
              {nextFlight.scheduled_on == nextFlight.estimated_on ? (
                <tr>
                  <td>Scheduled Arrival</td>
                  <td>{convertDate(nextFlight.scheduled_on)}</td>
                </tr>
              ) : (
                <tr>
                  <td>Estimated Arrival</td>
                  <td>{convertDate(nextFlight.estimated_on)}</td>
                </tr>
              )}
              <tr>
                <td>Actual Arrival</td>
                <td>{convertDate(nextFlight.actual_on)}</td>
              </tr>
              <tr>
                <td>Airport</td>
                <td>{nextFlight.destination.code_iata}</td>
              </tr>
              <tr>
                <td>Terminal</td>
                <td>{nextFlight.terminal_destination}</td>
              </tr>
              <tr>
                <td>Gate</td>
                <td>{nextFlight.gate_destination}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </>
  );
}

There is a little bit a refactoring needed for the table of information displayed, but now there will be scheduled times of departure, scheduled (or estimated if the flight is delayed) time of arrival, and the airport information for anyone looking to find what terminal your ride would need to meet you (or any other reverse situation).

Feel free to leave comments or questions in case I have missed something along the way!

Happy flight tracking!

Heroku vs Netlify

Swislok-Dev — Mon, 15 Aug 2022 03:25:43 +0000

Which is better?

While I haven't figured which one is truly better than the other, I have figured out (the hard way) what each is better for.

Heroku

Heroku has the benefit of being able to handle full stack applications well and is aimed more towards backend development. Creating a Rails or Node/Express backend comes with its own buildpacks which get applied to the site upon the file being imported.

Backend deployment is great on Heroku, but with some build scripts involved such as the one I used with my most recent project, was able to deploy the front end along-side keeping this hosted project in one location.

Here is the code used for deployment:

// ./package.json

"scripts": {
  "heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client"
}

Code used for serving the frontend from index.js on the server:

// ./index.js

const express = require("express");
const path = require("path");
require("dotenv").config();

const app = express();

if (process.env.NODE_ENV === "production") {
  app.use(express.static(path.join(__dirname, "../client/build")));

  app.get("*", (req, res) =>
    res.sendFile(
      path.resolve(__dirname, "../", "client", "build", "index.html")
    )
  );
} else {
  app.get("/", (req, res) => res.send("Please set to production"));
}

// Keep this code above the error handling middleware call

With those two snippets the node app goes live after configuring which branch to deploy and setting environment variables.

Netlify

Netlify was my targeted place to host my previous application on, but learned that because I was using a type of framework for the server was not able to deploy successfully.

Netlify is build for frontend projects as a SPA or as a standalone web page. Frontend frameworks will work with netlify quite easily as the build folder will be generated and be read from to display the page.

As a side effect of being limited to frontend deployment only, this allows the site to react quite fast and has virtually no "spin-up" time to become interactive.

The downside is that it will not work with backend frameworks, unless you have implemented server-less functions which will act as a backend without any runtime or framework getting in the way.

Deploy on Netlify

Deployment is rather plain with a couple of choices:

NetlifyCLI or
connect your Git account

Both method achieve the same result, but by connecting to the Git repo allows for a deployment in just a couple minutes.

Once logged in:

repo selection
branch to deploy
DEPLOY!

Monorepo

A monorepo or frontend directory nested inside a parent directory just needs a little specificity during the branch selection > ./client or ./frontend whichever is the fronted to be deployed this will work.

A redirect for an API calls to where the backend (if any) is hosted will need to be reflected within the api call since development checks for a local instance of a running server.

Conclusion

Heroku is based on backend deployment which can be a little slow if the server is left sleeping, but has the benefit of serving a full-stack application after small configuration.

Netlify is based on frontend deployment and does not allow for any backend frameworks aside from server-less functions to be used in the same manner.

Grid Cheat sheet

Swislok-Dev — Sat, 06 Aug 2022 19:58:52 +0000

Grid Container

display

Sets the grid container to either a block or inline level grid for grid items.

Property	Description
grid	block grid
inline-grid	inline grid

grid-template-columns

Specifies how many columns and to what size the column widths will be. It is also possible to name the columns:

.grid-container {
  grid-template-columns: [column1] 50% [column2] 40% [column3] 10%;
}

A shorthand for creating same sized columns, repeat(<amount>, <size>) can be used:

.grid-container {
  grid-template-columns: repeat(3, 50px);
}

Which would be the same as writing:

.grid-container {
  grid-template-columns: 50px 50px 50px;
}

Track Sizes

It is possible to add too many pixels or a percentage that would cause the columns to overflow off the page (data-loss) and the fr unit helps to prevent that.

The fr unit will take a fraction of what space is available to keep the columns on screen and also will adjust size according to the viewport size.

Values	Description
10px	set column width to 10 pixels
10%	set column width to 10%
2fr	set column width as a fraction of free space

NOTE:

All values used with grid-template-columns can be applied to grid-template-rows for the rows instead.

grid-template-areas

Uses template referencing by giving names to grid areas using the grid-area property.

Values	Description
grid-area-name	the name of a grid area
.	empty grid cell
none	no grid areas are defined

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 50px);
  grid-template-rows: repeat(2, 25px);
  grid-template-areas:
    "header header header"
    "sidebar item-1 . "
}

.grid-item-1 {
  grid-area: item-1;
}

.grid-item-2 {
  grid-area: header;
}

.grid-item-3 {
  grid-area: sidebar;
}

grid-template

Shorthand for grid-template-rows, grid-template-columns, and grid-template-areas for a single line declaration.

Values	Description
none	sets all three properties to initial values
rows / columns	sets the grid-template with a value

.grid-container {
  grid-template: 
    [row1-start] "header header header " 25px [row1-end]
    [row2-start] "footer footer footer" 25px [row2-end]
    / auto 50px auto;
}

Which would be the same as:

.grid-container {
  grid-template-rows: [row1-start] 25px [row1-end row2-start] 25px [row2-end];
  grid-template-columns: auto 50px auto:
  grid-template-areas:
    "header header header"
    "footer footer footer";
}

column-gap, row-gap, grid-column-gap, grid-row-gap

Defines the size of the grid lines also knowns as gutters.

Value	Description
<line-size>	a length value

gap, grid-gap

Shorthand for row-gap and column-gap.

Values	Description
<row-gap> <column-gap>	length values

.grid-container {
  gap: <row-gap> <column-gap>;
}

justify-items

Values	Description
start	aligns items to the start of the cell
end	aligns items to the end of the cell
center	aligns items to the center of the cell
stretch	fills the whole width of the cell (default)

Note
This can be set individually by setting the justify-self property to a child.

align-items

Aligns items along the column axis.

Values	Description
stretch	fills the whole height of the cell (default)
start	aligns items to the start of the cell
end	aligns items to the end of the cell
center	aligns items to the center of the cell
baseline	aligns items along the text baseline with modifiers: `first baseline` or `last baseline` in the case of multi-line text

place-items

Sets both align-items and justify-items in a single declaration.

Values	Description
<align-item> / <justify-items>	If the second value is not filled in, the first value will be given to both properties

justify-content

Aligns the grid along the row axis.

Values	Description
start	aligns grid to the start of the container
end	aligns grid to the end of the container
center	aligns grid to the center of the container
stretch	resizes the grid items to fill the width of the container
space-around	places items an even amount from each other and half from edges
space-between	places even amount of space between items with the first being placed at the `start` of the container and the last item to the `end` of the container
space-evenly	places even amount of space between items from each other and the `start` and `end` of the container

align-content

Aligns the grid along the column axis.

Values	Description
start	aligns grid to the top of the container
end	aligns grid to the bottom of the container
center	aligns grid vertically center of the container
stretch	resizes items to fill top to bottom of the container
space-around	even spacing between items, half space from edges
space-between	even spacing between items with no spaces at far ends
space-evenly	even amount of space between items and far ends

place-content

Shorthand for align-content and justify-content. If the second value is omitted the first will be used for both.

grid-auto-columns, grid-auto-rows

Specifies the size of auto generated items.

.grid-container {
  grid-auto-columns: 60px;
}

For any columns that should be added, they will have a width of 60 pixels.

grid-auto-flow

Controls of the auto-placement works.

Values	Description
row	generates new rows (default)
column	generates new columns as necessary
dense	attempts to fill in holes earlier if smaller items are generated

grid

Shorthand for setting all properties in a single declaration: grid-template-rows, grid-template-column, grid-template-areas, grid-auto-rows, grid-auto-columns, and grid-auto-flow.

Values	Description
none	sets all sub-properties to initial values
<grid-template>	works the same as `grid-template` shorthand
<grid-template-rows> / [ auto-flow ] <grid-auto-columns>	sets `grid-template-rows`, if the `auto-flow` keyword is used on the right side, sets `grid-auto-flow` to column, on the left side will be set to row, if `grid-auto-columns` is omitted, set to auto by default

Equivalent Examples

.grid-container {
  grid: 100px 300px / 3fr 1fr;
}

.grid-container {
  grid-template-rows: 100px 300px;
  grid-template-columns: 3fr 1fr;
}

.grid-container {
  grid: auto-flow / 200px 1fr;
}

.grid-container {
  grid-auto-flow: row;
  grid-template-columns: 200px 1fr;
}

.grid-container {
  grid: auto-flow dense 100px / 1fr 2fr;
}

.grid-container {
  grid-auto-flow: row dense;
  grid-auto-rows: 100px;
  grid-template-columns: 1fr 2fr;
}

.grid-container {
  grid: 100px 300px / auto-flow 200px;
}

.grid-container {
  grid-template-rows: 100px 300px;
  grid-auto-flow: column;
  grid-auto-columns: 200px;
}

.grid-container {
  grid: [row1-start] "header header header" 1fr [row1-end]
        [row2-start] "footer footer footer" 25px [row2-end]
        / auto 50px auto;
}

.grid-container {
  grid-template-areas: 
    "header header header"
    "footer footer footer";
  grid-template-rows: [row1-start] 1fr [row1-end row2-start] 25px [row2-end];
  grid-template-columns: auto 50px auto;    
}

Flexbox Guide

Swislok-Dev — Sun, 31 Jul 2022 18:31:01 +0000

Properties

Many of the properties of flexbox can become a little confusing after just learning it. This can be a guide to help with basic understanding of what it does.

Parent (flex container)

display
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
gap, row-gap, column-gap

Children (flex items)

order
flex-grow
flex-shrink
flex-basis
flex
align-self
justify-self

Parent Properties

display

This defines a flex container. All children will be a flex item.

.flex-container {
  display: flex;
}

flex-direction

This defines the main axis. This will make the flex items either in rows or columns in either normal or reversed directions.

Values	Description
row	left to right
row-reverse	right to left
column	top to bottom
column-reverse	bottom to top

NOTE:

Default value is row when display: flex is the only flex property in the container.

Setting flex-direction will build items based on their width and height properties. If set lower than the size of the container, a gap will be at the end of the direction.

flex-wrap

Without a wrap property, items will try to be on the same line. Enabling flex-wrap will allow items to move to the next line based on the width.

Values	Description
row	wrap items from top to bottom
wrap-reverse	wrap items from bottom to top
nowrap	all items will be on one line

flex-flow

Shorthand for flex-direction and flex-wrap, which can be used to form a one-line syntax. Default values are row nowrap

.flex-container {
  display: flex;
  flex-flow: row-reverse wrap-reverse;

  /* Same as 
  flex-direction: row-reverse; 
  flex-wrap: wrap-reverse; */
}

justify-content

Defines alignment along the main axis.

Values	Description
flex-start	Items are packed toward the start of the `flex-direction`
flex-end	Items are packed toward the end of the `flex-direction`
start	Items are packed toward the start of the writing-mode direction
end	Items are packed toward the end of the writing-mode direction
left	Items are packed toward the left of the container
right	Items are packed toward the right of the container
center	Items are center along the line
space-between	Items are evenly distributed in the line with the first on the start line and last item on the end line
space-around	Items evenly distributed within the line between and half on the outside
space-evenly	Items will be distributed with same spacing between items and the `start` and `end` of the container

Two additional keywords go along with this property with values : safe and unsafe.

Safe will prevent items from rendering off-screen and unable to be scrolled to.

align-items

Defines behavior along the cross axis, similar to how justify-content works.

Values	Description
stretch	Stretches columns to fill the container, but respect `min-width` and `max-width`; this is the default behavior
flex-start/start/self-start	Items are placed at the start of the cross axis
flex-end/end/self-end	Items are placed at the end of the cross axis
center	Items are placed on the center of the cross axis
baseline	Items are aligned so their baselines align

The safe and unsafe modifiers work here.

align-content

The functions similar to align-items, but only takes effect on multi-line flex containers if flex-wrap is set to either wrap or wrap-reverse.

If flex-wrap is set to nowrap, then align-content will do nothing.

Values	Description
normal	Reflects the default position of the items as if no value was set
flex-start/start	`flex-start` respects `flex-direction`, `start` respects writing-mode direction
flex-end/end	`flex-end` respects `flex-direction`, `start` respects writing-mode direction
center	Items are centered with the flex container
space-between	Items are evenly distributed, first line at the start of the container and the last line at the end of the container
space-around	Items are evenly distributed evenly between each line, and half space at top of first line and bottom of last line
space-evenly	Items are evenly distributed with equal spacing around each line
stretch	Lines are stretched to take up all remaining space with the flex container

The safe and unsafe modifiers work here.

gap, row-gap, column-gap

The gap property is a shorthand use for combining row-gap and column-gap into one line for styling.

.flex-container {
  display: flex;
  gap: 10px 20px; /* row-gap column-gap */

  /* Same as
  row-gap: 10px;
  column-gap: 20px; */
}

Children Properties

order

This will allow for items to be displayed in a given order.

.flex-item-1 {
  order: 5;
}

flex-grow

An item with a grow of greater than 1 will taken up that much space as the container size is increased.

.flex-item-1 {
  flex-grow: 1;
}

.flex-item-2 {
  flex-grow: 2;
}

In this, .flex-item-2 will grow and fill in twice as much space than .flex-item-1 will.

flex-shrink

The same for flex-shrink, items shrink more if the value is higher than other items.

.flex-item-3 {
  flex-shrink: 1;
}

.flex-item-4 {
  flex-shrink: 2;
}

flex-basis

This defines the default size of an element before the remaining space is distributed.

flex

This is shorthand for flex-grow, flex-shrink and flex-basis. The second and third parameters are optional.

The default values are: 0 1 auto.

align-self

This will work just the same as align-items, but only for the child component it is declared.

justify-self

This will work in a similar fashion to justify-content and is for the flex item along.

Why I code

Swislok-Dev — Sat, 23 Jul 2022 17:54:53 +0000

Reasons why I code

I had a bot idea
Use tools to solve problems
Create some neat things like web apps/sites
Do something that not many others can do

The Bot Idea

In 2017 I became a very active user of Discord, and with that I was led to find myself interacting with bots of all sorts. Something that would talk with you, some that would pull information down for a game, or just a basic calculator.

About a year later after messing with several bots I decided to create my own and I was onto the self-taught coding path.

I was able gain a reasonable understanding of Python and took to the Discord.py library for coding my bot. I learned many things along the way. Throughout this journey I was able to talk with my peers and users of the bot in how it would better serve them, and with that I was able to bring the bot into a more usable state with the server I was the admin of.

Problem Solving

I enjoy figuring out hard problems. To fantasize, I came across the Millennium Prize Problems, which are much harder to figure than I could ever hope to but was fun to read. These problems are some of the world's hardest to solve and only 1 out of the 7 have been solved.

With that said, when I hear someone telling me about how they wish they need to have a website created I can immediately reply with "how soon?".

Listening to their needs and being able to write the code required to meet these needs gives me a ton of joy when I find they are happy with what I have built for them.

Creating Apps

The feeling of creating a web page that has interactivity and good presentation makes me want to start a whole new project so that I can get the same feeling over and over again.

Not all apps are fully featured which gives it some novelty and becomes humbling when HTML/CSS can look and feel better than some older React projects.

Special Skills

Coding is definitely something not everyone will attempt or continue if they do. Coding has given me opportunities not only with creating code projects, but also a new way to look at reality.

Perhaps it's a little fantastic to think about coding as magic, but I've thought this way ever since my first "Hello World".

Creating automation and working with Machine Learning is where I would like to end up someday, creating the thing that will be able to think for you.

I have many aspirations ahead of myself, and through code I will see how far that can get me.

Front-End vs. Back-End

Swislok-Dev — Sun, 17 Jul 2022 20:14:06 +0000

Front-End development

Developing a front-end application or the front-end for an application has its many benefits:

instant gratification
beautification
interactivity
user-(un)friendly

Creating a front-end can be a joy to some and a nightmare to others. Depending on your understanding off CSS or some other styling framework, this process can befall many troubles.

I for one am the type to struggle when developing a working front-end as styling is not in my strong suite, but always getting better. I have learned to make notes or sketches or even just making bookmarks on websites that have a neat little sidebar.

Functionality

A crucial element of creating a beautiful front-end is to make a clone of a web site that has a few elements that move and some that are static within the same view. This helps to reinforce the fact you are working with two different elements on the same page while making them more interactive.

An example of this is on an blog post here on Dev.to and scrolling through a blog topic while having the author information always visible.

Form

After first creating this functionality of having independent scrollable entities on the page next comes the styling of making it look good or at the very least pleasing to use. This technique has helped in the past to create a faster workflow to separate concerns of how changes should be made and when to start working on the "look" after the "feel" has been developed.

Presentation

Creating content is great when paired with a format that is easy to use and easy on the eyes, but front-end development has already been well underway before this point with the inclusion of all the necessary information that has been sourced through an API or hard coded (via HTML).

Different techniques exist to assist with bringing information in to be used on the page and having knowledge with back-end technologies is always a "good-to-know" in order to collect information from the server.

Back-end

Lately, with working with different back-end frameworks, I've been finding myself enjoying the data fetching side of web applications. The ability to bring information in via web-scraping or APIs has made the back-end journey far more pleasing. As it goes, "without information, there is no power".

Providing the front-end

Without this information, the front-end has no content. I find myself more enclosed around having a solid back-end working for me to have information at the ready and that's where I typically start every app.

As a full-stack developer, I begin creating a back-end which is my gateway to what information my front-end will have to work with. Once all the data has been fetched, next is to make sure it is secure, or at least by including techniques to make it harder for anyone to "hack" their way through into say someone else's profile. Bcrypt and JWT (json web tokens) are the usual go-tos for securing user logins. Another way is making sure your packages are all up to date.

Vulnerabilities are being discovered all the time and with sites like GitHub to hold your source code, the security tabs can come up with automated tasks for the source owner to act one through pull-requests to update the packages to patch vulnerable versions further removing risk to the back-end files.

Which is first?

Whichever side of the app the gets developed first depends on the individual and the needs of the application. Portfolio sites usually don't need the benefit of back-ends while an e-commerce site will need to have a robust back-end full of encryption built in and authentication that is not easier cracked.

Whichever is made first the goal to keep in mind is how the information will be presented to the end-user, and creating ways for them to stick around the site and make it useful for further development down the road.

Rails or Express?

Swislok-Dev — Fri, 08 Jul 2022 16:21:41 +0000

Ruby on Rails and Express.js are a couple of popular choices for developing a backend for web apps and both have their strengths and weaknesses.

Ruby on Rails

For my bootcamp we were taught Ruby/Rails and how to create a working web application with either the use of a frontend framework (React, Vue, etc.) or use the built-in MVC that Rails comes packed with.

Rails is fully featured and comes with about every tool one would need to get deployed and has it's own Gemfile with some common packages left in comments in case it will be needed, bcrypt is the one that comes to mind first. A lot of the building of the source is opinionated and is fairly easy for any other developer to go through the code and collect the objective for the backend purpose.

Along with all that it's packed with, Rails has the ability for ease of setup, such as an API flag, templating, or initializing the SQL database for the project (postgresql, mySQL).

Express

Express was the first technology I went looking into after graduating since most employers and looking for experience using Node.js or worked with MERN/MEAN stack.

Upon following a short tutorial on doing to reading how express works and how it makes the life of the developer easier by cutting the amount of lines to get a server up and running. While Express is not as feature packed as Rails is, installing packages becomes fairly routine with any Node/JavaScript project and nearly goes overlooked after the 100+ time of using npm install.

While having a Node server using the Express framework as the backbone, there is a bit of freedom I felt while writing a backend. When writing the MVC, aside from React handling the views, it was nice have a shorter file structure all while having the functionality that I required the same as a Rails app.

Conclusion

While a closer comparison with Sinatra might be more appropriate, my choices for backends, at the current time, is between Rails or Express.

As such, Rails is feature rich which is both good getting a web application up and running and bad for it having all the packages which can make it slow to work with.

Express is the lightweight option which will be faster to run and becomes more customizable, but will inevitably take more lines of code to create the same level of functionality as the Rails server would be able to do.