Issue #1

Daily Issue #1

• One of the most useful tools in JavaScript is the spread operator, which lets you effortlessly expand iterable elements like arrays, objects, and even strings

• Choosing the reliable Cypress plugins is crucial to minimize reliance on additional dependencies.

• The 7.25.0 release of Babel brings multiple bug fixes and support for duplicated named capturing groups

• The ultimate guide to selecting the perfect frontend framework for your next project

• A simple guide to learning Asynchronous JavaScript

• Copying data between tables has always been a challenge, regardless of the database type. However, there is now a solution that claims to offer the fastest way to copy data between Postgres tables

• With Decode FormData, you can convert encoded form data back into a JavaScript object, recovering any information lost during the encoding process for server communication

• Api-Fiddle is a cool playground for REST(ish) APIs where you can design endpoints for technical docs and collaborate with others.

• Flowmodor is a flexible focus timer designed to help you stay in a flow state.

• Another database, FerretDB, that acts like MongoDB but uses Postgres for storage has been updated to version 1.23

• pgAdmin is also seeing a version bump to v8.10

• Another lightweight drag-n-drop library, Dragula, offers super easy implementation.

Act as an Excel Sheet

Problem: I was setting up columns for my progress-tracking kanban app. Each column needed to hold cards for individual tasks, and I wanted to make sure each card could be drag-and-dropped onto any column. I also needed to be able to sort the columns.

Solution: With so many frameworks and libraries out there, I found a super tiny one (Dragula) that had all the functionality I needed to get the job done

let $columns = document.querySelectorAll('.column');

//cards
let cards = dragula(columns, {
	removeOnSpill: false,
	revertOnSpill: true
})
	.on('drag', card => {
		$columns.forEach(col => col.classList.add('visible'));
	})
	.on('cancel', card => {
		$columns.forEach(col => col.classList.remove('visible'));
	})
	.on('drop', card => {
		$columns.forEach(col => col.classList.remove('visible'));
		onCardDrop(card);
	});

//columns
let columns = dragula([document.querySelector('.board')], {
	removeOnSpill: false,
	revertOnSpill: true,
	direction: 'horizontal',
	moves:  (el, container, handle) => {
		return handle.classList.contains('column-header');
	}
})
	.on('drop', onColumnDrop);