The Tech Pulse

February 1, 2025•4 min read•
Tags ▼
No tags
•
Share ▼

Let’s dive into some handy JavaScript and CSS tricks to streamline your web development workflow.

https://javascript.plainenglish.io/11-mysterious-but-interesting-front-end-tips-39f98bc416a9

Image

Checking Network Speed

Need to determine a user’s network speed? JavaScript’s Network Information API has got you covered! You can access the downlink speed (in Mbps) through navigator.connection.downlink.

if (navigator.connection) {  
    const downlink = navigator.connection.downlink;  
    console.log(`Current download speed: ${downlink} Mbps`);  
} else {  
    console.log("Network Information API not supported");  
}

Keep in mind that browser support for this API can vary.

Adding Vibration to Your Mobile App 📳

Want to add a tactile response to your mobile web app? The window.navigator.vibrate API lets you trigger device vibrations.

// Vibrate for 500ms  
if (navigator.vibrate) {  
    navigator.vibrate(500);  
} else {  
    console.log("Vibration API not supported");  
}  
  
// Create a pattern of vibration and pauses   
if (navigator.vibrate) {  
    navigator.vibrate([200, 100, 200, 100, 200]);  
}

Remember to check for browser and device compatibility before implementing vibrations.

Preventing Text Pasting

In specific scenarios, you might want to restrict users from pasting text into input fields. The following snippet shows you how.

<input type="text"></input>  
<script>  const input = document.querySelector('input');  
  
  input.addEventListener("paste", function(e){  
    e.preventDefault()  
  })</script>

Use this with caution! Preventing pasting can hinder user experience in many cases.

Hiding DOM Elements with Ease 🙈

No need to rely solely on JavaScript to hide elements. Utilize the native HTML hidden attribute.

<p hidden>I'm invisible!</p>

This has a similar effect to display: none; in CSS, making the element disappear.

Quick Positioning with inset in CSS 📍

Ditch the verbose top, left, right, bottom properties in CSS! The insetproperty streamlines your positioning.

/* Verbose way */   
div {  
  position: absolute;  
  top: 0;  
  left: 0;  
  bottom: 0;  
  right: 0;  
}  
  
/* With inset */   
div {  
  position: absolute;  
  inset: 0;   
}

This not only makes your CSS cleaner but also more efficient!

Beyond console.log() - Uncommon Console Tricks

While console.log() is a debugging staple, the browser's console offers much more.

  • console.table(): Displays arrays or objects in a neat table format.
const data = [  
      { name: 'Alice', age: 25 },  
      { name: 'Bob', age: 30 }  
  ];  
   console.table(data);
  • console.group() and console.groupEnd(): Groups related logs for better organization.
console.group('Group Label');  
   console.log('Log message 1');  
   console.log('Log message 2');  
   console.groupEnd();
  • console.time() and console.timeEnd(): Measures the execution time of your code.
console.time('myTimer');  
   // Your code here   
   console.timeEnd('myTimer'); // Outputs the time taken
  • console.error(), console.warn(), console.assert(): Output errors, warnings, and assertions for more effective debugging.
  • console.clear(): Clears the console.
  • console.dir(): Displays an interactive list of an object's properties.

Disabling Pull-to-Refresh on Mobile

If you need to prevent pull-to-refresh on mobile, the overscroll-behavior-yCSS property is your go-to.

body {  
 overscroll-behavior-y: contain;  
}

This also helps manage scrolling within modals, preventing the background page from scrolling when the modal reaches its boundaries.

Making Your Entire Webpage Editable ✍️

Need a quick way to turn your webpage into an editable area? Use the contentEditable attribute!

document.body.contentEditable = 'true';

Be cautious! This grants users editing power, potentially impacting page structure and script execution. Handle user input carefully and use it judiciously.

IDs Create Global Variables!

Did you know? You can access elements with IDs directly in Javascript, no need for document.getElementById().

<div id="test"></div> ```js <script> console.log(test); // Refers to the div with id="test"</script> ```

While convenient, stick to document.getElementById() for clarity and maintainability in real-world projects.

Smooth Scrolling for Your Website

Enhance user experience with smooth scrolling by adding scroll-behavior: smooth; to your <html> element's CSS.

html {      
    scroll-behavior: smooth;    
}

The :empty CSS Selector

Target and style empty elements effectively with the :empty selector.

p:empty {     
  display: none;    
}

This selects and hides empty <p> tags in your HTML.

Stop Using Promise.all() in JavaScript

What are Promises in JavaScript?

15 Excellent JavaScript Coding Hacks 🚀

Let’s face it: JavaScript can be quirky, but mastering it is deeply rewarding. This article is your treasure chest of…

JavaScript Performance Optimization in 2024: Still Relevant? 🚀

In the ever-evolving world of web development, it’s easy to get caught up in the allure of the latest JavaScript…

7 Amazing Uses of Bitwise Operators in JavaScript

Unlike many other programming languages, JavaScript doesn’t differentiate between integers, short integers, long…

In Plain English 🚀

Thank you for being a part of the In Plain English community! Before you go:

Get New Posts

Follow on your preferred channel for new articles, notes, and experiments.