Forem: byby.dev

Compare two strings ignoring case in JavaScript

byby.dev — Sat, 18 May 2024 14:07:26 +0000

Strings are one of the most common data types in JavaScript, used to represent text and characters. String comparison is essential for tasks such as sorting data, searching for specific patterns, validating user inputs, and making decisions based on textual data.

When comparing strings in JavaScript, you need to care about the following aspects:

The case of the letters, "Hello" and "hello" are not equal.
The type of the values, "1" and 1 are equal with ==, but not with ===.
The locale of the strings, "a" and "ä" are equal in some locales, but not in others.

The choice between case-sensitive and case-insensitive comparison depends on the specific requirements of your program. Sometimes, you may want to treat "abc" and "ABC" as different values, while in other cases, you may want them to be considered the same.

You can use one of following ways to compare two strings, ignoring the case:

Converting strings to the same case
Using locale compare method
Using regular expressions

You should choose the method that best suits your needs and preferences, considering the characters and the languages of the strings, the purpose and the context of the comparison, and the performance and the reliability of the method.

Converting strings to the same case

You can convert both strings to either lower case or upper case using toLowerCase() or toUpperCase(), and then compare them using the strict equality operator (===).

const str1 = "Bye bye";
const str2 = "bye bye";

const c0 = str1 === str2;
console.log(c0); // false

// Convert both strings to lower case and compare
const c1 = str1.toLowerCase() === str2.toLowerCase();
console.log(c1); // true

// Convert both strings to upper case and compare
const c2 = str1.toUpperCase() === str2.toUpperCase();
console.log(c2); // true

However both toLowerCase() and toUpperCase() do not handle locale well. They may not work correctly for some characters that have different cases in different languages or alphabets, such as the letter "i" in Turkish. They may also not handle accents, diacritics, or other variations of the same letter, such as the letters "a" and "ä" in German.

Luckily, you can use the toLocaleLowerCase() and toLocaleUpperCase() methods to convert the case of a string according to a specific locale. For example, to convert the letter "i" in Turkish, you can use the "tr" locale:

// Letter i in Turkish
const str1 = "İSTANBUL";
const str2 = "istanbul";

const c0 = str1 === str2;
console.log(c0); // false

// Using toLowerCase
const c1 = str1.toLowerCase() === str2.toLowerCase();
console.log(c1); // false

// Using toLocaleLowerCase
const c2 = str1.toLocaleLowerCase("tr") === str2.toLocaleLowerCase("tr")
console.log(c2); // true

Using locale compare method

JavaScript has a localeCompare() method that compares two strings according to the language rules of a specific locale. This method can handle different alphabets, accents, sorting orders by using the options parameter sensitivity to specify how you want to compare the strings.

base: Only the base characters of the strings are compared, ignoring accents, case, and other differences. For example, "a" and "ä" are considered equal with this option.
accent: The base characters and accents of the strings are compared, ignoring case and other differences. For example, "a" and "A" are considered equal with this option, but not "a" and "ä".
case: The base characters and case of the strings are compared, ignoring accents and other differences. For example, "a" and "ä" are considered equal with this option, but not "a" and "A".
variant: The base characters, accents, case, and other differences of the strings are compared. This is the most strict option. For example, "a", "A", "ä", and "Ä" are all considered different with this option.

The result value of localeCompare is a number that indicates the relative order of two strings in a specific locale: -1 (before), 0 (equal), 1 (after).

Both "accent" and "base" options ignore the case of the letters when comparing two strings, but you may want to use the "accent" when you need to distinguish between strings that have different accents, and "base" if otherwise.

const str1 = "Café";
const str2 = "cafe";

// Using default sensitivity (variant)
const c0 = str1.localeCompare(str2);
console.log(c0); // 1

// Using the accent sensitivity
const c1 = str1.localeCompare(str2, undefined, { sensitivity: "accent" });
console.log(c1); // 1,

// Using the base sensitivity
const c2 = str1.localeCompare(str2, undefined, { sensitivity: "base" });
console.log(c2); // 0

Using regular expressions

You can use regular expressions with the i flag, which means it will ignore the case of the characters in the pattern. You can create a regular expression from a string using the RegExp constructor, and then use the test() method to check if it matches another string.

var str1 = "Hello";
var str2 = "hello";

// Create a regular expression from str1 with the i flag
var regex = new RegExp("^" + str1 + "$", "i");

// Test if the regular expression matches str2
const c = regex.test(str2);
console.log(c); // true

However, using regular expressions can be tricky, because you need to escape any special characters in the string that have a special meaning in regular expressions, such as ., *, +, ?, etc. Otherwise, you may get unexpected results.

var str1 = "[hello]";
var str2 = "[Hello]";

// Create a regular expression from str1 with the i flag
var regex = new RegExp("^" + str1 + "$", "i");

// Test if the regular expression matches str2
const c = regex.test(str2);
console.log(c); // false, because [ and ] are special characters in regular expressions

To avoid this problem, you can use a function to escape any special characters in the string before creating a regular expression from it. For example:

function escapeRegExp(string) {
  return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"); // $& means the whole matched string
}

var str1 = "[hello]";
var str2 = "[Hello]";

// Escape any special characters in str1
var escapedStr1 = escapeRegExp(str1);

// Create a regular expression from escapedStr1 with the i flag
var regex = new RegExp("^" + escapedStr1 + "$", "i");

// Test if the regular expression matches str2
const c = regex.test(str2);
console.log(c); // true

This method may not handle locale well, depending on the characters and the flags used. Regular expressions are patterns that can match or test strings based on certain rules and symbols. However, regular expressions may not be aware of the differences or similarities between characters in different languages or alphabets, such as accents, diacritics, or case.

