はてなブックマーク

Using HTTP-only cookies By setting the HttpOnly cookie flag, you can reduce the likelihood of a CSRF attack since HTTP-only cookies cannot be retrieved by JavaScript through client-side scripts. res.setHeader("Set-Cookie", `session=${sessionId}; Path=/; Max-Age=600; SameSite=Strict; HttpOnly`); Using CSRF tokens One way to protect your web application against a CSRF attack is to use CSRF tokens. A

In this detailed (and explanatory) guide, I’ll discuss how to build strongly typed polymorphic React components with TypeScript. We’ll cover the following sections: Real-world examples of polymorphic components Chakra UI’s as prop MUI’s component prop Building a simple polymorphic component Problems with this simple implementation The as prop can receive invalid HTML elements Wrong attributes can

Stanley Ulili I'm a freelance web developer and researcher from Malawi. I love learning new things, and writing helps me understand and solidify concepts. I hope by sharing my experience, others can learn something from them. Editor’s note: This post was updated on 13 April 2023 to include instructions on how to use GitHub Actions to publish the Node.js CLI to npm so it will be accessible to all u

Jude Miracle I'm a software developer passionate about the Web3 ecosystem and love to spend time learning and tinkering with new tools and technologies. Editor’s note: This post was reviewed for accuracy on 21 March 2024 by Oyinkansola Awosan to reflect the current versions of each framework — Next.js 14.1.4 and Nuxt.js 3.11.1 — as well as to specify use cases for each and summarize their similari

Editor’s note: This article was last updated on 14 September 2023 to add information about styling components and testing error behavior. Next.js is well known for its file system-based routing. With the addition of the App Router, however, Next.js 13 has changed the way developers must perform many tasks. While it still supports file system-based routing, which uses the Pages Router, the new App

Michael Yuan Michael Yuan is the maintainer of WasmEdge Runtime, a cloud native WebAssembly sandbox project under CNCF. He is the author of six books on software engineering. Connect with Michael on Twitter or GitHub. The Rust programming language has gained mainstream adoption in the past several years. It is consistently ranked as the most beloved programming language by developers and has been

Solomon Esenyi Python/Golang developer and Technical Writer with a passion for open-source, cryptography, and serverless technologies. Editor’s note: This article was updated on 3 January 2024 to add Yew and Xilem to the list of Rust GUI libraries. Graphical user interfaces (GUIs) provide an intuitive visual frontend for interacting with computers. GUIs use visual indicators like icons, windows, a

Sam Thorogood Sam is a former Googler, now CTO of the Australian energy startup Gridcognition, with an interest in all things web. So, you’ve listened to all the advice and sat down to migrate your code or learn a new standard, but you have questions. ES modules (also known as ESM) are here, but using them is not quite as simple as migrating all your require() expressions into import statements. E

Editor’s note: This article was last updated by Muhammed Ali on 18 March 2024 to cover common issues when building micro-frontends and their solutions, as well as examples of micro-frontend communication strategies such as event-based communication and using React’s Context API. Working on large-scale projects and managing their codebases can be a big challenge for teams. Although micro-frontends

Since its inception in 2010, Three.js has been the de facto standard for building 3D visuals on the web. Over the years, several abstractions have been built on top of this library, consolidating its features and the large ecosystem of JavaScript libraries to create fast, stunning, and performant web applications. As Vue.js has matured, it has become one of the top libraries of choice for componen

MacBobby Chibuzor Go, Solidity, and Haskell developer interested in the cloud native world and blockchain technology. A fanatic for technical writing and open source contribution. In this tutorial, we’ll demonstrate how to build a full-stack DApp, test it on the Ropsten testnet, and deploy it with the Alchemy Web3 development platform. We’ll use Vite, React, and Tailwind CSS to build the DApp fron

Table of Contents What is Ultra? Features of Ultra Ultra vs Aleph.js The drawbacks to using Ultra Getting started with Ultra Building components in Ultra Deploying an Ultra app In the world of frontend development, React is one of the most popular libraries for developing components for web applications. React v18 includes new features, such as concurrent rendering, and it supports SSR with React

LogRocket’s Galileo AI watches every session, surfacing impactful user struggle and key behavior patterns. Introduction In building or designing software systems, most design decisions come with tradeoffs. Using object-relational mappers (ORMs) has been a controversial subject amongst many developers, since there has always been a debate as to whether they’re really worth it. While in some cases p

