Best of Web Development — August 2023
- 1
- 2
Hacker Noon·3y
Mastering 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.
- 3
- 4
This is Learning·3y
Chrome Debugger is easier to use than you might think
Chrome Debugger is easier to use than you might think - DEV Community Please, don't tell me you’re still using to debug your application. If you never used a debugger, imagine being able to run the code line by line, where you can see all values of your variables at any given time.
- 5
- 6
Building 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.
- 7
Community Picks·3y
Getting Started – Lightning CSS
Lightning CSS can be used as a library from JavaScript or Rust. It can also be wrapped as a plugin in other build tools, and built into Parcel out of the box. From Node First, install Lightning CSS using a package manager such as Node First. Once installed, import the module and call one of the Lightning CSS APIs.
- 8
habr·3y
React 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.
- 9
Monorepo Explained
There are many great monorepo tools, built by great teams, with different philosophies. We chose these tools because of their usage or recognition in the Web development community. The tools we'll focus on are: Bazel (by Google), Gradle Build Tool (by Gradle, Inc), Lage (by Microsoft), Lerna.
- 10
ITNEXT·3y
Build 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.
- 11
- 12
Learning 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.
- 13
React 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.
- 14
freeCodeCamp·3y
MERN 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.
- 15
A Quick Module Design Pattern Example in JavaScript
A Quick Module Design Pattern is a way to encapsulate and organize code in a self-containing module that can expose certain functionalities while keeping the rest of the code private. This helps prevent variable and function name clashes, improves code maintainability, and promotes the concept of separation of concerns.
- 16
AWS Tip·3y
NextJS: Data Fetching Strategies for Server Side Components
NextJS is an extension of ReactJS that provides features like Server Side components, Client and Server Rendering, Data fetching with revalidation and built in optimizations. NextJS gives us freedom to decide if we want a component to be rendered at client or server.
- 17
React 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.
- 18
React 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.
- 19
React 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.
- 20
Cyberpunk Music Player: React, Web Audio API & Canvas
The Cyberpunk Music Player is a Cyberpunk-Themed Music Player with React, Web Audio API, and Canvas. The complete code for this project is also available on my GitHub Prerequisites. You can find and host the audio files with these platforms, but covering that process will complicate this guide.
- 21
React Custom Hook: useCookie
React Custom Hook: useCookie is one of the many carefully crafted hooks available in the collection of React custom hooks. UseCookie allows you to effortlessly handle cookies by providing a concise interface. In scenarios where you need to remove a cookie, the deleteCookie function comes to the rescue.
- 22
DEV·3y
VSCode for PHP and Laravel
VSCode for PHP and Laravel development is a solid base configuration that can be expanded upon using additional workspace specific configurations. Intelephense is the most important extension to install for PHP support. Phpactor is a PHP Language Server with more features than you can shake a stick atphpactor.
- 23
React Custom Hook: useFetch
React Custom Hook: useFetch is one of the many carefully crafted hooks available in the collection of React custom hooks. UseFetch handles the network request, parses the JSON response, and provides the resulting data. The hook also offers flexibility through its customizable options parameter.
- 24
React Custom Hook: useDebounce
The useDebounce hook leverages the useTimeout hook internally to delay the execution of a callback function until a specified delay has passed. The hook takes care of managing the timeout and clears it when necessary, ensuring that the callback is only triggered after the specified delay and with the latest dependencies.
- 25
