Everything I know about good API design 🔗
https://www.seangoedecke.com/good-api-design/ [...]
Sergio Xalambrí
Posts
Your code is your responsibility, even if AI wrote it 🔗
https://blog.senko.net/your-code-is-your-responsibility-even-if-ai-wrote-it [...]
No Meat Proxy 🔗
https://nomeatproxy.com [...]
Make Regional HTTP Requests with Durable Objects 🔗
Route HTTP requests through Durable Objects placed near specific Cloudflare regions. [...]
Add URL Normalization Middleware in React Router 🔗
Redirect trailing slashes and www hostnames to one canonical URL before routes run. [...]
Think in Remix UI Instead of React 🔗
Build a small gallery while learning Remix UI setup state, render closures, context, and manual updates. [...]
Hydrate Isolated UI with Remix Client Entries 🔗
Use Remix client entries to hydrate one server-rendered UI island without hydrating the whole page. [...]
Multi-Entry Package Architecture 🔗
Multiple package entry points are useful when they protect real runtime and dependency boundaries. [...]
Structuring a Bun Monorepo with Shared Packages 🔗
Shared packages work best when they encode stable boundaries, not when they become a dumping ground. [...]
Create Animated Tab Indicators with CSS Variables 🔗
Build smooth animated tab indicators using CSS variables, ResizeObserver, and MutationObserver. [...]
Compound Component Pattern in React 🔗
Compound components are useful when a component needs flexible structure without turning into prop soup. [...]
Building Accessible UI with React Aria Components 🔗
React Aria Components provide accessible foundations so you can focus on design. [...]
Create a Copy Button for Code Blocks 🔗
Build a copy button with visual feedback using the Clipboard API and React hooks. [...]
Build a Type-Safe Markdown Pipeline with Markdoc 🔗
Create a server and client architecture for parsing and rendering Markdown with full type safety. [...]
Use waitUntil for Non-Blocking Cache Writes 🔗
Speed up responses by writing to cache in the background using waitUntil. [...]
Build a Cache Abstraction for Cloudflare KV 🔗
Create a type-safe cache abstraction for Cloudflare KV with flexible cache keys and the cache-aside pattern. [...]
Use Client Hints for Server-Side Timezone Rendering 🔗
Render dates in the user's timezone on the server using client hints and cookies. [...]
Add a Global Hotkey to a Remix UI Dialog 🔗
Build a Remix UI mixin that toggles a native dialog from a document-level keyboard shortcut. [...]
Render JSX to images.Skip the browser. 🔗
https://takumi.kane.tw/ [...]
Build a Command-Driven Markdown Toolbar in React 🔗
Use custom invoker commands to format selected textarea text as Markdown. [...]
Handle Custom Invoker Commands in React 🔗
Use custom --commands with a native command event listener and a React callback ref cleanup. [...]
Build a User Menu in React with Invoker Popover Commands 🔗
Use show-popover, hide-popover, and toggle-popover to build a React user menu without state. [...]
Prevent a Modal Dialog from Closing with request-close in React 🔗
Use request-close to let a dialog cancel closing before React handles the final result. [...]
Open a Modal Dialog in React with the Invoker Commands API 🔗
Use command and commandfor to open a native dialog in React without useState or dialog libraries. [...]
Ship the policy, not the code 🔗
https://www.jayfreestone.com/writing/share-the-policy-not-the-code/ [...]
The Field Guide to Grid Lanes 🔗
https://gridlanes.webkit.org/ [...]
The Best Loading States Are No Loading States 🔗
https://jjenzz.com/best-loading-states-are-no-loading-states/ [...]
How's Linear so fast? A technical breakdown 🔗
https://performance.dev/how-is-linear-so-fast-a-technical-breakdown [...]
Use an `iife` Helper for Inline Control Flow in TypeScript 🔗
Create a small `iife` helper to use `if`, `try`/`catch`, and async code where JavaScript only accepts expressions. [...]
How AI is Industrializing Software Engineering 🔗
As software engineering becomes industrialized, writing code matters less than knowing what should be built. [...]
Cancel `useFetcher().load()` Requests on Unmount in React Router 🔗
Abort stale `useFetcher().load()` requests on unmount so loaders and upstream fetches stop early. [...]
The Boring Internet 🔗
https://www.terrygodier.com/the-boring-internet [...]
When life gives you lemons, write better error messages 🔗
https://wix-ux.com/when-life-gives-you-lemons-write-better-error-messages-46c5223e1a2f [...]
Accept: text/markdown 🔗
https://acceptmarkdown.com/ [...]
Domain structure for SaaS products 🔗
https://ghinda.com/blog/products/2020/domain-structure-for-saas-products.html [...]
The Vertical Codebase 🔗
https://tkdodo.eu/blog/the-vertical-codebase [...]
Details that make interfaces feel better 🔗
https://jakub.kr/writing/details-that-make-interfaces-feel-better [...]
Expand your hit areas 🔗
https://bazza.dev/craft/2026/hit-area [...]
Nobody Gets Promoted for Simplicity 🔗
https://terriblesoftware.org/2026/03/03/nobody-gets-promoted-for-simplicity/ [...]
Why I don't use down migrations 🔗
https://freek.dev/2900-why-i-dont-use-down-migrations [...]
How we enabled Content Security Policy for everyone 🔗
https://buttondown.com/blog/2026-03-06-how-we-enabled-content-security-policy [...]
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 🔗
https://signalvnoise.com/posts/1430-hire-managers-of-one [...]
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 🔗
https://www.rivet.dev/blog/2025-02-16-sqlite-on-the-server-is-misunderstood/ [...]
Using 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 🔗
https://ishadeed.com/article/too-early-breakpoint/ [...]
More invoker commands, and more reasons not to use JavaScript please 🔗
https://pawelgrzybek.com/more-invoker-commands-and-more-reasons-not-to-use-javascript-please/ [...]
sergiodxa/agent-skills 🔗
https://github.com/sergiodxa/agent-skills [...]
The Incredible Overcomplexity of the Shadcn Radio Button 🔗
https://paulmakeswebsites.com/writing/shadcn-radio-button/ [...]
Affordances: The Missing Layer in Frontend Architecture 🔗
https://fractaledmind.com/2025/12/01/ui-affordances/ [...]
Confirmation dialogs with zero JavaScript 🔗
https://fractaledmind.com/2025/12/16/turbo-confirm-dialogs-without-javascript/ [...]
Stylish dialogs 🔗
https://fractaledmind.com/2025/12/18/stylish-dialogs/ [...]
Logging Sucks - Your Logs Are Lying To You 🔗
https://loggingsucks.com/ [...]
Micro-libraries need to die already 🔗
https://bvisness.me/microlibraries/ [...]
The stacking workflow 🔗
https://www.stacking.dev/ [...]
Composition Is All You Need by Fernando Rojo at React Universe Conf 2025 🔗
https://www.youtube.com/watch?v=4KvbVq3Eg5w [...]
Tips for good UI implementation 🔗
https://jasonlbeggs.com/blog/tips-for-good-ui-implementation [...]
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 🔗
https://outbox.matthewphillips.info/archive/perils-of-reactivity [...]
How MVC, MVT, MVVM, and Components Shape Web Development 🔗
Understanding MVC, MVT, MVVM, and Component architectures through responsibility separation and data flow in modern web applications. [...]
Build a Nested Master-Detail View with Redirects in React Router 🔗
Create a master-detail interface that adapts based on how users access it, full context when browsing, focused when direct. [...]
Stream Shared Promise Results in React Router 🔗
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' 🔗
https://www.otherbranch.com/shared/blog/no-you-dont-want-to-hire-the-best-engineers [...]
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 [...]
Render Loader Promises with Suspense in React Router 🔗
Three approaches to handle deferred promises in React Router v7: Await component, React.use hook, and direct promise rendering. [...]
Create Reusable 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 🔗
https://kyleshevlin.com/prefer-gaps-to-margins/ [...]
Syntax Highlighting code snippets with Prism and the Custom Highlight API 🔗
https://www.bram.us/2024/02/18/custom-highlight-api-for-syntax-highlighting/ [...]
Resilient Import Maps - Better Theme Development and Beyond 🔗
https://shopify.engineering/resilient-import-maps [...]
Toasts are Bad UX 🔗
https://maxschmitt.me/posts/toasts-bad-ux [...]
The XY Problem 🔗
https://xyproblem.info/ [...]
Don't ask to ask, just ask 🔗
https://dontasktoask.com/ [...]
never just 🔗
https://www.neverjust.net/ [...]
Add a Cookie-Based 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 🔗
https://overreacted.io/jsx-over-the-wire/ [...]
The Back-end for Front-end Pattern (BFF) 🔗
https://philcalcado.com/2015/09/18/the_back_end_for_front_end_pattern_bff.html [...]
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. [...]
Authenticate OAuth2 Clients with client_id and client_secret 🔗
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 OAuth 2.0 Refresh Tokens via the Revocation Endpoint 🔗
Learn how to securely revoke refresh tokens in OAuth2 and prevent unauthorized access after logout or token compromise. [...]
Protect OAuth 2.0 Authorization Code Flow with PKCE 🔗
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 Safely 🔗
Learn how to add custom claims to JWT access tokens in OAuth2 without exposing sensitive data. [...]
Validate JWT Expiration, Issued-At, and Not-Before Claims 🔗
Learn how to validate exp, iat, and nbf claims in JWT access tokens to ensure your API only accepts valid tokens. [...]
Use OAuth 2.0 Scopes to Authorize API Actions 🔗
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. [...]
JWT Claims in OAuth2 Access Tokens 🔗
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 React Router Middleware with Bun Test 🔗
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? [...]
Enable and use middleware in React Router 7.3 🔗
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 🔗
https://programmingarehard.com/2025/01/13/maybe-dont-navigate-1.html/ [...]
Using OAuth2 in a Backend for Frontend 🔗
Securely handle OAuth2 in a Backend-for-Frontend (BFF) with React Router, keeping tokens off the frontend for better security [...]
Class methods are Ruby’s useEffect 🔗
https://www.campsite.com/blog/class-methods-are-rubys-useeffect [...]
What I learned at Campsite 🔗
https://danphilibin.com/what-i-learned-at-campsite [...]
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 [...]
How I Stay Sane Implementing Stripe 🔗
https://github.com/t3dotgg/stripe-recommendations [...]
Domain driven boldness 🔗
https://dev.37signals.com/domain-driven-boldness/ [...]
Good concerns 🔗
https://dev.37signals.com/good-concerns/ [...]
Vanilla Rails is plenty 🔗
https://dev.37signals.com/vanilla-rails-is-plenty/ [...]
Active Record, nice and blended 🔗
https://dev.37signals.com/active-record-nice-and-blended/ [...]
Globals, callbacks and other sacrileges 🔗
https://dev.37signals.com/globals-callbacks-and-other-sacrileges/ [...]
Stop just using “Frontend” or “Backend” to describe the Engineering you like 🔗
https://michellelim.dev/writing/stop-using-frontend-backend/ [...]
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 🔗
https://ryanflorence.com/blog/you-cant-not-have-a-framework.html [...]
This doesn't warrant a blog post 🔗
https://aaronfrancis.com/2024/this-doesnt-warrant-a-blog-post-40142b06 [...]
Because I wanted to 🔗
https://aaronfrancis.com/2024/because-i-wanted-to-12c5137c [...]
Making Web Component good enough 🔗
https://sergiodxa.com/articles/making-web-component-good-enough [...]
Layered Architectures with Laravel 🔗
https://martinjoo.dev/layered-architectures-with-laravel [...]
Don't Sleep on AbortController 🔗
https://kettanaito.com/blog/dont-sleep-on-abort-controller [...]
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 🔗
https://alexkondov.com/full-stack-tao-proper-rest-api/ [...]
How I would do auth 🔗
https://pilcrowonpaper.com/blog/how-i-would-do-auth/ [...]
Card Stack 🔗
https://www.abjt.dev/lab/card-stack [...]
Counterscale and the New Self-Hosted 🔗
https://benv.ca/blog/posts/counterscale-and-the-new-self-hosted [...]
Why Frontend and Backend Are About Responsibilities, Not Languages 🔗
https://sergiodxa.com/articles/on-frontend-vs-backend [...]
When to use Route Modal in React Router 🔗
https://sergiodxa.com/articles/when-to-use-route-modal-in-react-router [...]
Deconstructing the Monolith: Designing Software that Maximizes Developer Productivity 🔗
https://shopify.engineering/deconstructing-monolith-designing-software-maximizes-developer-productivity [...]
Ultimate guide to multi-tenant SaaS data modeling 🔗
https://www.flightcontrol.dev/blog/ultimate-guide-to-multi-tenant-saas-data-modeling [...]
Migrating from Radix to React Aria: Improving Accessibility and UX 🔗
https://argos-ci.com/blog/react-aria-migration [...]
Creating a pointer-friendly submenu experience 🔗
https://react-spectrum.adobe.com/blog/creating-a-pointer-friendly-submenu-experience.html [...]
Building like it's 1984: A comprehensive guide to creating intuitive context menus 🔗
https://height.app/blog/guide-to-build-context-menus [...]
Building future facing frontend architectures 🔗
https://frontendmastery.com/posts/building-future-facing-frontend-architectures/ [...]
Navigating the future of frontend 🔗
https://frontendmastery.com/posts/navigating-the-future-of-frontend/ [...]
Margin considered harmful 🔗
https://mxstbr.com/thoughts/margin/ [...]
In Loving Memory of Square Checkbox 🔗
https://tonsky.me/blog/checkbox/ [...]
The Copenhagen Book 🔗
https://thecopenhagenbook.com/ [...]
Documenting Architecture Decisions 🔗
https://cognitect.com/blog/2011/11/15/documenting-architecture-decisions [...]
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 [...]
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. [...]
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. [...]
Parallelized Decision Making 🔗
https://arkwright.github.io/parallelized-decision-making.html [...]
Add custom attributes to Markdoc code fences 🔗
@markdoc/markdoc@0.4.0 [...]
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. [...]
I miss RSS 🔗
https://www.learnwithjason.dev/blog/i-miss-rss/ [...]
RSC is React Server + Component | bobae kang 🔗
https://bobaekang.com/blog/rsc-is-react-server-plus-component/ [...]
Pass Cookies from a React Router Loader to an External API 🔗
Forward browser cookies to external APIs by passing request headers through fetch calls. [...]
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 🔗
https://www.youtube.com/watch?v=cPwsNEkScoQ [...]
Remix Movies: build a movie browser with Remix - YouTube 🔗
https://www.youtube.com/playlist?list=PLXoynULbYuEApkwAGZ7U7LmL-BDHloB0l [...]
Trellix: build a Trello clone using Remix - YouTube 🔗
https://www.youtube.com/playlist?list=PLXoynULbYuED9b2k5LS44v9TQjfXifwNu [...]
Designing better target sizes 🔗
https://ishadeed.com/article/target-size/ [...]
Kind of annoyed at React 🔗
https://blog.cassidoo.co/post/annoyed-at-react/ [...]
Increasingly miffed about the state of React releases 🔗
https://macwright.com/2024/01/03/miffed-about-react [...]
The Website vs. Web App Dichotomy Does Not Exist 🔗
https://jakelazaroff.com/words/the-website-vs-web-app-dichotomy-doesnt-exist/ [...]
gilest.org: Make the indie web easier 🔗
https://gilest.org/indie-easy.html [...]
Why Fetch Promise Does Not Reject on Error Responses 🔗
https://kettanaito.com/blog/why-fetch-promise-doesnt-reject-on-error-responses [...]
A Well-Known Links Resource - Jim Nielsen’s Blog 🔗
https://blog.jim-nielsen.com/2022/well-known-links-resource/ [...]
The OG Social Network: Other People’s Websites - Jim Nielsen’s Blog 🔗
https://blog.jim-nielsen.com/2022/other-peoples-websites/ [...]
Rationale for a Browser-Level Color Scheme Preference - Jim Nielsen’s Blog 🔗
https://blog.jim-nielsen.com/2022/browser-level-color-scheme-preference/ [...]
A Well Known URL For Your Personal Avatar - Jim Nielsen’s Blog 🔗
https://blog.jim-nielsen.com/2023/well-known-avatar/ [...]
React Aria 🔗
https://react-spectrum.adobe.com/react-aria/ [...]
Stop Lying to Your Users | Epic Web Dev by Kent C. Dodds 🔗
https://www.epicweb.dev/stop-lying-to-your-users [...]
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… [...]
Share Remix Route Logic between Web and API Routes 🔗
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 🔗
https://jjenzz.com/making-component-fetching-the-exception/ [...]
Be the browser’s mentor, not its micromanager 🔗
https://buildexcellentwebsit.es/ [...]
The ideal viewport doesn’t exist 🔗
https://viewports.fyi/ [...]
My thoughts on open-source 🔗
https://alemtuzlak.hashnode.dev/my-thoughts-on-open-source [...]
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 🔗
https://chriscoyier.net/2023/07/01/social-rss/ [...]
The fediverse and the indieweb 🔗
https://werd.io/2022/the-fediverse-and-the-indieweb [...]
Blogging as DRY 🔗
https://seirdy.one/notes/2022/11/20/blogging-as-dry/ [...]
Everything You Can Test In Your Laravel Application 🔗
https://christoph-rumpel.com/2023/3/everything-you-can-test-in-your-laravel-application [...]
Dear Open Source: let’s do a better job of asking for money 🔗
https://reactflow.dev/blog/asking-for-money-for-open-source/ [...]
Don't make me think, or why I switched to Rails from JavaScript SPAs 🔗
https://vadimdemedes.com/posts/dont-make-me-think-or-why-i-switched-to-rails-from-javascript-spas [...]
Generating income from open source 🔗
https://vadimdemedes.com/posts/generating-income-from-open-source [...]
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… [...]
Client-side JavaScript and React criticism: What comes next? 🔗
https://molily.de/javascript-criticism/ [...]
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 🔗
https://sophiebits.com/2020/01/01/fast-maintainable-db-patterns.html [...]
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 🔗
https://www.htmhell.dev/adventcalendar/2022/21/ [...]
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? 🔗
https://www.builder.io/blog/streaming-is-it-worth-it [...]
Prioritise content over components 🔗
https://www.simeongriggs.dev/components-considered-harmful-for-content [...]
Throwing Vs. Returning Responses in Remix Loaders and Actions 🔗
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 🔗
https://dinosaurs-with-jetpacks.com/posts/react-problems [...]
💿 remix simplifies things 🔗
https://bradgarropy.com/blog/remix-simplifies-things [...]
Progressively enhance for a more resilient web 🔗
https://jjenzz.com/progressively-enhance-for-a-more-resilient-web [...]
Get in Zoomer, We're Saving React 🔗
https://acko.net/blog/get-in-zoomer-we-re-saving-react/ [...]
Reusing Remix Routes for Optional Segments 🔗
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 <form> tag with their <Form> 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? 🔗
https://www.swyx.io/smart-indexes [...]
Building websites for Safari Reader Mode and other reading apps 🔗
https://medium.com/@mandy.michael/building-websites-for-safari-reader-mode-and-other-reading-apps-1562913c86c9 [...]
How to Section Your HTML 🔗
https://css-tricks.com/how-to-section-your-html/ [...]
Block Links: The Search for a Perfect Solution 🔗
https://css-tricks.com/block-links-the-search-for-a-perfect-solution/ [...]
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… [...]
Validating Environment Variables with Zod 🔗
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 🔗
https://gist.github.com/kiliman/a9d7c874af03369a1d105a92560d89e9 [...]
Handling Refresh Tokens in Remix Loaders and Actions 🔗
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 🔗
https://trentwalton.com/2014/03/10/device-agnostic/ [...]
E2E Testing 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 🔗
https://www.bronco.co.uk/our-ideas/using-relpreload-for-responsive-images/ [...]
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 🔗
https://simonhearne.com/2021/layout-shifts-webfonts/ [...]
“Guys, we’re doing pagination wrong…” 🔗
https://hackernoon.com/guys-were-doing-pagination-wrong-f6c18a91b232 [...]
Why Remix doesn’t infer types from loaders for useLoaderData 🔗
https://github.com/remix-run/remix/pull/1254#issuecomment-1034475233 [...]
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 🔗
https://simonhearne.com/2022/survorship-bias-in-webperf/ [...]
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 <Link prefetch="intent" /> component in your UI with the idea of pref… [...]
The "best" way to manage icons in React.js 🔗
https://benadam.me/thoughts/react-svg-sprites [...]
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 🔗
https://adamsilver.io/blog/live-validation-is-problematic/ [...]
Stop building client-side forms 🔗
https://blog.vararu.org/stop-building-client-side-forms [...]
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 🔗
https://haseebq.com/why-decentralization-isnt-as-important-as-you-think/ [...]
When You Stop Counting 🔗
https://www.getrevue.co/profile/swyx/issues/swyx-io-when-you-stop-counting-794799 [...]
Why I Quit Google to Work for Myself 🔗
https://mtlynch.io/why-i-quit-google/ [...]
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 🔗
https://max.engineer/server-informed-ui [...]
Why You Should Never Use MongoDB 🔗
http://www.sarahmei.com/blog/2013/11/11/why-you-should-never-use-mongodb/ [...]
A Case For Use Cases 🔗
https://webuild.envato.com/blog/a-case-for-use-cases/ [...]
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 🔗
https://uxmyths.com/post/647473628/myth-people-read-on-the-web [...]
Why we use progressive enhancement to build GOV.UK 🔗
https://technology.blog.gov.uk/2016/09/19/why-we-use-progressive-enhancement-to-build-gov-uk/ [...]
Building a resilient frontend using progressive enhancement 🔗
https://www.gov.uk/service-manual/technology/using-progressive-enhancement [...]
I Want To Confirm a Prompt That We Stay Alert 🔗
https://blog.jim-nielsen.com/2021/confirm-a-prompt-we-stay-alert/ [...]
Browsers and Representation 🔗
https://blog.jim-nielsen.com/2021/browsers-and-representation/ [...]
Google vs. the web 🔗
https://gomakethings.com/google-vs.-the-web/ [...]
Back to the Bad Old Days of the Web 🔗
https://jarango.com/2021/07/02/back-to-the-bad-old-days-of-the-web/ [...]
The Mythical Document Web 🔗
https://www.milezero.org/index.php/tech/web/the_mythical_document_web.html [...]
Breaking the web forward 🔗
https://www.quirksmode.org/blog/archives/2021/08/breaking_the_we.html [...]
Back to the Future with RSS 🔗
https://ncase.me/rss/ [...]
Client-Side Architecture Basics 🔗
https://khalilstemmler.com/articles/client-side-architecture/introduction/ [...]
Organizing App Logic with the Clean Architecture 🔗
https://khalilstemmler.com/articles/software-design-architecture/organizing-app-logic/ [...]
Implementing DTOs, Mappers and the Repository Pattern 🔗
https://khalilstemmler.com/articles/typescript-domain-driven-design/repository-dto-mapper/ [...]
Screaming Architecture 🔗
https://blog.cleancoder.com/uncle-bob/2011/09/30/Screaming-Architecture.html [...]
Better Software Design with Application Layer Use Cases 🔗
https://khalilstemmler.com/articles/enterprise-typescript-nodejs/application-layer-use-cases/ [...]
Anemic Domain Model 🔗
https://khalilstemmler.com/wiki/anemic-domain-model/ [...]
Value Objects - DDD w/ TypeScript 🔗
https://khalilstemmler.com/articles/typescript-value-object/ [...]
iOS 15, Humane 🔗
https://potential.app/ios-15-humane [...]
Don't overabstract your components 🔗
https://kirjai.com/component-abstraction/ [...]
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 🔗
https://css-tricks.com/meta-theme-color-and-trickery/ [...]
Sending data from layout to leaf routes in Remix 🔗
Hey! This is outdated, Remix Outlet component now supports sending data to leaf routes using … [...]
Caching Remix Assets and Locales with a Service Worker 🔗
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… [...]
Implementing Auth0 Login in Remix without Express 🔗
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 🔗
https://kittygiraudel.com/2021/03/07/imagining-native-skip-links/ [...]
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 🔗
https://longliveruby.com/articles/rails-design-patterns-the-big-picture [...]
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() 🔗
https://overreacted.io/before-you-memo/ [...]
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 🔗
https://www.benmyers.dev/blog/skip-links/ [...]
Meaningful Motion with Action-Driven Animation 🔗
https://tobiasahlin.com/blog/meaningful-motion-w-action-driven-animation/ [...]
An Interactive Guide to CSS Transitions 🔗
https://www.joshwcomeau.com/animation/css-transitions/ [...]
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? 🔗
https://www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/ [...]
The unreasonable effectiveness of simple HTML 🔗
https://shkspr.mobi/blog/2021/01/the-unreasonable-effectiveness-of-simple-html/ [...]
Open Peeps 🔗
https://www.openpeeps.com/ [...]
System Design 101 🔗
https://stanete.com/system-design-101 [...]
A primer on investing for designers and developers 🔗
https://brianlovin.com/overthought/investing-for-designers-and-developers [...]
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 🔗
https://meiert.com/en/blog/critical-frontend-development/ [...]
Be Wary of Nesting Roles 🔗
https://adrianroselli.com/2016/12/be-wary-of-nesting-roles.html [...]
Accessible SVGs 🔗
https://css-tricks.com/accessible-svgs/ [...]
¿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 🔗
https://youtu.be/R50q4NES6Iw [...]
Alt-texts: The Ultimate Guide 🔗
https://axesslab.com/alt-texts/ [...]
Polymorphic React Components in TypeScript 🔗
https://www.benmvp.com/blog/polymorphic-react-components-typescript/ [...]
CSS and Scalability 🔗
http://mrmrs.io/writing/2016/03/24/scalable-css/ [...]
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. 🔗
https://marcandrew.me/ui-ux-tips-collection-vol-one/ [...]
Practical React Query 🔗
https://tkdodo.eu/blog/practical-react-query [...]
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 🔗
https://mattanddesign.com/dont-design-for-mobile/ [...]
Stop Using “Drop-down” 🔗
https://adrianroselli.com/2020/03/stop-using-drop-down.html [...]
Decoupling, Architecture and Teams 🔗
http://mikehadlow.blogspot.com/2018/11/decoupling-architecture-and-teams.html [...]
The Lava Layer Anti-Pattern 🔗
http://mikehadlow.blogspot.com/2014/12/the-lava-layer-anti-pattern.html [...]
UI as an afterthought 🔗
https://michel.codes/blogs/ui-as-an-afterthought [...]
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" 🤨 🔗
https://swizec.com/blog/in-2020-what-is-frontend/ [...]
How React Query gives you almost everything you thought you needed GraphQL for 🔗
https://swizec.com/blog/how-react-query-gives-you-almost-everything-you-thought-you-needed-graphql-for/ [...]
Wormhole state management 🔗
https://swizec.com/blog/wormhole-state-management/ [...]
Todo el software está roto 🔗
https://youtu.be/0riSpvps4mA [...]
What is the Value of Browser Diversity? 🔗
https://daverupert.com/2020/09/the-value-of-browser-diversity/ [...]
Margins and Composability in CSS 🔗
https://giuseppegurgone.com/margins-and-composability-in-css/ [...]
Nailing Your First (Info-Product) Launch 🔗
https://microconf.gen.co/adam-wathan/ [...]
Defining Component APIs in React 🔗
https://jxnblk.com/blog/defining-component-apis-in-react/ [...]
The Modern Front-End Design System Stack 🔗
https://jxnblk.com/blog/the-modern-front-end-design-system/ [...]
Building the New facebook.com with React, GraphQL and Relay 🔗
https://developers.facebook.com/videos/2019/building-the-new-facebookcom-with-react-graphql-and-relay/ [...]
Architecting UIs for Change 🔗
https://joreteg.com/blog/architecting-uis-for-change [...]
When frontend means full stack 🔗
https://increment.com/frontend/when-frontend-means-full-stack/ [...]
Building a Button Part 2: Hover Interactions 🔗
https://react-spectrum.adobe.com/blog/building-a-button-part-2.html [...]
Building a Button Part 1: Press Events 🔗
https://react-spectrum.adobe.com/blog/building-a-button-part-1.html [...]
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 🔗
http://nicolasgallagher.com/about-html-semantics-front-end-architecture/ [...]
"Semantic" CSS 🔗
https://adamwathan.me/2014/11/10/semantic-css/ [...]
CSS Utility Classes and "Separation of Concerns" 🔗
https://adamwathan.me/css-utility-classes-and-separation-of-concerns/ [...]
Second-guessing the modern web 🔗
https://macwright.com/2020/05/10/spa-fatigue.html [...]
A clean start for the web 🔗
https://macwright.com/2020/08/22/clean-starts-for-the-web.html [...]
What I Use 🔗
This is my current development setup. Tech Stack TypeSc… [...]
Writing Type-Safe Polymorphic React Components (Without Crashing TypeScript) 🔗
https://blog.andrewbran.ch/polymorphic-react-components/ [...]
Using SwiftUI's Spacer to Create Complex Layouts 🔗
https://benmcmahen.com/using-spacer-in-swiftui/ [...]
Most tech content is bullshit 🔗
https://www.aleksandra.codes/tech-content-consumer [...]
The Art of UI Skeletons 🔗
http://farmdev.com/thoughts/108/the-art-of-ui-skeletons/ [...]
How to Design a Web Application: Software Architecture 101 🔗
https://dev.to/educative/how-to-design-a-web-application-software-architecture-101-188b [...]
Shared Hook State with SWR 🔗
https://paco.im/blog/shared-hook-state-with-swr [...]
Testing in the Frontend World 🔗
https://www.youtube.com/watch?v=sOMAMtOBiA8 [...]
The Real Dark Web 🔗
https://www.sonniesedge.net/posts/real-dark-web/ [...]
The Elements of UI Engineering 🔗
https://overreacted.io/the-elements-of-ui-engineering/ [...]
frontend design, react, and a bridge over the great divide 🔗
http://bradfrost.com/blog/post/frontend-design-react-and-a-bridge-over-the-great-divide/ [...]
The Great Divide 🔗
https://css-tricks.com/the-great-divide/ [...]
We have a problem with promises 🔗
https://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html [...]
Taming the asynchronous beast with ES7 🔗
https://pouchdb.com/2015/03/05/taming-the-async-beast-with-es7.html [...]
The Fault in Our Tolerance: Accounting for Failures in React 🔗
https://aweary.dev/fault-tolerance-react/ [...]
7 Principles of Rich Web Applications 🔗
https://rauchg.com/2014/7-principles-of-rich-web-applications/ [...]
🌱 My blog is a digital garden, not a blog 🔗
https://joelhooks.com/digital-garden [...]
Shape Up: Stop Running in Circles and Ship Work that Matters 🔗
https://basecamp.com/shapeup [...]
How the Blog Broke the Web 🔗
https://stackingthebricks.com/how-blogs-broke-the-web/ [...]
Turning the database inside-out with Apache Samza 🔗
https://www.confluent.io/blog/turning-the-database-inside-out-with-apache-samza/ [...]
Design Systems and Front-End Architecture by Stuart Robson 🔗
https://noti.st/sturobson/yc1gwN/design-systems-and-front-end-architecture#saPZSRV [...]
How to Section Your HTML 🔗
https://css-tricks.com/how-to-section-your-html/ [...]
write on your own website 🔗
https://bradfrost.com/blog/post/write-on-your-own-website/ [...]
Going Indie. Step 2: Reclaiming Content 🔗
https://matthiasott.com/articles/going-indie-reclaiming-content [...]
Just write 🔗
https://www.sarasoueidan.com/desk/just-write/ [...]
The Documentation Compendium 🔗
https://github.com/kylelobo/The-Documentation-Compendium [...]
Why Text Buttons Hurt Mobile Usability 🔗
https://uxmovement.com/mobile/why-text-buttons-hurt-mobile-usability/ [...]
Bulletproof node.js project architecture 🛡️ 🔗
https://softwareontheroad.com/ideal-nodejs-project-structure/ [...]
The Power of Sensible Defaults 🔗
https://stevebennett.co/2017/07/24/the-power-of-sensible-defaults/ [...]
HTML Reference 🔗
https://htmlreference.io/ [...]
CSS Reference 🔗
https://cssreference.io/ [...]
The God Login 🔗
https://blog.codinghorror.com/the-god-login/ [...]
Your Body Text Is Too Small 🔗
https://blog.marvelapp.com/body-text-small/ [...]
Architecture as a burden 🔗
https://dev.to/schreiber_chris/architecture-as-a-burden-18ca [...]
The Architecture of Open Source Applications (Volume 2): Scalable Web Architecture and Distributed Systems 🔗
https://www.aosabook.org/en/distsys.html [...]
Scaling React Server-Side Rendering 🔗
https://arkwright.github.io/scaling-react-server-side-rendering.html [...]
Refactoring UI 🔗
https://refactoringui.com/ [...]
Introducing Grial 🔗
https://medium.com/@sergiodxa/introducing-grial-js-6c414d6dc947 [...]
Aplicando estilos a Pulse Editor con styled-components 🔗
https://platzi.com/blog/aplicando-estilos-a-pulse-editor-con-styled-components/ [...]
Usando socket.io en aplicaciones de Next.js 🔗
https://platzi.com/blog/usando-socketio-en-aplicaciones-de-nextjs/ [...]
Depurando aplicaciones de Node.js v8.0.0 🔗
https://platzi.com/blog/depurando-aplicaciones-de-nodejs-v800/ [...]
Personalizando Babel.js en aplicaciones de Next.js 🔗
https://platzi.com/blog/personalizando-babeljs-en-aplicaciones-de-nextjs/ [...]
Creando botones propios para Pulse Editor 🔗
https://platzi.com/blog/creando-botones-propios-para-pulse-editor/ [...]
Te presentamos la nueva versión de Node.js 🔗
https://platzi.com/blog/nueva-version-nodejs-npm/ [...]
Creando sitios estáticos con Next.js 🔗
https://platzi.com/blog/creando-sitios-estaticos-con-nextjs/ [...]
Implementando Pulse Editor 🔗
https://platzi.com/blog/implementando-pulse-editor/ [...]
Aplicación de escritorio Pulse 🔗
https://platzi.com/blog/aplicacion-de-escritorio-pulse/ [...]
Presentamos Pulse Editor 🔗
https://platzi.com/blog/presentamos-pulse-editor/ [...]
Crea aplicaciones de escritorio con Electron y Next.js 🔗
https://platzi.com/blog/crea-aplicaciones-de-escritorio-con-electron-y-nextjs/ [...]
Implementa Progressive server-side render con Next.js 🔗
https://platzi.com/blog/progressive-server-side-render/ [...]
Next.js, el futuro de las aplicaciones con React 🔗
https://platzi.com/blog/nextjs-el-futuro-de-las-aplicaciones-con-react/ [...]
Manejo de dependencias JavaScript con Yarn 🔗
https://platzi.com/blog/manejo-de-dependencias-javascript-con-yarn/ [...]
Deploy y orquestación de microservicios con now.sh 🔗
https://platzi.com/blog/deploy-microservicios/ [...]
Introducción a JSON Web Tokens (JWT) 🔗
https://platzi.com/blog/introduccion-json-web-tokens/ [...]
¿Qué es y para qué sirve Babel? 🔗
https://platzi.com/blog/que-es-babel/ [...]
Desarrollando aplicaciones de escritorio con Electron.js 🔗
https://platzi.com/blog/aplicaciones-escritorio-electron-js/ [...]
¿Qué es una aplicación isomórfica? 🔗
https://platzi.com/blog/aplicaciones-isomorficas/ [...]
Crea microservicios en Node.js con micro.js 🔗
https://platzi.com/blog/microservicios-en-node-con-micro/ [...]
Usando React.js en el servidor con Django 🔗
https://platzi.com/blog/react-js-en-servidor-con-django/ [...]
Estado inmutable con Redux e Immutable.js 🔗
https://medium.com/react-redux/estado-inmutable-con-redux-e-immutable-js-5a3d69ef0451 [...]
Componentes de Alto Orden en React.js 🔗
https://medium.com/react-redux/react-componentes-alto-orden-2498211e933f [...]
Obteniendo datos en aplicaciones de Redux 🔗
https://medium.com/react-redux/obteniendo-datos-en-aplicaciones-de-redux-1007e8703521 [...]
Usando Redux en el servidor con Socket.io 🔗
https://medium.com/react-redux/wip-usando-redux-en-el-servidor-con-socket-io-61e31242e366 [...]
Creando código modular con ducks de Redux 🔗
https://medium.com/react-redux/creando-c%C3%B3digo-modular-con-ducks-de-redux-bfd7b67ff8c0 [...]
Renderizando aplicaciones de Redux en el servidor 🔗
https://medium.com/react-redux/server-render-react-redux-1f6cb0b557c9 [...]
Manejo de errores en Redux.js 🔗
https://medium.com/react-redux/manejo-de-errores-en-redux-js-adf9dfa0129b [...]
Migrando a Redux 🔗
https://medium.com/react-redux/migrando-a-redux-f7a15457a805 [...]
Ruteo en aplicaciones de Redux y React.js 🔗
https://medium.com/react-redux/ruteo-en-aplicaciones-de-redux-y-react-js-d62de452bf1b [...]
Glosario de términos de Redux 🔗
https://medium.com/react-redux/glosario-de-t%C3%A9rminos-de-redux-c2bca005ca69 [...]
Estructura de archivos Ducks para Redux.js 🔗
https://medium.com/react-redux/estructura-de-archivos-ducks-para-redux-js-36bb56a70cb3 [...]
Pruebas unitarias en Redux.js 🔗
https://medium.com/react-redux/pruebas-unitarias-en-redux-js-d7285c013123 [...]
Acciones asíncronas en Redux.js 🔗
https://medium.com/react-redux/acciones-as%C3%ADncronas-en-redux-js-d06e2514c4b8 [...]
Middlewares en Redux.js 🔗
https://medium.com/react-redux/middlewares-en-redux-js-88081fcd6c91 [...]
Como me inicié en el desarrollo web 🔗
Corría el año 2002, tenía unos 10 años, un día me pregu… [...]
When to Use Custom API Endpoints Instead of REST 🔗
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… [...]