June 2022 Summaries

The blog post provides a comprehensive guide to building an advanced file picker using React, complete with drag-and-drop functionality, file selection, and upload progress tracking. The project is scaffolded using create-react-app, and additional libraries such as axios, nanoid, and classNames are installed to handle HTTP requests, unique ID generation, and CSS class management. The file picker consists of a Dropzone component for file selection through clicks or drag-and-drop, a FilesList component for displaying and managing selected files, and a progress bar to indicate upload status. The upload process is managed using axios, which provides real-time progress updates, while the file picker component handles file selection, upload initiation, and file removal. The tutorial includes detailed implementation steps, including the creation of necessary components, styling using CSS modules, and handling file uploads to a specified server URL. Additionally, the post highlights the importance of managing cross-origin requests during development and offers a sandbox link for exploring the finished code.

This tutorial provides a comprehensive guide on creating checkbox and checkbox group components using Vue.js' Composition API, emphasizing the Single File Components (SFC) approach. It begins by detailing how to define props for individual checkboxes, incorporating properties such as value, label, checked state, id, and disabled state. The tutorial explains the use of computed properties to manage class names for dynamically changing the UI based on the checkbox's state and demonstrates how to handle events with defineEmits for custom event management. Additionally, it covers constructing a checkbox group component, where multiple checkboxes can be manipulated collectively, including defining properties, emitting events, and managing state changes using reactive refs. The tutorial also highlights the use of scoped CSS for styling and integrating SVG icons to visually represent the checkbox states. Finally, it showcases how to render these components in an application, providing a practical example of the checkbox group in action, and offers a link to a full Vue project for further exploration.

The redesigned left panel of the app editor introduces enhanced navigation features with tabs for Explorer and State, aiming to streamline the management and modification of app components and code. The Explorer tab provides a nested view of all containers and components, allowing users to easily select, rename, or delete items while also facilitating the handling of hidden components and multiview containers. It includes a Code section for managing queries, transformers, and temporary states, with an automatically expanding bottom panel for editing. Meanwhile, the State tab offers insights into the current state of the app's code, components, and globals, with temporary state creation now relocated to the Code section. These updates are available to all cloud customers and will soon be accessible to Retool self-hosted users, setting the groundwork for future enhancements to the app editing experience, such as support for multiscreen apps and expanded app shell functionality.