¡Los Programadores Full-Stack NECESITAN ESTO!

5 Mar 202403:08


TLDRThe video highlights two exciting resources. The first is an impressive drag-and-drop library that works seamlessly with React, Vue, and JavaScript, offering easy implementation, excellent documentation, and cool features like animations and multi-drag support. The second resource is a visually appealing SQL learning platform that explains PostgreSQL, MySQL, and Oracle queries through interactive visualizations. It breaks down each query step, showcasing table relationships, conditions, and results, making it an invaluable tool for grasping SQL concepts intuitively.


  • 👍 The speaker highly recommends an impressive drag-and-drop library that works seamlessly with React, Vue.js, and plain JavaScript, praising its ease of use, great documentation, and multi-drag functionality.
  • 💻 The speaker demonstrates the drag-and-drop library's capabilities, showcasing features like reordering elements, animations, and multi-select drag-and-drop.
  • 🔍 The speaker is amazed by the library's small size of only 4KB.
  • 🌐 The speaker promises to provide the library's link in the chat and video description.
  • 📚 The speaker introduces a visual SQL query tool that explains and visualizes SQL queries for PostgreSQL, MySQL, Oracle, and other databases.
  • ✨ The tool highlights different parts of the query, such as tables, conditions, and results, aiding in understanding the query's execution.
  • 🗃️ The tool supports various SQL operations like SELECT, INSERT, JOIN, UNION, and more.
  • 📈 The tool offers different visualization options, including flow diagrams and text outputs.
  • 🔑 The speaker emphasizes that the SQL visualization tool is free to use, with paid options potentially available for more advanced features.
  • 📢 The speaker encourages viewers to use the SQL visualization tool if they need to learn or understand SQL queries better.

Q & A

  • What is the first resource discussed in the script?

    -The first resource discussed is a wonderful drag-and-drop library that works with React, Vue, and JavaScript. It is praised for being easy to use, having great documentation, and being lightweight (4kb).

  • What are some key features of the drag-and-drop library mentioned?

    -Some key features mentioned are: compatibility with React, Vue, and vanilla JavaScript, ability to add animations and plugins, multi-drag functionality (dragging multiple items at once), and a small file size of just 4kb.

  • Where can the link to the drag-and-drop library be found?

    -The script mentions that the link to the drag-and-drop library is available in the chat or in the YouTube video description (if watching the video).

  • What is the second resource discussed in the script?

    -The second resource discussed is a website that visually explains SQL queries for PostgreSQL, MySQL, Oracle, and other databases.

  • How does the SQL visualization website work?

    -The website visually represents SQL queries by showing the tables involved, highlighting the parts of the query, and explaining what each part does. As you hover over different parts of the query, it provides explanations on the left.

  • What are some advantages of using the SQL visualization website mentioned in the script?

    -Some advantages mentioned are: visual representation of queries, explanations for each part of the query, ability to see the expected output, and support for different database systems like PostgreSQL, MySQL, and Oracle.

  • Is the SQL visualization website free to use?

    -According to the script, the basic functionality of visualizing and understanding SQL queries on the website is free. More advanced or complicated features may require a paid subscription.

  • What types of SQL queries can the visualization website handle?

    -The script mentions that the website can handle various types of queries, including those involving joins, unions, and other complex operations.

  • Does the SQL visualization website offer any other features besides query explanations?

    -Yes, the script mentions that the website also provides flow diagrams and text-based output representations of the queries.

  • Is the speaker enthusiastic about the two resources mentioned in the script?

    -Yes, the tone of the speaker in the script conveys enthusiasm and excitement about both the drag-and-drop library and the SQL visualization website, praising their features and usefulness.



🖥️ Introducing a Drag and Drop Library

The video script discusses a remarkable new drag and drop library that is compatible with React, Vue, and JavaScript. It highlights the library's impressive features such as ease of use, excellent documentation, and support for animations and multi-drag functionality. The presenter expresses excitement over the library's small size of only 4KB and provides links for further exploration.

