Tips & Tricks

Tips, tricks, and resources #

Modern JS has many inbuilt features, not all of them are so well known. Check them out, from the stateOfJS22

Good resource & book on how to design modern web apps: https://www.patterns.dev/

  • Variable hoisting was an unintended addition that came along with function hoisting when JS was being developed. Hoisting is done by the two-scan interpreter. The first scan is to find declarations. This stackoverflow q&a has some good answers.
  • There’s no concept of “initialization” in JS. There is declaration (let a) and there is assignment (a = 2). “Definition” is just syntax sugar to do both declaration and assignment at once.
  • typeof null evaluates to 'object' in JS. Which is a bug apparently.
  • While writing the CSS for a site, it’s a good idea to write it mobile first and then add media queries for the larger screen sizes. It leads to less CSS. Even if the design was desktop based.
  • JS has so many inbuilt things. Proxy is one of them.
  • Want to know if you’ve covered all best-practices and stuff for your web app? There’s a nice checklist
  • A book about building web apps by Basecamp. It’s good apparently. PDF also available.
  • Confused about what units to use in CSS? Check out this video by Kevin Powell
    • Use rem (i.e., root el) for fonts and most other things. It’s relative to the font-size of <html> (which is 16px by default)
    • em is relative to the font-size of the element it is on or the closest parent which has defined a font size. When it’s used for some other property, it only references this element’s font-size. It can be useful for padding and margins.
    • Use percentages for width (prefer to use max-width) or ch (equal to width of a char) when operating on a text container
    • Think twice before setting height. Try to set min-height if it is really needed.
  • Try to keep text confined to 60 chars a row.
  • There’s an open source design tool: Penpot which focuses on web standards
  • The word “JavaScript” is trademarked by Oracle ( https://tinyclouds.org/trademark) as of Sept. 2022
  • An easy way to locally deploy the built application is to run: python -m http.server --bind localhost 8080 which serves the current directory at http://localhost:8080
  • There’s a slight imperfection in the microsoft logo on black backgrounds where the red box seems to appear larger than the blue box below it. This is due to the way pixels are arranged in a display. See it in more detail here
  • Want to see what are the new features in es6 and how many of them could be done in previous versions? This website lets you do that.
  • Reference for JavaScript and some practice exercises : https://wesbos.com/javascript
  • Browsers now have better client side functioning capabilities. Such as a proper DB, virtualfile system, and even running full programs