Best of Frontend Development — November 2023
- 1
- 2
- 3
- 4
Medium·2y
React Folder/File Structure Patterns and Tips: Part 2
This article provides tips and best practices for organizing folder and file structures in React projects. It suggests creating a 'shared' folder for common components, using an 'index.js' file for every component and page, importing files to one file and exporting from it, getting rid of relative path hell, and keeping components length short.
- 5
freeCodeCamp·2y
How to Use TypeScript with React
Learn how to use TypeScript with React. Install TypeScript on your machine and create a Vite project using React and TypeScript. Write React components with TypeScript and define prop types using interfaces or types. Make API calls and store the data in state. Display the data on the UI and handle loading and change events. Explore advanced topics like handling nested properties and separating type declarations into separate files.
- 6
Community Picks·3y
A Couple of New CSS Functions I’d Never Heard Of
The article discusses new CSS functions: 'light-dark()', 'xywh()', 'round()', and 'perspective()'. 'light-dark()' allows handling different color values based on light and dark themes. 'xywh()' creates basic shapes with specified width, height, and coordinates. 'round()' offers rounding options and intervals for numbers. 'perspective()' is a function that augments the 'perspective' CSS property. The article also mentions browser support for these functions.
- 7
Substack·2yA good engineer thinks like a product manager
Engineers need to think like product managers to create solutions that customers love. They should focus on solving customer's problems rather than the technical aspects. To improve product-mindedness, engineers can pair with non-tech people, explain technical solutions to non-tech people, ask business and customer-related questions, talk directly with customers, do freelance work, and take on different roles. Simplifying solutions before implementation is also crucial for better results.
- 8
Code and Deploy an Instagram Clone with React and Firebase
Learn how to create an Instagram clone using React and Firebase. The course covers both front-end and back-end development, including authentication, user interactions, and advanced functionalities. By the end of the course, you'll have a fully functional Instagram clone to showcase your skills.
- 9
Prismic·2y
React vs. Vue: How to Choose for 2024
A comparison between Vue and React frameworks for web development. The article discusses their similarities, differences, pros and cons, and factors to consider when choosing between them. It also provides examples of popular brands using each framework. Vue is described as lightweight, easy to learn, and beginner-friendly, while React is praised for its large ecosystem, mobile development support, and frequent updates.
- 10
- 11
Creating Bento Grid Layouts
Bento grid layouts are versatile and compact ways to display content, inspired by traditional Japanese bento boxes. Apple has popularized the use of bento grid layouts. Various methods such as CSS Grid and Flexbox can be used to create bento grid layouts.
- 12
- 13
- 14
LogRocket·2y
Using Rust and Leptos to build beautiful, declarative UIs
Leptos is a modern, full-stack web framework for building declarative and fast UIs with Rust and WebAssembly. It uses a fine-grained reactivity system and allows for both server-side rendered (SSR) and client-side rendered (CSR) applications with a single codebase.
- 15
The Miners·2y
Auto-Saving Forms Done Right 2/2 Implement a good auto-saving form using React Hooks
Learn how to implement an auto-saving form using React Hooks. The article provides guidelines for designing an auto-saving form and walks you through the implementation process step-by-step. It covers topics such as setting up the API, styling with Bulma, adding form functionality, implementing auto-save and manual save, handling save status and errors, and adding a loading spinner.
- 16
HTML Data Attributes: One of the Original State Management Libraries
HTML data attributes are a standard part of HTML and provide a way to add custom attributes to HTML elements. They can be accessed using the dataset property in JavaScript, making it easy to retrieve and manipulate the values. DEV, a Rails monolith with Preact in the front-end, heavily utilizes data attributes for its data store, instead of using a state management library like Redux or Zustand.
- 17
Javascript Interview Question: Write a function which deep clones a object
A deep clone function in JavaScript creates a completely independent copy of an object or array, including all nested objects and arrays. It is important to use the appropriate cloning method in production applications.
- 18
The Next Web·2y
Is Tailwind CSS Worth Trying in 2024?
Tailwind CSS is a utility-first CSS framework that provides pre-built classes to speed up development. It offers responsive design, consistency, and speedy development. The toolkit integrates with various frontend frameworks and tools. It has advantages such as Tailwind UI and the JIT mode, but also has downsides such as a learning curve and large file sizes. Tailwind CSS is compared to Bootstrap, with Tailwind offering more customization and control. A real use case for Tailwind CSS is demonstrated in building a digital business card platform. Overall, Tailwind CSS is a valuable tool for developers in 2024.
- 19
- 20
The New Stack·2y
Combining AI with React for a Smarter Frontend
Frontend development needs to include AI for richer insights from data. Developers can use custom data and embeddings to enable natural language queries and find relevant information. The suggested tech stack includes Next.js, OpenAI's Chat GPT, Turbo, GPT 4, LangChain, Vercel's AI SDK, and MongoDB. GPTs can be made more real-time and context-aware with React, large language models, and RAG.
- 21
- 22
Discover .NET·3y
5 Reasons To Not Use C# IDE For TypeScript Development
The article provides five reasons why using IDEs like Rider and Visual Studio for TypeScript development may not be ideal. It highlights issues such as slowness, limited IntelliSense support, confusion of concepts, temptation to bring in C# concepts to TypeScript, and the superiority of Visual Studio Code for frontend development. It encourages developers to consider using VS Code instead.
