Trditional layers are: frontent, backend.

Frontend

This layers pertains to how the external world interacts with your software.

Frontend notions

• https://web.dev/user-centric-performance-metrics
• core web vitals - https://web.dev/vitals/#stable: LCP, FID, CLS
  • 
• metrics
  • FCP - First Content Paint - https://web.dev/fcp
  • LCP - Largest Content Paint - https://web.dev/lcp
  • FID - First Input Delay - https://web.dev/fid
  • INP - Interaction To Next Paint - https://web.dev/inp
    • replaces FID in 2024 - First Input Delay - https://web.dev/fid
  • TTI - Time To Interactive - https://web.dev/tti
  • TBT - Total Blocking Time - https://web.dev/tbt
  • CLS - Cumulative Layout Shift
  • TTFB - Time to First Byte
• Notions
  • FOUT - flash of unstyled text - https://web.dev/codelab-preload-web-fonts/

Frontend types

There are several types of frontend applications that depend on how they are consumed: from mobile devices, desktop and laptop computers, other applications:

• Mobile
  • ios - the iphone and ipad os
  • android - the other smartphones
  • windows mobile - in 2018 discontinued
• Mobile Hybrid - web applications written to be consumed from mobile devices. Usually they need to be responsive.
• Web
  • OnePage Application
  • Page Based Application - traditional http approach
  • Component Based Application - usually the server side manages the users' session.
  • Web Rich Applications - usually run in desktop systems not mobiles
    • FlashApps - in 2016-2018 discontinued
    • Silverlight - Microsoft specific, with compatibility problems
    • Applets - old java technology. installs browsers plugins. due to slow updates perceived as a security threat.
    • JavaWebStrat - newer java technology. capture browser links.
• Desktop - Application
  • RCP - Rich Client Application
• Hybrid - Frontend created for both mobile&web or other combinations.
• API - How you connect the frontend to the backend layers

Frontend Technologies

• Web
  • phases
    1. strategy
       • brand strategy
       • design strategy
    2. prototype
       • Wireframing tools: Balsamiq, Moqups, Powermockup, Inkscape, and Google Slides.
       • Site architecture tools: freemind, Coggle and MindNode.
       • site copy
       • clickable prototype
    3. design
       • design - These apps will help you work out aesthetics, colors, typography, spacing, and graphics before writing any code. The UI of Bootstrap should not influence your design.
         • Photoshop, Adobe XD, or Sketch.
       • clickable design of homepage
       • development site
    4. delivery
       • final signoff
       • analytics report
  • low level quircks - the browsers have different ways of handling html, css and javascript. Is hard to take into consideration all these aspects when you write cross browser code (and you should want that). Normally you shouldn't care about these details and the good browser agnostic libraries will help. Here is a list of quircks that must be addressed.
    • reboot - used by bootstrap - https://getbootstrap.com/docs/4.0/content/reboot/
    • normalize - A modern alternative to CSS resets - makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.
      • http://necolas.github.io/normalize.css/
      • https://github.com/necolas/normalize.css
    • list of quircks
      • solved by css3 flexbox - https://philipwalton.github.io/solved-by-flexbox/
      • downloading responsive images - https://timkadlec.com/2012/04/media-query-asset-downloading-results/
  • low level - implemented by browsers and used by your apps
    • html5
    • css: css1, css2, css3, Level1-Level4
      • https://www.w3.org/Style/CSS/current-work
      • flexbox
        • https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
        • https://bootstrapcreative.com/resources/flexbox-cheat-sheet/
    • javascript
  • good browser agnostic libraries
    • jquery - manages browser quircks smoothly
    • bootstrap - manages css implementation of high level design concepts: navigation bars, menus, layouts, grids, panels, semantic conent
      • bootstrap4
        • quick presentation - https://bootstrapcreative.com/wp-bc/wp-content/uploads/2017/01/Sample-Bootstrap-4-Quick-Start.pdf?e1a0e3&e1a0e3
        • https://bootstrapcreative.com/resources/bootstrap-4-css-classes-index/
      • bootstrap3
        • layout system - http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-grid-works
  • higher level
    • angular.js
    • react.js

Problems

Images Width and Height

• About why we put width and height on an img that might contradict the "responsivness" . I talked with chatgpt4 here - https://chat.openai.com/share/30675f6d-fa87-4b4c-a05e-e278e16badd1
• The short answer is that if the browser knows the aspect ratio of image without waiting till it downloads it then will be able to do layout computations faster and will not need to re-layout later.
• ChatGPT says that the actual values do not matter so instead of 600x400 you could also give 3px and 2px . Else I doubt this since sometimes in css you could have enough space to let the image use the original space.

References

Backend