How to check if a variable is list in Python

byby.dev — Fri, 17 May 2024 13:52:54 +0000

In Python programming, it is often crucial to determine the type of a variable for proper handling and execution of code. When dealing with lists, a common scenario arises where one needs to check if a particular variable is, in fact, a list. This verification is essential for ensuring that the subsequent operations or functions are appropriate for the data structure at hand.

Using `type()` function

The type() function in Python is a built-in function that returns the type of the specified object, generally the same object as returned by object.__class__. For example, if you pass a list object to the type() function, it will return <class 'list'>. You can use the type() function to test if a variable is a list by comparing its type with the list class using the == or is operators.

x = [1, 2, 3]
y = (4, 5, 6)
z = "Hello"

print(type(x) is list) # True
print(type(x) == list) # True
print(type(y) is list) # False
print(type(z) is list) # False

The == operator compares the values of the operands, while the is operator compares the identities of the operands. In most cases, this does not matter for types, since there is only one instance of each type object in memory.

The is operator is faster than the == operator, since it only compares the memory addresses of the operands, while the == operator may involve calling methods and performing type conversions.

Using `isinstance()` function

This method checks if the variable is an instance of list or a subclass of list. This is more flexible than the previous method, as it allows for inheritance and polymorphism.

class MyList(list):
    pass

x = [1, 2, 3]
y = MyList([4, 5, 6])
z = "Hello"

print(isinstance(x, list)) # True
print(isinstance(y, list)) # True
print(isinstance(z, list)) # False

You can use the isinstance() function to perform type checking, validation, or branching logic in your code. It is often preferred over the type() function, which only checks for the exact type of an object, not its subclasses.

Using `class` attribute

This method is similar to the first one, but it uses the __class__ attribute of the variable instead of the type() function. This can be useful if you want to avoid calling a function, or if you want to compare the class names as strings.

x = [1, 2, 3]
y = (4, 5, 6)
z = "Hello"

print(x.__class__ == list) # True
print(y.__class__ == list) # False
print(z.__class__ == list) # False

The __class__ attribute in Python is a reference to the class object that created an instance. It allows you to access the class attributes and methods from the instance.

# Define a class with a class attribute and a class method
class Foo:
    name = "Foo"
    def hello():
        print("Hello from Foo")

# Create an instance of Foo
a = Foo()

# Access the class attribute and method from the instance
print(a.__class__.name) # Foo
a.__class__.hello() # Hello from Foo

How to shuffle an array in JavaScript

byby.dev — Thu, 16 May 2024 14:41:05 +0000

When we talk about "shuffling" an array, it means changing the order of the elements within the array in a random or pseudo-random manner. The goal is to produce a different arrangement of the elements, creating unpredictability in their sequence.

For example, consider array [1, 2, 3, 4, 5]. After shuffling, it might become [3, 1, 5, 2, 4]. The order of the elements has been randomly rearranged.

Even though JavaScript doesn't have a built-in shuffle function, it's relatively easy to implement one using existing language features.

Using Fisher-Yates algorithm

The Fisher-Yates shuffle algorithm, also known as the Knuth shuffle, is a simple and efficient algorithm used for shuffling an array randomly.

The basic idea behind the algorithm is to iterate through the array from the last element to the first, and at each iteration, swap the current element with a randomly chosen element that comes before it.

// Shuffles the array in place
function shuffle(array) {
  // Loop over the array from the last element to the first
  for (let i = array.length - 1; i > 0; i--) {
    // Pick a random index from 0 to i
    let j = Math.floor(Math.random() * (i + 1));
    // Swap the elements at i and j
    [array[i], array[j]] = [array[j], array[i]];
  }
}

This algorithm has a time complexity of O(n), where n is the length of the array. The randomness comes from the fact that at each step, an element is chosen uniformly at random from the remaining unshuffled elements.

Keep in mind that this algorithm shuffles the array in place, meaning it modifies the original array directly. If you need to keep the original array unchanged, you can create a copy of it before shuffling.

The Fisher-Yates algorithm ensures each element has an equal chance of ending up in any position, leading to a statistically fair shuffle.

Using sort method with random compare

Using the sort() method with a custom compare function that introduces randomness is a creative way to in-place shuffle an array in JavaScript.

function shuffle(array) {
  return array.sort(() => Math.random() - 0.5);
}

The random compare function returns a random value that is either negative, positive, or zero. This randomness is achieved by subtracting 0.5 from the result of Math.random(), which gives a random number between -0.5 and 0.5.

However, it's important to note that this method is not as reliable as the Fisher-Yates shuffle for creating truly random permutations. The primary reason is that the sort() method assumes a stable sorting algorithm, which means equal elements will maintain their relative order.

Using a library like Lodash

Lodash is a widely used utility library in JavaScript, providing a range of helpful functions to simplify common programming tasks. One of the functions provided by Lodash is _.shuffle(), which is specifically designed to shuffle the elements of an array.

Calling _.shuffle() on an array in Lodash returns a new array with the elements randomly reordered. It uses a variation of the Fisher-Yates shuffle algorithm, known for its efficient and statistically fair randomness.

const _ = require("lodash");

const array = [1, 2, 3, 4, 5];
const shuffledArray = _.shuffle(array);
console.log(shuffledArray); // [ 5, 1, 3, 4, 2 ] (random order)
console.log(array); // [ 1, 2, 3, 4, 5 ]

Converting between strings and numbers in JavaScript

byby.dev — Wed, 15 May 2024 23:35:38 +0000

