Hacker Noon·3yMastering JavaScript Shorthands
We'll explore the art of JavaScript shorthands - nifty techniques that make your code more concise and elegant. We'll dive into real use case examples in both vanilla JavaScript and shorthand form. The Ternary Operator: Conditional Assignment Use Case.
Community Picks·3yIntroducing NextUI Version 2.0
NextUI v2.0 comes with a TailwindCSS plugin that enables the customization and addition of default themes. New Templates & Guides for App and Pages directories, alongside Vite, Remix, and Astro installation guides, are introduced to aid your app creation process.
Hacker Noon·3yBuilding a Full Stack Airbnb Clone with Next.js, Tailwind CSS, Amplication, and More
Building a Full Stack Airbnb Clone with Next.js, Tailwind CSS, Amplication, and more. The platform is centered around the concept of a low-code development environment. Amplication is an open-source development tool designed to simplify and expedite the process of building web applications.
ITNEXT·3yBuild a Full Stack ReminderApp with React, NextJs, Typescript, ServerAction, Zod, Hook-form, Prisma, and Tailwind
Build a Full Stack ReminderApp with React, NextJs, Typescript, ServerAction, Zod, Hook-form, Prisma, and Tailwind. Hi everyone, I published my last video: Build a full stack Reminder App.
habr·3yReact Custom Hook: useArray
"useArray" hook is one of the many carefully crafted hooks available in the collection of React custom hooks. The useArray hook uses the useState hook from React to manage the array state. The advantages of using this custom hook are twofold: it simplifies the management of array states and provides a cleaner and more readable code structure.
ITNEXT·3yBuild a drag and drop Kanban Board with React, Typescript, Tailwind, Dnd-Kit
Build a drag and drop Kanban Board with React, Typescript, Tailwind, Dnd-Kit. This project is a great way to practice your React skills and learn some new techniques and libraries. So what are you waiting for? Check out the video below and let me know what you think in the comments.
asayer·3yApplying Design Principles in React
KISS Principle KISS is an acronym for ‘keep it simple, stupid’ This principle was first coined by Clarence Leonard ‘Kelly’ Johnson (1910-1990), an American aeronautical and systems engineer. This article will explain several popular software development principles and how to implement them in your React code base.
swizec.com·3yHow many years to senior engineer?
Swizec Teller: Years isn't it Years is a bad metric. It can be a decent proxy, if you have no other information, but what you're looking for is some sort of wisdom. Experienced engineers ask really weird questions that help them prune that decision tree in their mind in large swathes.
This is Learning·3yLearning Web Development Together with a Real Project
The app is currently based on Next.js with TypeScript and Tailwind CSS. We manage some data, specifically from the GitHub APIs using the GraphQL endpoint and React Query. There's a login feature with NextAuth using GitHub as a provider. The project is open to any kind of contribution, from fixing typos to adding new features.
Product Hunt·3yRadix Themes - A beautiful component library for building React apps faster
Radix Themes is an open source component library for building React apps faster. It helps you build faster and makes it easy to create beautiful, accessible interfaces that are a breeze to maintain. Radix UI is rated 5/5 ★ by 21 users.
freeCodeCamp·3yHow to Create a Meteor Effect with React and TailwindCSS
A Meteor is basically a UI element with a head and a tail that has a gradient. In the image, the background lines are what I call meteors. We are going to animate these lines to go from the left side of the card container to the right side, giving an illusion of a meteor shower.
Community Picks·3yInfinite Scroll in React: Complete Guide for Dynamic Loading
Infinite Scroll is a web design technique that allows users to scroll through content continuously without pagination or clicking "Next" buttons. In this guide, we'll implement infinite scrolling by building a card-based planet explorer. We'll explore the potential performance issues infinite scrolling can present and reveal optimization strategies to mitigate them.
Community Picks·3yPatterns for Reactivity with Modern Vanilla JavaScript
Patterns for Reactivity with Modern Vanilla JavaScript are Core to Web Development. ‘Reactivity’ is how systems react to changes in data. Reactive Object Properties with Proxies in JavaScript can be the foundation for performing reactivity after setting or getting properties on an object.
Community Picks·3yBuilding a Design System with React Web Components
Building a Design System with React Web Components is a simple way to build a universal design system with React. We compiled React to Web Components using wrappers, polyfills and tooling to make them work in every context. The implementation turned out tougher than we anticipated but we're happy with the result.
habr·3yReact Custom Hook: useAsync
The useAsync hook takes in a callback function that performs the asynchronous operation and an optional array of dependencies. It returns an object with three properties: loading, error, and value. The hook employs the useState and useEffect hooks to manage the loading state and invoke the memoized callback function when necessary.
asayer·3yReact: Performing Authentication with JWT
This article will discuss how to perform JWT authentication in a React app. We will cover the steps involved in setting up a backend JWT endpoint, signing up and signing in from your React app, and protecting routes with JWT validation. You will use a custom-built Express server API to relay the JWT token for a user.
freeCodeCamp·3yMERN Stack Crash Course – Build a Book Store App
MERN stack is a set of technologies often used to build full stack web apps. You'll start from scratch and build a complete CRUD application, exploring both backend and frontend development. The course covers an array of topics, including but not limited to: Backend CRUD operations.
freeCodeCamp·3yReact Server Components – How and Why You Should Use Them in Your Code
React has changed how we think about building user interfaces. We must adapt to this new mental model to fully leverage its power in building applications. In this tutorial, you'll learn about React Server Components (RSC) You'll learn exactly what they are and how they work, and more importantly, what problem they solve.
Syncfusion·3yBoosting React Performance: useCallback vs. useMemo Hooks
React 16 promoted the creation of functional components and introduced the following hooks: useEffect for handling the component’s lifecycle. These hooks are necessary because re-renders and re-computations are costly operations. In this blog, we will delve into these hooks, exploring their functionality and examining how they work.
habr·3yReact Custom Hook: useDarkMode
"UseDarkMode" Hook is one of the many carefully crafted hooks available in the collection of React custom hooks. It combines two other handy hooks and, to provide a seamless dark mode experience. It automatically detects the user's preferred color scheme and persists the dark mode state in the browser's local storage.
habr·3yReact Custom Hook: useClickOutside
The useClickOutside hook is designed to simplify the process of detecting clicks outside a specified component. It listens for click events on the document level, allowing you to trigger a callback function when a click occurs outside the provided component's reference. It works seamlessly with functional components using the useState and useRef hooks.
Hacker Noon·3yHow to manage state in Next.js 13 using Redux Toolkit.
We will go through a real world example whereby, we need to store authentication data in redux state and in this case, it will be persisted. We will also access this data in the some of the components that need it. We will use Redux Toolkit to manage state in Next.js.
habr·3yReact Custom Hook: useDebugInformation
React Custom Hook: useDebugInformation is one of the many carefully crafted hooks available in the collection of React custom hooks. The hook tracks the number of renders, changed props, time since the last render, and the timestamp of the last rendering. UseDebugInformation can be applied in various scenarios.