Code with Hugo

Converting images to data URLs using the Mac OS command line is a fun demonstration of the command line’s capabilities. To convert an image file to a data URL, we can use the following shell function: function img-data() { TYPE=$(file --mime-type -b $1) ENC=$(base64 $1) ech ...

There’s an opinion that PHP is dead today, but is this true? Should we believe in this or only people who don’t like PHP are sharing this news? Why do people hate PHP? Let’s take a closer look at PHP and try to predict its future. ...

More and more colleges offer their students the opportunity to try their hand in coding. With technologies continuing making massive inroads people’s our everyday lives, such professions as a computer programmer, web developer, software engineer, mobile app developer, and o ...

Here are 2 ways to disable a HTML <a> link/anchor element using CSS or by using inline JavaScript. ...

The “Hello World” of JavaScript frameworks and libraries seems to have become the todo app. In the case of Alpine.js a todo app is almost too large to showcase Alpine’s core benefits and use case. Another issue with a lot of JavaScript examples is that they fore ...

The core Alpine.js functionality beyond toggling visibility, displaying data in HTML textContent and binding HTML attributes to data is listening for events using Alpine.js. Listening to events with x-on is usually coupled with state updates, for example we can create the followi ...

We’ve seen how to print out values using x-text and toggle visibility of elements based on them with x-show. We’ll now see how to set the value of HTML attributes using x-bind. In this example we’ll display and image based on data that’s in our Alpine.js i ...

In Alpine.js the directive used to toggle visibility of an element is x-show. Per the Alpine.js README, “x-show toggles the display: none; style on the element depending if the expression resolves to true or false”. ...

GitHub Pull Request Review workflow is great. What I particularly like is the “file viewed” toggle, which mean that I’m not tempted to re-review the whole Pull Request when a single file has changed and I’ve already checked the rest of them. However there ...

The simplest Alpine.js application is the following HTML file. It loads Alpine.js version 2+ from the JSDelivr CDN using a script tag and has an Alpine.js component with x-data="{ msg: 'Hello Alpine.js' }" and a p element with x-text="msg". ...