In JavaScript, it's common to need to convert values between strings and numbers, for example when working with user input or when manipulating data. It can be accomplished using various built-in functions and methods, such as parseInt(), parseFloat(), Number() constructor, and toString().

However, it's important to be aware of the potential pitfalls of conversion, such as non-numeric input, decimal precision, and numeric overflow, and to use the appropriate conversion method for your particular use case.

Primitive types vs wrapper types

In JavaScript, string and number are two of the primitive types, which means they are immutable values that can be represented directly at the lowest level of the language.

The string type is used to represent and manipulate a sequence of characters. You can use single quotes, double quotes, or backticks to create string literals.

const str1 = 'Hello'; 
const str2 = "World"; 
const str3 = `Hello World`;

The number type is used to represent numeric values. You can use decimal, hexadecimal, octal, or binary literals to create number literals.

const num1 = 42; 
const num2 = 0x2A; 
const num3 = 0o52; 
const num4 = 0b101010;

Both string and number have their corresponding object wrapper types, which are String and Number. These are objects that provide useful methods and properties for working with the primitive values.

// Primitive types
let stringPrimitive = 'hello';
let numberPrimitive = 123;

console.log(typeof stringPrimitive); // "string"
console.log(typeof numberPrimitive); // "number"

// Wrapper types
let stringWrapper = new String('hello');
let numberWrapper = new Number(123);

console.log(typeof stringWrapper); // "object"
console.log(typeof numberWrapper); // "object"

When you access a property or a method on a primitive value, JavaScript automatically wraps the value into the corresponding object wrapper and then accesses the property or method on the object. However, this is only a temporary conversion and does not change the original value.

You can also use the String() constructor and Number() constructor to create string and number objects explicitly, but this is not recommended as it can cause confusion and unexpected behavior when comparing values or passing them to functions that expect primitive types.

Number special values

In JavaScript, there are several special values that can be represented by the Number type. These values are often used to indicate the absence of a meaningful number, or to represent values that cannot be expressed as finite numbers.

The special number values in JavaScript are:

NaN (Not a Number): This is a special value that indicates that a value is not a valid number, returned when a mathematical operation is performed on an undefined or unrepresentable value, such as dividing zero by zero or taking the square root of a negative number.
Infinity and -Infinity: These values represent positive and negative infinity, respectively. They are returned when a number exceeds the maximum or minimum representable value.
-0 (Negative zero): This is a special value that represents zero with a negative sign. -0 is returned when dividing a negative number by zero.

It's important to note that NaN is not equal to any other value, including itself. This means that you cannot use the == or === operators to check for NaN. Instead, you can use the isNaN() function to check whether a value is NaN. Also, Infinity and -Infinity are not considered equal to each other or any other value except themselves.

Here are some examples of using these special number values in JavaScript:

let x = 10 / "hello";  // returns NaN
let y = 1 / 0;         // returns Infinity
let z = -1 / 0;        // returns -Infinity
let a = -0;            // represents negative zero

console.log(isNaN(x)); // true
console.log(isNaN(y)); // false

console.log(Infinity === Infinity);     // true
console.log(-Infinity === -Infinity);   // true
console.log(Infinity === -Infinity);    // false

console.log(1 / -0);  // returns -Infinity
console.log(-1 / 0);  // returns -Infinity
console.log(1 / 0);   // returns Infinity

Converting strings to numbers

When converting strings to numbers in JavaScript, there are a few things to keep in mind: type coercion, valid number, radix, and locale. There are several ways to convert a string to a number in JavaScript:

(1) Using Number() constructor

Using Number() constructor is preferred as it converts any value to a number primitive, which is easier to work with and compare.

const num1 = Number(42); // converts 42 to a number primitive
const num2 = Number(42); // converts 42 to a number primitive

console.log(num1 == num2); // true, because they are the same value and type
console.log(num1 === num2); // true, because they are the same value and type

Remember using new Number() will create a number object instead. This is not recommended as it can cause confusion and unexpected behavior when comparing values or passing them to functions that expect primitive types.

const num1 = new Number(42); // creates a number object
const num2 = new Number(42); // creates another number object

console.log(num1 == num2); // false, because they are different objects
console.log(num1 === num2); // false, because they are different objects

(2) Using parseInt() or Number.parseInt() functions

The parseInt() function is a global function that parses a string argument and returns an integer of the specified radix or base. The Number.parseInt() method is a static method of the Number object that has the same functionality as the global parseInt() function. It was introduced in ES6 to modularize the global functions.

parseInt("42"); // 42
parseInt("42", 10); // 42 in decimal
Number.parseInt("42", 16); // 66 in hexadecimal
Number.parseInt("42", 2); // NaN, because 42 is not a valid binary number

(3) Using parseFloat() or Number.parseFloat() functions

The parseFloat() function is a global function that parses a string argument and returns a floating-point number. The Number.parseFloat() method is a static method of the Number object that has the same functionality as the global parseFloat() function. It was introduced in ES6 to modularize the global functions.

parseFloat("3.14"); // 3.14
parseFloat("42.0"); // 42
Number.parseFloat("3.14abc"); // 3.14, ignores the trailing characters
Number.parseFloat("abc3.14"); // NaN, cannot parse the string

(4) Using the unary plus operator (+)

The unary plus operator (+) is a shorthand way to convert a string to a number in JavaScript. It works by applying the Number() function to the operand.

+"42"; // 42
+"3.14"; // 3.14
+"0xF"; // 15, hexadecimal notation
+"0o10"; // 8, octal notation
+"0b101010"; // 42, binary notation

+true; // 1
+false; // 0
+null; // 0
+undefined; // NaN

+"Hello"; // NaN
+"3.14abc"; // NaN
+""; // NaN

Converting numbers to strings

When converting numbers to strings in JavaScript, there are a few things to keep in mind: rounding errors, loss of precision, radix, padding, and localization. There are several ways to convert numbers to strings in JavaScript:

(1) Using toString() method

The toString() method is a method that returns a string representation of an object. It is inherited by every object that is derived from the Object prototype. It can be used to convert a number, a boolean, a date, an array, or any other object to a string.

The toString() method can take an optional argument called a radix, which specifies the base of the number to be converted.

const num = 42;
num.toString(); // "42"
num.toString(2); // "101010"
num.toString(16); // "2a"

(2) Using String() constructor

Using String() constructor to convert a number to a string is different from using new String() to create a string object. The former returns a primitive string value, while the latter returns an object wrapper for the string.

const num = 42;
const str1 = String(num); // converts 42 to a primitive string
const str2 = new String(num); // creates a string object for 42

console.log(typeof str1); // "string"
console.log(typeof str2); // "object"

(3) Using template literals

You can use the template literals to convert a number to a string. Template literals are string literals that allow embedded expressions. You can use the ${} syntax to insert a number into a string.

const num = 42;
const str = `The number is ${num}.`; // "The number is 42."

(4) Using concatenation operator (+)

The concatenation operator (+) is an operator that can be used to join two or more strings together. It can also be used to convert a number to a string by adding an empty string to it. The concatenation operator (+) is different from the unary plus operator (+), which is a shorthand way to convert a string to a number.

const num = 42;
const str = num + ""; // "42"

Potential pitfalls

Here are some potential pitfalls to keep in mind when converting between strings and numbers in JavaScript:

(1) Non-numeric input

When converting a string to a number, it's important to ensure that the input string contains only numeric characters. If the string contains non-numeric characters, the conversion may result in NaN (Not a Number).

parseInt('hello') // NaN
Number('3.14hello') // NaN

To avoid this issue, you can use the isNaN() function to check if a value is NaN, or use regular expressions to ensure that the input string only contains numeric characters.

(2) Decimal precision

When converting a string to a floating-point number, it's important to be aware of potential rounding errors and loss of precision.

parseFloat('0.1') + parseFloat('0.2') // 0.30000000000000004

To avoid this issue, you can use a library like decimal.js or big.js to perform arbitrary-precision arithmetic, or use the toFixed() method to specify the number of decimal places to include in the result.

(3) Numeric overflow

When converting a string to a number, it's important to be aware of the maximum and minimum values that can be represented by JavaScript's numeric data type. If the input string represents a number that is outside the range of valid values, the conversion may result in Infinity or -Infinity.

parseInt('9999999999999999') // 10000000000000000
Number.MAX_VALUE + 1 // Infinity

To avoid this issue, you can check if the input string is within the valid range of values before performing the conversion, or use a library that supports arbitrary-precision arithmetic.

Overall, it's important to use the appropriate conversion method for your particular use case, and to be aware of potential issues that may arise when converting between strings and numbers. By understanding these potential pitfalls and using appropriate conversion methods and libraries, you can ensure that your code works correctly and efficiently.

Top 9 CSS and JavaScript Tooltip Libraries

byby.dev — Tue, 14 May 2024 14:21:14 +0000

Tooltip libraries provide pre-built functionality and components to easily create tooltips, popovers, dropdowns, menus, and other floating elements. Which are usually anchored to another element on the page and can be triggered by different user actions, such as hover, click, or focus.

These libraries typically handle the positioning, appearance, and behavior of tooltips, making it easier to implement tooltips without having to write complex code from scratch.

Floating UI (28.7k ⭐) — A JavaScript library that helps you create and position floating elements such as tooltips, popovers, dropdowns, and more. It also provides hooks and components for building accessible user interactions with React. Floating UI is smart, flexible, and platform-agnostic. Floating UI is the evolution of Popper 2, designed to bring the project to a new level.
Tippy.js (11.7k ⭐) — A lightweight, compatible, and easy to use JavaScript library that helps you create and customize tooltips, popovers, dropdowns, and menus. It is powered by Popper.js and supports animations, themes, accessibility, and interactivity.
Tether (8.5k ⭐) — A JavaScript library that helps you position overlays, tooltips, dropdowns and other floating elements near a reference element. It also prevents them from being clipped or cut off by the viewport or other containers. Tether is lightweight, extensible, and compatible with different browsers and environments.
Hint.css (8.4k ⭐) — A CSS library that helps you create simple and elegant tooltips using only HTML and CSS. It does not require any JavaScript and supports accessibility with aria-label attributes. Hint.css offers different positions, colors, sizes, and effects for your tooltips.
Balloon.css (5k ⭐) — A CSS library that helps you create simple and elegant tooltips using only HTML and CSS. It does not require any JavaScript and supports accessibility with aria-label attributes. Balloon.css offers different positions, colors, sizes, and effects for your tooltips.
React Tooltip (3.5k ⭐) — A React library that helps you create tooltips for your React components. It is based on the react-tooltip package and supports various props and options to customize the appearance and behavior of the tooltips. React Tooltip is easy to use, accessible, and responsive.
Floating Vue (3.2k ⭐) — A Vue library that helps you create and position tooltips, dropdowns, menus and other poppers in your Vue application. It is powered by Floating UI and supports flexible configuration, powerful theming, and accessibility. Floating Vue is easy to use, compatible, and customizable.
NanoPop (640 ⭐) — A minimalistic, small, positioning engine for JavaScript. It is built for high-performance, minimal footprint and maximum control over positioning behavior. Nanopop can be used to position tooltips, popovers, dropdowns and other floating elements near a reference element.
Bootstrap Tooltips — A component of the Bootstrap (168k ⭐) framework that helps you add custom tooltips with CSS and JavaScript using CSS3 for animations and data-attributes for local title storage. They rely on the Popper.js library for positioning and offer various options to customize the appearance and behavior of the tooltips. Bootstrap tooltips are opt-in for performance reasons, so you must initialize them yourself.

You might also like:

How to take unlimited arguments in JavaScript

byby.dev — Sun, 12 May 2024 15:03:50 +0000

Some functions are designed to be very flexible and general-purpose. By allowing an arbitrary number of arguments, a function can adapt to a variety of situations. For example:

A function that calculates the sum of any number of numbers.
Logging functions that can take multiple arguments to be printed.
Function wrappers or decorators to modify the behavior of functions.
A function that formats a string with dynamic content.

There are two ways to take unlimited number of arguments in a JavaScript function: one is to use the arguments object, the other is to use the rest parameter syntax.

Using arguments object

The arguments object in JavaScript is an array-like object that is available inside every non-arrow function. It contains the values of the arguments passed to that function. You can use it to access the arguments by their index, or iterate over them with a loop.

function sum() {
  var total = 0;
  for (var i = 0; i < arguments.length; i++) {
    total += arguments[i];
  }
  return total;
}

console.log(sum(1, 2, 3)); // 6
console.log(sum(4, 5, 6, 7)); // 22

Using rest parameters

The use of the arguments object has some drawbacks and is considered an older style. In modern JavaScript, it's often better to use rest parameters (...) to gather up remaining arguments into a real array. Rest parameters provide more flexibility and are more readable.

function sum(...nums) {
  var total = 0;
  for (var num of nums) {
    total += num;
  }
  return total;
}

console.log(sum(1, 2, 3)); // 6
console.log(sum(4, 5, 6, 7)); // 22

Rest parameters also come with the benefits of being a real array and are easier to work with compared to the arguments object, which is array-like but not a true array.

Top 10 JavaScript Animation Libraries

byby.dev — Thu, 09 May 2024 14:19:43 +0000

Animation in JavaScript has advanced drastically in all directions you can imagine, from animating text or an image to full-fledged 3D animation with tools like WebGL. There are many libraries that work with the canvas and WebGL to create interactive experiences.

When implementing animations, it is essential to consider performance, user experience, and the purpose of the animation. Too many or overly complex animations can negatively impact performance and distract users. It's important to strike a balance and ensure that animations enhance the overall user experience.

Three.js (99.1k ⭐) — A popular JavaScript library used for creating and displaying 3D computer graphics on the web. It provides a high-level API that abstracts away the complexities of WebGL, a low-level graphics API, making it easier for developers to work with 3D graphics in the browser.
Anime.js (48.8k ⭐) — A lightweight library with a simple API that can animate HTML, CSS, JS, SVG and DOM attributes. It has a built-in staggering system, callbacks and controls, and various easing and animation effects.
Lottie (29.7k ⭐) — A library that renders Adobe After Effects animations exported as JSON with the Bodymovin plugin. It allows you to use complex animations created by designers without coding them manually.
ScrollReveal (22.1k ⭐) — A library for easily animating elements as they enter/leave the viewport. It was designed to be robust and flexible, but hopefully you’ll be surprised below at how easy it is to pick up.
Popmotion (19.8k ⭐) — Tiny animator's toolbox supports keyframe and spring animations for numbers, colors and complex strings.
Mo.js (18.3k ⭐) — Motion graphics library provides built-in components to start animating from scratch like html, shape, swirl, burst and stagger, but also bring you tools to help craft your animation in a most natural way.
Velocity.js (17.3k ⭐) — A library that combines the best of jQuery and CSS transitions. It can animate colors, transforms, loops, easings, SVGs and more. It can work with or without jQuery and has a high performance.
GSAP (18.7k ⭐) — A library for building high-performance animations that work in every major browser. It can animate anything on the web, including CSS, SVG, canvas, React, Vue and more. It has advanced features like motion paths, physics, morphing and more.
ScrollMagic (14.8k ⭐) — A library for creating scroll interactions with JavaScript and CSS. It can trigger animations based on scroll position and pin elements within the viewport. It has over 11K stars on GitHub.
Typed.js (14.8k ⭐) — A library that types. Enter in any string, and watch it type at the speed you've set, backspace what it's typed, and begin a new sentence for however many strings you've set.

It's worth noting that different animation libraries may have additional features or specialize in certain types of animations, such as SVG animations, particle effects, or physics-based animations. When choosing a JavaScript animation library, it's important to consider the specific requirements and constraints of your project to find the library that best suits your needs.

You might also like:

How to parse and format a date in JavaScript

byby.dev — Wed, 08 May 2024 14:00:24 +0000

Parsing and formatting dates in JavaScript can be error-prone and require careful consideration of different time zones and date formats. Even JavaScript provides several built-in methods and objects, you might need a library to ensure that your applications handle dates consistently and accurately, regardless of where the date comes from or how it is displayed.

Working with a date involves converting to and from a specific format. The format can include different components such as the day, month, and year, as well as separators like slashes or dashes. There are several common date formats used around the world, including:

- ISO 8601: YYYY-MM-DDTHH:mm:ss.sssZ (e.g. 2022-05-30T00:00:00.000Z)
- Short date: mm/dd/yyyy or dd/mm/yyyy (e.g. 04/24/2023 or 24/04/2023)
- Long date: MMMM dd, yyyy (e.g. April 24, 2023)
- RFC 2822: EEE, dd MMM yyyy HH:mm:ss GMT (e.g. Mon, 24 Apr 2023 00:00:00 GMT)
- Unix timestamp: the number of seconds or milliseconds since January 1, 1970 (e.g. 1640256000)

