This media is not supported in your browser
VIEW IN TELEGRAM
📄Modern Component-Oriented Responsive Design with
#css #container
The modern CSS specification offers container queries via the @container at-rule for this requirement.
Look at the following sample:
@container#css #container
The modern CSS specification offers container queries via the @container at-rule for this requirement.
Look at the following sample:
<div class="alert">
<h3>Lorem ipsum dolor sit amet</h3>
<button>Lorem ipsum</button>
<button>Lorem ipsum</button>
</div>
.alert {
background-color: #ddd;
padding: 12px;
resize: horizontal;
overflow: hidden;
container-type: inline-size;
}
.alert h3 {
padding: 0 0 6px 0;
margin: 0 0 12px 0;
border-bottom: solid 2px #eb7e3b;
}
.alert button {
padding: 12px;
border: none;
margin-right: 6px;
}
@container (width < 400px) {
.alert button {
width: 100%;
box-sizing: border-box;
}
.alert button:not(:last-child) {
margin-bottom: 10px;
}
}👍2
📄 Handling CSS Precedence with
#css #layer
@layer#css #layer
In web design scenarios, developers typically use multiple CSS selectors and often have to override styles. Even though you don’t override CSS styles with multiple selectors by yourself, every CSS block you write automatically overrides styles from the user-agent stylesheet. CSS’s style overriding process happens based on the browser’s specificity algorithm that calculates a weight for CSS selectors for handling precedence. In the past, every developer tweaked their CSS overriding-related code based on the specificity algorithm since they didn’t have a way to handle CSS precedence without using confusing !important.
👍1
📄 Angular, Docker & Nginx: Build once, Deploy anywhere
#angular #nginx #docker
✅ Article link🎁 Code link
#angular #nginx #docker
In software development is quite common to have multiple environments, each with different configurations. Angular offers a built-in system for managing environment variables, allowing for the replacement of files during build time. However, this approach often requires creating separate builds for each environment, which can be time-consuming but to avoid this we have a pretty common pattern in the industry.
Build once, deploy anywhere…
So, let’s have an example where we have two environments, DEV and PROD, and for that, we want to have ONE build. For that, we use:
Angular — a front-end framework for building SPA applications.
Nginx — is a web server and reverse proxy server.
Docker — is a platform for developing, shipping, and running applications in containers, which are lightweight, portable, and self-sufficient environments.
✅ Article link
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🤓 13 HTML Attributes You Should Know
#html #attributes
✅ Article link
#html #attributes
...In HTML, attributes are used to provide additional information about HTML elements...
✅ Article link
🫠 Circular References in JavaScript
#js #info #BestPractics
Why Circular References Matters:
1. Memory Management:
— Circular references can prevent objects from being garbage collected by JavaScript’s memory management system.
— This can lead to memory leaks, where memory is consumed unnecessarily, potentially causing your application to slow down or crash.
2. Behavioral Issues:
— Circular references can cause unexpected behavior in your code, making it challenging to predict how your program will behave.
3. Debugging Difficulty:
— Identifying and debugging issues related to circular references can be complex, especially in large codebases.
✅ Article link
#js #info #BestPractics
...A circular reference, also known as a circular dependency, occurs when two or more objects reference each other in a way that creates an endless loop...
Why Circular References Matters:
1. Memory Management:
— Circular references can prevent objects from being garbage collected by JavaScript’s memory management system.
— This can lead to memory leaks, where memory is consumed unnecessarily, potentially causing your application to slow down or crash.
2. Behavioral Issues:
— Circular references can cause unexpected behavior in your code, making it challenging to predict how your program will behave.
3. Debugging Difficulty:
— Identifying and debugging issues related to circular references can be complex, especially in large codebases.
✅ Article link
👍1
📄 How to Set Up SonarQube with Angular
#angular #sonarqube
🔗 SonarQube link ✅ Article link
#angular #sonarqube
SonarQube is a powerful open-source platform that allows developers to assess and enhance the quality of their code. By providing insights into code issues, maintainability, and adherence to coding standards, SonarQube helps maintain code integrity and improve overall software quality. In this article, we will guide you through the process of setting up SonarQube for your Angular application, ensuring that you can continuously monitor and enhance your codebase.
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍1