Jen C. articles - 42 total
Security - Solving the "Content Security Policy (CSP) Header Not Set": style-src
Resources Content-Security-Policy: default-src directive Content-Security-Policy:...
Security - Solving the "Content Security Policy (CSP) Header Not Set": frame-ancestors directive and frame-src directive
Resources Content-Security-Policy: frame-ancestors directive Content-Security-Policy:...
Security - Solving the "Content Security Policy (CSP) Header Not Set" in Next.js: script-src and connect-src
Resources @next/react-refresh-utils What is React Fast Refresh? Content-Security-Policy:...
JavaScript package manager - How to upgrade a package and its indirect dependencies using Yarn 1.x
Resources Trivy How npm Works Managing dependencies yarn upgrade yarn why Selective...
JavaScript package manager - How to fix Cannot find module 'cheerio' error with Enzyme in Yarn 1 projects
Resources Yarn 1 Selective dependency resolutions Jest jsdom Enzyme Babel ...
Security - Solving the "Content Security Policy (CSP) Header Not Set" in Next.js
Resources Zed Attack Proxy (ZAP) How to set a Content Security Policy (CSP) for your...
Jest - How to verify that an element does not exist in the rendered output
Resources Types of...
Jest - Testing with React and React Testing Library: Useful APIs
Resources react-testing-library API Firing Events waitFor About Queries Document:...
Optimize Core Web Vitals - FCP and LCP: Handle Offscreen <iframe> (3) - Use memo, startTransition, and setTimeout
Pre-study startTransition memo Window: setTimeout() method <iframe>: The Inline...
Jest - Mocking Next.js Image to handle dynamic properties in tests
Pre-study Next.js - Image Component Importing images used the 'import' keyword for the...
Jest - Solution for "Jest encountered an unexpected token"
Pre-study Compiling Vs. Transpiling Jest Code Transformation Jest docs –...
JavaScript – The Boundary of Date
Resource MDN Date Date objects encapsulate an integral number that represents...
Core Web Vitals: How I Improved FCP by 75% and LCP by 50% on a Real-World Website
Big Win: 75% Faster FCP, 50% Faster LCP Final Results: Before and After (Average of 10...
Switching Next.js Compiler from Babel to SWC
Resources Next.js Compiler SWC disabled Why you should use SWC (and not Babel) Why You...
Optimize Core Web Vitals - FCP and LCP: Lazy-Loading Offscreen <iframe> (2)
Pre-study <iframe>: The Inline Frame element Window: load event AbortController ...
Detect and fix vulnerabilities (CVE) & misconfigurations (IaC) for your web application
Resources Trivy OWASP Web Application Security Step-by-step guide (identify the...
Optimize Core Web Vitals - FCP and LCP: Images
Pre-study Resources Serve images in next-gen formats Next.js Image...
Optimize Core Web Vitals - FCP and LCP: Optimize bundle size by lazy loading heavy 3rd-party package
Resources https://nextjs.org/docs/pages/building-your-application/optimizing ...
Optimize Core Web Vitals - FCP and LCP: Tree-shaking Lodash
Resources What is...
Optimize Core Web Vitals - FCP and LCP: Remove not need dependencies
Optimize Core Web Vitals - FCP and LCP: Remove not need dependencies Check if any...
Optimize Core Web Vitals - FCP and LCP: Render-blocking resources
Resources Network panel: Analyze network load and...
Django REST Framework with Simple JWT (JSON Web Token): Steps on how to sign and verify using the RSA algorithm
Prerequisites Before getting started, ensure you have completed the setup for Simple...
Optimize Core Web Vitals - FCP and LCP: Lazy-Loading Offscreen <iframe>
Pre-study It's time to lazy-load offscreen iframes! display: none iframe#lazy ...
Build and Deploy a Monorepo WebSocket web application with Turbo, Express, and Vite on Render Using Docker
Introduction Tip: This post only focuses on the build and deployment phase, and the...
Efficiently Extract Nested URL Parameters with Recursive Logic in JavaScript
Scenario Extract the value of a target search parameter (e.g., id) from a nested URL...
React - Create a custom hook to handle online and offline events by using AbortController and addEventListener
Using AbortController vs removeEventListener Using AbortController import { useEffect }...
CSS - display: flex vs inline-flex
inline-flex A child container with display: inline-flex does not automatically fill the...
How to Perform Actions After an Image Loads in React: Using the onLoad Event or the complete Property
The load event triggered by an HTML element does not bubble up to the window object by default....
Using Zod's z.union: An Important Pitfall to Avoid
When using the schema z.union([z.object({}), anotherSchema.partial()]);, Zod checks if the object...
How to Fix Common ESLint Errors: Troubleshooting Unknown or Strange Issues
When get the error by running npm run lint -w myFolder Enter fullscreen mode ...