DEV Community: The Monkey Dev

3 resources from Beginner to PRO to learn Ruby on Rails

The Monkey Dev — Thu, 25 Apr 2024 10:01:05 +0000

TL;DR

Enjoy!

Rails Guides: Your Go-To for Beginners

Picture this: you're a Rails newbie, staring blankly at your screen, wondering where to start.

Rails Guides is here to rescue you from the depths of confusion!

It's like having a wise old guru guiding you through the mystical forest of Rails, one step at a time.

From setting up your environment to mastering MVC, and core concepts, consider this your beginner's handbook.

GoRails: Gems and Tools

Alright, champ, you've mastered the basics, but now it's time to learn more about what the Rails community has to offer: Gems and tools! GoRails is the perfect place for this. You'll learn how to use the Bunny API, create Rails generators, install and configure Whisper, etc...

RubyCademy: PRO Tips and Advanced Techniques and Patterns

if you want to master Rails, RubyCademy is probably your best ally.

It's the best resource to learn how to combine advanced Ruby concepts, design patterns, SOLID principles, and Ruby/Rails tools to create flexible, decoupled solutions. It only focuses on real-world examples.

Conclusion

So there you have it, folks! With Rails Guides, GoRails, and RubyCademy by your side, you'll be slinging code like a seasoned pro in no time.

The evolution of Javascript Strings over the years

The Monkey Dev — Sat, 25 Feb 2023 16:53:36 +0000

In Javascript, the String object is used to represent and manipulate a sequence of characters. Strings are useful for holding data that can be represented in text form.

Javascript Strings implementation has evolved through time.

So, in this article, we are going to cover the 6 major changes that occurred for Javascript strings.

1. Unicode support

Prior to ES6 (ECMAScript 2015), JavaScript had limited support for Unicode characters.

So, one of the most significant additions to Unicode support in ES6 was the introduction of Unicode code point escapes.

This feature allows developers to represent Unicode characters using their code point values, rather than relying on character literals.

For example, prior to ES6, if you wanted to represent the character "💩" (a popular Unicode emoji), you would need to use a UTF-16 surrogate pair like this: "\uD83D\uDCA9". With code point escapes in ES6, you can represent the same character using its code point value, like this: "\u{1F4A9}".

Here's an example of how code point escapes can be used in practice:

// Using UTF-16 surrogate pairs:
const poop1 = "\uD83D\uDCA9";

// Using Unicode code point escapes:
const poop2 = "\u{1F4A9}";

console.log(poop1 === poop2); // true

This code creates two string variables, poop1 and poop2, that both represent the "💩" character.

The first variable uses UTF-16 surrogate pairs to encode the character, while the second variable uses a code point escape.

The console.log() statement then compares the two variables, which returns true because they both represent the same character.

Using code point escapes allows developers to work with a wider range of Unicode characters, including those that cannot be represented using UTF-16 surrogate pairs. This makes it easier to work with text in different languages and writing systems, and can improve the accuracy and reliability of string processing.

2. Template literals

Template literals were introduced in ES6 as a new way to create strings in JavaScript. They allow developers to embed expressions and variables directly into string literals using interpolation, instead of using concatenation or string manipulation methods.

Here's an example of how template literals can be used in practice:

const name = "Alice";
const age = 27;
const message = `Hello, my name is ${name} and I am ${age} years old.`;

console.log(message);

In this code, we define two variables name and age that contain a person's name and age. We then create a message variable using a template literal that includes the name and age variables using interpolation. The resulting string is "Hello, my name is Alice and I am 27 years old.".

Template literals can also be used to create multi-line strings, which is much simpler than using escape characters or concatenation with regular string literals. Here's an example:

const poem = `
  I wandered lonely as a cloud
  That floats on high o'er vales and hills,
  When all at once I saw a crowd,
  A host, of golden daffodils;
  Beside the lake, beneath the trees,
  Fluttering and dancing in the breeze.
`;

console.log(poem);

In this code, we define a poem variable using a multi-line template literal. The resulting string includes line breaks and whitespace that are preserved in the output. The console.log() statement then displays the poem as formatted text.

Overall, template literals make it easier to create and manipulate strings in JavaScript, especially when working with dynamic content and multi-line text. They offer a more concise and readable syntax compared to traditional string manipulation methods.

3. String methods

JavaScript has always had a rich set of string manipulation methods, but new methods have been added in recent versions of the language.

