Author: Andreas Plahn

Angular profiler for performance tuning | Angular Newsletter

When facing a performance issue, the Profiler is perfect for identifying the problem’s root cause. For instance, it could highlight that one component is much slower than the others and gets refreshed for no good reason, indicating that a different change detection strategy is needed.

Source: Angular profiler for performance tuning | Angular Newsletter

Angular automated migration from ngIf and ngFor directives markup to control blocks

Directives such as *ngIf and *ngFor will soon get deprecated to favor the new control flow blocks.

E.g. old directives:

<ng-container *ngIf="isLoggedIn">...</ng-container>

Can now be replaced with the new syntax:

@if (isLoggedIn) {
   ...
}

An automated migration CLI command is available

ShellMenuNew – Disable/enable ‘New’ menu items in Windows Explorer

ShellMenuNew is a small utility that displays the list of all menu items in the ‘New’ submenu of Windows Explorer. It allows you to easily disable unwanted menu items, so this ‘New’ submenu will display only the items that you need.

Source: ShellMenuNew – Disable/enable ‘New’ menu items in Windows Explorer

Animations CSS Generator | Web Code Tools

Our CSS Animation Generator is the perfect tool for web developers and designers! You can build the perfect animation for your project, choosing from a wide variety of predefined animations or customizing any of them through user-friendly options. Tailor properties like name, duration, timing, and delay to suit your design needs, and bring your website to life with seamless motion effects. Perfect for beginners and experts alike, this tool makes creating animations easier, saving you lots of time and effort

Source: Animations CSS Generator | Web Code Tools

Fixing github auth problem, cloning repository to Webstorm IDE

This probably works for other IDEs as well such as VS Code.
My context is Windows 10 and Webstorm version 2024.3.2.1

Problem: was connected to  my “work” github account and wanted also to be able to work with repos in my “private” github account.

Added the Github account in webstorm settings -> version control -> github -> (was logged in on github private account in web browser), got web browser authenticate question -> ok

Cloned a repo, got similar to the following git error message:

remote: Repository not found. fatal: repository 'https://github.com/MyUser/MyRepo.git/' not found

The repository exists at that location, its an auth problem.

Solution:

Tried to setup SSH but was a bit difficult, the “GitHub Desktop” application had no problem cloning and pushing though, but wanted it to work within Webstorm.

I tried the Github CLI application, download here: https://cli.github.com/

Open a terminal within Webstorm/at the project root and execute the gh command:

gh auth login

Follow the instructions regarding auth with web browser, (enter the one-time code at https://github.com/login/device).
Output from my terminal:

$ gh auth login
? Where do you use GitHub? GitHub.com
? What is your preferred protocol for Git operations on this host? HTTPS
? Authenticate Git with your GitHub credentials? Yes
? How would you like to authenticate GitHub CLI? Login with a web browser

! First copy your one-time code: ABCD-1234
Press Enter to open https://github.com/login/device in your browser...
✓ Authentication complete.
- gh config set -h github.com git_protocol https
✓ Configured git protocol
✓ Logged in as AndreasPlahn

Voila! Now it works for me, at least.

Update:
When pushing from Webstorm I get a dialog (on every push) which github acccount I want to be acting as.

This was annoying. Solved in this way:
(in cmd):

git credential-manager github list
-> see all logged in accounts

git credential-manager github logout <MyGithubAccountName>
-> logout one of the accounts to avoid

More info about git credential-manager in Windows:
https://github.com/git-ecosystem/git-credential-manager/blob/release/docs/usage.md

Unlocking the power of CSS container queries: lessons from the Netflix team  |  web.dev

Container queries have revolutionized how developers approach responsive design, and the Netflix team has experienced firsthand the profound impact they can have on streamlining development, improving flexibility, and enhancing performance. This post breaks down the key benefits of using container queries, comparing them to older methods, particularly those relying on JavaScript for layout control. It includes code examples to illustrate each point, showing how container queries can make your life as a developer much easier.
web.dev/case-studies/netflix-cq

What is temperature and top-K parameters used for in context of LLMs?

In the context of large language models (LLMs), temperature and top-K are parameters used to control the randomness and diversity of the generated text. They determine how the model selects words (tokens) when generating responses. Here’s what each one does:

1. Temperature

  • What it does:
    • The temperature parameter adjusts the “creativity” of the model’s outputs. It controls how deterministic or random the token sampling process is.
  • How it works:
    • A low temperature (e.g., 0.2) makes the model more deterministic and focused, favoring tokens with the highest probabilities. This is useful for tasks requiring precision or when predictable outputs are preferred.
    • A high temperature (e.g., 1.0 or more) increases randomness, allowing the model to explore less likely tokens. This is ideal for generating creative or diverse outputs.
    • At temperature = 0, the model selects the highest-probability token every time, making it fully deterministic.
  • Example:
    • Low temperature (0.2):
      Input: “Once upon a time, there was a…”
      Output: “princess who lived in a castle.”
    • High temperature (1.0):
      Input: “Once upon a time, there was a…”
      Output: “dragon guarding a mysterious treasure.”

2. Top-K Sampling

  • What it does:
    • Top-K limits the model’s token selection to the top K highest-probability tokens. This reduces randomness by restricting choices to a smaller, high-probability set.
  • How it works:
    • K = 1: Only the highest-probability token is selected (fully deterministic).
    • Higher K values (e.g., 40, 50): Allow more diverse tokens to be considered, introducing some randomness but still narrowing the choice compared to the full distribution.
  • Why use it:
    • It ensures that only the most relevant or reasonable options are considered, avoiding extremely rare or nonsensical tokens while still allowing variety in outputs.
  • Example:
    • Input: “The sky is…”
    • Top-K (K=1): “blue.”
    • Top-K (K=50): “blue,” “cloudy,” “bright,” “gray,” etc.

When combined:

  • Temperature and top-K can work together to balance creativity and coherence:
    • High temperature + High top-K: Generates diverse and creative text.
    • Low temperature + Low top-K: Generates focused and precise text.
    • Medium temperature + Medium top-K: Balances creativity and reliability.

This combination allows fine-tuning of how the model behaves, depending on the task (e.g., storytelling vs. answering factual questions).

5 tips on using Angular FormControl

We often learn Angular presented with two options for working with forms: Template driven or reactive (or both!)

In several cases, small forms (for instance, a login screen, a single text input, or a single dropdown) don’t need that kind of verbosity.

In this post, we will look at five straightforward yet valuable features of the FormControl object used on its own without bringing any additional config to the table.

Source: 5 tips on using Angular FormControl | by Alain Chautard | Angular Training