Tech Tips, Tricks & Trivia

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...

This Week I Learned -  * A data warehouse processes structured data, while a data lake processes structured, semi-structured, unstructured, and raw binary data. * To shift security left means to implement security measures during the entire development lifecycle, rather than at the end of the cycle. * East-west traffic , in a networking context, is the transfer of data packets from server to server within a data center. The term east-west for this type of traffic comes from network diagram drawings that usually depict local area network (LAN) traffic horizontally.  * East/west traffic is traffic flowing around the Kubernetes cluster, service-to-service or service-to-datastore. *  Tailwind CSS is an open source CSS framework. The main feature of this library is that, unlike other CSS frameworks like Bootstrap, it does not provide a series of predefined classes for elements such as buttons or tables. Tailwind is designed for use with components like React, Angular, Vue, et...

This Week I Learned -  *  JavaScript isn’t a web technology. It isn’t governed by the W3C but by ECMA. What works and doesn’t work in JavaScript is dependent on browser makers.   *  Superfish  is an enhanced Suckerfish-style menu jQuery plugin that takes an existing pure CSS drop-down menu (so it degrades gracefully without JavaScript) and adds enhancements. * The Enterprise-Scale architecture provides prescriptive guidance coupled with Azure best practices, and it follows design principles across the critical design areas for organizations to define their Azure architecture *  A single heterogeneous Kubernetes cluster can have both Windows and Linux worker nodes . You can only run Windows containers on Windows nodes and Linux containers on Linux nodes. And there's a further constraint: the Kubernetes control plane can only run on a Linux node . Red Hat OpenShift supports both Windows and Linux containers. *  Uptime SLA is an optional feature to...

This Week I Learned -  *  Layoutit grid is an open-source CSS Grid layout generator. It aids in designing web pages layouts by providing CSS grid code as markup. * While you can manage a few containers manually using Docker and Windows, apps often make use of five, ten, or even hundreds of containers, which is where orchestrators come in. Orchestrators help you grow containerized apps at scale, providing functionality for: Deploying at scale Workload scheduling Health monitoring Failing over when a node fails Scaling up or down Networking Service discovery Coordinating app upgrades Cluster node affinity * Open Service Broker for Azure, or OSBA, lets you provision Azure Cloud Services directly from Kubernetes or Cloud Foundry. OSBA in an Open Service Broker API implementation for Azure. The Open Service Broker API is a spec that defines a common language for cloud providers that cloud native applications can use to manage cloud services without lockin. *  Application Pro...

This Week I Learned -  * The download attribute of the anchor tag prompts the user to save the linked URL instead of navigating to it. Without a value, the browser will suggest a filename/extension. *  One way to center content in a div in 2021 . This works for all kinds of content - div {   display: flex;   /* vertical */   align-items: center;   /* horizontal */   justify-content: center; } If its just text, inline tags then text-align: center can do this in single property. If you want to center vertically and horizontally at the same time - display:grid; place-content:center; * Vue arguably improves upon React by combining the best of both AngularJS and React. Features like component-based approach, the one-way data flow for component hierarchy, virtual rendering and state management of app are features that are borrowed from ReactJS. The templates, syntax and easy user interface have been borrowed from AngularJS. * The Azure Relay service enab...

This Week I Learned -  * Some websites use CSS property user-select: none;  to prevent the text of an element from being selected. Changing it to  user-select: text; through browser Developer Tools can enable selection. * Microsoft uses more than 30 viability and risk-based criteria to evaluate the placement of each of the three Availability Zones to identify both significant individual risk as well as collective and shared risk between Azure Availability Zones—without compromising the latency perimeter of less than two milliseconds.  *  Windows Server containers are available on AKS . To run Windows Server containers in AKS, you create a node pool that runs Windows Server as the guest OS. Windows Server containers can use only Windows Server 2019. * VMware Site Recovery Manager (SRM) is a popular disaster recovery solution. SRM for Azure VMware Solution (AVS) automates and orchestrates failover and failback between an on-premises environment and AVS, or...

Let's say you wanted to display a custom set of images within tweets from your Twitter feed or someone else's, Twitter provides a feature  called  Twitter Moment to create a curated list on Twitter.com. You have to scroll vertically to view the collection. If you need a slide show kind of view, try the code I put together in a Github Gist after deriving inspiration from code samples on StackOverflow.com & W3Schools The code for Responsive Iframed Tweets Carousel doesn't have much styling in order to just focus on the essentials.

I loved the simple, minimalist way in which  W3Schools explains Serif, Sans-Serif & Monospace fonts : Generic family Font family (Web Safe) Description Serif Times New Roman Georgia Garamond Serif fonts have small lines at the ends on some characters Sans-serif Arial Verdana Tahoma  Trebuchet MS "Sans" means without - these fonts do not have the lines at the ends of characters Monospace Courier New Lucida Console All monospace characters have the same width On computer screens, sans-serif fonts are considered easier to read than serif fonts. Web safe fonts are fonts that are pre-installed by many operating systems. -0- The serif versus sans-serif debate : Typographer Sarah Hyndman, author of the book “Why Fonts Matter,” found that people saw serif typefaces such as Times New Roman embodying “traditional,” “conventional” and “trustworthy” values while Calibri and other sans-serif typefaces were seen as “confident,” “friendly,” and “hones...

As the Tablet wars get fiercer and accessing the Web moves beyond desktop browsers, web developer face the challenge of making web pages they create work on all kinds of devices. Thanks to CSS3, there can just be a single web page that can be made to work on a variety of screen resolutions. While there are a bunch of ready-made templates and frameworks  like Twitter Bootstrap  to build responsive pages, understanding how they work is important if you've to customize it. I feel there is a dearth of  beginner level, 101 articles that explain how to build responsive/adaptive web pages. If you're getting started, here are some articles that I found so far (this is a work in progress) which are simple and easily understandable - Responsive Design with CSS3 Media Queries CSS3 Media Queries The width:auto\9;  IE (for versions 8 & below) hack to make images flexible Responsive Web Design - Ethan Marcotte Media Queries - MDN v5, the Responsive HTML5 Mast...

Microsoft's Channel9 website has published a two-part video series with 42 episodes on HTML5, CSS3 and JavaScript by a great tutor. The course is delivered by Bob Tabor who runs LearnVisualStudio.net, a video tutorial site. In the first episode  in the HTML5 & CSS3 series, Bob clearly outlines what it will NOT cover and sets the right expectations. The videos can be downloaded (recommended) or viewed online on a Silverlight-supported browser. I was pleasantly suprised to see that some of the online videos on Channel9 now let you jump to a specific point in the video without having to start from the beginning in case you've already watched a portion of a long video earlier. Unlike earlier, the duration of the video & the file sizes of the video in the multiple formats that it is available for download, are also shown. If you're on a lean-bandwidth connection, you can try downloading the video in the format that has the smallest size (however on download...