For example, ES2019 added two new methods to the String.prototype object: trimStart() and trimEnd(). These methods are similar to the existing trim() method, but they only remove whitespace characters from the beginning or end of a string, respectively.

Here's an example of how these methods can be used in practice:

const greeting = "   Hello, world!   ";

console.log(greeting.trim()); // "Hello, world!"
console.log(greeting.trimStart()); // "Hello, world!   "
console.log(greeting.trimEnd()); // "   Hello, world!"

In this code, we define a greeting variable that contains a string with leading and trailing whitespace. We then call the trim(), trimStart(), and trimEnd() methods on the greeting variable, respectively.

The trim() method removes all leading and trailing whitespace characters from the string, resulting in the trimmed string "Hello, world!".

The trimStart() method removes only the leading whitespace characters from the string, resulting in the trimmed string "Hello, world! ".

The trimEnd() method removes only the trailing whitespace characters from the string, resulting in the trimmed string " Hello, world!".

4. Unicode normalization

ES6 also introduced the String.prototype.normalize() method, which allows developers to normalize Unicode strings, reducing the risk of errors due to different Unicode character encodings.

The two main normalization forms are NFC (Normalization Form Canonical Composition) and NFD (Normalization Form Canonical Decomposition), which are defined by the Unicode standard.

Here's an example of how to use the normalize() method in ES6 to normalize a string to its NFC form:

const str = "\u1E9B\u0323"; // A Latin small letter sharp s with dot below

console.log(str); // "ẛ̣"
console.log(str.normalize("NFC")); // "ṩ"

In this code, we define a str variable that contains a string with a Latin small letter sharp s with dot below, which can be represented in two different ways in Unicode. We then call the normalize() method on the str variable with the argument "NFC" to normalize the string to its NFC form. The resulting normalized string is "ṩ", which is the canonical form of the character according to the Unicode standard.

Similarly, we can use the normalize() method with the argument "NFD" to normalize a string to its NFD form:

const str = "\u1E9B\u0323"; // A Latin small letter sharp s with dot below

console.log(str); // "ẛ̣"
console.log(str.normalize("NFD")); // "ṩ"

In this example, the normalize() method is called with the argument "NFD", resulting in a normalized string of "ṩ".

Unicode normalization can be important for accurate text processing, sorting, and searching, especially when working with multilingual text or text that contains combining characters or other diacritics.

5. Raw strings

In ES6, the language also added the ability to create raw strings using template literals.

A raw string is a string literal that allows backslashes to be interpreted as literal backslashes, instead of escape characters. To create a raw string, we can use the String.raw() method with a template literal.

Here's an example of how to use the String.raw() method to create a raw string:

const path = String.raw`C:\Users\Username\Documents\file.txt`;
console.log(path); // "C:\\Users\\Username\\Documents\\file.txt"

In this code, we define a path variable that contains a Windows file path as a raw string using the String.raw() method.
The resulting string is "C:\\Users\\Username\\Documents\\file.txt", which contains literal backslashes instead of escape characters.

Raw strings can be particularly useful when working with regular expressions, where backslashes are commonly used as escape characters. They can also be useful when working with file paths or other strings that contain a large number of backslashes.

6. Performance improvements

Finally, the latest versions of JavaScript have seen significant performance improvements, including faster string operations.

Indeed, JavaScript engine developers are constantly improving the performance of JavaScript strings with each new release of the language.

Here are a few examples of performance improvements that have been made to JavaScript strings in recent versions:

Faster String concatenation: In versions prior to ES2015, concatenating strings using the + operator was inefficient due to the creation of temporary string objects.

However, in later versions of JavaScript, including ES2015 and later, concatenating strings using template literals or the String.prototype.concat() method is much faster and more efficient.

const firstName = "John";
const lastName = "Doe";
const fullName = `${firstName} ${lastName}`; // Using template literals is faster than using the '+' operator

console.log(fullName); // "John Doe"

Faster String indexing: In earlier versions of JavaScript, accessing individual characters in a string using bracket notation (str[index]) was relatively slow. However, in recent versions of JavaScript, including ES2015 and later, indexing into strings has been optimized to be much faster, making it a viable option for high-performance string processing.
Improved String matching: In older versions of JavaScript, regular expressions used for string matching could be slow and inefficient. However, in later versions of JavaScript, including ES2015 and later, regular expressions have been optimized to be much faster, making string matching a faster and more efficient operation.

const str = "The quick brown fox jumps over the lazy dog";
const regex = /quick/;

