Pedro Puzzi vicksbr

So, I was reading Why You shouldn’t use lodash anymore and use pure JavaScript instead, because once upon a time, I shifted from Underscore to Lodash, and I'm always on the lookout for the bestest JavaScript stdlib. At the same time, there was recently an interesting conversation on Twitter about how some of React's functionality can be easily implemented in modern vanilla JS. The code that came out of that was elegant and impressive, and so I have taken that as a message to ask if we really need the framework.

Unfortunately, it didn't start out well. After copy-pasting the ~100 lines of code that Lodash executes to perform a find, there was then this shocking claim: .

CSS Rain Effect

Looks best with a taller window/layout.

Rain drop elements animate down the screen, stem element inside animates to disappear toward the end of the drop's fall, splat element animates after the stem disappears.

JavaScript used to randomly position drop elements across the screen, slightly randomize their animation duration and delay, and also stagger their top position. Randomizing delay makes sure the drops don't fall in one sheet, randomizing duration keeps them from falling in the same constant synchronization. Staggering top position makes it so the splats don't fall in a single line.

Splatters are unfortunately disabled by default as it is rather intensive and significantly lowers framerate on most machines (in Chrome that is--FireFox and Edge are smoother actually). You can hit the splat toggle to turn it on. The effect is achieved by putting a dotted border-top on an ellipse element, and animating it from scale(0) to scale(1). You can get a better look at it by enabli

	// from https://gabrielpichot.fr/blog/simplify-tanstack-react-query-state-handling-with-pattern-matching/

	import { type UseQueryResult } from "@tanstack/react-query";

	/**
	* Match the state of a query to a set of components.
	*
	* Useful for rendering different UI based on the state of a query.
	*
	* Note: if you don't provide an `Empty` component and the query is empty,

	import { useState, useCallback, useMemo, useEffect, useRef } from "react";

	interface CheckboxItem {
	id: string;
	label: string;
	checked: boolean;
	items?: CheckboxItem[]; // Nested checkboxes
	}

	interface NestedCheckboxProps {

	// THIS WORK IS NOT MINE
	// WORK FROM: https://www.jayfreestone.com/writing/react-portals-with-hooks/

	// just gist it for the sake of not lose it.
	// ty fellow developer!!

	import React, { useRef, useEffect } from 'react';

	/**
	* Creates DOM element to be used as React root.

	#! /bin/bash

	# Author: Birgit Olzem aka @CoachBirgit
	# Version: 1.0
	# Created on: January 19th 2022
	# Requires WP-CLI, cURL, wget

	# credits for the origin idea to Jeremy Herve: https://jeremy.hu/dev-environment-laravel-valet-wp-cli/

	### How to use

	// connect() is a function that injects Redux-related props into your component.
	// You can inject data and callbacks that change that data by dispatching actions.
	function connect(mapStateToProps, mapDispatchToProps) {
	// It lets us inject component as the last step so people can use it as a decorator.
	// Generally you don't need to worry about it.
	return function (WrappedComponent) {
	// It returns a component
	return class extends React.Component {
	render() {
	return (

	# The code for my article with the same name. You can find it at the URL below:
	# https://www.mvanga.com/blog/basic-music-theory-in-200-lines-of-python

	# MIT License
	#
	# Copyright (c) 2021 Manohar Vanga
	#
	# Permission is hereby granted, free of charge, to any person obtaining a copy
	# of this software and associated documentation files (the "Software"), to deal
	# in the Software without restriction, including without limitation the rights

	import { useRef, useState, useCallback } from "react";

	const useForm = () => {
	const formRef = useRef(null);
	const [formData, setFormData] = useState([]);
	const [errors, setErrors] = useState({});

	const register = useCallback((refNode) => {
	setFormData((prev) => [...prev, refNode.name]);
	}, []);

	import React from "react";

	const BreakLine = ({ number }) => {
	return (
	<>
	{Array.from(Array(number), (_, i) => (
	<br key={i}></br>
	))}
	</>
	);