Saturday, July 27

Javascript

27Feb By phpInfoNo Comments
CSS Tricks, Javascript, Web Tricks

Getting Started With the File System Access API

The File System Access API is a web API that allows read and write access to a user’s local files. It unlocks new capabilities to build powerful web applications, such as text editors or IDEs, image editing tools, improved import/export, all in the frontend. Let’s look into how to get started using this API. Reading files with the File System Access API Before diving into the code required to read a file from the user’s system, an important detail to keep in mind is that calling the File System Access API needs to be done by a user gesture, in a secure context. In the following example, we’ll use a click event. Reading from a single file Reading data from a file can be done in less than 10 lines of code. Here’s an example code sample: let fileHandle; document.querySelector(".pick-file"...
Read More
2Feb By phpInfoNo Comments
Javascript, Web Tricks

How to disable the mobile keyboard from displaying on click of the input field

Have you ever needed a way to disable the mobile screen keyboard from displaying for a specific input field? I was recently working on a Shopify website where there was a filter on the products listing page. I found an issue that on click of that filter it was opening keyword on the mobile screen. I debugged and found that it's a bootstrap filter and creating an input box automatically at run time. The solution to this was rather simple and I’d like to share it here for anyone else who is looking for a solution to this problem. To block the mobile device keyboard from displaying you simply need to set the field to readonly with jQuery as displayed in the code below. // Using ID field$('#input_id').attr('readonly','readonly'); // Using class name$('.input_class').attr('reado...
Read More
14Dec By phpInfoNo Comments
CSS Tricks, Javascript

Let’s Create a Lightweight Native Event Bus in JavaScript

An event bus is a design pattern (and while we’ll be talking about JavaScript here, it’s a design pattern in any language) that can be used to simplify communications between different components. It can also be thought of as publish/subscribe or pubsub. The idea is that components can listen to the event bus to know when to do the things they do. For example, a “tab panel” component might listen for events telling it to change the active tab. Sure, that might happen from a click on one of the tabs, and thus handled entirely within that component. But with an event bus, some other elements could tell the tab to change. Imagine a form submission which causes an error that the user needs to be alerted to within a specific tab, so the form sends a message to the event bus telling the tabs co...
Read More
6Nov By phpInfoNo Comments
CSS Tricks, Javascript

How to Animate the Details Element Using Web Animations API

Animating accordions in JavaScript has been one of the most asked animations on websites. Fun fact: jQuery’s slideDown() function was already available in the first version in 2006. In this article, we will see how you can animate the native <details> element using the Web Animations API. CodePen Embed Fallback HTML setup First, let’s see how we are gonna structure the markup needed for this animation. The <details> element needs a <summary> element. The summary is the content visible when the accordion is closed. All the other elements within the <details> are part of the inner content of the accordion. To make it easier for us to animate that content, we are wrapping it inside a <div>. <details> <summary>Summary of the accordion</summary&g...
Read More
2May By phpInfoNo Comments
CSS Tricks, Javascript, Web Tricks

Alpine.js: The JavaScript Framework That’s Used Like jQuery, Written Like Vue, and Inspired by TailwindCSS

We have big JavaScript frameworks that tons of people already use and like, including React, Vue, Angular, and Svelte. Do we need another JavaScript library? Let’s take a look at Alpine.js and you can decide for yourself. Alpine.js is for developers who aren’t looking to build a single page application (SPA). It’s lightweight (~7kB gzipped) and designed to write markup-driven client-side JavaScript.   The syntax is borrowed from Vue and Angular directive. That means it will feel familiar if you’ve worked with those before. But, again, Alpine.js is not designed to build SPAs, but rather enhance your templates with a little bit of JavaScript. For example, here’s an Alpine.js demo of an interactive “alert” component. CodePen Embed Fallback The alert message is two-way bound to the input using...
Read More