console.log(regex.test(str)); // Regular expression matching is faster in the latest versions of JavaScript

These are just a few examples of the performance improvements made to JavaScript strings in recent versions of the language. As JavaScript continues to evolve, developers can expect even more optimizations and improvements to string processing performance.

Conclusion

Overall, the evolution of JavaScript's string handling capabilities has made it easier for developers to work with strings in a wide range of contexts, including Unicode support, interpolation, and manipulation. The addition of raw strings and performance improvements have also made JavaScript code more robust and efficient.

Say Goodbye to Slow Load Times with this HTTP/3 protocol!

The Monkey Dev — Fri, 24 Feb 2023 12:57:56 +0000

https://medium.com/@lokiju_jukilo/say-goodbye-to-slow-load-times-with-this-http-3-protocol-b308d0eddb3a

The bridge design pattern in Javascript

The Monkey Dev — Thu, 23 Feb 2023 12:13:12 +0000

What is the Bridge Design Pattern?

The Bridge design pattern is a structural design pattern that separates the abstraction of an object from its implementation so that they can be developed independently.

It does this by creating a bridge between the abstraction and the implementation, allowing them to vary independently of each other.

The Bridge pattern consists of two main components:

Abstraction: This defines the high-level interface of an object, and delegates the implementation details to an Implementor object.
Implementor: This defines the interface for concrete implementations, which are then used by the Abstraction object.

By separating the Abstraction from the Implementor, the Bridge pattern provides greater flexibility and extensibility to the system. It also allows the Abstraction and the Implementor to vary independently, which can lead to more reusable code.

Overall, the Bridge pattern is useful in situations where there are multiple implementations of an abstraction, and where changes to the implementation should not affect the Abstraction interface.

This pattern is commonly used in GUI toolkits, where the abstraction is the widget, and the implementor is the toolkit-specific code that renders the widget.

Implementation

Here's an example of how the Bridge design pattern can be implemented in JavaScript:

// Implementation interface
class Implementor {
  operation() {}
}

// Concrete implementation classes
class ConcreteImplementorA extends Implementor {
  operation() {
    return "ConcreteImplementorA";
  }
}

class ConcreteImplementorB extends Implementor {
  operation() {
    return "ConcreteImplementorB";
  }
}

// Abstraction interface
class Abstraction {
  constructor(implementor) {
    this.implementor = implementor;
  }

  operation() {}
}

// Refined abstraction classes
class RefinedAbstraction extends Abstraction {
  operation() {
    return `RefinedAbstraction with ${this.implementor.operation()}`;
  }
}

// Usage
const implementorA = new ConcreteImplementorA();
const implementorB = new ConcreteImplementorB();
const abstraction1 = new RefinedAbstraction(implementorA);
const abstraction2 = new RefinedAbstraction(implementorB);

console.log(abstraction1.operation()); // Output: RefinedAbstraction with ConcreteImplementorA
console.log(abstraction2.operation()); // Output: RefinedAbstraction with ConcreteImplementorB

In this example, the Implementor interface defines the operations that concrete implementors must implement. The ConcreteImplementorA and ConcreteImplementorB classes are two examples of concrete implementors that implement the operation method in their own way.

The Abstraction interface defines the methods that abstractions must implement. In this case, we only have one method, operation, which is delegated to the implementor object. The RefinedAbstraction class is a concrete implementation of Abstraction that uses a specific Implementor object to perform its operation.

Finally, we create two instances of RefinedAbstraction, each with a different Implementor object. We call the operation method on each instance to see the output, which demonstrates how the Bridge pattern allows us to separate the abstraction from its implementation.

Thank you for taking the time to read this article! 😄

DEV Community: The Monkey Dev

3 resources from Beginner to PRO to learn Ruby on Rails

TL;DR

Rails Guides: Your Go-To for Beginners (FREE)

GoRails: Gems and tools ($190/year)

RubyCademy: Pro Tips and Advanced Patterns ($80/year)

Rails Guides: Your Go-To for Beginners

GoRails: Gems and Tools

RubyCademy: PRO Tips and Advanced Techniques and Patterns

Conclusion

The evolution of Javascript Strings over the years

1. Unicode support

2. Template literals

3. String methods

4. Unicode normalization

5. Raw strings

6. Performance improvements

Conclusion

Say Goodbye to Slow Load Times with this HTTP/3 protocol!

The bridge design pattern in Javascript

What is the Bridge Design Pattern?

Implementation