Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Articles on Trending Technologies
Technical articles with clear explanations and examples
Encoding string to reduce its size in JavaScript
Problem We need to write a JavaScript function that takes a string and encodes it using a compression format. The function should compare the encoded string with the original and return whichever is smaller. The encoding rule is: n[s], where s inside the square brackets is being repeated exactly n times. For example, "ddd" can be encoded to "3[d]", but since "3[d]" has 4 characters while "ddd" has only 3, the function should return "ddd". Example Input and Output For the input string: 'aabcaabcd' The expected ...
Read MoreConverting a polygon object into an HTMLCanvasElement using FabricJS
We can create a Polygon object by creating an instance of fabric.Polygon. A polygon object can be characterized by any closed shape consisting of a set of connected straight line segments. Since it is one of the basic elements of FabricJS, we can also easily customize it by applying properties like angle, opacity etc. In order to convert a polygon object into HTMLCanvasElement we use the toCanvasElement method. It returns the DOM element of type HTMLCanvasElement, an interface which inherits its properties and methods from the HTMLElement interface. Syntax toCanvasElement( options: Object ): HTMLCanvasElement ...
Read MoreHow to change the src attribute of an img element in JavaScript / jQuery?
There are different methods to change the path of an image given to the src attribute of an img element in HTML document using JavaScript and jQuery. Method of changing the src attribute of an img element using JavaScript: Use the src property in JavaScript. Methods of changing the src attribute of an img element using jQuery: Using attr() method Using prop() method Let us discuss each of the above listed methods of changing the src of an img element one by one in ...
Read MoreSplitting a hyphen delimited string with negative numbers or range of numbers - JavaScript?
When working with hyphen-delimited strings containing negative numbers or ranges, simple split('-') won't work correctly because it treats every hyphen as a delimiter. We need regular expressions to distinguish between separating hyphens and negative number signs. The Problem Consider these strings with mixed content: var firstValue = "John-Smith-90-100-US"; var secondValue = "David-Miller--120-AUS"; Using split('-') would incorrectly split negative numbers and ranges, giving unwanted empty strings and broken values. Solution Using Regular Expression We use a lookahead pattern to split only at hyphens that precede letters or number ranges: var firstValue ...
Read MoreSorting a JSON object in JavaScript
In JavaScript, objects themselves cannot be sorted since their properties don't have a guaranteed order. However, we can extract the values from a JSON object and sort them into an array. Suppose we have an object like this: const obj = { key1: 56, key2: 67, key3: 23, key4: 11, key5: 88 }; We need to write a JavaScript function that takes this object and returns a sorted array of its values: const arr = [11, 23, 56, ...
Read MoreThe algorithm problem - Backtracing pattern in JavaScript
Backtracking is a powerful algorithmic pattern for solving constraint satisfaction problems. In this grid path problem, we need to find all possible paths from start to end that visit every walkable square exactly once. Problem Definition Given a 2D grid with different square types, find the number of unique paths from start to end: 1 represents the starting square (exactly one) 2 represents the ending square (exactly one) 0 represents empty squares we can walk over -1 represents obstacles we cannot walk over ...
Read MoreConvert JSON array into normal json in JavaScript
Sometimes you receive data in a complex JSON array format with key-value pairs, but need to convert it to a simple flat object structure for easier access and manipulation. Problem Structure Consider this complex JSON array with nested key-value objects: const arr = [{ "key": "name", "value": "john" }, { "key": "number", "value": "1234" }, { "key": "price", "value": ...
Read MoreHow to take screenshot of a div with JavaScript
Taking a screenshot of a div element in JavaScript requires converting HTML elements to an image format. Since JavaScript cannot directly capture DOM elements as images, we use third-party libraries like html2canvas to achieve this functionality. The html2canvas library renders DOM elements onto a canvas element, which can then be converted to an image or downloaded. This approach works by parsing the CSS styles and creating a visual representation of the element. Installation and Setup To use html2canvas, include it via CDN or install it through npm: // Via CDN (add to HTML head) ...
Read MoreChecking for convex polygon in JavaScript
A convex polygon is a polygon where all interior angles are less than 180°. In a convex polygon, all vertices point "outward" and no line segment between any two points inside the polygon extends outside the polygon. Problem Statement We need to write a JavaScript function that takes an array of coordinates representing vertices of a polygon. Each coordinate is an array containing two numbers [x, y] representing a point on a 2D plane. The function should return true if the polygon is convex, false otherwise. For example, if the input is: const arr = ...
Read MoreFabric.js – How to draw a hexagonal grid (honey comb) with Polygon class
We can create a Polygon object by creating an instance of fabric.Polygon. A polygon object can be characterized by any closed shape consisting of a set of connected straight line segments. Since it is one of the basic elements of FabricJS, we can also easily customize it by applying properties like angle, opacity etc. Syntax new fabric.Polygon( points: Array, options: Object ) Parameters points − This parameter accepts an Array which denotes the array of points that make up the polygon object. ...
Read More