DOCSEARCHbyAlgolia
Submit Docs

A-Nomad Frontend Documentation

website·Indexed 31 days ago

https://frontend.a-nomad.com/

A comprehensive guide to frontend development covering JavaScript fundamentals, ECMAScript specifications, Web APIs, and DOM manipulation. Includes detailed sections on CSS3 properties, mobile Web development with Flex layout and responsive design, and Node.js basics including the V8 engine and module scope.

Tokens
16K
Snippets
83
Records
113
Agent score
52%

What's inside A-Nomad Frontend

  1. Manage page URLs and navigation with the location object

    The location object provides information about the current URL and methods to navigate the browser.
    Property/MethodDescription
    hrefGets the full URL; assigning a value triggers a page redirect
    originGets the domain part (including protocol and port)
    searchGets the query string (the part after ?)
    hashGets the anchor/hash value (the part after #)
    reload()Refreshes the current page; passing true forces a reload

  2. Understand the scope of Big Front-end (大前端) development

    Big Front-end (大前端) refers to the application and expansion of front-end technologies across multiple domains, including Web, mobile, desktop, and cloud environments. It encompasses the entire lifecycle of user-facing development, from interface design and interaction development to data processing, performance optimization, engineering, and architectural design.

  3. Understand JavaScript language composition

    JavaScript consists of the ECMAScript specification (the standard defining the language) and Web APIs. Web APIs provide the functionality to interact with the browser, such as DOM manipulation for HTML document structures and browser-level operations like alerts and window width detection.

  4. Detect browser and device info using the navigator object

    The navigator object contains information about the browser and the user's environment, such as the userAgent string, which can be used to detect the operating system or browser type.
    !(function () {
    const userAgent = navigator.userAgent 
    // Verify if Android or iPhone 
    const android = userAgent.match(/(Android);?[\\s\\/]+([\\d.]+)?/)
    const iphone = userAgent.match(/(iPhone\\sOS)\\s([\\d_]+)/)

    // Redirect to mobile site if Android or iPhone
    if (android || iphone) {
      location.href = 'https://a-nomad.com'
    }
})()

  5. Understand the JavaScript Event Loop and Asynchronous Execution

    JavaScript is single-threaded but achieves multi-threading effects via the browser's event loop. Synchronous tasks in the execution stack are processed first. Asynchronous tasks (such as UI events like click, resource loading like load, and timers like setTimeout) are added to a task queue (message queue). Once the execution stack is empty, the system moves tasks from the queue to the stack for execution.
    // Due to the event loop, this outputs: 1 3 2
console.log(1);
setTimeout(function() {
  console.log(2);
}, 0);
console.log(3);

  6. Choose between let, var, and const for variable declaration

    Modern JavaScript recommends using let for variables and const for constants. let and const provide block-level scoping and prevent issues associated with var, such as variable hoisting (where variables are used before declaration) and accidental redeclaration. In ES6+, variables must be declared before use; only function declarations are hoisted.

  7. Follow CSS property writing order for better performance

    To improve maintainability and browser rendering efficiency, it is recommended to write CSS properties in the following order:

    1. Layout Control: display, position, float, clear, visibility, overflow.
    2. Box Model & Background: margin, border, padding, width, height, background.
    3. Text Styling: color, font, text-decoration, text-align, line-height.
    4. Decorative Attributes: cursor, border-radius, text-shadow, box-shadow.

  8. Implement 3D spatial translation and perspective

    To move elements along the Z-axis (depth), use transform: translate3d(x, y, z) or transform: translateZ(value). Because Z-axis movement is not visible by default, you must apply the perspective property to the element's parent to create a 'near-large, far-small' visual effect. A perspective value between 800px and 1200px is recommended for a realistic human-eye experience.
    body {
    perspective: 1000px;
}
div:hover {
    transform: translate3d(25px, 50px, 75px);
}

  9. Define CSS animations using @keyframes

    Complex animations requiring more than two states, specific timing, or repetition are created using the @keyframes rule. You can define animations using from and to for simple start/end states, or percentage markers (0%, 30%, 100%) for multi-stage animations.
    /* Simple start/end animation */
@keyframes myAnimation {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Multi-stage animation */
@keyframes complexAnimation {
  0% { transform: scale(1); }
  30% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

  10. Clear floating elements to prevent parent collapse

    Floating elements are removed from the normal document flow (脱标), meaning they do not occupy space in the parent container. If the parent has no fixed height, it will collapse, causing subsequent elements to be covered or misaligned.

    Common Clearing Methods:

    1. Fixed Height: Set a specific height on the parent (not suitable for dynamic content).
    2. Extra Tag: Add a block element with clear: both at the end of the parent content.
    3. Single Pseudo-element: Use ::after to avoid adding HTML tags.
    4. Double Pseudo-element: Use both ::before and ::after to prevent margin collapsing while clearing floats.
    5. Overflow: Set overflow: hidden on the parent.
    /* Double Pseudo-element Clearfix */
.clearfix::before, 
.clearfix::after {
  content: '';
  display: table;
}
.clearfix::after {
  clear: both;
  height: 0;
  visibility: hidden;
}

  11. Interact with HTML form elements

    Form elements can be controlled by modifying their specific properties such as value, name, disabled, checked (for checkboxes/radios), and selected (for options).
    const txt = document.querySelector('.txt');
txt.value = 'this is a text box';
txt.name = 'txt';

const ck = document.querySelector('.ck');
ck.disabled = false;
ck.checked = true;

const opt = document.querySelector('.activeOption');
opt.selected = false;

  12. Implement shared methods using Prototype objects

    To avoid memory overhead of creating the same function for every instance, methods can be added to a constructor's prototype object. All instances of that constructor share the same prototype methods. If the prototype is overwritten with a new object, the constructor property must be manually restored to point back to the original constructor function.
    // Extending a built-in prototype
Array.prototype.sum = function() {
  return this.reduce((prev, current) => prev + current, 0);
};
[1, 2, 3].sum(); // 6

// Custom constructor with prototype methods
function Person(name, age) {
    this.name = name;
    this.age = age;
}
Person.prototype = {
    constructor: Person,
    sing: function() { console.log(`${this.name} is singing`) },
    dance: function() { console.log(`${this.name} is dancing`) }
};