Timonwa Akintokun Frontend developer and technical writer who is passionate about the web. Creator of websites that tell stories. Editor’s note: This deep dive into the CSS :where() and :is() functions was last updated on 4 January 2023 to update any outdated information, include sections on the :is() function, and discuss browser compatibility. The CSS :where() function takes in a list of selecto

Editor’s note: This guide to React design patterns was last reviewed for accuracy by Isaac Okoro on 12 April 2024. The article was also updated to add four more design patterns, covering prop combination, controlled components, forwardRefs, and conditional rendering. It was previously updated to include information about the render props pattern and state reducer pattern. Check out this article fo

Puppeteer is a high-level abstraction of headless Chrome with an extensive API. This makes it very convenient to automate interactions with a web page. This article will walk you through an example use case where we are going to search for a keyword on GitHub and fetch the title of the first result. This is a basic example purely for the sake of demonstration, and it can even be done without Puppe

Now, let’s look at the component hierarchy to understand the relationship between the components. As you can probably see now, the problem we have is that the user object that holds the user’s name is only available at the root component level (App), whereas the component rendering the welcome message is nested deep within our app (Message). This means we somehow have to pass this user object down

Leonardo Losoviz Freelance developer and writer, with an ongoing quest to integrate innovative paradigms into existing PHP frameworks, and unify all of them into a single mental model. A new version of the GraphQL specification has been released: the October 2021 Edition. This new release comes over three years after the previous one (from June 2018) and involved 35 contributors who produced nearl

Maxim Orlov Follow "Helping JavaScript developers deploy their applications 🚀 Find me online at maximorlov.com and follow me on Twitter @_maximization." Logging with Pino and AsyncLocalStorage in Node.js February 9, 2021 6 min read 1952 Spending hours, or even days, trying to fix an obscure bug is frustrating and unproductive. Eventually, you’ll end up staring at the screen waiting for an eureka

Sarah Chima Atuonwu I am a Fullstack software developer that is passionate about building products that make lives better. I also love sharing what I know with others in simple and easy-to-understand articles. Editor’s note: This article was updated by Oscar Jite-Orimiono on 27 December 2023 to provide the most recent information regarding native support for CSS nesting, along with updated example

Gapur Kassym I am a full-stack engineer and writer. I'm passionate about building excellent software that improves the lives of those around me. As a software engineer, I enjoy using my obsessive attention to detail and my unequivocal love for making things that change the world. Editor’s note: This article was last updated by Shalitha Suranga on 20 February 2024 to include advanced type checking

Mario Zupan I'm a self-employed Software Engineer and Trainer living in Vienna, Austria. I've worked at several companies and in multiple fields building, maintaining and operating distributed systems at scale using Java, Kotlin, Node, Go and Rust. I also taught advanced software engineering courses for several years at the University of Applied Sciences FH Joanneum in Graz and worked as a technic

In my previous life, I wrote in C++ and later C#, and used both to share code by compiling it to a “library file,” which I and my team could then copy to other projects. Sharing code libraries like this is important so that we aren’t rewriting or duplicating common code again and again for new projects. It seems like it should be as simple to do this in TypeScript. We just compile to JavaScript (w

This article is a follow-up to my previous article showcasing a list of nine superb Vue 3 UI frameworks. These frameworks enhance your Vue app’s development experience, maintainability, and final design. Today, I’ll be talking about five more brand new Vue 3 UI frameworks that ship with a panoply of awesome components (e.g., navbars, inputs, and checkboxes) that will help you effortlessly build in

Vijit Ail Software Engineer at toothsi. I work with React and NodeJS to build customer-centric products. Reach out to me on LinkedIn or Instagram. Editor’s note: This article was last updated by Jude Miracle on 23 July 2024 to cover how to use the useFormContext Hook in React Hook Form, handle complex data structures like nested fields and arrays within forms, and update code blocks where necessar

John Reilly MacGyver turned Dev 🌻❤️ TypeScript / ts-loader / fork-ts-checker-webpack-plugin / DefinitelyTyped: The Movie An exciting feature is shipping with TypeScript 4.4. It’s called control flow analysis of aliased conditions, which is quite a mouthful. In this post, we’ll unpack this new feature and demonstrate how it contributes to improving the readability of code. Indirect type narrowing

Editor’s note: This post was last updated on 14 December 2023 to inform readers about REST API and GraphQL security concerns, as well as alternatives to GraphQL, such as tRPC and gRPC. GraphQL is great if you want to work in a declarative style, as it enables you to select only the information or operations you need. However, depending on your use case, performance requirements, and tolerance for