Details that make interfaces feel better 🔗
Read it on the web [...]
Sergio Xalambrí
Posts
Expand your hit areas 🔗
Read it on the web [...]
Nobody Gets Promoted for Simplicity 🔗
Read it on the web [...]
Why I don't use down migrations 🔗
Read it on the web [...]
How we enabled Content Security Policy for everyone 🔗
Read it on the web [...]
RESTful 🔗
A term used to describe APIs that follow the principles of REST, using standard HTTP methods, stateless communication, and resource-based URLs to prov [...]
MIME Type (aka Multipurpose Internet Mail Extensions Type) 🔗
A standardized identifier used by HTTP to describe the format of a file or response, such as text/html, application/json, or image/png. [...]
Same-Origin Policy 🔗
A browser security rule that restricts scripts from interacting with resources from a different origin unless explicitly allowed through mechanisms su [...]
CORS (aka Cross-Origin Resource Sharing) 🔗
A browser security mechanism that controls whether a web page can request resources from a different origin than the one that served the page. [...]
Bearer Token 🔗
A type of access token used in HTTP authentication where possession of the token grants access to protected resources, commonly sent in the Authorizat [...]
OIDC (aka OpenID Connect) 🔗
An identity layer built on top of OAuth2 that allows applications to authenticate users and obtain identity information through standardized tokens su [...]
OAuth2 (aka OAuth 2.0) 🔗
An authorization framework that allows applications to obtain limited access to user resources on another service without requiring the user to share [...]
GraphQL 🔗
A query language and runtime for APIs that allows clients to request exactly the data they need from a server rather than receiving fixed responses fr [...]
REST (aka Representational State Transfer) 🔗
An architectural style for building Web APIs where resources are accessed through standard HTTP methods such as GET, POST, PUT, PATCH, and DELETE. [...]
XML (aka Extensible Markup Language) 🔗
A markup language used to represent structured data in a hierarchical format, historically common in web services before JSON became dominant. [...]
JSON (aka JavaScript Object Notation) 🔗
A lightweight data format commonly used in APIs to exchange structured data between clients and servers in a format that is easy for humans to read an [...]
TLS (aka Transport Layer Security) 🔗
A cryptographic protocol used to secure communications over a network, commonly used by HTTPS and WSS to encrypt data between clients and servers. [...]
TCP (aka Transmission Control Protocol) 🔗
A core internet protocol that ensures reliable, ordered delivery of data between devices communicating over a network. [...]
IP (aka Internet Protocol) 🔗
The protocol responsible for addressing and routing packets across networks so data can travel from a source device to a destination device. [...]
URI (aka Uniform Resource Identifier) 🔗
A broader identifier used to identify a resource, which may include URLs or other naming schemes that reference resources without specifying their loc [...]
URL (aka Uniform Resource Locator) 🔗
A standardized address used to locate resources on the web, specifying the protocol, domain, path, and optionally query parameters or fragments. [...]
DNS (aka Domain Name System) 🔗
A distributed system that translates human-readable domain names into IP addresses so browsers can locate servers on the internet. [...]
FTP (aka File Transfer Protocol) 🔗
A network protocol used to transfer files between a client and a server, historically common for uploading website files to hosting servers. [...]
CSS (aka Cascading Style Sheets) 🔗
A stylesheet language used to control the presentation of HTML documents, including layout, colors, typography, spacing, and responsive design. [...]
HTML (aka Hypertext Markup Language) 🔗
The standard markup language used to structure content on the web, defining elements such as headings, paragraphs, links, images, and other page struc [...]
HTTPS (aka Hypertext Transfer Protocol Secure) 🔗
A secure version of HTTP that encrypts communication between a client and server using TLS, protecting data from interception or modification during t [...]
HTTP (aka Hypertext Transfer Protocol) 🔗
The application-layer protocol used for communication between web browsers and servers, defining how requests and responses are formatted and transmit [...]
WSS (aka WebSocket Secure) 🔗
The encrypted version of the WebSocket protocol, using TLS to provide secure real-time communication between a client and a server over the internet. [...]
Web API 🔗
An API exposed over HTTP that allows clients such as browsers or mobile applications to interact with backend services. [...]
Static Assets 🔗
Files such as images, fonts, stylesheets, and scripts that are served directly to the browser without server-side processing. [...]
Routing 🔗
The mechanism that determines which content or component should be displayed based on the current URL, either handled by the server or by client-side [...]
Rendering 🔗
The process of generating the UI of an application from data and components, either on the server (SSR) or in the browser (CSR). [...]
SSE (aka Server-Sent Events) 🔗
A browser technology that allows a server to push real-time updates to the client over a single HTTP connection, commonly used for notifications and l [...]
WebSockets 🔗
A protocol that provides persistent, bidirectional communication between a client and a server, allowing real-time features such as chat, live updates [...]
Idempotency 🔗
A property of an operation where performing the same request multiple times produces the same result, commonly used in APIs to make retries safe. [...]
CDN (aka Content Delivery Network) 🔗
A distributed network of servers that cache and deliver static assets such as images, scripts, and stylesheets from locations geographically closer to [...]
Caching 🔗
A performance technique where responses or computed data are stored temporarily so future requests can be served faster without repeating the same com [...]
Rate Limiting 🔗
A technique used by APIs and servers to restrict how many requests a client can make within a given time period, protecting systems from abuse or over [...]
Webhooks 🔗
A mechanism where one system sends HTTP requests to another when specific events occur, allowing applications to receive real-time updates without pol [...]
Edge Runtime 🔗
A lightweight JavaScript runtime designed to run code at the edge of a CDN network, commonly used for Edge Functions and SSR close to the user. [...]
RSC (aka React Server Components) 🔗
A React rendering model where components run on the server and send serialized UI to the client, reducing the amount of JavaScript needed in the brows [...]
Optimistic UI 🔗
A UX pattern where the interface updates immediately after a user action assuming the server operation will succeed, later reconciling the UI state wi [...]
Progressive Enhancement 🔗
A web development strategy where a website works with basic functionality using HTML and server responses, and enhances the experience with JavaScript [...]
PKCE (aka Proof Key for Code Exchange) 🔗
An extension to the OAuth2 Authorization Code Flow that protects public clients from authorization code interception by requiring a one-time secret du [...]
Resource Server 🔗
A server that hosts protected resources and validates access tokens before granting access, commonly implemented as an API that trusts tokens issued b [...]
Authorization Server 🔗
A server responsible for authenticating users and issuing tokens such as access tokens and refresh tokens, acting as the central authority in OAuth2 a [...]
Refresh Token 🔗
A token used to obtain new access tokens from an Authorization Server without requiring the user to authenticate again, typically long-lived and store [...]
Access Token 🔗
A credential issued by an Authorization Server that allows a client to access protected resources on a Resource Server, typically short-lived and incl [...]
JWKS (aka JSON Web Key Set) 🔗
A JSON document containing one or more JWKs, typically exposed through a public endpoint so Resource Servers can retrieve the keys required to validat [...]
JWK (aka JSON Web Key) 🔗
A JSON representation of a cryptographic key used in web security systems, commonly published by Authorization Servers so other services can verify si [...]
JWT (aka JSON Web Token) 🔗
A compact and self-contained token format used to securely transmit claims between parties, commonly used in authentication systems where an Authoriza [...]
API Gateway 🔗
A service that acts as a single entry point for multiple backend services, handling routing, authentication, rate limiting, and request transformation [...]
Edge Functions 🔗
Small serverless functions that run at the edge of a CDN network close to users, often used for authentication, request rewriting, personalization, an [...]
Serverless 🔗
A cloud computing model where applications run as short-lived functions managed by a platform, allowing developers to deploy code without managing ser [...]
Microservices 🔗
An architectural style where an application is composed of multiple independent services that communicate over a network, each responsible for a speci [...]
Monolith 🔗
An application architecture where the frontend, backend, and business logic are developed and deployed together as a single system rather than split a [...]
BFF (aka Backend for Frontend) 🔗
An architectural pattern where a backend service is built specifically for a particular frontend, aggregating data from multiple services and shaping [...]
Edge Rendering 🔗
A rendering strategy where SSR runs on edge runtimes located close to users, reducing latency compared to rendering requests in a centralized server o [...]
Streaming SSR 🔗
A variation of SSR where the server sends HTML to the browser in chunks as it is generated, allowing the browser to begin rendering the page before th [...]
Islands Architecture 🔗
An architecture where most of a page is static HTML but small interactive sections, called islands, are hydrated as independent components instead of [...]
Partial Hydration 🔗
A rendering strategy where only specific parts of a server-rendered page are hydrated with JavaScript instead of the entire document, reducing the amo [...]
Hydration 🔗
The process where client-side JavaScript takes control of HTML generated by SSR, attaching event listeners and restoring application state so the page [...]
Access React Router Context with AsyncLocalStorage 🔗
Access React Router's context from any function without passing it through every layer. [...]
Hire managers of one 🔗
Read it on the web [...]
Create a Per-Request Database Instance with Middleware 🔗
Manage database lifecycle with React Router middleware, ensuring connections close even when errors occur. [...]
Create a Multi-Directory Route Organization in React Router 🔗
Scale your route organization as your app grows by splitting into multiple directories, each using flat routes internally. [...]
Use Sec-Fetch Headers for CSRF Protection 🔗
Protect your React Router app from CSRF attacks using browser Sec-Fetch headers in middleware. [...]
SQLite-on-the-Server Is Misunderstood: Better At Hyper-Scale Than Micro-Scale 🔗
Read it on the web [...]
React Router Loaders and Actions as Integration Points 🔗
Test your business logic, not your loaders and actions. Treat them as integration points and avoid mocking nightmares. [...]
The Too Early Breakpoint 🔗
Read it on the web [...]
More invoker commands, and more reasons not to use JavaScript please 🔗
Read it on the web [...]
sergiodxa/agent-skills 🔗
Read it on the web [...]
The Incredible Overcomplexity of the Shadcn Radio Button 🔗
Read it on the web [...]
Affordances: The Missing Layer in Frontend Architecture 🔗
Read it on the web [...]
Confirmation dialogs with zero JavaScript 🔗
Read it on the web [...]
Stylish dialogs 🔗
Read it on the web [...]
Logging Sucks - Your Logs Are Lying To You 🔗
Read it on the web [...]
Micro-libraries need to die already 🔗
Read it on the web [...]
The stacking workflow 🔗
Read it on the web [...]
Composition Is All You Need by Fernando Rojo at React Universe Conf 2025 🔗
Read it on the web [...]
Tips for good UI implementation 🔗
Read it on the web [...]
Dedupe Server Calls with Remix Utils Batcher 🔗
Prevent duplicate API calls in React Router loaders using Remix Utils Batcher middleware for better performance. [...]
Transform FormData Between UI and Database in React Router 🔗
Transform form data to database objects and back using actions and loaders with proper separation of concerns. [...]
The Perils of Reactivity 🔗
Read it on the web [...]
How Architecture Patterns Shape Development 🔗
Understanding MVC, MVT, MVVM, and Component architectures through responsibility separation and data flow in modern web applications. [...]
Build a Master-Detail UI with React Router 🔗
Create a master-detail interface that adapts based on how users access it, full context when browsing, focused when direct. [...]
Leverage React Router's Built-in Data Deduplication 🔗
Learn how React Router's built-in deduplication system uses references to eliminate duplicate data transmission when combining promises in y [...]
No, you don't want to hire "the best engineers' 🔗
Read it on the web [...]
Redirect Based on Screen Size in React Router 🔗
Learn how to use a nested index route with a clientLoader in React Router to conditionally redirect based on screen size, ensuring a smooth [...]
Avoid Waterfalls in React Suspense 🔗
Learn how React Suspense boundaries can cause or prevent data loading waterfalls, the difference between nested and sibling boundaries, and [...]
Handle deferred data in React Router 🔗
Three approaches to handle deferred promises in React Router v7: Await component, React.use hook, and direct promise rendering. [...]
Use Action Routes in React Router 🔗
Learn how to structure server and client actions in React Router using a clear and scalable pattern. Centralize logic, handle forms, manage [...]
Prefer Gaps To Margins 🔗
Read it on the web [...]
Syntax Highlighting code snippets with Prism and the Custom Highlight API 🔗
Read it on the web [...]
Resilient Import Maps - Better Theme Development and Beyond 🔗
Read it on the web [...]
Toasts are Bad UX 🔗
Read it on the web [...]
The XY Problem 🔗
Read it on the web [...]
Don't ask to ask, just ask 🔗
Read it on the web [...]
never just 🔗
Read it on the web [...]
Add a Color Scheme Toggle in React Router 🔗
Add a color scheme toggle to your React Router app using cookies for persistent, flash-free light, dark, or system preference. [...]
JSX Over The Wire 🔗
Read it on the web [...]
The Back-end for Front-end Pattern (BFF) 🔗
Read it on the web [...]
Debounce Loaders and Actions in React Router 🔗
Debounce loaders and actions in React Router at the route level—cleaner code, better control, no extra wrappers needed. [...]
Use client_id and client_secret in OAuth2 🔗
Use client_id and client_secret to authenticate your app with the Authorization Server in OAuth2 flows. [...]
Use the OAuth2 Introspection Endpoint 🔗
Learn how to use the introspection endpoint in OAuth2 to validate opaque tokens and extract user and scope information. [...]
Revoke a Refresh Token in OAuth2 🔗
Learn how to securely revoke refresh tokens in OAuth2 and prevent unauthorized access after logout or token compromise. [...]
Use PKCE in OAuth2 Authorization Code Flow 🔗
Learn how to securely implement PKCE in the OAuth2 Authorization Code flow and why it’s useful for public and server-rendered apps. [...]
Add Custom Claims to JWT Access Tokens 🔗
Learn how to add custom claims to JWT access tokens in OAuth2 without exposing sensitive data. [...]
Validate exp, iat, and nbf in JWTs 🔗
Learn how to validate exp, iat, and nbf claims in JWT access tokens to ensure your API only accepts valid tokens. [...]
Use `scope` to Authorize Actions in Your API 🔗
Learn how to use the scope claim in OAuth2 access tokens to authorize actions in your API with fine-grained permissions. [...]
Validate JWTs with JWKS 🔗
Learn how to verify JWT access tokens securely using JWKS, without hitting your Authorization Server on every request. [...]
OAuth2 Access Token Claims Explained 🔗
JWTs used as OAuth2 access tokens contain claims that define identity, security, and permissions. Learn how to use and validate them. [...]
OAuth2 Scopes Explained 🔗
OAuth2 scopes define what an app can do with your data. Learn how they work, best practices, and how to enforce them in your API. [...]
Create a Per-Request Singleton with React Router Middleware 🔗
Create a per-request singleton in React Router middleware to optimize request-based caching and batching without persistent global state. [...]
Test Middleware in React Router 🔗
Learn how to test React Router middleware using Bun Test, mock requests, and validate session handling in just a few simple steps. [...]
OAuth2 Tokens Explained 🔗
OAuth2 uses Access, Refresh, and ID Tokens, each with a distinct role. Learn how they work and how to store them securely. [...]
OAuth2 Audience Explained 🔗
The OAuth2 audience (aud) claim ensures tokens are used only by the right APIs. Learn how it works and why it matters. [...]
JWT vs. Opaque Tokens 🔗
JWTs offer fast, stateless authentication, while opaque tokens provide better revocation control. Which one should you use? [...]
Use middleware in React Router 🔗
Enable middleware in React Router 7.3.0 to intercept requests and enhance loaders and actions on both server and client. [...]
Maybe don't navigate(-1) in Remix/React Router 🔗
Read it on the web [...]
OAuth2 for Backend-for-Frontend 🔗
Securely handle OAuth2 in a Backend-for-Frontend (BFF) with React Router, keeping tokens off the frontend for better security [...]
Show a 404 in React Router 🔗
Read it on the web [...]
Class methods are Ruby’s useEffect 🔗
Read it on the web [...]
What I learned at Campsite 🔗
Read it on the web [...]
Throwing vs. Returning Redirects in React Router 🔗
Throwing vs. returning redirects in React Router: understand when to use each, how they work, and how to handle them properly [...]
Download a file from a React Router route 🔗
Read it on the web [...]
How I Stay Sane Implementing Stripe 🔗
Read it on the web [...]
Where to put concernsImprove readabilityEnhance, but not replace, rich object modelsConclusions 🔗
Read it on the web [...]
Domain driven boldness 🔗
Read it on the web [...]
Good concerns 🔗
Read it on the web [...]
Vanilla Rails is plenty 🔗
Read it on the web [...]
Active Record, nice and blended 🔗
Read it on the web [...]
Globals, callbacks and other sacrileges 🔗
Read it on the web [...]
Use Bullet to Detect N+1 Queries in Rails 🔗
Read it on the web [...]
Use Pandoc to convert a Markdown to a PDF and ePUB 🔗
Read it on the web [...]
Load Dynamic Stylesheets in React Router 🔗
Read it on the web [...]
Split routes config in React Router 🔗
Read it on the web [...]
Configure the tracking branch in Git 🔗
Read it on the web [...]
Reuse route modules in React Router 🔗
Read it on the web [...]
Stop just using “Frontend” or “Backend” to describe the Engineering you like 🔗
Read it on the web [...]
Populate Your Rails Database with Fixtures 🔗
Learn how to populate your Rails database with fixtures for testing and development. [...]
You Can't Not Have a Framework 🔗
Read it on the web [...]
This doesn't warrant a blog post 🔗
Read it on the web [...]
Because I wanted to 🔗
Read it on the web [...]
Making Web Component good enough 🔗
Read it on the web [...]
Layered Architectures with Laravel 🔗
Read it on the web [...]
Don't Sleep on AbortController 🔗
Read it on the web [...]
Stub a method in a class with Minitest 🔗
Read it on the web [...]
Show toast after a Remix action 🔗
Learn to display a toast notification after a Remix action by utilizing the clientAction function to ensure consistent user feedback. [...]
Building a Proper REST API 🔗
Read it on the web [...]
How I would do auth 🔗
Read it on the web [...]
Simplify Component Imports with TypeScript Namespaces 🔗
Read it on the web [...]
Card Stack 🔗
Read it on the web [...]
Counterscale and the New Self-Hosted 🔗
Read it on the web [...]
On Frontend vs Backend 🔗
Read it on the web [...]
Validate Form in Remix with clientAction 🔗
Read it on the web [...]
Generate Cloudflare environment type with wrangler 🔗
Read it on the web [...]
Configure scoped private packages in Bun 🔗
Read it on the web [...]
When to use Route Modal in React Router 🔗
Read it on the web [...]
Deconstructing the Monolith: Designing Software that Maximizes Developer Productivity 🔗
Read it on the web [...]
Ultimate guide to multi-tenant SaaS data modeling 🔗
Read it on the web [...]
Migrating from Radix to React Aria: Improving Accessibility and UX 🔗
Read it on the web [...]
Creating a pointer-friendly submenu experience 🔗
Read it on the web [...]
Building like it's 1984: A comprehensive guide to creating intuitive context menus 🔗
Read it on the web [...]
Building future facing frontend architectures 🔗
Read it on the web [...]
Navigating the future of frontend 🔗
Read it on the web [...]
Use package.json#bin to create a CLI 🔗
Read it on the web [...]
Margin considered harmful 🔗
Read it on the web [...]
In Loving Memory of Square Checkbox 🔗
Read it on the web [...]
Access location.state in Remix loaders and actions 🔗
Read it on the web [...]
The Copenhagen Book 🔗
Read it on the web [...]
Add i18n to a Remix Vite app 🔗
Read it on the web [...]
Documenting Architecture Decisions 🔗
Read it on the web [...]
Autoload the correct Node version with NVM 🔗
Read it on the web [...]
HDR (aka Hot Data Revalidation) 🔗
A development-time compiler feature where the data used by an application is replaced at runtime without reloading the application and losing any in-m [...]
HMR (aka Hot Module Replacement) 🔗
A development-time compiler feature where the code is replaced at runtime without reloading the application or server and losing any in-memory state. [...]
PPR (aka Partial Pre-Rendering) 🔗
An application rendering strategy where SSG is used in combination with SSR to generate at build time the static parts of an HTML document and then us [...]
ISR (aka Incremental Static Regeneration) 🔗
An application rendering strategy where SSG is used combined with SSR to update or generate new static HTML files at runtime without re-building the a [...]
SSG (aka Static Site Generation) 🔗
An application rendering strategy where the server generates static HTML files at build time instead of runtime. Updating those static files require a [...]
PESPA (aka Progressively Enhanced Single-Page Application) 🔗
A progressively enhanced SPA that uses SSR on document requests, and after JS loads start working as a SPA, while most if not all of the behavior can [...]
PEMPA (aka Progressively Enhanced Multi-Page Application) 🔗
A progressively enhanced MPA that uses JS, general navigation happens like a MPA but in-page changes happens with or without JS to fetch more data as [...]
Nest routes with dynamic params in Remix 🔗
Read it on the web [...]
Build a simple login and logout with Remix 🔗
Read it on the web [...]
Access React Router's loader data from a route ErrorBoundary 🔗
Use useRouteLoaderData hook to access route loader data inside ErrorBoundary components when handling errors. [...]
Access React Router's Loaders Data in entry.client 🔗
Access loader data from entry.client.tsx using the global window.__reactRouterContext object before hydrating your app. [...]
Handle not found URLs with Remix 🔗
Read it on the web [...]
Persist the User Locale Using Cookies with React Router and i18next 🔗
Store user language preferences in cookies to persist locale selections across sessions using middleware. [...]
Add dynamic canonical URL to Remix routes 🔗
Read it on the web [...]
Parallelized Decision Making 🔗
Read it on the web [...]
Add custom attributes to Markdoc code fences 🔗
@markdoc/markdoc@0.4.0 [...]
Enable Remix ~/ aliased imports in Vitest 🔗
Read it on the web [...]
API (aka Application Programming Interface) 🔗
Code interface used to interact with an application. It can go from a function in a library, a method in the runtime of the code to an HTTP based one [...]
MPA (aka Multi-Page Application) 🔗
An application navigation strategy where the navigation between routes/views happens by requesting a new document from the server. [...]
SPA (aka Single-Page Application) 🔗
An application navigation strategy where the navigation between routes/views of the application happens client-side without creating a new document re [...]
CSR (aka Client-Side Rendering) 🔗
An application rendering strategy where the rendering happens in a client, typically the browser, in the same process event listeners are attached to [...]
SSR (aka Server-Side Rendering) 🔗
An application rendering strategy where the rendering happens in a server, typically at runtime when a new render is requested. [...]
Add syntax highlight to Markdoc using Prism.js 🔗
Read it on the web [...]
Create a CRUD with Remix 🔗
Read it on the web [...]
I miss RSS 🔗
Read it on the web [...]
RSC is React Server + Component | bobae kang 🔗
Read it on the web [...]
Pass Cookies from a React Router Loader to an External API 🔗
Forward browser cookies to external APIs by passing request headers through fetch calls. [...]
Call an action from a loader in Remix 🔗
Read it on the web [...]
Use React Portal in Remix 🔗
Read it on the web [...]
Prevent the React Router Loader to Run after Document Request 🔗
Use clientLoader to prevent server loader execution during client-side navigation while keeping it on document requests. [...]
Passkey-Based Auth in Remix (feat. Alex Anderson) - YouTube 🔗
Read it on the web [...]
Remix Movies: build a movie browser with Remix - YouTube 🔗
Read it on the web [...]
Trellix: build a Trello clone using Remix - YouTube 🔗
Read it on the web [...]
Defer a Fetch response in Remix 🔗
Read it on the web [...]
Use a CDN for your static assets in Remix 🔗
Read it on the web [...]
Get the absolute URL in Remix's MetaFunction 🔗
Read it on the web [...]
Build an app with Remix and Bun 🔗
Read it on the web [...]
Designing better target sizes 🔗
Read it on the web [...]
Find and remove unused code with Knip 🔗
Read it on the web [...]
Create multiple top-level layouts in Remix 🔗
Read it on the web [...]
Kind of annoyed at React 🔗
Read it on the web [...]
Increasingly miffed about the state of React releases 🔗
Read it on the web [...]
The Website vs. Web App Dichotomy Does Not Exist 🔗
Read it on the web [...]
Test meta tags using Playwright 🔗
Read it on the web [...]
gilest.org: Make the indie web easier 🔗
Read it on the web [...]
Why Fetch Promise Does Not Reject on Error Responses 🔗
Read it on the web [...]
A Well-Known Links Resource - Jim Nielsen’s Blog 🔗
Read it on the web [...]
The OG Social Network: Other People’s Websites - Jim Nielsen’s Blog 🔗
Read it on the web [...]
Rationale for a Browser-Level Color Scheme Preference - Jim Nielsen’s Blog 🔗
Read it on the web [...]
A Well Known URL For Your Personal Avatar - Jim Nielsen’s Blog 🔗
Read it on the web [...]
React Aria 🔗
Read it on the web [...]
Stop Lying to Your Users | Epic Web Dev by Kent C. Dodds 🔗
Read it on the web [...]
Prefetch data for Remix Fetcher usage 🔗
If you're using Remix, you can ask it to prefetch the data of a new route using Link's prefetch prop, but if you need to use `fetcher.loa… [...]
Keep Your Loader Data Fresh in Remix 🔗
Using the useRevalidator hook we can revalidate our loader data on an interval to ensure that our data is always fresh. How fresh can depe… [...]
Expose Remix Routes as API Endpoints 🔗
If you're building a Remix web app, and then you decide to expose an API from that app, you may be tempted to try to reuse the same routes … [...]
Access the Search Params of a Request in React Router 🔗
Learn how to access URL search params in React Router loaders and components using the URL and URLSearchParams APIs. [...]
Upload Images in a Remix Application 🔗
If you want to add file upload to let users send you images, e.g., for an avatar, Remix provides a few (still unstable for some reason) too… [...]
Redirect with Search Param in Remix 🔗
Let's say you want to ensure a specific search param is always set. To do so, you can first check if the search param is set, and if not, r… [...]
Access the Loader Data in Remix 🔗
If you're using Remix, you may have noticed that the loader data is not passed to the components as props. This is because the loader data … [...]
Abort Async Calls Inside Remix Loaders and Actions 🔗
Let's say you're writing a loader that needs to do a fetch call to get some data, something simple just for the example: ```ts import { js… [...]
Get Remix route params `entry.server` 🔗
If you have a parameter like the locale `/:locale/*` that you want to get in entry.server for any reason, you can use the `EntryContext` ob… [...]
Test meta tags with Cypress 🔗
If you want to ensure your webs have the correct meta tags like the title, description, Open Graph or Twitter Cards. We can test the title… [...]
Challenging Established Norms: Making Component Fetching the Exception 🔗
Read it on the web [...]
Be the browser’s mentor, not its micromanager 🔗
Read it on the web [...]
The ideal viewport doesn’t exist 🔗
Read it on the web [...]
My thoughts on open-source 🔗
Read it on the web [...]
Strongly type Remix route IDs 🔗
When using something like `useRouteLoaderData()` we need to provide the route ID of the route we want to get the data from. This could als… [...]
Strongly type public assets in Remix 🔗
Remix gives us two ways to work with assets, we can import them directly and get a string to the hashed file path, or we can place the file… [...]
Create a reusable Form component in Remix 🔗
Let's say we want to build a custom Form component for our application, this Form will do things inside like rendering a hidden input with … [...]
Sync text input with URLSearchParam in Remix 🔗
Let's say we're building a search form that needs to keep the value on the search params as the user type. We could directly update on the… [...]
Social RSS 🔗
Read it on the web [...]
The fediverse and the indieweb 🔗
Read it on the web [...]
Blogging as DRY 🔗
Read it on the web [...]
Everything You Can Test In Your Laravel Application 🔗
Read it on the web [...]
Dear Open Source: let’s do a better job of asking for money 🔗
Read it on the web [...]
Don't make me think, or why I switched to Rails from JavaScript SPAs 🔗
Read it on the web [...]
Generating income from open source 🔗
Read it on the web [...]
Use TanStack Query to Share Data between React Router Loaders 🔗
Share data between React Router loaders efficiently using TanStack Query to avoid duplicate fetches and improve performance. [...]
Logout from Auth0 with Remix Auth 🔗
If you're using Remix Auth together with Auth0, you may found out that if you just use the logout method from Remix Auth and try to login a… [...]
Send Node.js ReadStream objects from Remix loaders 🔗
If you're creating route in Remix that needs to send a file from you may want to use `node:fs` to get the file content from the system and … [...]
Reset a form on success in Remix 🔗
If you have a form with one or more uncontrolled inputs you may have seen the case where the user submits the form but the inputs are not c… [...]
Use `qs.parse` to use nested form fields in Remix 🔗
The traditional way to parse a form body in Remix is by using `request.formData()` to get a new FormData object, then use `formData.get()` … [...]
Send JSON to a Remix action 🔗
While [there's a proposal to add support for this](https://github.com/remix-run/remix/discussions/1959#discussioncomment-2205718), right no… [...]
Set Multiple Cookies in the Same Response in React Router Loaders 🔗
Set multiple Set-Cookie headers in loader responses using header arrays or the Headers.append method. [...]
Close SSE connection from the server in Remix 🔗
If you're using SSE in a Remix app, you may find you want to be able to close the connection from the server. The [Remix Utils `eventStrea… [...]
Measure performance with the Server-Timing header in React Router 🔗
Add performance measurements to response headers to inspect route timing from the browser DevTools. [...]
Automatically commit sessions on Remix 🔗
When you use Remix's session feature you have to always remember to commit your session before sending the response. This is a simpler fun… [...]
Customize Remix AppLoadContext type 🔗
Read it on the web [...]
Client-side JavaScript and React criticism: What comes next? 🔗
Read it on the web [...]
Turn on Caps Lock on Cypress 🔗
If you're testing a feature that depends on Caps Lock to be on, e.g. detect Caps Lock and warn on password inputs. You can test this works … [...]
Fast and maintainable patterns for fetching from a database 🔗
Read it on the web [...]
Delete a Cookie using Remix cookie helpers 🔗
If we have set a cookie and we need to tell the browser to delete it, we can do that with a simple trick, we can set the cookie value to an… [...]
Add runtime SSG and ISR to Remix 🔗
If you came to Remix from the Next.js world, you might wonder how to use SSG and ISR with Remix. The framework doesn't support it; instead… [...]
Improve SEO by not sending JS in Remix 🔗
When Google crawls your website, it will try to execute all the JavaScript it finds. And even if your app… [...]
Use AMP with Remix 🔗
If for any reason, you want to add AMP to your Remix app, there are a few things you need to do. First, go to your `app/root… [...]
Use Remix as a SPA only 🔗
Remix always does SSR on document requests. Then it works as an MPA until JS loads and React hydrates your app. At that … [...]
A Theory of Web Relativity 🔗
Read it on the web [...]
Downgrade to MPA if Users Prefer Reduced Data in React Router 🔗
Detect the Save-Data header and conditionally disable client-side JavaScript to reduce data usage. [...]
Add rolling sessions to Remix 🔗
Rolling sessions is a technique to extend the maxAge of a session cookie by resetting the cookie's expiration date… [...]
Use Server-Sent Events with Remix 🔗
Using Server-Sent Events (SSE) you can keep a connection between a browser (client) and an HTTP server open an… [...]
Progressively Enhance the useFetcher Hook in React Router 🔗
Support both JavaScript and no-JavaScript users by detecting hydration state in fetcher forms. [...]
Use `process.env` client-side with Remix 🔗
Use process.env client-side with Remix The process.env thing is a Node.js-only feature that many front-end developers adopted as something t… [...]
Persist inputs after a form submit in Remix 🔗
Let's say you have a form with a few inputs. You want to persist the inputs' values after submitting… [...]
Streaming: is it worth it? 🔗
Read it on the web [...]
Prioritise content over components 🔗
Read it on the web [...]
Throwing vs. Returning responses in Remix 🔗
When you code a loader/action (we'll call them data functions from now) in Remix, you can either retur… [...]
Lazy-load React components in Remix 🔗
Suppose we want to create a timeline component that lists different events. Each event type has a unique com… [...]
Overcoming Popular Issues With React Projects 🔗
Read it on the web [...]
💿 remix simplifies things 🔗
Read it on the web [...]
Progressively enhance for a more resilient web 🔗
Read it on the web [...]
Get in Zoomer, We're Saving React 🔗
Read it on the web [...]
Optional route segments with Remix 🔗
Let's say we have a URL structure like this: /:category/products /products Both routes need to work… [...]
Destroy User Session and While Setting a Flash Message in React Router 🔗
Set flash messages while destroying user sessions using cookie or database session storage. [...]
Add additional data before submitting on Remix 🔗
The Remix approach to submitting forms is to replace the tag with their compone… [...]
Redirect to an external website with Remix 🔗
Remix gives us a useful redirect helper function which lets us quickly create a new redirect Respon… [...]
Bubble up data on Remix routes 🔗
React introduced a one-way data flow where a parent component has some data (state) and passes it to the children… [...]
Group related routes together in Remix 🔗
Next.js released its new nested routes feature yesterday (Friday, 9th September). One of the things they … [...]
What if your Index Page was Smart? 🔗
Read it on the web [...]
Building websites for Safari Reader Mode and other reading apps 🔗
Read it on the web [...]
How to Section Your HTML 🔗
Read it on the web [...]
Block Links: The Search for a Perfect Solution 🔗
Read it on the web [...]
Parse Markdown with Markdoc in Remix 🔗
Markdoc is this new Markdown parser by Stripe, and it's a simple to use yet extendable library we can use i… [...]
Dependency injection in Remix loaders and actions 🔗
Dependency Injection is a way our function or class can receieve from the caller the instancie… [...]
Using Zod to safely read env variables 🔗
Zod is a great library to do schema based validations and get fully typed objects as a result. Environmen… [...]
Debug your server-side Remix code using VSCode 🔗
Read it on the web [...]
Working with Refresh Tokens in Remix 🔗
When using an external API, you may need to keep an access token to send a request as a user. And a refresh… [...]
Device-Agnostic 🔗
Read it on the web [...]
E2E test Remix with Vitest and Puppeteer 🔗
Vitest is a testing framework, similar to Jest, but way faster, built on top of Vite, which uses esbuil… [...]
Optimize image loading with plain HTML 🔗
If you're building some page like a landing with some images, you may want to optimize how these images l… [...]
Using rel=preload for responsive images 🔗
Read it on the web [...]
Multiple forms per route in Remix 🔗
Suppose you have a complex enough Remix application. In that case, you may have reached the point where a sing… [...]
How to avoid layout shifts caused by web fonts 🔗
Read it on the web [...]
“Guys, we’re doing pagination wrong…” 🔗
Read it on the web [...]
Why Remix doesn’t infer types from loaders for useLoaderData 🔗
Read it on the web [...]
Add returnTo behavior to Remix Auth 🔗
If you're using Remix Auth, you may want to add support to return the user to where it was before redirectin… [...]
Survivorship Bias in Web Performance 🔗
Read it on the web [...]
Building a Command Palette with Remix and Tailwind UI 🔗
Recently, the Tailwind Labs team published a new Combobox component on Headless UI and use… [...]
Share session and cookies between Next and Remix 🔗
I have been migrating a Next.js app to Remix for a few months. I already wrote how to run them … [...]
Fix double data request when prefetching in Remix 🔗
Suppose you rendered a component in your UI with the idea of pref… [...]
The "best" way to manage icons in React.js 🔗
Read it on the web [...]
Run Tailwind and Remix in Parallel with PM2 🔗
If you use Remix together Tailwind (and you should!), you may have found out that you need to run th… [...]
Use Remix with socket.io 🔗
If you want to add real-time capabilities to your Remix app without using an external service, the easiest way is proba… [...]
Generate a PDF in Remix with Resource Routes 🔗
Remix has a feature called Resource Routes which let you create endpoints returning anything. Usin… [...]
Avoid waterfalls of queries in Remix loaders 🔗
Remix does a fantastic job of avoiding waterfalls everywhere. It preloads assets. It downloads JS a… [...]
Run Next and Remix on the same server 🔗
If you want to migrate a Next app to Remix, you may be tempted to do a complete migration. Still, if your … [...]
HTTP vs. Server-side Cache in Remix 🔗
When you build a web application, you may reach a point where some performance problems could be solved by a… [...]
Clase rápida de programación asíncrona 🔗
El código síncrono se ejecuta una linea a la vez, cierto? Entonces si haces esto: let result = fn(… [...]
On-Demand Hydration in Remix 🔗
Remix makes it really easy to don't send JS to the browser. It even has a guide on how to let routes statically def… [...]
Live validation is problematic 🔗
Read it on the web [...]
Stop building client-side forms 🔗
Read it on the web [...]
Loader vs Route Cache Headers in Remix 🔗
Document Request So, let's say you have a route at /my-super-route, and there you have a loader fun… [...]
The useMatches hook in Remix 🔗
If you use Remix, there's a hook that you can use called useMatches, this hook is a way to access some internal d… [...]
Validating Remix forms with Constraints API 🔗
The Constraints API is a browser API that has been available since the times of IE10, yep, that old.… [...]
Test Remix loaders and actions 🔗
If you are using Remix, most of your application code will live in the loaders and actions instead of React compo… [...]
Use NProgress in a Remix app 🔗
Remix's philosophy is to kill all the spinner! This is amazing, but sometimes it's not possible. Connections may be… [...]
Result Objects in TS 🔗
Build resilient TypeScript apps that handle failures gracefully using the Result pattern to make errors explicit in your types. [...]
Dark Mode and Dark Context 🔗
Most of the time, there is two way to implement dark mode support in an application. Using media queries with `pre… [...]
Why Decentralization Isn't as Important as You Think 🔗
Read it on the web [...]
When You Stop Counting 🔗
Read it on the web [...]
Why I Quit Google to Work for Myself 🔗
Read it on the web [...]
Use Fathom with Remix 🔗
If you want to use Fathom for your analytics and use Remix to build your app, you can configure it to work quite quickly. … [...]
Don’t Build A General Purpose API To Power Your Own Front End 🔗
Read it on the web [...]
Why You Should Never Use MongoDB 🔗
Read it on the web [...]
A Case For Use Cases 🔗
Read it on the web [...]
Fix `gyp: No Xcode or CLT version detected!` error 🔗
Fix gyp: No Xcode or CLT version detected! error If you have this error, and you running xcode-select --install tells you you have them inst… [...]
Use Dependabot to keep Remix up-to-date 🔗
If you use Dependabot to keep your project dependencies up-to-date, and if you use Remix you may have no… [...]
Automatic Revalidation in Remix 🔗
If you have used SWR or React Query, you may be used to a feature both libraries have called automatic revalidat… [...]
People read on the web 🔗
Read it on the web [...]
Why we use progressive enhancement to build GOV.UK 🔗
Read it on the web [...]
Building a resilient frontend using progressive enhancement 🔗
Read it on the web [...]
I Want To Confirm a Prompt That We Stay Alert 🔗
Read it on the web [...]
Browsers and Representation 🔗
Read it on the web [...]
Google vs. the web 🔗
Read it on the web [...]
Back to the Bad Old Days of the Web 🔗
Read it on the web [...]
The Mythical Document Web 🔗
Read it on the web [...]
Breaking the web forward 🔗
Read it on the web [...]
Back to the Future with RSS 🔗
Read it on the web [...]
Client-Side Architecture Basics 🔗
Read it on the web [...]
Organizing App Logic with the Clean Architecture 🔗
Read it on the web [...]
Implementing DTOs, Mappers and the Repository Pattern 🔗
Read it on the web [...]
Screaming Architecture 🔗
Read it on the web [...]
Better Software Design with Application Layer Use Cases 🔗
Read it on the web [...]
Anemic Domain Model 🔗
Read it on the web [...]
Value Objects - DDD w/ TypeScript 🔗
Read it on the web [...]
iOS 15, Humane 🔗
Read it on the web [...]
Don't overabstract your components 🔗
Read it on the web [...]
Creating a PDF with React in the Browser 🔗
If you need to generate a PDF for your users, maybe some reports or a document you want users to be abl… [...]
Meta Theme Color and Trickery 🔗
Read it on the web [...]
Sending data from layout to leaf routes in Remix 🔗
Hey! This is outdated, Remix Outlet component now supports sending data to leaf routes using … [...]
Using Service Workers with Remix 🔗
A Remix app is by default fast, the framework optimize a lot how the required resources for a page are loaded s… [...]
Localizing Remix apps with i18next 🔗
There's a lot if libraries to implement i18n in JS and React, and i18next is one of the most popular out ther… [...]
Adding CSRF protection to Remix 🔗
While you may not need CSRF if your cookies have the SameSite: Lax configured, it may still be a good idea to … [...]
Load only the data you need in Remix 🔗
If you are used to build SPA and your APIs are REST you probably have found the issue with over fetching, t… [...]
Server-Side authentication with Auth0 in Remix 🔗
While this works, I recommend you to don't do all of this yourself, instead use Remix Auth with… [...]
Using TailwindCSS with Remix 🔗
Let's see how to do the setup of TailwindCSS for a project using Remix. Install Tailwind The first thing we ne… [...]
Use ETags in Remix 🔗
ETags are strings used to identify a particular version of a resource. If the URL is the identity of a resource the ETag is t… [...]
Jest Matchers for Remix responses 🔗
When testing the logic of an action in Remix, or any function returning a Response, even a Fetch API Response,… [...]
Using Form Objects inside Remix actions 🔗
In Remix, each route can export a single action function used to handle any non GET request received b… [...]
Route protection in Remix with Policies 🔗
A Policy is a design pattern used to define authorization rules that can be re-used easily across an app… [...]
Redirect to the original URL inside a Remix action 🔗
Let's say the user is currently at the URL /:username, and there's a button to follow that … [...]
Read search params with JS 🔗
If you need to read the search params (aka query string) from a URL in JS the most common way is to use one of the mu… [...]
Use ActiveModel::Serializer with non ActiveRecord object 🔗
If you are trying to serialize an object which is not an instance of ActiveRecord, when… [...]
Serialize list of items with ActiveModel::Serializer 🔗
Most of the them, when working on Rails with ActiveModel::Serializer you will do something … [...]
Use serializers with JSON.stringify and JSON.parse 🔗
If you are working with an API which expects and returns keys without using camelCase, e.g if… [...]
Force a locale in Rails I18n from the params 🔗
If you want to change the local used for internationalization a single time from the params of the … [...]
Que es un bundler de JS 🔗
Para entender esto es un poco útil que aprendan como funcionaban las dependencias antes, hace mucho tiempo atrás (unos 6… [...]
Remix vs Next.js Comparison 🔗
I have been using Next for years, since the v1 was released, I even become an early contributor of the framework and… [...]
Imagining native skip links 🔗
Read it on the web [...]
Add missing `created_at` and `updated_at` columns in Rails 🔗
Add missing created_at and updated_at columns in Rails If, like me, you forgot to add the t.timestamps when creating a new table, you may … [...]
Rails design patterns - The big picture 🔗
Read it on the web [...]
How to rename a column in a Rails migration 🔗
If, for some reason, you need to rename a column in a table you need to create a new migration and r… [...]
Before You memo() 🔗
Read it on the web [...]
Usar variables de entorno en Next.js 🔗
Las variables de entorno nos permiten configurar como un software se ejecuta dependiendo de la computadora … [...]
Implement a Skip Link for Navigation-Heavy Sites 🔗
Read it on the web [...]
Meaningful Motion with Action-Driven Animation 🔗
Read it on the web [...]
An Interactive Guide to CSS Transitions 🔗
Read it on the web [...]
Build your own RSS Reader 🔗
RSS is a standard way to use XML to share content from a website so other apps could read it and show it in a differen… [...]
Keep Heading Levels Consistent with React Context 🔗
When building for the web one of the most common elements are the heading tags (h1 to h6) … [...]
Preload: What Is It Good For? 🔗
Read it on the web [...]
The unreasonable effectiveness of simple HTML 🔗
Read it on the web [...]
Open Peeps 🔗
Read it on the web [...]
System Design 101 🔗
Read it on the web [...]
A primer on investing for designers and developers 🔗
Read it on the web [...]
About 🔗
A photo of me Hi there! I'm a web developer currently based on Lima, Perú. I'm currently working in Silverback Ventures as the web devel… [...]
In Critical Defense of Frontend Develop 🔗
Read it on the web [...]
Be Wary of Nesting Roles 🔗
Read it on the web [...]
Accessible SVGs 🔗
Read it on the web [...]
¿Qué son Server Components de React y cómo se relacionan con SSR/SSG/ISR? 🔗
Ayer el team de React… [...]
🔥 Pro Tip: Name your useEffect functions 🔗
When creating an effect in React, avoid arrow function and instead use a function with a name. This wil… [...]
dotCSS 2019 - Sarah Dayan - In Defense of Utility-First CSS 🔗
Read it on the web [...]
Alt-texts: The Ultimate Guide 🔗
Read it on the web [...]
Polymorphic React Components in TypeScript 🔗
Read it on the web [...]
CSS and Scalability 🔗
Read it on the web [...]
Using MDX with Remote Content 🔗
One of the most common ways to use MDX in a website is to have the .mdx files together with the rest of the webs… [...]
The UI and UX Tips Collection: Volume One. 🔗
Read it on the web [...]
Practical React Query 🔗
Read it on the web [...]
Use TailwindCSS Typography with Dark Mode Styles 🔗
Since TailwindCSS v2 it comes with dark mode support. Enabling it is really simple, in the `tai… [...]
Don't design for mobile 🔗
Read it on the web [...]
Stop Using “Drop-down” 🔗
Read it on the web [...]
Decoupling, Architecture and Teams 🔗
Read it on the web [...]
The Lava Layer Anti-Pattern 🔗
Read it on the web [...]
UI as an afterthought 🔗
Read it on the web [...]
Todo lo que sé de SWR 🔗
Conceptos Básicos Introducción En este artículo muy largo vamos a ver como usar esta librería para trabajar con d… [...]
In 2020, what is "frontend" 🤨 🔗
Read it on the web [...]
How React Query gives you almost everything you thought you needed GraphQL for 🔗
Read it on the web [...]
Wormhole state management 🔗
Read it on the web [...]
Todo el software está roto 🔗
Read it on the web [...]
What is the Value of Browser Diversity? 🔗
Read it on the web [...]
Margins and Composability in CSS 🔗
Read it on the web [...]
Nailing Your First (Info-Product) Launch 🔗
Read it on the web [...]
Defining Component APIs in React 🔗
Read it on the web [...]
The Modern Front-End Design System Stack 🔗
Read it on the web [...]
Building the New facebook.com with React, GraphQL and Relay 🔗
Read it on the web [...]
Architecting UIs for Change 🔗
Read it on the web [...]
When frontend means full stack 🔗
Read it on the web [...]
Building a Button Part 2: Hover Interactions 🔗
Read it on the web [...]
Building a Button Part 1: Press Events 🔗
Read it on the web [...]
The States of the UI 🔗
Let's say you are in charge of building the UI of Twitter, how many states do you think that UI … [...]
About HTML semantics and front-end architecture 🔗
Read it on the web [...]
"Semantic" CSS 🔗
Read it on the web [...]
CSS Utility Classes and "Separation of Concerns" 🔗
Read it on the web [...]
Second-guessing the modern web 🔗
Read it on the web [...]
A clean start for the web 🔗
Read it on the web [...]
What I Use 🔗
This is my current development setup. Tech Stack TypeSc… [...]
Writing Type-Safe Polymorphic React Components (Without Crashing TypeScript) 🔗
Read it on the web [...]
Using SwiftUI's Spacer to Create Complex Layouts 🔗
Read it on the web [...]
Most tech content is bullshit 🔗
Read it on the web [...]
The Art of UI Skeletons 🔗
Read it on the web [...]
How to Design a Web Application: Software Architecture 101 🔗
Read it on the web [...]
Shared Hook State with SWR 🔗
Read it on the web [...]
Testing in the Frontend World 🔗
Read it on the web [...]
The Real Dark Web 🔗
Read it on the web [...]
The Elements of UI Engineering 🔗
Read it on the web [...]
frontend design, react, and a bridge over the great divide 🔗
Read it on the web [...]
The Great Divide 🔗
Read it on the web [...]
We have a problem with promises 🔗
Read it on the web [...]
Taming the asynchronous beast with ES7 🔗
Read it on the web [...]
The Fault in Our Tolerance: Accounting for Failures in React 🔗
Read it on the web [...]
7 Principles of Rich Web Applications 🔗
Read it on the web [...]
🌱 My blog is a digital garden, not a blog 🔗
Read it on the web [...]
Shape Up: Stop Running in Circles and Ship Work that Matters 🔗
Read it on the web [...]
How the Blog Broke the Web 🔗
Read it on the web [...]
Turning the database inside-out with Apache Samza 🔗
Read it on the web [...]
Design Systems and Front-End Architecture by Stuart Robson 🔗
Read it on the web [...]
How to Section Your HTML 🔗
Read it on the web [...]
write on your own website 🔗
Read it on the web [...]
Going Indie. Step 2: Reclaiming Content 🔗
Read it on the web [...]
Just write 🔗
Read it on the web [...]
The Documentation Compendium 🔗
Read it on the web [...]
Why Text Buttons Hurt Mobile Usability 🔗
Read it on the web [...]
Bulletproof node.js project architecture 🛡️ 🔗
Read it on the web [...]
The Power of Sensible Defaults 🔗
Read it on the web [...]
HTML Reference 🔗
Read it on the web [...]
CSS Reference 🔗
Read it on the web [...]
The God Login 🔗
Read it on the web [...]
Your Body Text Is Too Small 🔗
Read it on the web [...]
Architecture as a burden 🔗
Read it on the web [...]
The Architecture of Open Source Applications (Volume 2): Scalable Web Architecture and Distributed Systems 🔗
Read it on the web [...]
Scaling React Server-Side Rendering 🔗
Read it on the web [...]
Refactoring UI 🔗
Read it on the web [...]
Introducing Grial 🔗
Read it on the web [...]
Aplicando estilos a Pulse Editor con styled-components 🔗
Read it on the web [...]
Usando socket.io en aplicaciones de Next.js 🔗
Read it on the web [...]
Depurando aplicaciones de Node.js v8.0.0 🔗
Read it on the web [...]
Personalizando Babel.js en aplicaciones de Next.js 🔗
Read it on the web [...]
Creando botones propios para Pulse Editor 🔗
Read it on the web [...]
Te presentamos la nueva versión de Node.js 🔗
Read it on the web [...]
Creando sitios estáticos con Next.js 🔗
Read it on the web [...]
Implementando Pulse Editor 🔗
Read it on the web [...]
Aplicación de escritorio Pulse 🔗
Read it on the web [...]
Presentamos Pulse Editor 🔗
Read it on the web [...]
Crea aplicaciones de escritorio con Electron y Next.js 🔗
Read it on the web [...]
Implementa Progressive server-side render con Next.js 🔗
Read it on the web [...]
Next.js, el futuro de las aplicaciones con React 🔗
Read it on the web [...]
Manejo de dependencias JavaScript con Yarn 🔗
Read it on the web [...]
Deploy y orquestación de microservicios con now.sh 🔗
Read it on the web [...]
Introducción a JSON Web Tokens (JWT) 🔗
Read it on the web [...]
¿Qué es y para qué sirve Babel? 🔗
Read it on the web [...]
Desarrollando aplicaciones de escritorio con Electron.js 🔗
Read it on the web [...]
¿Qué es una aplicación isomórfica? 🔗
Read it on the web [...]
Crea microservicios en Node.js con micro.js 🔗
Read it on the web [...]
Usando React.js en el servidor con Django 🔗
Read it on the web [...]
Estado inmutable con Redux e Immutable.js 🔗
Read it on the web [...]
Componentes de Alto Orden en React.js 🔗
Read it on the web [...]
Obteniendo datos en aplicaciones de Redux 🔗
Read it on the web [...]
Usando Redux en el servidor con Socket.io 🔗
Read it on the web [...]
Creando código modular con ducks de Redux 🔗
Read it on the web [...]
Renderizando aplicaciones de Redux en el servidor 🔗
Read it on the web [...]
Manejo de errores en Redux.js 🔗
Read it on the web [...]
Migrando a Redux 🔗
Read it on the web [...]
Ruteo en aplicaciones de Redux y React.js 🔗
Read it on the web [...]
Glosario de términos de Redux 🔗
Read it on the web [...]
Estructura de archivos Ducks para Redux.js 🔗
Read it on the web [...]
Pruebas unitarias en Redux.js 🔗
Read it on the web [...]
Acciones asíncronas en Redux.js 🔗
Read it on the web [...]
Middlewares en Redux.js 🔗
Read it on the web [...]
Como me inicié en el desarrollo web 🔗
Corría el año 2002, tenía unos 10 años, un día me pregu… [...]
Why build a non-RESTful API 🔗
One of the most common architectural styles to build an HTTP API is… [...]
How I work with static assets in React apps 🔗
Most people when working with tools like webpack te… [...]
How shallow: true works in Rails 🔗
Learn how to create nested shallow resource routes in Rails [...]
Build an Optimistic UI in React using SWR with useMutation 🔗
Use the useMutation hook together with SWR to implement optimistic updates in your React components [...]
Como organizo mis aplicaciones de React 🔗
Hay muchas formas de organizar aplicaciones de React, con los años esta es la que más me ha convencido [...]
How I Organize React Applications 🔗
There are many ways to organize a React application, with the years this the the one I liked the most [...]
Usa React.Suspense para controlar la carga de imagenes 🔗
Aprende como usar React.Suspense para controlar el estado de carga de imágenes. [...]
Data-Aware Components 🔗
Normalmente, al crear un app de React, un componente necesita un dato del API, ej. el usuario log… [...]
Collected Notes TS Client 🔗
A TypeScript client for the Collected Notes API. TypeScript Support Types for the API returned value Types fo… [...]
Use SWR with Geolocation 🔗
Learn how to use SWR with the Geolocation WebAPI to show the user location in a map and keep it up-to-date with any change. [...]
Using Collected Notes as CMS 🔗
Now that Collected Notes has an API to get the notes you wrote here it's possible to use it as a CMS (Content Manag… [...]
Sync WebApp Session Status between Tabs with SWR 🔗
Implement a synced session status using SWR to keep the user logged in/out in all the tabs or windows [...]
Sync SWR cache with Web Storage 🔗
Use Web Storage to retain SWR cache between page reloads [...]
Configure Google Suite MX records in Vercel 🔗
Use Google Suite with a domain whose NS records is in Vercel [...]
Report Web Vitals in Next.js 🔗
Measure the performance of our Next.js application with Web Vitals [...]
Use React.Suspense to wait for an image to load 🔗
Learn how to use React.Suspense to handle the loading state of an image. [...]
Purge unused CSS with TailwindCSS 🔗
Learn how to use the built-in purge support of Tailwind to remove unused classes in production. [...]
Setup a redirect inside a project deployed to Vercel 🔗
Learn how you can create a redirect in any project deployed to the Vercel platform. [...]
Use a scoped registry with Yarn 🔗
Learn how you can configure Yarn to use a different registry for scoped packages [...]
Using Immer with SWR to mutate data 🔗
Use Immer to make optimistic UI updates with SWR easier to follow [...]
Render as you Fetch Pattern in React with SWR 🔗
Learn how to use the Render as you Fetch pattern with React and SWR. [...]
Prefetching Data in a Next.js Application with SWR 🔗
Optimizing the performance of a Next.js using SWR and data prefetching. [...]
What Type of States Could You Find in a Client-Side Application? 🔗
Client-Side Applications could have different types of states based on the requirements, let's dig through them and learn their differences. [...]
Using Tailwind with Next.js 🔗
Learn how to use Tailwind in a Next.js application. [...]
Using Suspense for Data Fetching Today with SWR 🔗
Learn how to use SWR for data fetching with Suspense to handle loading states. [...]
Using Paginated Data with SWR 🔗
Learn how to use SWR to build an infinite scrolled paginated data. [...]
Introduction to SWR 🔗
Learn how to start using SWR, the ZEIT data fetching library for React applications. [...]
Automatically Publish to npm using GitHub Actions 🔗
Create a GitHub Actions workflow to automatically publish new version of a package when creating a new release on GitHub. [...]
Feature Flags in React with Flagged 🔗
Use Flagged to detect Feature Flags and render or not a React component [...]
Next.js File Structure 🔗
Overview of the file structure I like to use in Next.js projects [...]
Testing in Next.js: Dynamic Imports 🔗
Learn how to test components using dynamic imports in a Next.js application. [...]
Redirects in Next.js, the Best Way 🔗
Learn how to create redirects when using Next.js in the most efficient way. [...]
Working with Forms in React without libraries 🔗
Learn how to work with forms and form elements in React without using another library. [...]
Working with conditions and lists in React 🔗
Learn how to conditionally render elements and how to properly work with lists in React. [...]
Introduction to React with the State and Effects hooks 🔗
Learn how to start a React project, create your first component and use the State and Effects hooks to implement basic behaviors. [...]
Introducing Contentz 🔗
Contentz, a Pure Static Site Generator which let you focus on the content and gives you a highly optimized website. [...]
Career Titles and Levels in Tech 🔗
List of possible career paths, titles and level you could find while working as Software Engineer. [...]
Deploy de Contentz a Netlify 🔗
Aprende como llevar tu sitio de Contentz a producción usando Netlify. [...]
Contentz es Omakase 🔗
Contentz toma decisiones por uno, a cambio nos ofrece un sitio optimizado para un mejor rendimiento y lectura. [...]
Conceptos básicos de JS: Array#forEach 🔗
Aprende a usar Array#forEeach, como se implementa a mano y casos de uso prácticos de este método de los array en JavaScript. [...]
Cómo crear y publicar un módulo para npm 🔗
Aprende como crear un módulo y publicarlo a npm configurando Prettier, ESLint, pruebas, tipos y más. [...]
Aplicaciones web con Zero Server 🔗
Introducción a Zero Server, el framework de desarrollo web con cero configuración. [...]
Presentando Contentz 🔗
Contentz, un Pure Static Site Generator para obtener un sitio web super optimizado. [...]
Uso del prop children en React 🔗
El prop children tiene significado especial para React, veremos para que sirve y como usarlo en nuestros propios componentes. [...]
Componentes con Hijos Personalizables en React 🔗
Para evitar prop drilling y hacer componentes aún más personalizables vamos a ver como usar un prop para cambiar el contenido de un componentes de Rea [...]
Composición de Componentes en React 🔗
Una de las mejores cosas de React es poder combinar componentes para crear nuevo componentes más complejos [...]
Tipos de datos en React 🔗
Hay varias formas de definir que tipos de datos recibe un componente en React, puede ser TypeScript, Flow o PropTypes [...]
Props con valores predefinidos en React 🔗
Es muy común querer tener props con valores por defecto en nuestros componentes de React, veremos varias formas de lograr este objetivo. [...]
Componente de React personalizables usando props 🔗
Los props nos permiten crear componentes de React que sean personalizables y que nos sirven para muchos más casos [...]
Componentes con React 🔗
Los componentes de React son la unidad básica de cualquier aplicación hecha con esta librería, aprende como crear y usar componentes de React [...]
Hola Mundo con React 🔗
En este tutorial vamos a ver como crear un Hola Mundo en React sin usar JSX [...]
Cargando React desde un CDN 🔗
En este tutorial vamos a ver como crear un Hola Mundo en React sin usar JSX. [...]
Mi Static Site Generator ideal 🔗
Un artículo con ideas de como sería mi generador de sitios estáticos ideal [...]
Automatización con Shell Scripts 🔗
Aprende a usar Shell Scripts para automatizar tareas, todo con un ejemplo práctico para montar un entorno de trabajo para un proyecto en Node.js [...]
Conceptos básicos de JS: Array#push 🔗
Aprende a usar Array#push, como se implementa a mano y casos de uso prácticos de este método de los array en JavaScript. [...]
Conceptos básicos de JS: Array#filter 🔗
Aprende a usar Array#filter, como se implementa a mano y casos de uso prácticos de este método de los array en JavaScript. [...]
Conceptos básicos de JS: Array#map 🔗
Aprende a usar Array#map, como se implementa a mano y casos de uso prácticos de este método de los array en JavaScript. [...]
Usando Generadores Asíncronos en JavaScript 🔗
Tutorial sobre como se pueden usar Generadores Asíncronos de ECMAScript 2018 para realizar colas o paginaciones de un API fácilmente en JavaScript [...]
Carrusel de elementos dinámicos con React.js 🔗
Tutorial sobre como implementar un carrusel para elementos de diferentes tamaños usando React.js [...]
Scalable Real-Time Applications 🔗
Tips and recommendations to build real-time applications using WebSockets [...]
Aplicaciones Real-Time de Alta Escala 🔗
Consejos y recomendaciones para construir aplicaciones en tiempo real usando WebSockets [...]
React v16.6: lazy, memo y más 🔗
Aprende a usar los nuevos features de React v16.6, lazy load, memoize, errores, contexto y más [...]
Introducción a MDX 🔗
MDX es un formato de archivos que permite extender Markdown con código JS y JSX (Componentes de React) [...]
Documentation, Lessons Learned 🔗
After working on the documentation of the API of ZEIT I want to share some insights I learned from it [...]
Documentación, Lecciones Aprendidas 🔗
Después de trabajar en la documentación del API de ZEIT quiero compartir algunas lecciones que aprendí de ello. [...]
¿Cómo mantenerse actualizado con el ecosistema de JavaScript? 🔗
Cómo mantenerse actualizado es una pregunta común al comenzar, acá hay una lista de maneras útiles de hacerlo y no morir en el proceso. [...]
Renderizando Markdown en React.js 🔗
Crea un parser que transforme Markdown a componentes de React.js [...]
An Accessible Approach to Frontend Testing 🔗
Testing is hard. Testing Frontend is harder. But you should do it anyways. [...]
How to keep updated with the JavaScript ecosystem? 🔗
How to keep updated is a common questions when starting, here you can find a list of useful ways to do it and not die in the process. [...]
Implementando un Servidor de GraphQL 🔗
Explicación paso a paso de como implementar un servidor GraphQL desde cero en Node.js. [...]
Bye Platzi, hi ▲ZEIT 🔗
Today I leave my job as Frontend Developer at Platzi to start working as Support Engineer at ▲ZEIT. [...]
Ciclo de vida de un componente de React.js 🔗
Repaso por los diferentes métodos del ciclo de vida de un componente de React.js [...]
Mezclando flujos síncronos y asíncronos usando promesas en JavaScript 🔗
Manejar flujos de datos síncronos es fácil, con Promises también es fácil hacerlos asíncronos. Ahora veamos como combinarlos. [...]
Introducción a GraphQL 🔗
En 2015 Facebook anunció GraphQL, una tecnología que empezaron a desarrollar y usar internamente en 2012. ¿Pero qué es GraphQL? [...]
Qué son y cómo funcionan las promesas en JavaScript 🔗
Manejar flujos de datos asíncronos es complejo, pero con Promesas esto se vuelve mucho más fácil [...]
Sobre el ecosistema y la fatiga de JavaScript 🔗
Desde hace ya un tiempo han ido saliendo un montón de artículos sobre JS Fatigue, tantos que hasta hay artículos sobre la fatiga de esta. [...]
Combinando React.js y Redux.js 🔗
Redux es especialmente bueno al usarlo con librerías como React ya que facilita usar React solo para la UI y dejar el estado en Redux. [...]
Introducción a Redux.js 🔗
Redux es una librería para controlar el estado de nuestras WebApps fácilmente, de forma consistente entre cliente y servidor y una gran DX. [...]
Compilando el Frontend con webpack 🔗
Cuando estamos haciendo desarrollo Frontend es una buena práctica separar nuestro código en distintos módulos, tanto el código de JavaScr… [...]
Internacionalización con React.js y FormatJS 🔗
Guía de como usar FormatJS para internacionalizar aplicaciones hechas con React.js y poder pluralizar o formatear fechas y números. [...]
Introducción a ECMAScript 2016/7 🔗
Desde finales del 2014, incluso antes de que se terminara de definir ECMAScript 6 ya se estaba empezando a trabajar en la siguiente versión… [...]
Mi experiencia como estudiante de los cursos de Platzi 🔗
El nacimiento de Platzi Hace más de 5 años me enteré que los dueños de Cristalab y Maestros del Web se iban a juntar para crear Mejorando … [...]
Lo nuevo en React v0.14 🔗
React v0.14 es la nueva beta de la librería de Facebook que fue liberada recientemente. Esta primera versión llegará con dos grandes cambio… [...]
Usando ECMAScript 6 en tus tareas de Gulp 🔗
Algo muy molesto cuando estás usando ES6 con Babel.js y Gulp.js para automatizar tareas es que el archivo gulpfile.js sigue estando en ES5 … [...]
Usando ECMAScript 6/2015 con Babel 🔗
ECMAScript 2015, comunmente conocido como ECMAScript 6 o ES6, es la nueva versión del lenguaje estandarizado ECMAScript del cual sale JavaS… [...]
Buenas prácticas del desarrollo FrontEnd 🔗
En el desarrollo FrontEnd con el tiempo han ido surgiendo lo que se conoce como buenas prácticas, cosas que normalmente hacemos porque mejo… [...]
Renderizando React.js en el server con Express.js y react-engine 🔗
React.js cada vez es más popular en el mundo del desarrollo web y una de las razones de esto es que permite crear código isomórfico, esto q… [...]
ECMAScript 6: nueva sintaxis y características para JavaScript 🔗
title: '' date: 2015-04-24T00:00:00.000Z published: true lang: es canonical_url: … [...]
Cómo usar la etiqueta template en HTML5 🔗
Hasta hace unos años, cuando un desarrollador quería hacer templates de sus páginas, la opción era usar algún lenguaje en el Backend como P… [...]
Automatización de tareas de frontend usando Gulp.js 🔗
Como desarrollador Frontend, hay ciertas tareas que se terminan volviendo repetitivas durante el desarrollo, como compilar el CSS desde un … [...]
Uso de módulos en JavaScript con ECMAScript 6 🔗
JavaScript no tiene (por ahora) un sistema de módulos propio, aunque eso si, la comunidad fue creando varios para suplir esa necesidad. Act… [...]
Escribiendo CSS de la forma correcta 🔗
Como desarrollador FrontEnd me encuentro constantemente utilizando CSS. Este lenguaje para dar estilos a páginas web tiende a empezar siend… [...]
Definiendo conceptos - Closure y Scope en JavaScript 🔗
Qué es el Scope El scope es el alcance de una variable, puede ser de dos tipos, global y local. Una variable cuyo scope es global se puede… [...]
Ventajas y desventajas de los pre-procesadores de CSS 🔗
Usar pre-procesadores de CSS de a poco se convierte un estándar en el mundo del desarrollo web front-end, pero primero empecemos hablando s… [...]
¿Qué es Scrum? ¿Y cómo te ayuda trabajar? 🔗
Scrum es una metodología de desarrollo ágil. Scrum propone una forma diferente de organizarse en el desarrollo de un proyecto, tanto en sol… [...]
El módulo Flexbox de CSS3 🔗
Flexbox es un módulo de CSS3 que permite crear layouts flexibles de una forma más eficiente controlando la alineación de las cajas, el anch… [...]
JavaScript orientado a objetos 🔗
La programación orientada a objetos o POO (OOP en inglés Object Oriented Programming) es una forma de realizar aplicaciones. Javascript por… [...]