Angular 🇺🇦 - practical notes

📄 Passing CSS variables to Angular child + :has

#angular #css #has

✅ Article link: https://medium.com/@bebrasmell/passing-css-variables-to-angular-child-7465646166eb

509 views06:59

📄 Understanding MIME Type Validators with Angular

#angular #fileReader

❗️What are MIME Type Validators?

MIME (Multipurpose Internet Mail Extensions) types are used to identify the type of content delivered in a file. MIME type validators, in the context of Angular, are functions or classes that verify whether a file’s MIME type matches the expected type.

❗️Purpose of MIME Type Validation

The primary purpose of MIME type validation is to verify that the content of a file aligns with the expected format. This is especially crucial when dealing with sensitive file types, such as images, where incorrect MIME types could lead to rendering issues or security vulnerabilities.

✅ Article link: https://enlear.academy/understanding-mime-type-validators-with-angular-3ff9bc2af559

607 views07:00

Angular 🇺🇦 - practical notes

🤓 Simplify Complexity with the Facade Design Pattern in TypeScript

#ts #patterns

Life is full of complexities. Even when we go about our everyday routines, we often interact with systems that are intricate behind the scenes but seem simple on the surface. Imagine driving a car. We don’t need to understand the nuances of its internal combustion engine or the intricacies of its transmission system. We just turn the key, press the gas pedal, and off we go!

The same principle applies in the realm of software development, where we often encounter systems with daunting complexity. That’s where the Facade Design Pattern comes in handy. It provides a simplified, easy-to-use interface over a more complex underlying system, just like the controls in our car!

✅ Article link

🎁

Code Link

Please open Telegram to view this post

VIEW IN TELEGRAM

Please open Telegram to view this post

VIEW IN TELEGRAM

👍1

390 views06:59

Angular 🇺🇦 - practical notes

This media is not supported in your browser

VIEW IN TELEGRAM

📄 Defining Animation Keyframes with @keyframes

#css #keyframes

The modern CSS standard offers two solutions for creating smooth animations for DOM elements:

1. Switching CSS property values smoothly based on user interactions with the transition property.
2. Implementing keyframes-based advanced animations using the animation property.

The second approach requires defining keyframes, so the @keyframes at-rule. Look at the following example:

<div class="board">CSS</div>

@keyframes board-anim {
  0%, 85%, 100% {
    filter: blur(0px);
  }
  90% {
    filter: blur(5px) contrast(200%);
  }
}

.board {
  padding: 12px 50px;
  font-size: 24px;
  font-weight: bold;
  background-color: #ff9d00;
  color: #222;
  display: inline-block;
  animation: board-anim 3s infinite linear;
}

394 views07:59

Angular 🇺🇦 - practical notes

This media is not supported in your browser

VIEW IN TELEGRAM

📄 Modifying Printed Page Layouts with @page

#css #page

Sometimes, users need to print web pages on physical papers for offline use. Also, some users print web pages as PDF documents to save for future use. Some web apps offer server-based features to generate paper-friendly PDF documents, but you can also print any web page using the browser’s native printing feature.

The `page` CSS at-rule offers a way to customize page dimensions, orientation, and margins of printed pages without affecting the visible browser viewport. For example, the following CSS snippet sets a 1-inch margin and A4 landscape size for printed pages:

@page {
  size: A4 landscape;
  margin: 1in;
}

This at-rule comes with `:first`, `:blank`, `:left`, and `:right` pseudo-classes to select specific pages of the printed document. Browse the official MDN documentation to learn more details about `page`.

👍2

403 views06:59

Angular 🇺🇦 - practical notes

📄 Defining Custom List Styles with @counter-style

#css #counterStyle

We often use ordered and unordered lists in HTML documents. For customizing them, standard browsers offer various inbuilt list marker types via the list-style-type CSS property. You can extend these list styles or implement custom styles from scratch with the @counter-style at-rule.

Look at the following CSS code snippet:

@counter-style emojis {
  system: cyclic;
  symbols: 🔴 🟠 🟢;
  suffix: ' ';
}

ul li {
  list-style-type: emojis;
}

Moreover, it’s possible to customize existing inbuilt list styles with this at-rule:

 @counter-style decimal-mod {
  system: extends decimal;
  prefix: '( ';
  suffix: ' ): ';
  pad: 2 '0';
}


ol li {
  list-style-type: decimal-mod;
  margin-bottom: 2px;
}

ol li::marker {
  color: #780794;
}

The above CSS definition extends the default decimal list style by adding a prefix, suffix, and zero-padding.

466 views08:01

Angular 🇺🇦 - practical notes

🤓 JavaScript Best Practice

#js

✅ Article link

465 views08:26

Angular 🇺🇦 - practical notes

This media is not supported in your browser

VIEW IN TELEGRAM

📄 Adding Initial DOM Rendering Transitions with @starting-style

#css #startingStyle

When a DOM element gets rendered from an HTML document or JavaScript code snippet, it gets rendered without any initial transition animation. In the past, we typically implemented these initial animations with dynamically switched CSS classes via JavaScript. Nowadays, we can use CSS animations for these situations, but the initial animation concept undoubtedly belongs to the CSS transitions feature. The `starting-style` at-rule lets you set initial styles for a CSS selector, so you can build up a transition animation for the initial rendering step:

button {
  padding: 12px;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  background-color: #bbb;
  opacity: 1;
  transform: scale(1);
  transition: all 1s linear;
  
  @starting-style {
    opacity: 0;
    transform: scale(0.5);
  }
}

The above code snippet plays a transition animation when a button element gets rendered on the viewport. This transition works even though you dynamically create a new element with JavaScript.

👍2

466 views07:59