In this tutorial, we will focus on the "dd/mm/yyyy" format and explore various ways to parse, format, and manipulate dates in this format using JavaScript. This format is the standard way of representing dates in many countries.

Parse a date

In JavaScript, parsing a date means converting a string representation of a date into a Date object. This is often necessary when working with dates that are obtained from external sources such as APIs or user input fields.

JavaScript provides several methods for parsing dates, such as Date.parse() and new Date() constructor. It's important to note that the date string must be in a specific format that can be recognized by the parsing method. Common formats include ISO 8601, RFC 2822, and short date formats such as "mm/dd/yyyy" or "dd/mm/yyyy".

// Parse an ISO date string
const ms = Date.parse("2022-05-30T00:00:00.000Z");
console.log(ms); // 1651296000000

// Parse a non-ISO date string (may not work in some browsers)
const ms2 = Date.parse("30/05/2022");
console.log(ms2); // NaN

// Create a Date object from an ISO date string
const dt = new Date("2022-05-30T00:00:00.000Z");
console.log(dt); // 2022-05-30T00:00:00.000Z

// Create a Date object from numbers
const dt2 = new Date(2022, 4, 30); // Note: month is zero-based
console.log(dt2); // 2022-05-29T17:00:00.000Z

Check out those libraries in formatting section below, they also provide robust parsing capabilities. In addition to supporting a wide range of date formats, they also offer features like fuzzy parsing, which can interpret partial or ambiguous dates based on context.

Once a date is parsed in JavaScript and converted to a Date object, it can then be formatted into a string with a specific date format.

Format a date

There are different ways to format a date as "dd/mm/yyyy" in JavaScript, depending on your preference and use case. Here are some possible solutions:

Using toLocaleDateString() method with a locale parameter of 'en-GB' to get the date in dd/mm/yyyy format. It does not provide full control over the formatting of the date string, as it relies on the formatting rules and conventions defined by the locale.

const date = new Date();

// British English uses day-month-year order
console.log(date.toLocaleDateString('en-GB')); // 24/04/2023

// US English uses month-day-year order
console.log(date.toLocaleDateString("en-US")); // 04/24/2023

You can use the getDate(), getMonth() and getFullYear() methods to get the day, month and year of the date, and then concatenate them with slashes. You may need to add a leading zero to the day and month digits if they are less than 10. For example:

const today = new Date();
const yyyy = today.getFullYear();
let mm = today.getMonth() + 1; // month is zero-based
let dd = today.getDate();

if (dd < 10) dd = '0' + dd;
if (mm < 10) mm = '0' + mm;

const formatted = dd + '/' + mm + '/' + yyyy;
console.log(formatted); // 24/04/2023

Day.js (45.3k ⭐) — A minimalist library that offers an excellent API without much overhead. It is very similar to Moment.js but much smaller in size. It also supports plugins for additional features.

const dayjs = require("dayjs");

const dt = dayjs("2022-05-30T00:00:00.000Z");
const formatted = dt.format("dd/MM/yyyy");
console.log(formatted); // 30/05/2022

Date-fns (33.3k ⭐) — A library that offers great documentation, functional architecture, and utilities that handle almost any task you can think of. It has a modular design that allows you to import only the functions you need.

const { format } = require('date-fns');

const today = new Date();
const formatted = format(today, 'dd/MM/yyyy');
console.log(formatted); // 24/04/2023

Luxon (14.7k ⭐) — A library that leverages JavaScript’s Intl for speed and slimness while providing what Intl doesn’t: an immutable user-friendly API. It also supports time zones and localization.

const { DateTime } = require("luxon");

const dt = DateTime.fromFormat("31/12/2022", "dd/MM/yyyy");
const formatted = dt.toFormat("dd/MM/yyyy");
console.log(formatted); // 31/12/2022

Advanced string formatting with f-strings in Python

byby.dev — Tue, 07 May 2024 14:46:50 +0000

F-strings (formatted string literals) are a way to embed expressions inside string literals, introduced in Python 3.6, and provide a concise and readable syntax for string formatting.

Begin your string literal with either lowercase f or uppercase F. This indicates that it's an f-string. Place expressions within curly braces {} where you want to insert their values into the string. These can be variables, calculations, function calls, or any valid Python expression.

These expressions are evaluated at runtime, and their values are inserted into the string. Here's a basic example of how you can use f-strings for string formatting:

name = "Alice"
age = 30
city = "New York"

message = f"Hello, {name}! You are {age} years old and live in {city}."

print(message)
# Hello, Alice! You are 30 years old and live in New York.

An optional format specifier can follow the expression. Format specifications are used within replacement fields contained within a format string to define how individual values are presented. Each formattable type may define how the format specification is to be interpreted.

Numeric precision

The concept of numeric precision is crucial when working with floating-point numbers. You can control numeric precision through formatting options by using :.nf to specify the number of decimal places for a floating-point number, where n is an integer.

price = 123.456789

# Format to two decimal places
formatted_price_2 = f"Price: ${price:.2f}"
print(formatted_price_2)  # Output: Price: $123.46

# Format to three decimal places
formatted_price_3 = f"Price (3 decimals): ${price:.3f}"
print(formatted_price_3)  # Output: Price (3 decimals): $123.457

