“А може, замість цього використаємо пайпи?” — побачив я цей коментар у запиті на злиття, який подав лише дві години тому. Я ще не зовсім розумів усі переваги пайпів, і перша моя думка була: “Чому б просто не створити утилітну функцію?” Це зацікавило мене, і я відчув бажання розібратися глибше.
Без сумнівів, я почав шукати інформацію в Google, щоб дізнатися більше.

Поширена проблема — що не так з простою функцією

Розглянемо приклад функції, яка просто робить першу літеру імені великою.

import { Component } from '@angular/core';  
import { nameList } from './random-names-list';  

@Component({  
 selector: 'my-app',  
 template: `  
 \  
 \
    `,    

Гідратація в Next.js

Вступ: Що таке гідратація в Next.js?

Як розробники, ми часто чуємо такі терміни, як гідратація, SSR та SSG, коли працюємо з Next.js. Але що таке гідратація, і чому це важливо?

Гідратація — це процес, коли React "береться" за статичну HTML-сторінку і перетворює її на інтерактивну. Це критично важливо для забезпечення плавного користувацького досвіду в Next.js. Давайте розберемо, що таке гідратація, чому вона важлива і як це працює в Next.js.

Що таке гідратація?

Гідратація — це процес, коли React бере попередньо згенеровану HTML-сторінку і додає до неї інтерактивність (обробники подій (Event Listener), оновлення стану тощо).… Читати далі

Перша помилка: Велика суперечка про div

Все почалося з моєї амбітної спроби створити калькулятор. Мені знадобилася ціла година, щоб завершити фронтенд—так, ціла година!

ДИСКЛЕЙМЕР: На той момент я вже п’ять місяців вивчав фронтенд-розробку і був переконаний, що можу стати наступним великим веб-розробником. Спойлер: я не став.

Ось де я застряг. Я не міг зрозуміти, чому div калькулятора не хоче знаходитися під тегом h1. Я пильно дивився на код, як детектив, що розкриває справу, і лише пізніше зрозумів, що теги h1 за замовчуванням є блочними елементами.

Навіть коли я намагався зробити їх інлайн, мій геніальний мозок забув про flex-direction: … Читати далі

У чому різниця між жорсткими та м'якими асерціями?

Коли ви використовуєте жорсткі асерції (hard assertions), якщо будь-яка асерція не пройде, решта коду не буде виконана. По суті, якщо жорстка асерція не проходить, виконання коду припиняється. Це означає, що жодні інші оператори після неуспішної асерції не будуть виконані. Щоб уникнути цього, можна використовувати м'які асерції (soft assertions) замість жорстких.

Жорсткі асерції

Давайте розглянемо, у чому проблема з жорсткими асерціями. Уявіть, що перша асерція (перевірка заголовка сторінки) не пройшла. Якщо ви введете неправильний заголовок і запустите скрипт.

Вона не пройшла, бо решта кроків не були виконані. Окрема асерція не пройшла, і виконання … Читати далі

Розуміння методів call, apply та bind у JavaScript

Методи JavaScript call, apply та bind дозволяють явно встановлювати контекст this для функції. Ці методи є основою для розуміння динамічної поведінки this в JavaScript і часто зустрічаються на технічних співбесідах. Давайте розглянемо їх функціональність та те, як вони працюють внутрішньо.

1. call

Метод call дозволяє викликати функцію з вказаним значенням this. Першим аргументом є об'єкт, який буде використовуватись як this, а далі передаються аргументи, які будуть передані функції.

function greet(name) {
  console.log(`Hello, ${name}!`);
}

greet.call(null, 'Alice');  // Виведе: Hello, Alice!

У прикладі вище ми використовуємо call для виклику … Читати далі

1. Що таке Byebug?

Byebug — це гем для Ruby, який дозволяє здійснювати налагодження програм. З Byebug ви можете виконувати такі операції:

• Поставити зупинку в певному місці коду (додати точку зупину)
• Переглядати значення змінних
• Крок за кроком виконувати код
• Відстежувати виклики методів

2. Як додати Byebug до вашого проєкту?

Щоб використовувати гем Byebug, додайте наступний рядок до файлу Gemfile вашого проєкту:

# Gemfile  
gem 'byebug'

Далі, щоб встановити гем, виконайте наступну команду в терміналі:

bundle install

Тепер Byebug готовий до використання.

3.

Просте використання: Додавання точки зупину

Якщо ви хочете призупинити виконання коду на певному етапі, можна додати такий рядок:… Читати далі

В програмуванні операції виконуються за допомогою операторів — символів, що позначають операції, які виконуються над змінними та значеннями. Вони є незамінними для виконання арифметичних, порівняльних, логічних, присвоювальних та умовних операцій.

Ось деякі ключові типи операторів, що часто використовуються:

𝟭. 𝗔𝗿𝗶𝘁𝗵𝗺𝗲𝘁𝗶𝗰 𝗢𝗽𝗲𝗿𝗮𝘁𝗼𝗿𝘀 (Арифметичні оператори): Використовуються для базових математичних операцій, таких як додавання (+), віднімання (-), множення (*), ділення (/), залишок від ділення (%), збільшення (++) та зменшення (--).

𝟮. 𝗖𝗼𝗺𝗽𝗮𝗿𝗶𝘀𝗼𝗻 𝗢𝗽𝗲𝗿𝗮𝘁𝗼𝗿𝘀 (Порівняльні оператори): Дозволяють порівнювати значення, такі як більше ніж (>), менше ніж (<), рівно (==), сувора рівність (===) та не рівно (!=).

𝟯. 𝗟𝗼𝗴𝗶𝗰𝗮𝗹/𝗥𝗲𝗹𝗮𝘁𝗶𝗼𝗻𝗮𝗹 𝗢𝗽𝗲𝗿𝗮𝘁𝗼𝗿𝘀 (Логічні/Відносні оператори): Використовуються для логічних … Читати далі

Логотип GSAP

GreenSock Animation Platform, або GSAP, — це потужний набір інструментів для JavaScript, який перетворює розробників на супергероїв анімацій. Створюйте високопродуктивні анімації, що працюють на всіх основних браузерах, і можуть анімувати SVG, canvas, CSS, react, WebGL, кольори, рядки та будь-яке інше, з чим може працювати JavaScript.
GSAP — ідеальний вибір для складних анімацій та взаємодій.

Налаштування GSAP

Ви можете почати використовувати GSAP, або встановивши його пакет через NPM, або підключивши його через CDN.

NPM

Встановіть GSAP за допомогою npm для ефективного управління залежностями, що ідеально підходить для більших проєктів, що використовують інструменти на зразок Webpack.

npm install gsap

CDN … Читати далі

Очевидно, що об'єктно-орієнтоване програмування (OOP) означає використання об'єктів у мовах програмування. Об'єктно-орієнтоване програмування орієнтоване на реалізацію реальних об'єктів, таких як наслідування (inheritance), приховування (hiding), поліморфізм (polymorphism) та інші. Головною метою OOP є зв'язування даних та функцій, що з ними працюють, таким чином, щоб інші частини коду не могли доступитися до цих даних, окрім цієї функції.

Основні поняття OOP:

> Клас (Class)
> Об'єкти (Objects)
> Абстракція даних (Data Abstraction)
> Інкапсуляція (Encapsulation)
> Наслідування (Inheritance)
> Поліморфізм (Polymorphism)
> Динамічне зв'язування (Dynamic Binding)
> Передача повідомлень (Message Passing)

1. Клас (Class):

Клас — це тип даних, визначений користувачем.
Він складається з … Читати далі

Незалежно від того, чи це функція кольору rgb() чи hsl(), тепер підтримується відносний синтаксис з використанням ключового слова from. Це дозволяє встановлювати схожі або доповнюючі кольори на основі існуючого значення кольору.

Це особливо корисно для реалізації інтерактивних ефектів, таких як стани при наведенні.

Суть відносного синтаксису — розбиття кольорів.

Давайте спершу розглянемо синтаксис.
Цей синтаксис може виглядати складно, але насправді він досить простий і легко засвоюється.

Наприклад, щоб встановити колір тексту червоним:

p {  
 color: rgb(from red r g b / alpha);  
}

Ефект реального часу виглядає так:

Якщо ви використовуєте браузер Chrome або Safari версії 18 і … Читати далі