krfong916

⇐ back to the gist-blog at jrw.fi

Advanced SCSS

Or, 16 cool things you may not have known your stylesheets could do. I'd rather have kept it to a nice round number like 10, but they just kept coming. Sorry.

I've been using SCSS/SASS for most of my styling work since 2009, and I'm a huge fan of Compass (by the great @chriseppstein). It really helped many of us through the darkest cross-browser crap. Even though browsers are increasingly playing nice with CSS, another problem has become very topical: managing the complexity in stylesheets as our in-browser apps get larger and larger. SCSS is an indispensable tool for dealing with this.

This isn't an introduction to the language by a long shot; many things probably won't make sense unless you have some SCSS under your belt already. That said, if you're not yet comfy with the basics, check out the aweso

krfong916

Architecture

Cloudfront

• a Content Delivery Network (CDN). A CDN delivers content through nodes (data centers) that are globally distributed
• When a user requests content that we're serving from CloudFront (our application), the user is routed to the edge location that provides the lowest latency
• User requests content and is routed to the nearest CDN -> low latency, best performance
• If the content is not at the edge location (content DNE at node) CloudFront retrieves the content from the origin we define (our S3 bucket)

Lambda@Edge

1. For headers

krfong916

What problem does file bundling solve

How were dependencies loaded on pages?

Previously, clients made many requests over the network for static assets. One would wait until all assets were loaded until the page was useable. With file bundling, the client doesn't make many requests to the server for multiple static files, instead one file is requested - CSS assets and javascript etc. -> optimizes load time, only send files over the network when the user needs it

before javascript modules (import and require statement) one main script for the entire site - this meant global variables and IIFEs (global scope pollution)

Modules were introduced in es6. In order to bridge the gap between es5 and es6, we used transpilers (babel). Transpilers transform your code and compile it into older code equivalents that could be executed across different browsers (b/c they run older JS engines). Transpile - transform and compile. Along with webpack, we could

krfong916

Hot Typescript

Type Narrowing and OR operator

• See section 5.2

Destructuring Object Parameters

• Destructuring object parameters and default value

MutableObjectRef

What is MutableRefObject in TypeScript? A MutableRefObject is the type of a ref that is returned from useRef in React.

krfong916

Hot Golang

Concurrency

• Mutexes communicate by shared memory, channels share memory by communication
• sources:
  • https://go.dev/blog/codelab-share
  • https://medium.com/dm03514-tech-blog/golang-monitors-and-mutexes-a-light-survey-84f04f9b7c09

Buffered v. Unbuffered Channels

The choice between unbuffered and buffered channels, and the choice of a buffered channel's capacity, may both affect the correctness of a program.

krfong916

Password Encryption

• do not store cleartext
• encrypt password with proven cryptographic hash algorithms
• add salt to protect hashed password from rainbow attacks
• iterations of processing = salt rounds, improves randomness

What is Salt

Salting is the application of a hash function to a sequence of bits in order to randomize that sequence of bits.

krfong916

let saveUser = async function(){
    let err, user;
    
    [err, user] = await to(UserModel.findById(1));
    
    if(err) throwError(err.message, true);
    
    user.name = “this rocks”
    
    [err, user] = await to(user.save());

krfong916

class GetReportsByOrganizationUseCase {
  private int userOrganization;
  private int requestedOrganization;
  private ArrayList<Reports> result = new ArrayList<>();

  constructor(userOrganization, requestedOrganization) {
    this.userOrganization = userOrganization;
    this.requestedOrganization = requestedOrganization;
  }

krfong916

React Under The Hood

This file contains notes summarizing the article "React as a UI runtime" by Dan Abramov.

Central concepts

• React renders a tree of nodes. The kind of tree depends on the host environment
• Kinds of trees: web/DOM nodes, iOS/iOS hierarchy

Reconciliation

krfong916

Testing

This document contains notes, insight, and heuristics for the function of tests in engineering and the domain of software. I'm continually editing this document, so information will be out of place, unorganized.

The role of test can be described in many ways, here are a few that I find important:

• Tests should give a deeper understanding of the code's design
• Tests should be behavior-driven, and not implementation-driven

What Do We Gain?