Stuff I Have Learnt

User Perception Of Performance Delays 0 to 16ms Users are exceptionally good at tracking motion, and they dislike it when animations aren’t smooth. They perceive animations as smooth so long as 60 new frames are rendered every second. That’s 16ms per frame, including the time it takes for the browser to paint the new frame … Continue reading RAIL performance model for web apps

CDN vs Local file: You would need to bundle files before deploying anyway (using webpack, eg). The difference is the dependencies and security (depending on your server security). (eg: npm uses digital signatures to verify identity for security). Gulp or Webpack to package files Recently, there’s support for node modules so you don’t have to … Continue reading JumpStart – Essential Concepts

DOM (Document Object Model) is an in-memory representation of HTML documents. It represents the webpage as a JS object so that JS programs can modify it. These are some of the APIs for DOM manipulation: Document querySelector querySelectorForAll Node parentNode childNodes Element className classList innerHTML setAttribute HTML DOM methods are actions you can perform (on HTML Elements). … Continue reading DOM Manipulation with JS

(currently at: http://javascript.info/function-expressions-arrows)   You don’t need to define script type in the html <script> tags anymore. ‘+’ concatenates if at least one variable is a string whereas other mathematical operations convert variables to numbers. PHP treats “0” as false, whereas Boolean(“0″) or (” “) in JS is true. ** is the exponentiation operator (2**3 … Continue reading javascript.info (part 1)

Why Javascript Currently, we have learned how to use Python for the back-end, using Flask microframework to get the app up and running. (We can also use Node.js for the back-end code, but that’s something we’ll learn later.) It is useful to differentiate code that is run by the client (front-end) and the server (back-end). … Continue reading CS50W Lecture 5 – Client vs Server, why JS?

Databases Databases are used by web apps to store, use and manipulate data (see: CRUD). Relational databases are particularly useful. Database relationships are the logical connections between tables, based on the interactions between tables. SQL (Structured  Query Language) is commonly used language to interact with relational databases. We are using PostgreSQL in CS50W, but there … Continue reading CS50W Lecture 3 – SQL

FLASK notes here How to create a simple flask app: install flask saved as application.py export Flask_APP=application.py from flask import Flask, render_template, request import datetime app = Flask(__name__) # HELLO @app.route(“/”) # represents what happens when default route def index(): headline = “Hello, world!” return render_template(“index.html”, headline=headline) # index.html located in templates folder, # in … Continue reading CS50W – Lecture 2 (Flask, Jinja)

Notes from here   Git Branch $git branch -> to show branches $git branch feature -> to create feature branch $git checkout feature -> switch branch to feature git checkout master -> switch back to master $git merge feature -> merge with feature branch if pushing to github: $git push –set-upstream origin feature   Remotes … Continue reading CS50W – Lecture 1 (GIT branches, Bootstrap)

Preprocessing Enable Live Sass Compiler extension on Visual Studio Code Click on “Watch Sass” icon Variables Use the $ sign to indicate a variable, and then use it afterward. Storing variables to reuse helps with consistency and branding. $font-stack: Helvetica, sans-serif; $primary-color: #333; body { font: 100% $font-stack; color: $primary-color; } Nesting Nest CSS the … Continue reading SCSS Basics

Personal Repo Notes Notes from here Git can keep track of changes made to code, synchronize code between different people, test changes to code without losing the original, and revert back to old versions of code. GitHub is a website that stores Git repositories on the internet to facilitate the collaboration that Git allows for. … Continue reading CS50W – Basic GIT