taniarascia

Roadmap of Web Development

Getting Started

Operating System

What operating system your computer runs on.

• Mac, Windows, Linux

taniarascia

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

p {
  font-size: 1.1rem;
}

taniarascia

// Variables
$font-stack: Helvetica, sans-serif;
$primary-color: #333;

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

taniarascia

#!/bin/bash
read -r -p 'Commit message: ' ${desc} # prompt user for commit message
git add .                             # track all files 
git add -u                            # track all deleted files
git commit -m "$desc"                 # commit with message
git push origin master                # push to origin
git push production master            # push to development server

taniarascia

React Notes

• A React component can only return one parent element.

return <h1>Hello</h1><p>World</p>            // error
return <div><h1>Hello</h1><p>World</p></div> // okay 

• JavaScript expressions can be interpolated in JSX with {}

taniarascia

000000  121a  JP 0x21a
000002  434f  SNE V3, 0x4f
000004  4e4e  SNE Ve, 0x4e
000006  4543  SNE V5, 0x43
000008  5434  DW 0x5434
00000a  2062  CALL 0x62
00000c  7920  ADD V9, 0x20
00000e  4461  SNE V4, 0x61
000010  7669  ADD V6, 0x69
000012  6420  LD V4, 0x20

taniarascia

Git

Git command reference.

Upload all files in a local directory to a new Git repository

If you have a project on your computer and you just created an empty Git repository in GitHub, use these commands to upload everything to Git.

cd your-directory

taniarascia

React Architecture: How to Structure and Organize a React Application

There is no consensus on the right way to organize a React application. React gives you a lot of freedom, but with that freedom comes the responsibility of deciding on your own architecture. Often the case is that whoever sets up the application in the beginning throws almost everything in a components folder, or maybe components and containers if they used Redux, but I propose there's a better way. I like to be deliberate about how I organize my applications so they're easy to use, understand, and extend.

I'm going to show you what I consider to be an intuitive and scalable system for large-scale production React applications. The main concept I think is important is to make the architecture focused on feature as opposed to type, organizing only shared components on a global level and modularized all the other related entities together in the localized view.

Tech assumptions

Since this article will be opinionated,

taniarascia

Authentication in Real-World Web Apps with JavaScript

Outline of ideas, concepts to cover, potential projects to write.

Setup Idea

• Book with a video for each chapter.

Prerequisites/Overview

taniarascia

function isOdious(x) {
  if (x < 0) throw new Error('Value must be positive!')

  const binaryExpansion = x.toString(2)
  const count = Array.from(binaryExpansion).reduce((acc, val) => (val == 1 ? acc + 1 : acc), 0)

  return count % 2 === 1
}