In JavaScript, The event handling process: When an event happens – the most nested element where it happens gets labeled as the “target element” (event.target). Then the event first moves from the document root down to the event.target, calling handlers assigned with addEventListener(…., true) on the way (true is a shorthand for {capture: true}). Then the event moves from event.target up to …
Angular Internationalization (i18n)
Application internationalization is a many-faceted area of development, focused on making applications available and user-friendly to a worldwide audience. This page describes Angular’s internationalization (i18n) tools, which can help you make your app available in multiple languages. See the i18n Example for a simple example of an AOT-compiled app, translated into French. Angular and i18n Internationalization is the …
React leaflet markercluster
React wrapper of Leaflet.markercluster for react-leaflet DEMO with examples: https://yuzhva.github.io/react-leaflet-markercluster/ Description If you are faced with an issue with markers overlapping during map zooming, or they are overlapping because they are close to each other – you probably need to group them. That is what you can do with react-leaflet-markercluster. Note: Before getting started, please see these useful guides: Leaflet …
Leaflet.markercluster
Provides Beautiful Animated Marker Clustering functionality for Leaflet, a JS library for interactive maps. Requires Leaflet 1.0.0 For a Leaflet 0.7 compatible version, use the leaflet-0.7 branchFor a Leaflet 0.5 compatible version, Download b128e950For a Leaflet 0.4 compatible version, Download the 0.2 release Table of Contents Using the plugin Building, testing and linting scripts Examples Usage Options Defaults Customising …
PhotoSwipe
JavaScript image gallery for mobile and desktop, modular, framework independent. In these days, it is necessary to build the beautiful image gallery in many websites including blog sites. There are several open source image gallery libraries so we can use them. Photoswipe is the most popular one, and it can be big help for us …
React Leaflet
Core concepts React-Leaflet uses ⚛️ React’s lifecycle methods to call the relevant Leaflet handlers, which has a few consequences: DOM rendering React does not render Leaflet layers to the DOM, this rendering is done by Leaflet itself.React only renders the map container for the Map component and potentially empty <div> elements for components having multiple children. Component properties The properties passed to the …
React Grid Layout
react-grid-layout is a draggable and resizable grid layout library for React projects. There are many use cases of this library and one of them is trello board. We can implement trello-like system very easily. Features: 100% React – no jQuery Compatible with server-rendered apps Draggable widgets Resizable widgets Static widgets Configurable packing: horizontal, vertical, or …
Grafana
Grafana is an open source metric analytics & visualization suite. It is most commonly used for visualizing time series data for infrastructure and application analytics but many use it in other domains including industrial sensors, home automation, weather, and process control. Here is detailed documentation about the functionalities of grafana.
React QR Reader
A React component for reading QR codes from the webcam. It uses the WebRTC standards for reading webcam data and jsQR is used for detecting QR codes in that data. To optimize the speed and experience, a web-worker is used to offload the heavy QR code algorithm on a separate process. The web worker is inlined and loaded on …
React Native Web
React Native is a multi-platform solution developed by Facebook that lets you build mobile apps using JavaScript. These mobile apps are considered multi-platform because they’re written once and deployed across many platforms, like Android, iOS and the web. Today, we’ll see how we can utilize this powerful technology to build platform-focused applications on the web. …