🚸 Inline conditionals in CSS?

Last week, we had a CSS WG face-to-face meeting in A Coruña, Spain. There is one resolution from that meeting that I’m particularly excited about: the consensus to add an inline if() to CSS. While I was not the first to propose an inline conditional syntax, I did try and scope down the various nonterminating discussions into an MVP that can actually be implemented quickly, discussed ideas with implemenators, and eventually published a concrete proposal and pushed for group resolution. Quite poetically, the relevant discussion occurred on my birthday, so in a way, I got if() as the most unique birthday present ever. 😀

🚀 Kickstarting the "JavaScript from Zero to Junior" Course! 🚀

We’re launching our complete and in-depth JavaScript course! Today’s first topic: Variables and Data Types. You’ll learn:
✅ How to declare variables (var, let, const)
✅ All JavaScript data types
✅ Common pitfalls and tricky cases
✅ Interview questions you might encounter

📌 Read the first lesson and practice your skills!

Task 1: Correct the mistakes

The code below contains errors related to declaring and changing variables. Find and fix them.

var age = 25;
let age = 30; 

const pi;
pi = 3.14;

let name;
console.log(typeof name === "null");

✅ Write your version in the comments 📝

🔎 Look for a hint:

let age = 30; // Error: Re-advertisement
Use let instead of var. Now you can change the value without re-declaring the variable.
age = 30;

const pi; // Error
Сonst variable must be initialized. We need to declare and immediately initialize const:
const pi = 3.14;

console.log(typeof name === "null"); // Error
It is incorrect because typeof null returns "object" due to a bug in JS. You just need name === null.

#jsTasks

Task 2: Determine the data type

What will be logged to the console in each case? Explain why.

console.log(typeof "hello");  
console.log(typeof 42);  
console.log(typeof true);  
console.log(typeof null);  
console.log(typeof undefined);  
console.log(typeof {});  
console.log(typeof []);  
console.log(typeof function() {});  
console.log(typeof NaN);  
console.log(typeof 100n);  

✅ Write your version in the comments 📝

🔎 Look for a hint:

console.log(typeof "hello"); // "string"
console.log(typeof 42); // "number"
console.log(typeof true); // "boolean"
console.log(typeof null); // "object" (историческая ошибка в JS)
console.log(typeof undefined); // "undefined"
console.log(typeof {}); // "object"
console.log(typeof []); // "object" (массивы тоже объекты)
console.log(typeof function() {}); // "function" (фактически объект, но JS так определяет функции)
console.log(typeof NaN); // "number" (NaN – специальное значение типа number)
console.log(typeof 100n); // "bigint"

Explanation:
"typeof null" returns "object" due to a bug that has existed since early versions of JavaScript.
"typeof NaN" is "number" because NaN is an invalid numeric value.
"typeof []" is "object" because arrays in JavaScript are a type of object.
"typeof function() {}" is "function", but in reality, it is a subtype of an object.

Task 3: Type casting

What will be printed to the console? Explain why.

console.log("5" + 3);  
console.log("5" - 3);  
console.log(5 + true);  
console.log("10" * "2");  
console.log("10px" - 2);  
console.log(null + 5);  
console.log(undefined + 5);  
console.log(!!"false");  
console.log(!!0);  
console.log(Boolean([]));  

✅ Write your version in the comments 📝

🔎 Look for a hint:

1. "53" (concatenation, since "5" is a string)
2. "2" (the string "5" is converted to a number)
3. "6" (true is converted to 1)
4. "20" (both values ​​are converted to numbers)
5. "NaN" (you can't subtract a number from a string of letters)
6. "5" (null is converted to 0)
7. "NaN" (undefined can't be a number)
8. "true" (a non-empty string is truthy)
9. "false" (0 is falsy)
10. "true" (an array is a truthy value)

Explanation:
JS automatically converts strings and numbers in arithmetic operations.
null becomes 0, undefined becomes NaN.
!! is a double logical negation that turns a value into true or false.

Task 4: Using let, const, var

What will be the result of running the code? Why?

console.log(a);  
var a = 10;

console.log(b);  
let b = 20;

if (true) {
    var x = 50;
}
console.log(x);

if (true) {
    let y = 60;
}
console.log(y);

✅ Сhoose the correct option 📝

🔎 Look for a hint:

1. undefined (due to hoisting, variable is declared but not yet initialized)

2. Error! Variable is declared but is in the "dead zone" (TDZ)

3. 50 (var variable is accessible outside the block)

4. Error! y is only defined in the if block

Explanation:
var is hoisted but not initialized, so console.log(a); prints undefined.
let and const are not hoisted, so console.log(b); throws an error.
var is not block scoped, so x is accessible outside the block.
let is scoped to {} and y is not accessible outside the if block.

Free Figma Template: Global Transactions

🧠 Difficulty: 🥕🥕🥕

#Figma #Template

Task 5: Determine the result of the code

What will be the result of executing the following code? Why?|

let foo = { n: 1 };
let bar = foo;
bar.n = 2;

console.log(foo.n);

let a = [1, 2, 3];
let b = a;
b.push(4);

console.log(a);

let x = "hello";
let y = x;
y = "world";

console.log(x);

✅ Сhoose the correct option 📝

🔎 Look for a hint:

1. 2 (bar and foo point to the same object)

2. [1, 2, 3, 4] (a and b point to the same array)

3. "hello" (strings are primitives, passed by value)


Explanation:
Objects and arrays are passed by reference, so bar.n changes foo.n, and b.push(4) changes a.
Primitive types (string, number, boolean) are passed by value, so changing y does not affect x.

🔎 CSS content-visibility: The Web Performance Boost You Might Be Missing

The content-visibility CSS property delays rendering an element, including layout and painting, until it is needed
Web performance optimization can be a real headache. Shaving off milliseconds here and there, minifying everything in sight, and praying to the performance gods.

⏰ Master JavaScript date and time: From Moment.js to Temporal

JavaScript’s Date API has long been a source of frustration for developers due to its historical design flaws, including its:

- Unreliable parsing behavior
- Mutable nature
- Weak time zone support

To overcome these issues and limitations, developers have turned to libraries like Moment.js for more reliable and feature-rich date and time handling. Now, JavaScript has a new built-in solution on the horizon: the Temporal API, which brings a modern and intuitive approach to date and time manipulation.

In this article, we’ll examine JavaScript’s Date API limitations, discussing the strengths and weaknesses of popular libraries like Moment.js, and delving into the Temporal API.

🔥 Lesson 2: Operators and Control Flow in JavaScript!

What will you learn in this lesson?

✅ How arithmetic, logical, and bitwise operators work
✅ How to use conditions (if, switch) and loops (for, while, do...while)
✅ The power of break, continue, and the ternary operator
✅ Common mistakes and best practices to write cleaner code

By the end of this lesson, you'll be able to control program logic and write more efficient code with confidence! 🚀

🔗 Read the article and practice your skills! 💡

#js_course #js_lesson_2

Task 1: Even or odd?

Write a function isEven that takes a number and returns "Even" if the number is even and "Odd" if it is odd.

console.log(isEven(4)); // "Even"
console.log(isEven(7)); // "Odd"

✅ Сhoose the correct option ✅ Or write your version in the comments 📝


1️⃣

function isEven() {
  return num % 2 === 0 ? "Even" : "Odd";
}

2️⃣

function isEven(num) {
  return num % 2 = 0 ? "Even" : "Odd";
}

3️⃣

function isEven(num) {
  return num % 2 === 0 ? "Even" : "Odd";
}

One of Those “Onboarding” UIs, With Anchor Positioning

Anchor positioning lets us attach — or “anchor” — one element to one or more other elements. More than that, it allows us to define how a “target” element (that’s what we call the element we’re attaching to an anchor element) is positioned next to the anchor-positioned element, including fallback positioning in the form of a new @position-try at-rule.

Task 2: Find the maximum of three numbers

Write a function findMax that takes three numbers and returns the largest of them.

console.log(findMax(5, 12, 9)); // 12

✅ Сhoose the correct option ✅ Or write your version in the comments 📝

1️⃣

function findMax(a, b, c) {
  return Math.max(a, b, c);
}

2️⃣

function findMax() {
  return Math.max(a, b, c);
}

3️⃣

function findMax(a, b, c) {
  Math.max(a, b, c);
}