DEFINITIONS - rs-hash/Senior GitHub Wiki
-
Apache FreeMarker™ is a template engine: a Java library to generate text output (HTML web pages, e-mails, configuration files, source code, etc.) based on templates and changing data.
-
Templates are written in the FreeMarker Template Language (FTL), which is a simple, specialized language (not a full-blown programming language like PHP). Usually, a general-purpose programming language (like Java) is used to prepare the data (issue database queries, do business calculations).
-
Then, Apache FreeMarker displays that prepared data using templates. In the template you are focusing on how to present the data, and outside the template you are focusing on what data to present.
-
This approach is often referred to as the MVC (Model View Controller) pattern, and is particularly popular for dynamic web pages.
-
It helps in separating web page designers (HTML authors) from developers (Java programmers usually). Designers won't face complicated logic in templates, and can change the appearance of a page without programmers having to change or recompile code.
-
A few highlights of FreeMarker:
-
Powerful template language: Conditional blocks, iterations, assignments, string and arithmetic operations and formatting, macros and functions, including other templates, escaping by default (optional), and many more
-
Multipurpose and lightweight: Zero dependencies, any output format, can load templates from any place (pluggable), many configuration options
- Web Components is an umbrella term that includes several web platform APIs aimed at enabling the creation of reusable and encapsulated HTML elements. The main technologies that constitute Web Components are:
- API for defining new HTML elements.
- Define new HTML tags and their behavior. You can create custom HTML elements with their own properties and methods.
class MyElement extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
}
connectedCallback() {
this.shadowRoot.innerHTML = `<p>Hello, Web Component!</p>`;
}
}
customElements.define('my-element', MyElement);
- API for encapsulating a part of the DOM and styles.
- Provides encapsulation for the HTML, CSS, and JavaScript of a web component. This ensures that styles and scripts are scoped to the component and do not affect the rest of the document.
class MyElement extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `<style>p { color: red; }</style><p>Shadow DOM content</p>`;
}
}
customElements.define('my-element', MyElement);
-
<template>and<slot>elements for defining and reusing HTML fragments. - Allow you to define HTML structures that are not rendered when the page loads but can be instantiated later.
<template id="my-template">
<style>
p { color: blue; }
</style>
<p>Template content</p>
</template>
<script>
const template = document.getElementById('my-template').content;
document.body.appendChild(document.importNode(template, true));
</script>- Bloomreach CMS, formerly known as Hippo CMS, is a Java-based open-source content management system.
- It is designed for enterprises to create, manage, and optimize digital experiences.
- Bloomreach CMS is part of the Bloomreach Experience Manager suite, which also includes digital marketing and personalization tools.
Key Features of Bloomreach CMS:
- Personalization: Tools to personalize content based on user behavior.
- Multichannel Support: Deliver content across web, mobile, and other channels.
- Content as a Service (CaaS): API-driven approach for delivering content to different front-ends.
- Scalability: Designed to handle large-scale content and high traffic.
- Integration: Integrates with various third-party systems and tools.
- Security: Advanced security features to protect content and user data
A Headless CMS is a content management system that provides a backend for managing content but does not provide a frontend for displaying content. Instead, it delivers content via APIs to any frontend, such as websites, mobile apps, or other digital platforms.
Direct Rendering: Bloomreach CMS can also directly render content using server-side rendering (SSR) with templating technologies like FreeMarker. This approach is useful for delivering content-heavy pages with server-side benefits.
- Knockout.js is a JavaScript library that enables developers to create rich, responsive user interfaces with a clean underlying data model.
- It uses the Model-View-ViewModel (MVVM) design pattern, which helps separate the UI (View) from the logic and data (ViewModel and Model).
- Declarative Bindings: Bind HTML elements to JavaScript data models. When the data changes, the UI automatically updates.
- Automatic UI Refresh: When the underlying data model changes, the UI is automatically updated to reflect the new state.
- Dependency Tracking: Observables and computed observables track dependencies, ensuring the UI is always in sync with the data model.
- Templating: Support for creating dynamic and reusable templates.
- Two-Way Data Binding: Simplifies keeping the UI in sync with the data model.
<!DOCTYPE html>
<html>
<head>
<title>Knockout.js Example</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/knockout.js"></script>
</head>
<body>
<h2>Simple Knockout.js Example</h2>
<div>
<label for="name">Name:</label>
<input type="text" id="name" data-bind="value: name, valueUpdate: 'input'" />
</div>
<div>
<p>Hello, <span data-bind="text: name"></span>!</p>
</div>
<script>
function AppViewModel() {
this.name = ko.observable('World');
}
ko.applyBindings(new AppViewModel());
</script>
</body>
</html>
Core Web Vitals are a set of metrics defined by Google to measure user experience on the web. They focus on three main aspects: loading performance, interactivity, and visual stability. The key metrics within Core Web Vitals are CLS, LCP, and FID. Additionally, INP is another emerging metric. Let's define these terms and related concepts.
- Definition: Measures the visual stability of a page. It quantifies how much the page layout shifts unexpectedly during the entire lifespan of the page.
- Importance: Ensures that elements on the page do not move around unexpectedly, which can lead to a poor user experience.
- Good Score: A CLS score of less than 0.1 is considered good
- Definition: An experimental metric that aims to provide a more comprehensive measurement of a page’s responsiveness to user interactions. It evaluates the latency of interactions during the entire page lifecycle.
- Importance: Aims to measure how quickly a page responds to all user interactions, not just the first one.
- Good Score: An INP of 200 milliseconds or less is considered good.
- Interaction to Next Paint (INP) is a stable Core Web Vital metric that assesses page responsiveness using data from the Event Timing API.
- INP observes the latency of all click, tap, and keyboard interactions with a page throughout its lifespan, and reports the longest duration, ignoring outliers.
- A low INP means the page is consistently able to respond quickly to the vast majority of user interactions.
- Definition: Measures loading performance. It reports the render time of the largest image or text block visible within the viewport.
- Importance: Reflects the point in the page load timeline when the main content of the page is likely loaded and visible to the user.
- Good Score: An LCP of 2.5 seconds or less is considered good.
- LCP reports the render time of the largest image or text block visible in the viewport, relative to when the user first navigated to the page.
- Largest Contentful Paint (LCP) is a stable Core Web Vital metric for measuring perceived load speed.
- It marks the point in the page load timeline when the page's main content has likely loaded.
- A fast LCP helps reassure the user that the page is useful.
- Definition: Measures interactivity. It quantifies the time from when a user first interacts with a page (clicks a link, taps a button, etc.) to the time when the browser can respond to that interaction.
- Importance: Reflects the responsiveness of a page and its ability to quickly respond to user interactions.
- Good Score: An FID of 100 milliseconds or less is considered good.
- FID measures the time from when a user first interacts with a page (that is, when they click a link, tap on a button, or use a custom, JavaScript-powered control) to the time when the browser is actually able to begin processing event handlers in response to that interaction.
- CLS | ≤ 0.1
- LCP | ≤ 2.5 seconds
- FID | ≤ 100 ms
- INP | ≤ 200 ms
- Definition: A type of security vulnerability typically found in web applications. XSS allows attackers to inject malicious scripts into content from otherwise trusted websites.
- These scripts can then be executed in the user's browser, leading to data theft, session hijacking, or other malicious activities. Types:
- Stored XSS: The malicious script is permanently stored on the target server, such as in a database, message forum, or comment field.
- Reflected XSS: The malicious script is reflected off a web server, such as in an error message, search result, or any other response that includes some or all of the input sent to the server.
- DOM-based XSS: The vulnerability exists in client-side code rather than server-side code. It occurs when the web application writes data to the DOM without proper validation or sanitization.
- Definition: A security standard introduced to prevent various types of attacks, including XSS and data injection attacks.
- CSP allows web developers to control the resources that can be loaded and executed in the browser, thereby mitigating the risk of malicious content.
- Implementation: CSP is implemented using the Content-Security-Policy HTTP header or a tag within HTML.
- The policy can specify allowed sources for scripts, styles, images, and other resources.
Content-Security-Policy: script-src 'self' https://trusted.cdn.com; object-src 'none';
- Definition: A type of attack that tricks the victim into submitting a malicious request. It exploits the trust that a web application has in the user’s browser, making unauthorized actions appear legitimate.
- Prevention:
- Use anti-CSRF tokens.
- Validate the HTTP Referer header.
- Implement SameSite cookie attributes.
- Definition: A security measure implemented in browsers to prevent scripts on one origin (domain) from interacting with resources from another origin. This helps to protect against certain types of cross-site attacks.
- Implication: SOP restricts how a document or script loaded from one origin can interact with resources from another origin.