• Frontend
  • HyperText Markup Language (HTML)
  • Cascading Style Sheets (CSS)
    • Sass
      • Variable
      • Nesting
      • Mixin
      • Inheritance
  • Bootstrap
    • Bootstrap installation
    • Bootstrap CSS
  • Response time optimization
• Backend
  • API gateway
    • Session
      • Session vs cookie
  • Message queue
    • Failure handling
  • Business analytics
• References

Frontend

HyperText Markup Language (HTML)

We use kebab-case for HTML file names because Linux is case-sensitive and URLs use hyphens as the delimiter.

Servers often look for a file named index.html as the default starting page for any folder.

We use kebab-case for HTML tag attribute values to be consistent with CSS property naming.

Cascading Style Sheets (CSS)

CSS properties often use hyphens, but the input tag name attribute value is often written in snake_case because of compatibility with backend relational databases.

Sass

Sass is a CSS extension language that makes CSS property management easier.

Variable

A variable is meant to store a CSS property value that will be reused like color or font stack. A variable can be declared using the $ symbol. When a Sass file is being processed, its variables are substituted with their values to output a normal CSS.

Nesting

Nesting CSS selectors lets us mimic the hierarchy of a HyperText Markup Language (HTML) Document Object Model (DOM) tree. Note that overly-nested rules often introduce over-qualified CSS and are hard to debug so be cautious when using nesting.

Mixin

A mixin defines the template of a set of CSS declarations. We can pass in values to a mixin to make it even more flexible.

Inheritance

Inheritance lets us share a fixed set of CSS properties, so it's less flexible compared with mixins. A class that holds the CSS properties is called the placeholder class. A CSS selector can include the placeholder class's CSS properties by inheriting/extending it. A placeholder class only prints when it is inherited/extended.

Bootstrap

Bootstrap is a powerful, feature-packed frontend toolkit that includes pre-built CSS styles and JavaScript components. We can build prototypes and production-grade frontend in minutes.

Bootstrap installation

Import Bootstrap's CSS and JavaScript assets into our HTML file.

Bootstrap CSS

Bootstrap organizes components through 3 layers:

1. Container (top-layer)
   • Add container class.
2. Row
   • Add row class.
   • Use Flexbox.
   • Each row has 12 column spaces available for allocation.
3. Column
   • Add col class.
   • Use col-6 to let a column takes 6 out of the 12 available column spaces.
   • Use col or col-auto to make a column figure out its width.
   • Use col-xl-2 col-lg-4 col-5 to set multiple break points. The column will take 2 column spaces when display width reaches XL, 4 column spaces when reaches LG, and 5 column spaces otherwise.
   • Use offset-7 to make the column shift 7 column spaces to the right from the previous column.

By just adding the pre-built container class to a div tag, Bootstrap automatically scales the content font size, padding, and margin in responding to display size changes.

Response time optimization

• Code pruning
  • Optimize the code bundle by removing dead code that will never get executed.
• Code splitting
  • Split the bundle into multiple smaller bundles for efficient loading.
• Dynamic code imports
  • Load bundles dynamically based on the user action to optimize the initial loading time.
• Compression
  • Compress files and minimize data size before transmission to reduce network load.
• Priority-based loading
  • Prioritize essential contents that are visible above the fold for a better user experience.
• Pre-fetching
  • Proactively fetch and cache resources that are likely to be needed soon.

Backend

API gateway

• Security
  • Authentication and authorization
  • TLS
  • Rate limiting
• Transforming
• Routing
• Caching
• Metric monitoring
• Alerting
• Logging

Session

A session is a data structure stored in database for the server to identify a user across multiple pages of the server website. Here is the flow.

1. A user sends a request to a website server.
2. The server creates a unique long string of random characters called a session ID.
3. The server stores the session ID as well as other user information like the user ID in its database.
4. The server replies to the user with the session ID added to the cookie.
5. Every time the user accesses other pages of the website or refresh the same page, the user browser sends the request as well as the cookie, which has the session ID, to the server.
6. The server looks up the session ID in its database to identify the user and replies back with the user data.

Session vs cookie

\	Session	Cookie
Storage location	Server database	Client browser
Security	No user access	User can create, read, update, or delete
Capacity	Limited by server database	Limited to about 4 KB text

Message queue

Failure handling

1. Use a dead letter queue to store messages that failed during transmission.
2. Configure the message queue's retry setting.
3. Increase message storage time as a redundancy measure.

Business analytics

• HDFS storage
• Impala HDFS query
• Hive data management and HiveQL query
• Spark batch processing
• Oozie job orchestration
• YARN resource management

References

←Previous Next→