🗄️ Visual SQL Query Explanation Tool

The script introduces a web-based tool that visually explains SQL queries for PostgreSQL, MySQL, Oracle, and other databases. It allows users to input queries and provides visual representations of tables, joins, conditions, and results. The tool aims to make learning and understanding SQL queries more intuitive by breaking down each step and component graphically. It supports various query types, including joins and unions, and offers multiple diagram formats. The presenter highlights the tool's free access and finds it particularly useful for learning SQL.



💡Drag and Drop

Drag and Drop refers to the user interface interaction technique that allows users to click and drag an object (such as an element, file, or image) and drop it into a different location or container. The script introduces a 'maravilloso' (wonderful) Drag and Drop feature that works seamlessly with React, Vue, and vanilla JavaScript. It highlights the feature's impressive functionality, ease of use, and excellent documentation, providing code examples for React, Vue, and native JavaScript implementations.


React is an open-source JavaScript library for building user interfaces, primarily developed and maintained by Facebook. It is designed to create reusable UI components and efficiently update and render them when data changes. The script emphasizes that the introduced Drag and Drop feature works well with React, providing a code example for integrating it into React applications.


Vue is a progressive JavaScript framework for building user interfaces. It is designed to be incrementally adoptable, meaning that it can be integrated into small parts of an existing project or used to build a complete application from scratch. The script highlights that the mentioned Drag and Drop feature is compatible with Vue, along with React and vanilla JavaScript.


JavaScript is a high-level programming language primarily used for creating dynamic and interactive web applications. It is a core technology of the World Wide Web, allowing developers to add enhanced functionality, interactivity, and visual effects to websites. The script emphasizes that the Drag and Drop feature can be implemented using native JavaScript, in addition to popular frameworks like React and Vue.


Animations refer to the visual representation of movement or transition of an element or object over time. The script mentions that the Drag and Drop feature supports animations, with the ability to configure different animation plugins to add visual effects to the dragged and dropped elements. This feature allows for creating more engaging and dynamic user experiences.

💡Multi-Drag and Drop

Multi-Drag and Drop is a feature that allows users to select and drag multiple elements or objects simultaneously and drop them into a designated location or container. The script highlights that the introduced Drag and Drop feature supports Multi-Drag and Drop, enabling users to drag and reorder multiple items at once, enhancing efficiency and user experience.


SQL (Structured Query Language) is a programming language used for managing and manipulating relational databases. It allows users to create, modify, and retrieve data from databases. The script introduces a resource that visually explains SQL queries for various database systems like PostgreSQL, MySQL, and Oracle, making it easier for learners to understand and visualize the execution of SQL commands.


Visualization refers to the graphical representation of data or information in a way that makes it easier to understand and interpret. The script highlights a resource that provides visual explanations and visualizations for SQL queries, allowing users to see how different components of a query interact with tables, conditions, and results. This visual approach can greatly aid in learning and comprehending SQL concepts.


In SQL, a join is a type of query that combines rows from two or more tables based on a related column between them. Joins are used to retrieve data from multiple tables simultaneously. The script mentions that the introduced SQL visualization resource likely supports join operations, as it aims to provide visual explanations for various SQL queries and concepts.


Diagrams are visual representations of information, often using graphical elements like shapes, lines, and symbols to convey relationships, structures, or processes. The script mentions that the SQL visualization resource includes diagrams, such as flow diagrams, to further enhance the understanding of SQL queries and their execution flow.


Introduces an impressive drag and drop library that works with React, Vue, and JavaScript, with easy-to-use documentation.

Demonstrates the drag and drop library's features, such as reordering, animations, plugins, and multi-drag capabilities.

Highlights the library's small size of only 4KB, making it lightweight and efficient.

Presents a helpful resource for learning SQL, which provides visual explanations for queries in PostgreSQL, MySQL, Oracle, and other databases.

Showcases the SQL learning resource's ability to visually explain queries, tables, joins, and conditions, making it easier to understand SQL concepts.

Mentions the resource's free access for visualizing and understanding SQL queries.