# Format to no decimal places (integer rounding)
formatted_price_int = f"Price (rounded): ${price:.0f}"
print(formatted_price_int)  # Output: Price (rounded): $123

String alignment and width

You can use :<w, :>w, or :^w to align a string to the left, right, or center within a given width w, where w is an integer. For example, f"{name:>10}" will right-align the name within 10 spaces.

# Left alignment
name = "Alice"
print(f"Hello, {name:<10}!") # Output: Hello, Alice     !

# Right alignment
name = "Bob"
print(f"Hello, {name:>10}!") # Output: Hello,        Bob!

# Center alignment
name = "Charlie"
print(f"Hello, {name:^10}!") # Output: Hello,  Charlie !

Type-specific formatting

You can use :t to apply type-specific formatting to a value, where t is a character that represents the type. For example, :b for binary, :x for hexadecimal, :e for scientific notation, :% for percentage, etc.

# Binary format
num = 42
print(f"{num:b}") # Output: 101010

# Hexadecimal format
num = 255
print(f"{num:x}") # Output: ff

# Scientific notation format
num = 123456789
print(f"{num:e}") # Output: 1.234568e+08

# Percentage format
num = 0.75
print(f"{num:%}") # Output: 75.000000%

Zero-padding numbers

You can use :0w to pad a number with leading zeros within a given width w, where w is an integer. For example, f"{7:03}" will output 007.

# Padding numbers with zeros
num = 42
print(f"The answer is {num:04}.") # Output: The answer is 0042.

Date and time formatting

In f-strings, you can use a variety of format specifiers for formatting date and time using the datetime module. These format specifiers are similar to the ones used with the strftime method. Here are some common date and time format specifiers:

%Y: Year with century as a decimal number (e.g., 2022).
%y: Year without century as a zero-padded decimal number (e.g., 22).
%m: Month as a zero-padded decimal number (01, 02, ..., 12).
%d: Day of the month as a zero-padded decimal number (01, 02, ..., 31).
%H: Hour (00, 01, ..., 23).
%M: Minute (00, 01, ..., 59).
%S: Second (00, 01, ..., 59).
%A: Weekday as a full name (Monday, Tuesday, ..., Sunday).
%a: Weekday as an abbreviated name (Mon, Tue, ..., Sun).
%B: Month as a full name (January, February, ..., December).
%b or %h: Month as an abbreviated name (Jan, Feb, ..., Dec).
%p: AM or PM.

Here's an example of using these format specifiers in f-strings:

# Import the datetime module
import datetime

# Create a datetime object with the current date and time
now = datetime.datetime.now()

# Format the datetime object using f-strings and format specifiers
print(f'The current date is {now:%Y-%m-%d}.')
print(f'The current time is {now:%H:%M:%S}.')
print(f'The current date and time is {now:%Y-%m-%d %H:%M:%S}.')

# Output:
# The current date is 2024-02-13.
# The current time is 16:33:42.
# The current date and time is 2024-02-13 16:33:42.

Top 7 Text-to-Image Generative AI Models

byby.dev — Mon, 06 May 2024 12:19:20 +0000

Text-to-image generative models are machine learning models that can generate images from natural language descriptions. For example, if you give these models a prompt like “a cat wearing a hat”, they will try to create an image that matches that description as closely as possible.

These models have become more advanced and realistic in recent years, thanks to the development of deep neural networks, diffusion models, large-scale datasets, and powerful computing resources. Ranking them is not an easy task, as different models may have different strengths and weaknesses, such as image quality, diversity, resolution, speed, and creativity.

Midjourney: One of the best text-to-image generative AI models that you can use to create amazing images from text. Currently, Midjourney is only accessible via a Discord bot, which can also be loaded onto a third-party server.
DALL-E 3: An improved version of DALL-E 2, developed by OpenAI. It can create realistic images and art from a description in natural language. It can also combine concepts, attributes, and styles in various ways, such as creating anthropomorphic versions of animals and objects, rendering text, and applying transformations to existing images.
Stable Diffusion: It is based on a kind of diffusion model called a latent diffusion model, which is trained to remove noise from images in an iterative process. It is one of the first text-to-image models that can run on consumer hardware and has its code and model weights publicly available.
Imagen: A text-to-image generation model that uses diffusion models and large transformer language models. Imagen is based on the research paper "Imagen: Text-to-Image Diffusion Models" by Google Research, Brain Team.
Muse: A text-to-image generation model that uses masked generative transformers. Muse can create realistic and diverse images from natural language descriptions. It can also edit images in various ways, such as inpainting, outpainting, and mask-free editing.
DreamBooth: Developed by researchers from Google Research and Boston University in 2022. It can take a small set of images of a specific subject use them to train a text-to-image model to generate more images of that subject based on natural language.
DreamFusion: A text-to-3D model using a pretrained 2D text-to-image diffusion model to perform text-to-3D synthesis. The resulting 3D model of the given text can be viewed from any angle, relit by arbitrary illumination, or composited into any 3D environment.

Honorable mentions

GLIGEN: A novel approach that builds upon and extends the functionality of existing pre-trained text-to-image diffusion models by enabling them to also be conditioned on grounding inputs. It is a zero-shot method, meaning that it does not require any fine-tuning or re-training of the pre-trained text-to-image diffusion models.
pix2pix-zero: A diffusion-based image-to-image approach that allows users to specify the edit direction on-the-fly. This method can directly use pre-trained text-to-image diffusion models, such as Stable Diffusion, for editing real and synthetic images while preserving the input image's structure.

Common features

These models use foundation models or pretrained transformers, which are large neural networks that are trained on massive amounts of unlabeled data and can be used for different tasks with additional fine-tuning.

