JavaScript Event Capturing and Bubbling

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 …

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