Highlights the resource's support for various database systems, including PostgreSQL, Oracle, MySQL, and more.

Appreciates the SQL learning resource's visual representations and diagrams, which aid in understanding complex SQL queries and concepts.

Emphasizes the resource's usefulness for learning SQL joins, unions, and other advanced SQL concepts.



os quiero comentar unos recursos que han


ido saliendo este fin de semana uno es


este drag and Drop maravilloso vale que


además funciona amigos con react con


View y con javascript o sea con lo que


queráis con View con javascript


impresionante o sea suena o sea Funciona


muy bien fácil de utilizar documentación


muy chula y además aquí tenéis Mira el


código para react para View y nativo de


javascrip y aquí tendrías por ejemplo


veis lo podéis arrastrar es un drag and


Drop y como puedes ver todo se va


ordenando también lo podéis hacer con


animaciones hay aquí como diferentes


plugins por ejemplo animaciones Pues si


lo queréis animar lo podéis animar veis


que se mueven uno con otro en este caso


lo están haciendo horizontal Pero esto


se podría llegar a configurar para


hacerlo de diferentes formas también


multid drag and Drop para que puedas


pues arrastrar más de uno a la vez no sé


si ves no sé si es que lo puedes así


veis pum tiene cositas muy chulas Y


además lo que me me ha alucinado mucho


es que son 4k solo cuatro cas o sea


tremendo si os interesa el el enlace y


tal lo tenéis en el chat que lo ha


dejado feral y si estáis en el vídeo de


YouTube os lo dejaré en la descripción


pues este es el el primer recurso el


segundo recurso por si estáis


aprendiendo sql que a mí me ha encantado


es este de aquí básicamente es una


página te explica visualmente cualquier


query de postgre sql mysql de Oracle de


lo que sea fijaos tú tienes por ejemplo


todo todo esto crear la tabla no sé qué


el insert el Select De hecho cuando te


pones encima pues va indicando un poco


lo que estás haciendo pues fijaos aquí


que te va diciendo vale Esta es la tabla


de customers esta es la de orders y


Cuando haces el Select ves aquí tenemos


el Select Entonces te va indicando Vale


pues Esto va a cada una de las tablas


cuando esta tabla aquí podemos ver las


condiciones o sea te está explicando


como toda todo te lo está explicando


todo luego Aquí tendríamos este Select


este View pues te lo está explicando


aquí pues de aquí saco de esta tabla


aquí tendríamos este resultado y este


resultado y fijaos que cada vez que te


pones encima en la izquierda te dice


cada cosa tenéis diferentes ejemplos por


ejemplo de mysql lo tienes por aquí


mysql my sql aquí tenéis el de mysql lo


podéis visualizar hay que Iniciar sesión


ya os lo digo yo pero es gratis esta


parte eh luego m Supongo que habrá otras


cosas más complicadas de pago que tal


pero en general en general el hecho de


ver estas visualizaciones y de poner tus


tus queres no hay ningún tipo de


problema y te lo hace te lo hace


totalmente gratis vale le das aquí


visualizar veis y te lo va visualizando


la verdad es que me ha me ha gustado


bastante porque encima el hecho que te


pongas y te indique y tal me ha gustado


mucho así que si necesitáis y tenéis que


aprender cualquier cosa lo tenéis por


aquí funciona con join funciona yo creo


que sí que funciona con join porque aquí


hay a ver si hay algún joint hay unions


o sea yo creo que sí que funcionará con


join sin ningún tipo de problema de


hecho también tenéis Hay un montón de


diagramas eh o sea tenéis el Flow este


que está muy chulo Pero hay como más


diagramas Incluso te hace el output con


el texto eh está bastante chulo y aquí


tenéis todas las bases de datos que


soporta postgre Oracle mysql y tal

Rate This

5.0 / 5 (0 votes)

Related Tags
Web DevelopmentLibrariesDrag-and-DropSQLDatabasesVisual LearningInteractiveTutorialsCodingProductivity