Legacy String Methods for Generating HTML

I'm always really excited to see new methods on JavaScript primitives. These additions are acknowledgement that the language needs to evolve and that we're doing exciting new things. That being said, I somehow just discovered some legacy String methods that you probably shouldn't use but have existed forever. Let's take a look! These legacy string methods take a basic string of text and wrap it in a HTML tag of the same name:

                            

    "Hello".big() // "Hello"
    "Hello".blink() // "Hello"
    "Hello".bold() // "Hello"
    "Hello".italics() // "Hello"

                            
                        

CSS :optional

A decade ago HTML and CSS added the ability to, at least signal, validation of form fields. The required attribute helped inform users which fields were required, while pattern allowed developers to provide a regular expression to match against an 's value. Targeting required fields and validation values with just CSS and HTML was very useful. Did you know that CSS provides :optional to allow you to style form elements that aren't required?

                        

input:optional, select:optional, textarea:optional {
border: 1px solid #eee;
}

[required] {
  border: 1px solid red;
}

                            
                        

Get a Random Array Item with JavaScript

JavaScript Arrays are probably my favorite primitive in JavaScript. You can do all sorts of awesome things with arrays: get unique values, clone them, empty them, etc. What about getting a random value from an array? To get a random item from an array, you can employ Math.random:

                            

const arr = [
            "one",
            "two",
            "three",
            "four",
            "tell",
            "me",
            "that",
            "you",
            "love",
            "me",
            "more"
        ];
        const random1 = arr[(Math.floor(Math.random() * (arr.length)))]
        const random2 = arr[(Math.floor(Math.random() * (arr.length)))]
        const random3 = arr[(Math.floor(Math.random() * (arr.length)))]
        const random4 = arr[(Math.floor(Math.random() * (arr.length)))]

        console.log(random1, random2, random3, random4)

                            
                        

Simplicity: Livewire is a Back-Ender's Comfort Zone

If you're a back-ender and need to create a project quickly with just some dynamic elements on the page, Livewire is probably your best solution. It doesn't take you outside of the comfort zone of Laravel: you kind of continue writing back-end Laravel code, creating PHP classes and Blade files. So, for Laravel developers adopting Livewire is typically faster than Inertia. Inertia comes with a prerequisite: you need to be familiar with the front-end like Vue or React. So, it is by definition more complicated and requires more knowledge than Livewire. Compare the sequence of actions. Setup of Livewire:

• Install the Livewire package via composer
• Add 2 Blade directives into the main layout

• Install the Inertia package via composer
• Add 2 Blade directives into the main layout
• Setup Inertia middleware
• Install client-side adapters: npm install @inertiajs/inertia @inertiajs/inertia-vue3
• Update the main resources/js/app.js with createInertiaApp() method