They use diffusion-based models, which are generative models that produce images by gradually adding noise to an initial image and then reversing the process. These models can generate high-resolution images with fine details and realistic textures.

They use grounding inputs or spatial information, which are additional inputs that can guide the generation process to adhere to the composition specified by the user. These inputs can be bounding boxes, keypoints, or images, and can be used to control the layout, pose, or style of the generated image.

They use neural style transfer or adversarial networks, which are techniques that allow the models to apply different artistic styles to the generated images, such as impressionism, cubism, or abstract. These techniques can create beautiful and unique artworks from text inputs.

They use natural language requests or text prompts, which are the main inputs that the models use to generate images. These requests do not require knowledge of or entering code, and can be simple or complex, descriptive or abstract, factual or fictional. The models use what they have learned from their training data to generate images that they believe correspond to the requests.

Top 10 SVG Pattern Generators

byby.dev — Sun, 05 May 2024 12:55:03 +0000

An SVG pattern generator is a tool that creates unique and customizable patterns using Scalable Vector Graphics (SVG). The generator allows you to adjust parameters such as color, size, shape, and pattern density to create a pattern that fits specific needs.

Hero Patterns: A collection of repeatable SVG background patterns for you to use on your web projects.
Softr: A free tool made by Softr for creating random organic-looking shapes that can be used to add a nice touch to your landing page design, video thumbnail, social media banner, or any other visual.
BGJar: Free svg background generator for your websites, blogs and app.
fffuel: a collection of color tools and free SVG generators for gradients, patterns, textures, shapes & backgrounds.
SVG Doodles!: A free collection of 50 different editable SVG's to spice up your online and offline designs.
PatternPad: It generates graphical patterns based on a variety of parameters. This results in an endless number of variations. You can choose from popular styles or create your own individual pattern.
SVGeez: Totally awesome, well-stretched CSS svg background patterns, free for download.
VISIWIG: This tool allows users to customize seamless patterns, change the size, rotation, color, and stroke width of the patterns.
Pattern Monster: A simple online pattern generator to create repeatable SVG patterns. Perfect for website backgrounds, apparel, branding, packaging design and more.
Super Designer: This tool lets you create Doodle-like patterns using a tile system.

SVG pattern generators are often used to create visually appealing backgrounds for websites, presentations, or social media graphics. These patterns can add texture and depth to a design without making the background too busy or distracting.

In print design, SVG patterns can be used to create decorative elements for brochures, posters, flyers, and other printed materials. They can enhance the visual appeal of the design and make it more memorable.

You might also like:

How to remove last character from string in JavaScript

byby.dev — Sat, 04 May 2024 14:44:47 +0000

There are many scenarios where you may need to remove the last character from a string. For example, you may want to:

Remove a trailing slash or comma from a URL or a list
Remove a newline or carriage return character from a text file
Remove a punctuation mark from a sentence or a word
Remove a digit or a letter from a number or a code

In JavaScript, common approachs are to use the substring() or slice(), which allow you to extract a portion of a string based on the starting and ending indices. By specifying a range that excludes the last character, you effectively remove it from the string.

Using slice method

The slice() method of String is used to extract a part of a string and return it as a new string, without modifying the original string. You can specify the start and end indexes of the extracted part, or use negative indexes to count from the end of the string.

let str = "Hello world!";
str = str.slice(0, -1);
console.log(str); // "Hello world"

Here slice(0, -1) removes the last character because -1 means the last index of the string. You can also use str.length - 1 instead of -1 to get the same result.

Using substring method

The substring() method of String is used to return a part of the string from a start index to an end index, excluding the end index. It does not change the original string, but returns a new string.

let str = "Hello world!";
str = str.substring(0, str.length - 1);
console.log(str); // "Hello world"

The substring(0, str.length - 1) method removes the last character because str.length - 1 is the last index of the string. You cannot use negative indexes with substring().

Using replace method

The replace() method returns a new string with one, some, or all matches of a pattern replaced by a replacement. The pattern can be a string or regular expression, and the replacement can be a string or a function called for each match.

let str = "Hello World!";
str = str.replace(/.$/, "");
console.log(str); // "Hello World"

The . within the regular expression represents any character, and the $ denotes the end of the string. So, .$ matches the last character in the string. By replacing it with an empty string, that character is removed.

Please note that if the string contains newline characters or multiple Unicode code points, the regular expression approach may not behave as expected. In such cases, using substring() or slice() methods might be more suitable.

Forem: byby.dev

Compare two strings ignoring case in JavaScript

Converting strings to the same case

Using locale compare method

Using regular expressions

How to check if a variable is list in Python

Using type() function

Using isinstance() function

Using __class__ attribute

How to shuffle an array in JavaScript

Using Fisher-Yates algorithm

Using sort method with random compare

Using a library like Lodash

Converting between strings and numbers in JavaScript

Primitive types vs wrapper types

Number special values

Converting strings to numbers

Converting numbers to strings

Potential pitfalls

Top 9 CSS and JavaScript Tooltip Libraries

How to take unlimited arguments in JavaScript

Using arguments object

Using rest parameters

Top 10 JavaScript Animation Libraries

How to parse and format a date in JavaScript

Parse a date

Format a date

Advanced string formatting with f-strings in Python

Numeric precision

String alignment and width

Type-specific formatting

Zero-padding numbers

Date and time formatting

Top 7 Text-to-Image Generative AI Models

Honorable mentions

Common features

Top 10 SVG Pattern Generators

How to remove last character from string in JavaScript

Using slice method

Using substring method

Using replace method

Using `type()` function

Using `isinstance()` function

Using `class` attribute