creaturenex

Webpack & Tailwind CSS Setup

Create your package.json

npm init -y

Create your src folder

Create a folder called src and add an empty index.js file. The code that webpack compiles goes in here including any Javascript modules and the main Tailwind file.

creaturenex

Creating an API-Only Application with Ruby on Rails

01 - Create a new API-only Rails app

rails new ror-app-name --api

02 - Basic Scaffold

01 - Model

This step is for creating a very basic level of model for us to work in. If you know already, or wish to apply your own custom models with relationships you can skip this step.

creaturenex

Most configuration really isn't about the app -- it's about where the app runs, what keys it needs to communicate with third party API's, the db password and username, etc... They're just deployment details -- and there are lots of tools to help manage environment variables -- not the least handy being a simple .env file with all your settings. Simply source the appropriate env before you launch the app in the given env (you could make it part of a launch script, for instance).

env files look like this:

SOMEVAR="somevalue"
ANOTHERVAR="anothervalue"

To source it:

$ source dev.env # or staging.env, or production.env, depending on where you're deploying to

creaturenex

System Design Cheatsheet

Picking the right architecture = Picking the right battles + Managing trade-offs

Basic Steps

1. Clarify and agree on the scope of the system

• User cases (description of sequences of events that, taken together, lead to a system doing something useful)
  • Who is going to use it?
  • How are they going to use it?

creaturenex

<link href='https://fonts.googleapis.com/css?family=Play:400,700' rel='stylesheet' type='text/css'>
<canvas id="game-canvas" width="640" height="640"></canvas>

creaturenex

--color-scale-white: #ffffff;
--color-scale-gray-0: #f6f8fa;
--color-scale-gray-1: #eaeef2;
--color-scale-gray-2: #d0d7de;
--color-scale-gray-3: #afb8c1;
--color-scale-gray-4: #8c959f;
--color-scale-gray-5: #6e7781;
--color-scale-gray-6: #57606a;
--color-scale-gray-7: #424a53;
--color-scale-gray-8: #32383f;

creaturenex

/* CHALLENGE 1 */

function sayHowdy() {
  console.log('Howdy');
}

function testMe() {
  setTimeout(sayHowdy, 0);
  console.log('Partnah');
}

creaturenex

.gist {
    .gist-file {
        border: none !important;
        margin-bottom: 0 !important;
        .gist-data {
            border-bottom: 2px solid #7f8c8d !important;
            .line-numbers {
                border-right: 2px solid #7f8c8d !important;
                padding: 1em !important;
            }

creaturenex

/* ==UserStyle==
@name         Dark Docs
@version      2022.12.17
@namespace    userstyles.world/user/winghongchan
@description  A dark theme for Google Docs web, based on the colors used in its mobile app.
@author       winghongchan
@license      No License
@preprocessor less
@var          select document-filter "Document filter" {"none:None": "none", "dim:Dim": "contrast(80%) brightness(90%)", "invert:Invert*": "var(--darkfilter)"}
@var          number document-contrast "Document contrast while inverted" [80, 40, 100, 1, "%"]

creaturenex

// Example 1

// Write a function that returns the factorial of a number.
// EXAMPLE4! = 4 * 3 * 2 * 1 = 24, so calling factorial(4) should return 24.

// Initial example as I did not expect the function to use an argument as storage 
// function factorial(num) {
// 	if (num == 1) return num;
//   return num * factorial(num - 1);
// };