Tech Tips, Tricks & Trivia

If an image on a site is flashy, animated, and distracting, and you inspect it only to see this as its HTML source: src="data:image/webp;base64,UklGRiQAAABXRU..." There is no image file to block. That's a base64 image embedded directly in the page. You can still hide it in Firefox with no extensions, using a built-in feature called userContent.css . What really is a Base64 Image? Normally, an image is a file. Your browser downloads logo.png from a server. A base64 image is different. The image data is converted to a long text string and pasted directly into the HTML. Instead of this: <img src="/images/logo.png"> You get this: <img src="data:image/webp;base64,UklGRiQAAABXRUJQ..."> Sites do this to load a small icon a bit faster, or to hide tracking pixels, or to inline ads without a separate file request. The downside is you can’t block it like a normal file. It’s not a URL you can block in your hosts file. It’s baked into the page itself. B...

Did you know you can link directly to a specific word on a webpage and have the browser automatically scroll down and highlight it? It’s called Scroll to Text Fragment, and it's a game-changer for sharing quotes, data, or proof.  This is especially useful when the content you want to link to doesn't have a standard HTML anchor (like #heading). This feature lets you link directly to any specific word or text block on a webpage, highlighting it for the user automatically. I was amused to find that  La Opala Crockery is 100% Vegetarian  and it proudly sports on its packaging the green dot logo that's typically used by food products. They also mention this claim on their blog in a long article. I wanted to share the link on a forum that mentions the exact sentence so that readers can jump to the specific point. Here’s how the link can be constructed to highlight "100% vegetarian" - https://www.laopala.in/blog/what-sets-laopala-cup-set-apart #:~:text=100% vegetarian Th...

In HTML, an image can use a backup source with the onerror event. The browser first tries to load the main image from src. If that image is missing, blocked, or fails to load, onerror runs and replaces it with a fallback image.  <img   src="actual-image.jpg"   alt="Product image"   onerror="this.onerror=null; this.src='backup-image.jpg';" > The JavaScript code  this.onerror=null   prevents an infinite loop if the backup image also fails. That prevents an endless loop if the backup image also fails. Without it, the browser could keep triggering onerror again and again. This technique is useful for product images, profile photos, brand logos, or any place where a missing image should show a placeholder instead of a broken image icon. For instance, this Dynamic Dummy Image Generator can be used to generate placeholder images of desired dimensions. For multiple responsive image options, use <picture>, but that is for format/viewport fallb...

You want to watch a movie, but you're not sure which OTT subscription has it available. Wouldn't it be nice if we had info about ratings & availability readily available? I discovered that sites like The Movie Database (TMDB) ,  MovieOfTheNight or Watchmode have streaming availability APIs to check for availability of movies on popular streaming services in different countries . Having used TMDB in the past, I created a barebones code sample using the TMDB API to verify the streaming availability of movies on popular Indian OTT platforms like Netflix, Prime Video, SonyLIV, Hotstar, and Zee5. 

Back in 2012, I was planning to build a location-aware app that would tell me about interesting sights & news-worthy facts about places that fall in the way of a train journey. I discovered that Web Dev guru Chris Heilmann ( @codepo8 ) had built a nifty app on a similar theme and shared the JavaScript code under the BSD license.  Things Around You used the browser's geolocation feature to find Wikipedia articles on nearby landmarks via the GeoNames API & list them with a brief description. For a Windows 8 app hackathon, I utilized the Geolocation detection idea to build a little app that I called GeoBuzz & posted it on the Windows 8 App Store. It's been on the back of my mind to extend it with more features. Now that GitHub Copilot is here, there was no need to procrastinate. I had a friendly chat with GitHub Copilot ( Gemini Flash model ). In under an hour, I customized @codepo8's original sample to include a map directly on the web page instead of linking t...

As extreme weather events become more frequent and unpredictable, nowcasts are becoming more crucial than traditional forecasts, especially with phenomena like urban heat islands. These days, even the best-laid plans can fall apart if weather isn't factored in. Zomato is offering real-time weather data from 60 Indian cities through a free public API called Weather Union , gathered via a crowd-supported weather infrastructure. I've extracted the latitude and longitude of the weather stations that Zomato has provided in PDF format and shared the CSV file on GitHub . About half of these locations use an Automated Weather System, while the rest have Rain Gauge Systems that only track rainfall.  For stations with rain gauges, the API provides data only on rainfall, and fields like temperature, humidity, and wind speed return null values. I’ve created a simple code sample using Zomato's public API, which you can check on GitHub .  The sample also includes an external link that d...

This Week I Learned -  *  Discourse is an open source platform for community discussion & an alternative to Slack. Open Food Facts uses Discourse, Slack & Wikis for community discussions. *  Guidance for writing text descriptions (alt text) for digital images when creating HTML content *  pyspark.ai  is an English SDK for Apache Spark. It takes English instructions and compile them into PySpark objects like DataFrames. Its goal is to make Spark more user-friendly and accessible, allowing you to focus your efforts on extracting insights from your data. *  Enterprise Architecture on a Page v2.1  [PDF] * IBM's watsonx.ai supports open-source models from Mistral, Saudi Data and AI Authority (SDAIA) & Meta. It includes Mistral's popular Mixtral series of open-source mixture-of-experts models * Claude is now available as an Android app. * Many conversational AI platforms and chatbots require the use of voice datasets. The Vaani projec...

The Developer Console of your web browser (invoked through the keyboard shortcut F12) allows you to manipulate the Document Object Model (DOM) of any web page that you have loaded in your browser.  Microsoft Edge Developer Console This powerful tool enables you to explore, edit, and experiment with the HTML, CSS, and JavaScript code of any web page, providing you with unprecedented control over the elements that make up a website. Let's say you want to remove the last 2 columns of a 3-column table using JavaScript in the browser's developer console, paste this code & see the columns vanish - // Select all table rows const rows = document.querySelectorAll('table tr'); // Iterate through each row rows.forEach(row => {   // Remove the last cell twice   row.removeChild(row.lastElementChild);   row.removeChild(row.lastElementChild); });

This Week I Learned -  *  DevDocs combines multiple API documentations in a fast, organized, and searchable interface. DevDocs works offline, on mobile, and can be installed as web app. DevDocs is free and open source. *  Playwright is a framework for Web Testing and Automation. It allows testing Chromium, Firefox and WebKit with a single API. *  Little guide to building Large Language Models in 2024 by Thomas Wolf   * The development of advanced prompt engineering techniques and patterns has resulted in longer prompts for large language models (LLMs). These extended prompts can lead to increased API response latency, surpass the context window limits, and potentially cause higher API costs. LLMLingua utilizes a compact, well-trained language model (e.g., GPT2-small, LLaMA-7B) to identify and remove non-essential tokens in prompts. This approach enables efficient inference with large language models (LLMs), achieving up to 20x compression with minimal pe...

The BioDigital Human is an interactive 3D software platform for visualizing anatomy, disease, and treatment. Often referred to as “Google Maps for the Human Body,” the BioDigital Human platform is a medically accurate, virtual map of the human body—composed of over 8,000 individually selectable anatomical structures, 600 simulated health conditions, and a toolkit to map and visualize data.  Sign up for free to access As someone interested in facial anatomy for purpose of art & science appreciation, I'm finding this website a great resource for self-study. I find it truly amazing that this resource makes it possible to view internal parts in 3D without going to med school and dissecting a human body.  This educational resource masterfully combines animation with easy-to-understand explanations of intricate subjects, making it an invaluable tool for lay-people and science enthusiasts seeking to explore and understand the human body. It has quizzes too to test you...

Unlike StackOverflow's convenient Filter/Search feature on the Tags page , which allows users to quickly jump to tags of their choice,  Microsoft Q&A  currently lacks such functionality.  At the time of writing there were 423 active Tags As someone interested in specific Microsoft Q&A tags to follow, paging through approximately 13 pages of tags seemed cumbersome and time-consuming. To address this issue, I discovered a PowerShell script by MotoX80 that fetches the complete Tag list from Microsoft Q&A. I then adapted this script to generate the necessary HTML code to create hyperlinks. With this single web page, users can easily navigate and explore Microsoft Q&A Tags by Popularity directly - Check it out ! Here is the modified PowerShell code I used to create hyperlinks for the Tags:

I like mobile web apps more than smartphone apps . A while ago, I discovered Minhaz's amazing HTML5 QR Code & Barcode Scanner JavaScript library . Using that I built a minimal web page that can scan a product barcode through a smartphone's mobile browser and then redirects user to the equivalent product's Open Food Facts web page to display its nutrition information. I have now extended that sample to scan an EAN-13 barcode off a packaged food product and then fetch just its name, image, Nutri-Score & Nova details using the Open Food Facts REST API .   Screenshot of the output in the Microsoft Edge browser on an Android phone Try out the no-frills  NutriScan 🥫🔍  web app and please let me know what you think. Here's the code if you're interested - Typically, the JSON returned by an API call looks like this - {     "code": "8906005504395",     "product": {         "image_thumb_url": "https://images.openfoodfacts...

Smartphone barcode scanners typically require installing a dedicated app. But what if your web app could access the camera and scan codes directly — no app required, just HTML and JavaScript? I tried Minhaz's nifty HTML5 QR Code & Barcode scanner and I'm bowled over by its simplicity. With hundreds of GitHub stars and forks , it's clear I'm not the only one impressed! I adapted Minhaz's sample code into a minimalist web page that scans a product barcode and redirects to Open Food Facts to display its nutrition information. Here's the code : You can also try it out live. Related:  *  Scanapp   *  HOW TO scan a barcode with an Android smartphone camera from a web page

This Week I Learned -  *  Mistral AI has released Mixtral 8x7B , a high-quality sparse mixture of experts model (SMoE) with open weights. Licensed under Apache 2.0. Mixtral outperforms Llama 2 70B on most benchmarks with 6x faster inference. It is the strongest open-weight model with a permissive license and the best model overall regarding cost/performance trade-offs. It matches or outperforms GPT3.5 on most standard benchmarks. It gracefully handles a context of 32k tokens. It handles English, French, Italian, German and Spanish. It shows strong performance in code generation. * Ola founder Bhavish Aggarwal unveiled its first large language model (LLM) 'Krutrim. It has the ability to use Indian languages and an Indian context. Krutrim in Sanskrit means 'Made artificially'.  * Microsoft Copilot Studio - Implementation Guide [ PPTX ] * OCI’s latest managed PostgreSQL service is featuring 3X faster performance compared to self-managed clusters and 60% less cost than Amazon...

This Week I Learned -  * The  user-select:none style can block a user from selecting text - body{-webkit-user-select:none;-moz-user-select:-moz-none;-ms-user-select:none;user-select:none} * Pangrams are sentences that have all 26 letters of the alphabet in them.  Codepo8 has written a Pangram Checker to write pangrams and check them while typing.  * ScyllaDB is a NoSQL data store compatible with Apache Cassandra that runs on top of Seastar. Discord migrated trillions of messages from Cassandra to ScyllaDB. The book Database Performance at Scale written by engineers at Scylla, covers strategies for achieving low latencies at high throughput. Scylla is the new name of the Israeli startup Cloudius Systems that is behind ScyllaDB. *  GitHub Skills is a collection of interactive courses on how to use GitHub designed for beginners and experts. *  Jupyter AI brings generative artificial intelligence to Jupyter notebooks, giving users the power to explain an...

This Week I Learned -  *  Project IDX is Google's new browser-based code environment. It has AI assistance for code-generation, code-completion, and explaining code built-in. It also supports modern JavaScript frameworks. IDX is based on VSCode *  Kirupa Chinnathambi calls HTML, CSS, and JavaScript, the three musketeers. * The minor irritations with REST APIs and their shortcomings became nagging problems. When a typical app deals with hundreds of requests with each request overfetching data, it becomes difficult to ensure our apps have great performance. To help address the performance gaps with REST API calls, Facebook created GraphQL * Visual prompt injection is a technique to manipulate multi-modal language models. By blending visual prompts with user inputs, the attacker can guide the model without directly altering its text input. The manipulation happens in images  * LangChain Templates are the easiest and fastest way to build a production-read...

This Week I Learned -  *  Kaggle's 2023 AI Report is a collection of 20+ essays written by Kaggle community members covering the latest AI advancements and salient topics in modern ML. *  Digital Rights Management (DRM) is technology that enables online video and audio services to enforce that the content they provide is used in accordance with their requirements. This technology may restrict some of the things you can do in the browser. Many services are moving towards HTML5 video that requires a different DRM mechanism called a Content Decryption Module (CDM).  * Firefox for desktop supports the Google Widevine CDM for playing DRM-controlled content. Firefox downloads and enables the Google Widevine CDM by default to give users a smooth experience on sites that require DRM. The CDM runs in a separate container called a sandbox, and you will be notified when a CDM is in use.  *  Lossless Cut is probably the simplest way to cut out parts of a video withou...