# Flavio Copes — all posts > Complete index of the 1848 published tutorials and articles on flaviocopes.com, grouped by topic. Each link points to a clean Markdown version of the post; drop the `.md` suffix for the HTML page. A curated overview of the site is in [llms.txt](https://flaviocopes.com/llms.txt). ## AI - [Executor: one gateway to connect your AI agent to every tool](https://flaviocopes.com/executor.md): A look at Executor, an open-source, local-first layer that gives your AI agents one shared catalog of tools, with shared auth and built-in safety rules. - [Vercel eve: an open framework for building AI agents](https://flaviocopes.com/vercel-eve.md): A look at eve, Vercel's open-source agent framework. An agent is a directory of files, with durable execution, sandboxes, approvals, and evals built in. - [Flue: the open framework for building AI agents](https://flaviocopes.com/flue-framework.md): A guide to Flue, the open TypeScript framework for AI agents and workflows from Astro co-founder Fred Schott, covering agents, workflows and durability. ## Alpine.js - [Why I use Alpine.js](https://flaviocopes.com/why-i-use-alpinejs.md): Why I use Alpine.js to add small sprinkles of interactivity to HTML, like closing a modal on an outside click, without reaching for a big frontend framework. - [Redirect to a link when user selects option in a select](https://flaviocopes.com/redirect-to-a-link-when-user-selects-option-in-a-select.md): How to redirect to a URL when a user selects an option in an HTML select, by listening to the change event and setting window.location in Alpine or plain JS. ## Arduino - [Control a browser game with an Arduino joystick (Johnny Five)](https://flaviocopes.com/arduino-johnny-five-browser-game.md): Learn how to control a Phaser.js browser game with an Arduino joystick, using Johnny Five and a WebSockets server to stream movement events to the page. - [Read values from an Arduino via HTTP](https://flaviocopes.com/arduino-read-values-http.md): Learn how to read sensor values from an Arduino over HTTP, expanding a WiFiNINA web server so you can open a page in your browser and see the measured data. - [Calculating Ah from Watts](https://flaviocopes.com/calculating-ah-from-watts.md): Learn how to calculate how long a 12V battery can power a device, converting watts to amp-hours with the Wh / V formula using a real van life example. - [Arduino project: light the built-in LED using your browser](https://flaviocopes.com/arduino-project-led-browser.md): Learn how to control the Arduino built-in LED from your browser, extending a WiFiNINA web server to turn the LED on or off by visiting the /on and /off URLs. - [Arduino project: control a servo motor with a potentiometer](https://flaviocopes.com/arduino-project-servo-motor.md): Learn how to control a servo motor with an Arduino and a potentiometer, mapping the analog 0 to 1023 reading to a 0 to 180 angle with the Servo library. - [Arduino Serial Communication](https://flaviocopes.com/arduino-serial-communication.md): Learn how Arduino serial communication works: initialize Serial with a baud rate, then use Serial.print() to send data to your computer and debug projects. - [Arduino: using libraries](https://flaviocopes.com/arduino-libraries.md): Learn how to use Arduino libraries in your sketches, from including the official ones through the Sketch menu to adding a community library from a ZIP file. - [Arduino project: the map() function](https://flaviocopes.com/arduino-language-map.md): Learn how the Arduino map() function converts a value from one range to another, like turning a 0 to 1023 analog reading into a smaller set of steps. - [Arduino project: build a digital thermometer](https://flaviocopes.com/arduino-project-digital-thermometer.md): Learn how to build an Arduino digital thermometer by combining a DHT11 temperature and humidity sensor with a 1602 LCD display to show live readings. - [Arduino project: the tone() function](https://flaviocopes.com/arduino-language-tone.md): Learn how the Arduino tone() function plays musical notes on a passive buzzer by setting a frequency in hertz, with noTone() and a duration parameter to stop. - [Arduino project: the analogWrite() function and PWM](https://flaviocopes.com/arduino-language-analogwrite.md): Learn how the Arduino analogWrite() function uses PWM, or pulse width modulation, to simulate an analog output from 0 to 255 on the pins marked with a tilde. - [Arduino project: use an active buzzer](https://flaviocopes.com/arduino-project-active-buzzer.md): Learn how to make a sound with an Arduino and an active buzzer, wiring it to a digital pin and toggling it HIGH and LOW with digitalWrite() and delays. - [Arduino project: use a passive buzzer](https://flaviocopes.com/arduino-project-passive-buzzer.md): Learn how to play sounds and melodies on an Arduino with a passive buzzer, using the tone() function to play a frequency on a pin for a set duration. - [Arduino project: read analog input](https://flaviocopes.com/arduino-project-read-analog-input.md): Learn how to read analog input on an Arduino with the analogRead() function, wiring a potentiometer to pin A1 to read values from 0 to 1023. - [Arduino project: read a digital input](https://flaviocopes.com/arduino-project-read-digital-input.md): Learn how to read a digital input on an Arduino with the digitalRead() function, wiring a button to pin 3 with INPUT_PULLUP to detect when it is pressed. - [Electronic Project: Build a voltage divider](https://flaviocopes.com/electronics-project-voltage-divider.md): Learn how to build a voltage divider with two resistors in series, why the voltage splits the way it does, and the formula V times R2 over R1 plus R2. - [Electronic Project: Build a LED dimmer with a potentiometer](https://flaviocopes.com/electronics-project-led-dimmer.md): A beginner electronics project: build a LED dimmer on a breadboard using a potentiometer, an LED, and a 9V battery, then turn the knob to change brightness. - [Electronic components: Servo Motors](https://flaviocopes.com/electronics-components-servo-motors.md): Learn how a servo motor like the SG90 rotates to any angle within 180 degrees, controlled by the pulse width on its signal wire, then driven from Arduino. - [DHT11 temperature and humidity sensor with Arduino](https://flaviocopes.com/electronics-components-dht11-temperature-sensor.md): Learn how to read temperature and humidity from the DHT11 sensor with Arduino, using Adafruit's DHT library and its readTemperature and readHumidity methods. - [Electronic components: the 1602 LCD Display](https://flaviocopes.com/electronics-components-1602-lcd-display.md): Learn how to wire and program the 1602 LCD display with Arduino, using the LiquidCrystal library to print Hello, World across its two 16-character lines. - [Electronic components: Analog Joystick](https://flaviocopes.com/electronics-components-analog-joystick.md): Learn how the analog joystick works with Arduino: read its VRx and VRy axes with analogRead from 0 to 1023, and detect clicks through the SW switch pin. - [Electronic components: Buzzers](https://flaviocopes.com/electronics-components-buzzers.md): Understand the difference between active and passive buzzers in electronics, and how to drive a passive one with the Arduino tone() function to play notes. - [Electronic components: Potentiometers](https://flaviocopes.com/electronics-components-potentiometers.md): Learn how a potentiometer works as a variable resistor: rotate it to output any fraction of the input voltage, a handy way to regulate circuits by hand. - [Electronic components: RGB LEDs](https://flaviocopes.com/electronics-components-rgb-leds.md): Learn how an RGB LED mixes red, green, and blue from its four leads, the difference between common anode and common cathode, and how to test which you have. - [Electronic components: Diodes](https://flaviocopes.com/electronics-components-diodes.md): Understand how a diode lets current flow in only one direction, from anode to cathode, and why that makes it useful for logic gates and protecting components. - [Electronic components: LEDs](https://flaviocopes.com/electronics-components-leds.md): Learn how to use a 5mm LED in your circuits: connect anode to plus and cathode to minus, add a resistor to limit current, and understand its voltage drop. - [Electronic components: Buttons](https://flaviocopes.com/electronics-components-buttons.md): An introduction to push buttons in electronics: how they close a circuit only while pressed, how to place one across a breadboard, and light a LED with it. - [Electronic components: Resistors](https://flaviocopes.com/electronics-components-resistors.md): An introduction to resistors in electronics: how they limit current, how color bands encode the resistance value, and the difference from variable resistors. - [Powering an Arduino with a power bank](https://flaviocopes.com/arduino-power-bank.md): Powering an Arduino from a USB power bank? It may shut off after seconds because the board draws too little current. Here is why, and how I fixed it. - [How to run a Web Server on an Arduino](https://flaviocopes.com/arduino-webserver.md): Learn how to run a web server on a WiFi Arduino, building an HTTP response on top of a TCP WiFiServer on port 80 so you can reach the board from your browser. - [How to connect to a WiFi network using an Arduino](https://flaviocopes.com/arduino-connect-wifi.md): Learn how to connect an Arduino to a WiFi network using the WiFiNINA library, calling WiFi.begin() until it reports WL_CONNECTED and printing the device IP. - [The Arduino Create Platform](https://flaviocopes.com/arduino-create.md): An introduction to Arduino Create, the cloud editor that lets you write and compile Arduino code from your browser with just a small plugin to install. - [Breadboard Power Supply Module](https://flaviocopes.com/electronics-component-power-supply.md): Meet the breadboard power supply module: it takes a barrel jack input and feeds your breadboard a steady 5V or 3.3V, perfect for powering Arduino circuits. - [The Arduino built-in LED](https://flaviocopes.com/arduino-built-in-led.md): Learn how to use the Arduino built-in LED, referencing it with the LED_BUILTIN constant and controlling it with pinMode and digitalWrite to make it blink. - [Arduino project: blink a LED](https://flaviocopes.com/arduino-project-led.md): Build your first Arduino project: blink a LED. You will wire a circuit and write a program with pinMode, digitalWrite, and delay, then upload it via USB. - [What to buy to get started with Arduino and Electronics](https://flaviocopes.com/electronics-what-to-buy.md): My recommendations on what to buy to start with Arduino and electronics, from the Elegoo UNO R3 starter kit to a basic multimeter for your first experiments. - [Measuring voltage, current and resistance using a multimeter](https://flaviocopes.com/electronics-measuring-with-multimeter.md): Learn how to measure voltage, resistance, and current with a digital multimeter, including why current must be read in series while the rest go in parallel. - [Electronics Basics: using a multimeter](https://flaviocopes.com/electronics-multimeter.md): Learn how to use a digital multimeter to measure voltage, current, and resistance, including how to pick the right ports and connect the COM and probe leads. - [Electronics Basics: Prototyping using breadboards](https://flaviocopes.com/electronics-breadboards.md): An introduction to breadboards for electronics prototyping: how the rows of holes connect under the surface, how the power rails work, and when to solder. - [Electronics Basics: Your first circuit](https://flaviocopes.com/electronics-first-circuit.md): Build your first electronics circuit to light a LED with a battery and resistor, simulate it for free in Tinkercad, and see Ohm's law set how bright it glows. - [Electronics Basics: Short Circuit](https://flaviocopes.com/electronics-short-circuit.md): Understand what a short circuit is, why directly connecting the positive and negative poles is so dangerous, and how even a small battery can start a fire. - [Electronics Basics: Resistance](https://flaviocopes.com/electronics-resistance.md): An introduction to resistance in electronics: how it limits current, why it is measured in ohms, and how Ohm's law R = V / I ties voltage and current together. - [Electronics Basics: Vcc, ground, ...](https://flaviocopes.com/electronics-vcc-ground.md): Learn why electronics uses so many names for the same pins: GND, Vss, 0V for the negative pole and Vcc, Vdd for the positive, split between TTL and CMOS. - [Electronics Basics: Voltage](https://flaviocopes.com/electronics-voltage.md): An introduction to voltage in electronics: the electric potential that pushes electrons, measured in volts relative to ground, and how it drives current. - [Electronics Basics: Current](https://flaviocopes.com/electronics-current.md): An introduction to electric current, measured in amperes, and the difference between direct current from batteries and alternating current from the power grid. - [Electronics Basics: Analog vs digital](https://flaviocopes.com/electronics-analog-vs-digital.md): An introduction to analog vs digital in electronics: why the natural world is analog, how digital uses just 0 and 1, and how bits represent bigger numbers. - [Introduction to Electronics](https://flaviocopes.com/electronics-introduction.md): An introduction to my new electronics series, a hands-on look at how components turn inputs into outputs, going beyond Arduino without heavy theory or math. - [The Arduino MKR WiFi 1010](https://flaviocopes.com/arduino-board-mkr-wifi-1010.md): An overview of the Arduino MKR WiFi 1010 board, with built-in WiFi and Bluetooth, a 32-bit SAMD21 Cortex-M0+ processor, and how it compares to Arduino Uno. - [Milli Micro Nano Pico](https://flaviocopes.com/milli-micro-nano-pico.md): With electronics and time measurements, you will find those terms used often: milli, micro, nano, pico. What do they mean? - [Introduction to the Arduino Programming Language](https://flaviocopes.com/arduino-programming-language.md): How can you write programs for your Arduino board? Arduino, natively, supports a language that we call the Arduino Programming Language, or Arduino Language. - [The Arduino Uno WiFi rev 2 board](https://flaviocopes.com/arduino-board-uno-wifi-rev-2.md): An overview of the Arduino Uno WiFi rev 2 board, with its ATmega4809 microcontroller, NINA-W13 WiFi module, built-in IMU, and 48 KB of flash memory. - [The Arduino Uno rev 3 board](https://flaviocopes.com/arduino-board-uno-rev-3.md): This is the reference Arduino version for prototyping, as lots and lots of tutorials use this version of Arduino as their reference board. - [An introduction to Arduino](https://flaviocopes.com/arduino-introduction.md): An introduction to the Arduino electronics platform: the open-source boards that launched the maker movement, running a single C++ program with no OS. - [Arduino vs Raspberry Pi](https://flaviocopes.com/arduino-vs-raspberry-pi.md): Arduino vs Raspberry Pi compared: an 8-bit microcontroller with no OS versus a 64-bit Linux mini computer, and how to pick the right one for your project. ## Astro - [How I generate an Open Graph image for every post](https://flaviocopes.com/generate-og-images-astro.md): How I generate a unique Open Graph preview image for every blog post at build time in Astro, using astro-og-canvas, instead of one shared image. - [How I added search to my static site with Pagefind](https://flaviocopes.com/static-site-search-pagefind.md): How I added fast client-side search to my static Astro blog with Pagefind, which indexes your HTML at build time and runs entirely in the browser. - [Astro, fix Form error “Content-Type was not one of…”](https://flaviocopes.com/astro-fix-form-error-content-type-was-not-one-of.md): Fix the Astro form error 'Content-Type was not one of...' by enabling server-side rendering with output: server, or setting prerender = false on the page. - [The AHA Stack](https://flaviocopes.com/the-aha-stack.md): An introduction to the AHA Stack I created, combining Astro, HTMX, and Alpine.js to build web apps without an SPA, cutting frontend complexity. - [Astro, set caching headers](https://flaviocopes.com/astro-set-caching-headers.md): A quick reference for setting caching headers in Astro, using Astro.response.headers.set to send a Cache-Control header like public, max-age=3600. - [Astro, set response header](https://flaviocopes.com/astro-set-response-header.md): A quick reference for setting a response header in an Astro component with Astro.response.headers.set, shown here sending an HX-Redirect header. - [Using Cloudflare Turnstile on a Astro form](https://flaviocopes.com/using-cloudflare-turnstile-on-a-astro-form.md): Learn how to protect an Astro form with Cloudflare Turnstile, embedding the widget with your site key and verifying the token via the siteverify endpoint. - [Using reCAPTCHA on a Astro form](https://flaviocopes.com/using-recaptcha-on-a-astro-form.md): Learn how to add Google reCAPTCHA to an Astro form to stop spam, wiring the widget with your site key and verifying the response on the server with siteverify. - [Astro, when to use .astro or .ts files](https://flaviocopes.com/astro-when-to-use-astro-or-ts-files.md): Understand when to use .astro versus .ts files in an Astro project: .astro for pages, components, and layouts, and .ts for utilities and API endpoints. - [Run client-side JS in Astro MDX](https://flaviocopes.com/run-client-side-js-in-astro-mdx.md): Learn how to run client-side JavaScript inside an Astro MDX file, where a plain script tag breaks, by wrapping your code in a template literal. - [Astro page layout and middleware execution order](https://flaviocopes.com/astro-page-layout-and-middleware-execution-order.md): Understand the order pages, layouts, and middleware run in Astro: page code runs when you call next(), but layout code runs after the middleware finishes. - [Using Astro locals](https://flaviocopes.com/using-astro-locals.md): Learn how to use Astro locals to share data between middleware and pages via context.locals, and how to type them in env.d.ts to fix the TypeScript error. - [Why not write logic in Astro layouts](https://flaviocopes.com/why-not-write-logic-in-astro-layouts.md): Why you should not put logic in Astro layouts: you cannot call Astro.redirect() there since the response is already sent, so keep that logic in your pages. - [Decide to render a partial or not dynamically in Astro](https://flaviocopes.com/decide-to-render-a-partial-or-not-dynamically-in-astro.md): Learn how to decide whether an Astro route returns an HTML partial or a full page, by toggling export const partial and wrapping the output in a Layout. - [Render different HTML based on HTTP method in Astro](https://flaviocopes.com/render-different-html-based-on-http-method-in-astro.md): Learn how to render completely different HTML in an Astro page depending on the HTTP method by checking Astro.request.method for POST, GET, or DELETE. - [Dockerfile to run Astro Node SSR on fly.io](https://flaviocopes.com/dockerfile-to-run-astro-node-ssr-on-flyio.md): The Dockerfile I use to run an Astro Node SSR app on fly.io, plus the .dockerignore and fly.toml you need to make fly deploy work without errors. - [Conditionally set an HTML attribute](https://flaviocopes.com/conditionally-set-an-html-attribute.md): Learn how to conditionally set an HTML attribute like selected in Astro using object spread, so the attribute only appears when your condition is true. - [htmx forms and Astro View Transitions](https://flaviocopes.com/htmx-forms-and-astro-view-transitions.md): Learn how to fix htmx forms that break when you enable Astro View Transitions by adding the data-astro-reload attribute so the page does not reload early. - [Set custom cookie in the header and then redirect in Astro](https://flaviocopes.com/set-custom-cookie-in-the-header-and-then-redirect-in-astro.md): Learn how to set a cookie and redirect in Astro when Astro.redirect drops the Set-Cookie header, by returning a manual 302 Response with both headers set. - [Why I use Astro](https://flaviocopes.com/why-i-use-astro.md): Why I use Astro for my content sites and web projects: it's simple, flexible, and stable, and it scales from a one-page site to a blog with 1600 posts. - [Astro, prerendering a single component in a SSR page](https://flaviocopes.com/astro-prerendering-a-single-component-in-a-ssr-page.md): Learn how to prerender a single expensive component inside a server-rendered Astro page, using an Astro 3.4 partial with prerender and partial set to true. - [htmx and Astro View Transitions](https://flaviocopes.com/htmx-and-astro-view-transitions.md): Learn how to make htmx work with Astro View Transitions by calling htmx.process() after a page swap so your htmx events keep firing on astro:after-swap. - [Passing Astro components to React components](https://flaviocopes.com/passing-astro-components-to-react-components.md): Learn how to pass Astro components into a React island using named slots, then render them inside the component through props.pro and props.free. - [Use React component in Astro](https://flaviocopes.com/use-react-component-in-astro.md): Learn how to use a React component inside Astro: run npx astro add react, import the component, and add client:load to make it interactive in the browser. - [Astro, fix .md in links](https://flaviocopes.com/astro-fix-dot-md-in-links.md): How to fix Markdown links ending in .md breaking in Astro, using a rehype plugin so internal Obsidian-style links resolve to the right page URLs. - [Astro, embed an image in markdown without relative path](https://flaviocopes.com/astro-markdown-embed-image-without-path.md): Learn how to make Astro accept Markdown images written as file.png without a ./ prefix, using a small remark plugin so Obsidian-style image links work. - [Astro View Transitions and Dark Mode](https://flaviocopes.com/astro-view-transitions-dark-mode.md): Learn how to fix dark mode resetting to light during Astro View Transitions, re-applying the theme from session storage on the astro:after-swap event. - [How to access configuration values in Astro components](https://flaviocopes.com/astro-access-configuration.md): Learn how to read a global configuration flag in your Astro components, like a signupsOpen value, by importing it from a config file into the frontmatter. - [Fetching data from the network in Astro](https://flaviocopes.com/astro-fetch-data-network.md): Learn how to fetch data from the network in Astro at build time, using fetch() and top-level await inside a component's frontmatter, with no async wrapper. - [Moving a simple site to Astro](https://flaviocopes.com/moving-site-to-astro.md): Learn how I moved a simple HTML and CSS site to Astro, from running npm init astro to sharing a common layout and deploying the result on Cloudflare Pages. - [Building composable layouts in Astro](https://flaviocopes.com/astro-layouts.md): Learn how to build composable layouts in Astro, extracting shared HTML like the header and footer into a src/layouts file that wraps pages with a slot. - [Astro Props](https://flaviocopes.com/astro-props.md): Learn how to use props in Astro components to pass data like a name, reading them from Astro.props with object destructuring and default values. - [Astro Components](https://flaviocopes.com/astro-components.md): An introduction to Astro components, the .astro files that pair an HTML template with a frontmatter script running at build time, plus scoped CSS and imports. - [Introduction to Astro](https://flaviocopes.com/astro-introduction.md): An introduction to Astro, the framework-agnostic static site generator that ships HTML first and JavaScript only as needed, and why it stands out. ## Blogging - [Why blog?](https://flaviocopes.com/why-blog.md) - [Create a system for your blog](https://flaviocopes.com/create-system-blog.md) - [Expand your reach with an email list](https://flaviocopes.com/email-list.md) - [Making money with a blog](https://flaviocopes.com/making-money-blog.md) - [Content is king](https://flaviocopes.com/content-is-king.md) - [Should you have a personal blog or a company/product blog?](https://flaviocopes.com/company-or-personal-blog.md) - [Why a blog and not videos or podcasts?](https://flaviocopes.com/blog-vs-video-podcasts.md) - [How to pick a niche for your blog](https://flaviocopes.com/blog-niche.md) - [Is blogging still relevant?](https://flaviocopes.com/blog-still-relevant.md) - [The benefits of having a successful blog](https://flaviocopes.com/blog-benefits.md) - [Pick a goal for your blog](https://flaviocopes.com/blog-goals.md) - [Ups and downs of having a blog](https://flaviocopes.com/ups-and-downs-having-a-blog.md) - [Practical content suggestions for your blog](https://flaviocopes.com/practical-content-suggestions-blog.md) - [How to make the first step and start a blog](https://flaviocopes.com/make-first-step-start-blog.md) - [The day I forgot to write a post](https://flaviocopes.com/the-day-forgot-post.md) - [Why you should own your platform](https://flaviocopes.com/own-your-platform.md) - [How to get people to your blog](https://flaviocopes.com/how-to-get-people-to-your-blog.md) - [On writing about different topics](https://flaviocopes.com/writing-about-different-topics.md) - [On blogging for 3.5 years](https://flaviocopes.com/blogging-3-half-years.md) - [Subfolder vs subdomain](https://flaviocopes.com/subfolder-vs-subdomain.md): What is the best approach? And why? - [This is my little Digital Garden](https://flaviocopes.com/digital-garden.md) - [I wrote 1 blog post every day for 2 years. Here's 5 things I learned about SEO](https://flaviocopes.com/blog-seo.md): 5 SEO lessons learned by writing 1 blog post every day for 2 years - [Write what you don't know](https://flaviocopes.com/write-what-you-dont-know.md): Some thoughts on writing about things you don't know (yet) - [How to get the real number of pageviews of a static site](https://flaviocopes.com/count-visits-static-site.md): Learn how to count the real pageviews of a static site past ad blockers by serving a 1px SVG tracking pixel from a Node.js server that increments a counter. - [The pros of using a boring stack](https://flaviocopes.com/boring-stack.md): Why I think choosing a boring, proven stack matters: pick bulletproof tech like Hugo for a blog so you focus on the content instead of the infrastructure. - [SEO for developers writing blogs](https://flaviocopes.com/seo-for-developers.md): How do you win at SEO as a technical blogger? You know you want more visits, you want Google to send you more people every day - [The stack I use to run this blog](https://flaviocopes.com/stack.md): A look at the stack I use to run this blog: Astro for a fast static site, Markdown for posts, GitHub for content, and Cloudflare Pages for free hosting. - [How I automate sharing old blog posts on Twitter](https://flaviocopes.com/tutorial-repurpose-posts-twitter.md): I have lots of evergreen content on my blog. This tutorial explains how I automated the repurpose of such content on Twitter ## Business - [Build it and they will come](https://flaviocopes.com/build-it-and-they-will-come.md) - [My own little corner shop on the Internet](https://flaviocopes.com/my-own-little-corner-shop-on-the-internet.md) - [A big whiteboard is one of the best investments on yourself](https://flaviocopes.com/whiteboard.md) - [You can't replicate the success of other people](https://flaviocopes.com/replicate-success-others.md) - [Thoughts on intentionally keeping your business small](https://flaviocopes.com/keeping-business-small.md) - [My current video recording setup](https://flaviocopes.com/video-recording-setup.md) - [Building a passive revenue stream as a developer](https://flaviocopes.com/passive-income-developers.md) - [Solopreneurship](https://flaviocopes.com/solopreneurship.md) - [Cleaning my newsletter](https://flaviocopes.com/cleaning-newsletter.md) - [The Trail System of the Park](https://flaviocopes.com/trail-system.md) - [The story of how I became a content creator](https://flaviocopes.com/content-creator.md) - [Selective ignorance](https://flaviocopes.com/selective-ignorance.md) - [Some days are just better than others](https://flaviocopes.com/some-days.md) - [Recurring revenue vs one-time revenue](https://flaviocopes.com/recurring-one-time-revenue.md) - [Survivorship bias](https://flaviocopes.com/survivorship-bias.md) - [Handling VAT in the EU as a creator](https://flaviocopes.com/eu-vat-creator.md) - [Services vs products](https://flaviocopes.com/products-vs-services.md) - [The Full-Stack Independent Developer](https://flaviocopes.com/fullstack-indie-dev.md) - [Sharing the Journey Towards Building a Software Product Business](https://flaviocopes.com/software-business-journey.md) - [How to work from home without going crazy](https://flaviocopes.com/work-from-home.md): Some advice from a 10+ years remote working experience - [Every developer should have a blog. Here’s why, and how to stick with it](https://flaviocopes.com/developer-blog.md): A blog is useful for many reasons. In this post I highlight my thoughts on this topic. - [All the software projects I made in the past](https://flaviocopes.com/my-software-projects.md): A long list of the projects I made throughout the years - [How to be productive](https://flaviocopes.com/productivity.md): My take on how to be productive as a developer and writer: pick one big goal, learn to say no to almost everything else, and protect your time fiercely. - [My notes on the Deep Work book](https://flaviocopes.com/book-deep-work.md): In this post I distill the key concepts that I learned from the Deep Work book by Cal Newport. I added some of my personal observations and experience. - [The scarcity principle applied to software products](https://flaviocopes.com/scarcity-principle.md): What is scarcity? How can it help you grow your software-based business? - [Why should I create an email list?](https://flaviocopes.com/why-email-list.md): 95 people on 100 will never get back to your blog. They just found it by chance. Give them a reason to stay in touch. - [Product / market fit](https://flaviocopes.com/product-market-fit.md): Your product must meet the needs of a niche, solving a problem - [The niche](https://flaviocopes.com/niche.md): Define your niche, your tribe. Those who belong to that tribe will strive to buy your product or at least will be strongly attracted, because it is specially made for them - [Have a purpose for your business](https://flaviocopes.com/have-a-purpose.md): Having a purpose is a high-motivating factor to overcome challenges - [Generating value](https://flaviocopes.com/generating-value.md): As a product business, anything you ship creates value - [The freedom of a product business](https://flaviocopes.com/freedom-product-business.md): A solo-owned product business can provide one of the highest levels of freedom - [Developers, learn marketing](https://flaviocopes.com/developers-learn-marketing.md): A developer knowing marketing has a powerful combination of skills - [Create your own job security](https://flaviocopes.com/create-your-own-job-security.md): The only way to have control over your future is to have your own business - [As an indie maker, what kind of product should you build?](https://flaviocopes.com/products-types.md) - [Build your own platform](https://flaviocopes.com/build-your-platform.md): What is a platform, why having your own platform is important - [Build a lifestyle business](https://flaviocopes.com/lifestyle-business.md): This article will help you discover how to achieve freedom - [Review of the book The 4-Hour Work Week](https://flaviocopes.com/book-four-hour-work-week.md): In this post I distill the key concepts that I learned from the 4-Hour Work Week book by Tim Ferriss. I added some of my personal observations and experience, and I happily ignored things that don't apply to me. ## C - [The C Preprocessor](https://flaviocopes.com/c-preprocessor.md): Learn how the C preprocessor works, resolving #include directives, substituting #define constants, and handling conditionals like #if before compiling. - [C Header Files](https://flaviocopes.com/c-header-files.md): Learn how to use C header files to split a program across multiple files, where .h files hold declarations you pull in with the #include directive. - [C Structures](https://flaviocopes.com/c-structures.md): Learn how C structures group values of different types under one name using the struct keyword, access fields with a dot, and pass structs around by copy. - [C Enumerated Types](https://flaviocopes.com/c-enums.md): Learn how to create enumerated types in C with the typedef and enum keywords, defining a type that can hold one of a fixed set of values like weekdays. - [The typedef keyword in C](https://flaviocopes.com/c-typedef.md): Learn how the typedef keyword in C lets you create new type names from existing types, like turning int into NUMBER, and why it shines with structs and enums. - [C Global Variables](https://flaviocopes.com/c-global-variables.md): Learn how global variables work in C, defined outside any function so any function can read and update them, and how they differ from local variables. - [Static variables in C](https://flaviocopes.com/c-static-variables.md): Learn how static variables work in C: declared with the static keyword inside a function, they default to 0 and keep their value across function calls. - [Can you nest functions in C?](https://flaviocopes.com/c-nesting-functions.md): Can you nest functions in C? No, you can't define a function inside another like in JavaScript or Python, so split helpers into a separate file instead. - [Scope of variables in C](https://flaviocopes.com/c-variables-scope.md): Learn how variable scope works in C: local variables live inside a function on the stack and vanish when it ends, while globals stay available everywhere. - [How to access the command line parameters in C](https://flaviocopes.com/c-parameters-command-line.md): Learn how to access command line parameters in C by using the argc count and argv array in main(int argc, char *argv[]) to read the arguments passed in. - [C conversion specifiers and modifiers](https://flaviocopes.com/c-conversion-specifiers.md): A handy reference to the C conversion specifiers used with printf() and scanf(), like %d, %u, %s, and %f, plus the modifiers that set the field width. - [Print the percentage character with printf() in C](https://flaviocopes.com/c-print-percentage.md): Learn how to print the percentage character with printf() in C, where a single % gives an incomplete format specifier warning, so write %% instead. - [How to check a character value in C](https://flaviocopes.com/c-check-char-value.md): Learn how to check a character value in C using the ctype.h functions like isalpha(), isdigit(), isspace(), islower(), and isupper() to test a char. - [Fix the C 'implicitly declaring library function' warning](https://flaviocopes.com/c-error-implicit-declare-library-function.md): Learn how to fix the C 'implicitly declaring library function' warning, shown when you call functions like printf or strlen without including their header. - [How to return a string from a C function](https://flaviocopes.com/c-return-string.md): Learn how to return a string from a C function by returning a const char pointer, and why returning a local char array fails because it lives on the stack. - [Double quotes vs single quotes in C](https://flaviocopes.com/c-quotes.md): Learn the difference between single quotes and double quotes in C: single quotes make a single char like 'a', while double quotes create a string literal. - [Basic I/O concepts in C](https://flaviocopes.com/c-input-output.md): Learn the basics of input and output in C with the stdio.h library, the printf() and scanf() functions, and the stdin, stdout, and stderr streams. - [How to use NULL in C](https://flaviocopes.com/c-null.md): A brief guide to NULL in C, where it stands only for a null pointer, why you include stdio.h or stddef.h to use it, and how to check a pointer against it. - [Introduction to C Functions](https://flaviocopes.com/c-functions.md): An introduction to functions in C: how they take a name, arguments, a body, and a return value, and why main() is the entry point of every C program. - [Booleans in C](https://flaviocopes.com/c-boolean.md): Learn how to use booleans in C, where the bool type added in C99 needs #include before you can use true and false in your programs. - [Looping through an array with C](https://flaviocopes.com/c-loop-array.md): Learn how to loop through an array in C with a for loop, using a SIZE constant as the bound so you can read and print each element by its index. - [Introduction to C Pointers](https://flaviocopes.com/c-pointers.md): An introduction to pointers in C: the address of a variable in memory, how to get it with the & operator, and how to read the value with the * operator. - [How to find the length of a string in C](https://flaviocopes.com/c-string-length.md): Learn how to find the length of a string in C using the strlen() function from the string.h standard library, which returns the length as an integer. - [Introduction to C Strings](https://flaviocopes.com/c-strings.md): An introduction to strings in C, where a string is an array of char values ending with a 0 terminator, plus the string.h functions like strcpy and strlen. - [How to determine the length of an array in C](https://flaviocopes.com/c-array-length.md): Learn how to determine the length of an array in C, either by storing the size in a variable or by dividing sizeof the array by sizeof one element. - [Introduction to C Arrays](https://flaviocopes.com/c-arrays.md): An introduction to arrays in C, where every value shares the same type and the size is fixed, plus how to declare, initialize, and fill one with a loop. - [How to work with loops in C](https://flaviocopes.com/c-loops.md): An introduction to loops in C: the for, while, and do-while loops, how each one iterates over arrays, and the init, test, and increment parts of a for loop. - [C Conditionals](https://flaviocopes.com/c-conditionals.md): An introduction to conditionals in C with the if/else and switch statements, plus a common bug to avoid: using = instead of == in a comparison. - [C Operators](https://flaviocopes.com/c-operators.md): An introduction to operators in C, covering the arithmetic, comparison, logical, assignment, and bitwise groups, plus how operator precedence works. - [C Constants](https://flaviocopes.com/c-constants.md): Learn how to work with constants in C using the const keyword or a #define directive, plus the convention of naming constants in uppercase for readability. - [C Variables and types](https://flaviocopes.com/c-variables-types.md): Learn how variables and types work in C, a statically typed language, covering int, char, short, long, float and double, plus unsigned types and overflow. - [Introduction to the C Programming Language](https://flaviocopes.com/c-introduction.md): Get started with C, a low-level, compiled language with no garbage collection that powers Linux, embedded devices, and your first Hello, World program. ## Career - [Why JavaScript is a great programming language for beginners](https://flaviocopes.com/javascript-great-for-beginners.md): Why JavaScript is a great programming language for beginners: it powers websites, it is hugely popular, simple to learn, and opens up many remote jobs. - [JavaScript or Python?](https://flaviocopes.com/javascript-or-python.md): JavaScript or Python, which should you learn first? Both are beginner friendly and popular, but here is how I would choose based on what you want to build. - [Software development has no gatekeeping](https://flaviocopes.com/software-development-has-no-gatekeeping.md): Software development has no gatekeeping: you do not need a degree or an exam, just a computer and a book to start learning and experimenting with code. - [How to learn programming](https://flaviocopes.com/how-to-learn-programming.md): My guide to learning programming: how to pick a field and language, why I recommend Python, and how practice and problem solving matter more than the tool. - [24 tips for beginner programmers](https://flaviocopes.com/tips-beginner-programmers.md): 24 practical tips for beginner programmers: be patient, type the code instead of copy-pasting, learn by building small projects, and use a rubber duck. - [Roadmap to become a Web Developer in 2022](https://flaviocopes.com/roadmap-web-developer-2022.md): My opinionated 2022 roadmap to become a web developer, with a deep focus on five technologies: HTML, CSS, JavaScript, React, and Next.js, plus Node and SQL. - [Introduction to Programming](https://flaviocopes.com/introduction-to-programming.md): A beginner-friendly introduction to programming: what a computer and a program are, programming paradigms, compiled vs interpreted, and GUI vs CLI apps. - [How to prepare for a software engineer job interview](https://flaviocopes.com/prepare-software-engineer-interview.md): Learn how to prepare for a software engineer job interview, from the process and the demanding FAANG and Google steps to interviews at smaller companies. - [How to find a job as a software engineer](https://flaviocopes.com/how-to-find-job.md): Tips and strategies to land your first software engineering job: build a blog and GitHub portfolio, work in public, and network at local meetups and events. - [Prepare for technical interview questions](https://flaviocopes.com/prepare-interview-questions.md): Learn how to prepare for technical interview questions, from whiteboard algorithm problems to practicing on LeetCode, HackerRank, and similar coding sites. - [Learn how to find solutions and ask for help](https://flaviocopes.com/find-solutions-ask-help.md): A special skill you need to develop is how to find solutions, and when you don't find them yourself, how to ask for help - [Soft skills to thrive as a software developer](https://flaviocopes.com/soft-skills.md): Learn the soft skills that help you thrive as a developer, from empathy and body language to staying open to new tech and asking the right questions. - [Become a great Dev Team Member](https://flaviocopes.com/great-dev-team-member.md): What makes a great developer team member: asking for and offering help, communicating clearly, building trust, and never tearing down other people's code. - [How to manage software projects](https://flaviocopes.com/software-project-management.md): My take on managing a software project: plan before you write code, identify a minimum viable product, then iterate fast on feedback from the client. - [How to solve the most common learning to code problems](https://flaviocopes.com/solve-common-problems-learning-code.md): How to handle the most common problems people hit while learning to code, from chasing every new trend to thinking you must memorize everything. - [How to become a Web Developer in 2021](https://flaviocopes.com/become-web-developer-2021.md): A practical roadmap for becoming a web developer in 2021, covering what to learn first: web fundamentals, HTML, CSS, Git and GitHub, and JavaScript. - [How to make the jump and become a developer](https://flaviocopes.com/how-to-become-developer.md): How to move from learning to code to actually becoming a working developer: it takes time, build real projects, ship a portfolio, and network locally. - [Learning to code takes time](https://flaviocopes.com/learning-to-code-takes-time.md): Learning to code takes time, not special talent: all you need is a laptop, an internet connection, and the patience to put in the hours, day after day. - [What's bad with freelancing](https://flaviocopes.com/cons-freelancing.md): My honest take on what is bad about freelancing: you sell your time, the scarcest resource, so aim to separate your income from the hours you actually work. - [The difference between Frontend and Backend Web Development](https://flaviocopes.com/frontend-vs-backend.md): Understand the difference between frontend and backend web development: code that runs in the browser versus on a server, and how the two connect. - [How to start freelancing as a developer](https://flaviocopes.com/starting-freelancing.md): How to start freelancing as a developer: turn an employer into a client, pick a niche, offer productized services, and charge what you are worth. - [My plan for being hired as a Go developer. In 2017](https://flaviocopes.com/plan-to-be-hired.md): My 2017 plan to get hired as a Go developer: study The Go Programming Language, blog every day, build a real project, and immerse in the Go community. - [Should I be a generalist or specialize?](https://flaviocopes.com/generalist.md): Should you be a specialist or a generalist developer? My take on the trade-offs of each path, why I chose to be a generalist, and what you gain and give up. - [You should be the worst developer in your team](https://flaviocopes.com/be-the-worst-in-your-team.md): Why you should aim to be the worst developer on your team: surrounding yourself with people better than you is the fastest way to keep learning and growing. - [How to become a Full Stack Developer](https://flaviocopes.com/how-to-become-full-stack-developer.md): A guide to becoming a Full Stack Developer: what the role really means, the skills to learn from HTML and CSS to Node.js and React, and how to practice them. - [Why are programming interview questions so hard?](https://flaviocopes.com/interview-questions.md): My take on why programming interview questions feel so hard: whiteboard FizzBuzz and algorithm puzzles test stress, not the real skills the job needs. - [Does programming require knowing math?](https://flaviocopes.com/programming-math.md): Does programming require math? Not for most web development: problem solving matters more, though fields like 3D graphics and machine learning do need it. - [The best podcasts for frontend developers](https://flaviocopes.com/best-podcasts-frontend-developers.md): A curated list of the best podcasts for frontend developers, including Syntax, Developer Tea, JavaScript Jabber, Full Stack Radio, ShopTalk, and many more. - [Remote working for software developers](https://flaviocopes.com/remote-work-developer.md): My take on remote work for software developers, from the freedom to live and work anywhere to the downsides, plus practical tips for staying productive. - [8 good reasons to become a software developer](https://flaviocopes.com/good-reasons-become-software-developer.md): Eight good reasons to become a software developer: you learn every day, the demand is high, the pay is good, you can work remotely, and even go indie. ## CLI - [Update all npm packages in multiple projects in subfolders](https://flaviocopes.com/how-to-update-all-npm-packages-in-multiple-projects-that-sit-in-subfolders.md): Learn how to update npm packages across many projects in subfolders with a small bash script that loops each folder and runs npx ncu -u plus npm update. - [Persist aliases and other configuration in Fish Shell](https://flaviocopes.com/persist-aliases-and-other-configuration-in-fish-shell.md): Learn how to make Fish shell aliases and configuration persist across reboots by adding them to your ~/.config/fish/config.fish file. - [How to add a path to Fish Shell](https://flaviocopes.com/how-to-add-a-path-to-fish-shell.md): Learn how to add a folder to your PATH in the Fish shell using the fish_add_path command, so you can run commands stored in that directory from anywhere. - [Fish Shell, how to remove the welcome message](https://flaviocopes.com/fish-shell-remove-welcome-message.md): Learn how to remove the Welcome to fish greeting in Fish Shell by setting fish_greeting to an empty string in your config.fish so new shells open clean. - [How to remove the “Last login..” message from the shell](https://flaviocopes.com/shell-remove-last-login-info.md): Learn how to remove the annoying 'Last login...' message that shows when you open your shell by creating a .hushlogin file, on both macOS and Linux. - [Replace spaces with underscores in filenames (shell script)](https://flaviocopes.com/how-to-replace-filenames-spaces-underscores.md): Learn how to recursively replace spaces with underscores in every filename in a folder, with a small Fish shell script that combines find, tr, and mv. - [Remove the first or last characters in a shell script](https://flaviocopes.com/shell-script-remove-first-last-characters-variable.md): Learn how to remove the first or last n characters from a variable in a shell script using cut, and the rev trick to trim characters off the end. - [Create multiple folders using Bash](https://flaviocopes.com/bash-create-multiple-folders.md): Learn how to create many numbered folders at once in Bash using the mkdir {1..30} brace expansion one-liner, instead of making each folder by hand. - [How to loop over an array in Bash](https://flaviocopes.com/bash-loop-array.md): Learn how to loop over an array in Bash using a for loop and the ${list[@]} syntax to iterate over every element and echo each one in turn. - [How to create a function in a Bash shell script](https://flaviocopes.com/shell-script-function.md): Learn how to create and call a function in a Bash shell script to avoid repeating commands, plus how to loop over an array of folders to run it on each. - [How to download a file from a server using the terminal](https://flaviocopes.com/download-file-scp.md): Learn how to download a file from a remote server using the terminal with the scp command, passing your SSH key and the path to copy it to your machine. - [Fish Shell, how to avoid recording commands to history](https://flaviocopes.com/fish-shell-avoid-history.md): Learn how to run commands in Fish shell without saving them to history by starting a private session with fish --private, then exiting when you are done. - [How to use pm2 to serve a Node.js app](https://flaviocopes.com/pm2.md): Learn how to use pm2 to run a Node.js app on a Linux VPS, manage it with commands like pm2 list and pm2 restart, and auto-restart it via GitHub webhooks. - [How to use Netcat](https://flaviocopes.com/netcat.md): Learn how to use Netcat, the nc command, to connect to servers, send raw HTTP, listen on a port, scan open ports, and even transfer files over the network. - [Linux, no space left on device](https://flaviocopes.com/linux-no-space-left-on-device.md): How to fix the Linux no space left on device error, using apt-get clean to free space and the ncdu utility to find the folder eating all your disk. - [A short guide to nano](https://flaviocopes.com/linux-command-nano.md): A short guide to nano, the beginner friendly UNIX text editor, where you type directly with no modes and save or quit with the ctrl key shortcuts shown. - [A short guide to emacs](https://flaviocopes.com/linux-command-emacs.md): A short guide to the emacs editor on UNIX systems, covering how to open and edit a file, save with ctrl-x ctrl-w, and quit, plus the built-in tutorial. - [A short guide to vim](https://flaviocopes.com/linux-command-vim.md): A short, beginner-friendly guide to the vim editor: how to open files, switch between command and insert mode, move around, edit text, and save and quit. - [A short guide to the ed editor](https://flaviocopes.com/linux-command-ed.md): A short guide to the ed editor, the original UNIX text editor, covering how to enter write mode with a, save the buffer to a file, print content and quit. - [Linux commands: env](https://flaviocopes.com/linux-command-env.md): Learn how the Linux env command runs a command with extra environment variables, prints all of them when run alone, and clears the environment with -i. - [Linux commands: printenv](https://flaviocopes.com/linux-command-printenv.md): Learn how the Linux printenv command prints all of your environment variables, or just one like PATH when you pass its name as an argument. - [Linux commands: basename](https://flaviocopes.com/linux-command-basename.md): Learn how the Linux basename command returns the last portion of a path, so basename /Users/flavio/test.txt gives you back just the test.txt filename. - [Linux commands: dirname](https://flaviocopes.com/linux-command-dirname.md): Learn how the Linux dirname command returns the directory portion of a path, so dirname /Users/flavio/test.txt gives you back the /Users/flavio folder. - [Linux commands: crontab](https://flaviocopes.com/linux-command-crontab.md): Learn how the Linux crontab command schedules cron jobs to run at set intervals, listing them with crontab -l and editing them with crontab -e. - [Linux commands: export](https://flaviocopes.com/linux-command-export.md): Learn how the Linux export command makes a variable available to child processes and subshells, how to append to PATH, and how to remove a variable with -n. - [Linux commands: tar](https://flaviocopes.com/linux-command-tar.md): Learn how the Linux tar command groups files into an archive with tar -cf, extracts them with tar -xf, and makes a gzip-compressed .tar.gz with the z flag. - [Linux commands: traceroute](https://flaviocopes.com/linux-command-traceroute.md): Learn how the Linux traceroute command maps every router hop your packets take to reach a host, showing the IP and timing of each, and tuning samples with -q. - [Linux commands: ping](https://flaviocopes.com/linux-command-ping.md): Learn how the Linux ping command checks if a host is reachable over the ICMP protocol, reports round-trip time and packet loss, and limits tries with -c. - [Linux commands: gunzip](https://flaviocopes.com/linux-command-gunzip.md): Learn how the Linux gunzip command decompresses gzipped .gz files, removing the extension, or extracts to a new filename using gunzip -c with redirection. - [Linux commands: gzip](https://flaviocopes.com/linux-command-gzip.md): Learn how the Linux gzip command compresses a file into a .gz archive, how to keep the original with -k, set a level from 1 to 9, and decompress with -d. - [Linux commands: xargs](https://flaviocopes.com/linux-command-xargs.md): Learn how the Linux xargs command turns the output of one command into arguments for another, like piping cat into rm, plus the handy -p and -n options. - [Linux commands: df](https://flaviocopes.com/linux-command-df.md): Learn how the Linux df command reports disk usage for your mounted volumes, with df -h for human-readable sizes and a path to check the volume it lives on. - [Linux commands: nohup](https://flaviocopes.com/linux-command-nohup.md): Learn how the Linux nohup command keeps a process running after you log out or close the terminal, which is handy for long-lived jobs on a remote server. - [Linux commands: diff](https://flaviocopes.com/linux-command-diff.md): Learn how the Linux diff command compares two files or directories line by line, with -y for a side-by-side view and -u for the unified format Git uses. - [Linux commands: uniq](https://flaviocopes.com/linux-command-uniq.md): Learn how the Linux uniq command finds and removes duplicate lines in text, why you pair it with sort, and how -d, -u, and -c change what it reports. - [Linux commands: sort](https://flaviocopes.com/linux-command-sort.md): Learn how the Linux sort command orders the lines of a file or piped input, with -r to reverse, -n for numeric order, and -u to drop duplicate lines. - [Linux commands: uname](https://flaviocopes.com/linux-command-uname.md): Learn how the Linux uname command prints details about your machine and operating system, using flags like -a, -m, and -s to show hardware and OS version info. - [Linux commands: man](https://flaviocopes.com/linux-command-man.md): Learn how the Linux man command opens the manual page for any command, how its pages are grouped by section number, and how tldr gives you a quick summary. - [Linux commands: grep](https://flaviocopes.com/linux-command-grep.md): Learn how the Linux grep command matches patterns in files or piped output, with -n for line numbers, -C for context, -i to ignore case, and -v to invert. - [Linux commands: umask](https://flaviocopes.com/linux-command-umask.md): Learn how the Linux umask command sets the default permissions for new files, reading octal values like 0022 and the -S human-readable notation. - [Linux commands: du](https://flaviocopes.com/linux-command-du.md): Learn how the Linux du command shows the disk space used by files and directories, with du -h for human-readable sizes and sorting by size using sort -nr. - [Linux commands: history](https://flaviocopes.com/linux-command-history.md): Learn how the Linux history command shows your past commands, how to rerun one with the !number syntax, search them with grep, and clear with history -c. - [Linux commands: wc](https://flaviocopes.com/linux-command-wc.md): Learn how the Linux wc command counts the lines, words, and bytes in a file or piped input, plus using -l, -w, -c, and -m for characters in Unicode text. - [Linux commands: open](https://flaviocopes.com/linux-command-open.md): Learn how the macOS open command opens a file, a folder in Finder, or an application, and why open . is so handy, with xdg-open as the Linux equivalent. - [Linux commands: passwd](https://flaviocopes.com/linux-command-passwd.md): Learn how the Linux passwd command changes your password through an interactive prompt, and how root can set another user's password without the old one. - [Linux commands: chmod](https://flaviocopes.com/linux-command-chmod.md): Learn how the Linux chmod command changes file permissions for the owner, group, and others, using symbolic letters like u+x or numeric modes like 644. - [Linux commands: chown](https://flaviocopes.com/linux-command-chown.md): Learn how the Linux chown command changes the owner of a file or directory, sets owner and group at once, and applies changes recursively with the -R flag. - [Linux commands: sudo](https://flaviocopes.com/linux-command-sudo.md): Learn how the Linux sudo command runs a command as root using your own password, how sudo -i opens a root shell, and how -u runs it as any other user. - [Linux commands: su](https://flaviocopes.com/linux-command-su.md): Learn how the Linux su command switches your shell to another user, starting a new shell, or to root when run alone, with exit to return to your own user. - [Linux commands: clear](https://flaviocopes.com/linux-command-clear.md): Learn how the Linux clear command wipes your terminal screen, the handy ctrl-L shortcut for it, and how clear -x clears but keeps your scrollback. - [Linux commands: who](https://flaviocopes.com/linux-command-who.md): Learn how the Linux who command lists the users currently logged in to the system, why you appear multiple times, and what the -aH flags add to the output. - [Linux commands: whoami](https://flaviocopes.com/linux-command-whoami.md): Learn how the Linux whoami command prints the user name currently logged in to your terminal session, and how it differs from the more detailed who am i. - [Linux commands: which](https://flaviocopes.com/linux-command-which.md): Learn how the Linux which command shows the full path where an executable is stored on disk, and why it cannot locate shell aliases or built-in functions. - [Linux commands: type](https://flaviocopes.com/linux-command-type.md): Learn how the Linux type command tells you how a command is interpreted, as an executable, a shell built-in, a function, or an alias, and what it points to. - [Linux commands: fg](https://flaviocopes.com/linux-command-fg.md): Learn how the Linux fg command brings a background job back to the foreground, resuming the last one or a specific job number you find with the jobs command. - [Linux commands: bg](https://flaviocopes.com/linux-command-bg.md): Learn how the Linux bg command resumes a job you suspended with ctrl-Z, running it in the background so you can keep working in the terminal. - [Linux commands: jobs](https://flaviocopes.com/linux-command-jobs.md): Learn how the Linux jobs command lists the background jobs you started with &, giving you the job number for fg and showing process ids with jobs -l. - [Linux commands: alias](https://flaviocopes.com/linux-command-alias.md): Learn how the Linux alias command creates a shortcut for another command, like alias ll for ls -al, and how to make your aliases permanent in .bashrc. - [Linux commands: killall](https://flaviocopes.com/linux-command-killall.md): Learn how the Linux killall command sends a signal to every process with a name, so killall top ends all running top instances, and how to set the signal. - [Linux commands: kill](https://flaviocopes.com/linux-command-kill.md): Learn how the Linux kill command sends signals to a process by PID, defaulting to TERM, and how to send others like KILL, HUP, or STOP, by name or number. - [Linux commands: top](https://flaviocopes.com/linux-command-top.md): Learn how the Linux top command shows running processes in real time, with live CPU, memory, and system load, and how top -o mem sorts them by memory use. - [Linux commands: echo](https://flaviocopes.com/linux-command-echo.md): Learn how the Linux echo command prints its argument to the terminal, interpolates variables like $PATH, expands globs and ranges, and appends to a file. - [Linux commands: ps](https://flaviocopes.com/linux-command-ps.md): Learn how the Linux ps command lists running processes, how ps ax shows them all, and how to read columns like PID and STAT or filter the output with grep. - [Linux commands: ln](https://flaviocopes.com/linux-command-ln.md): Learn how the Linux ln command creates links to files: hard links that share content, and soft links made with -s that can point to directories too. - [Linux commands: find](https://flaviocopes.com/linux-command-find.md): Learn how the Linux find command searches recursively for files and folders by name, type, size, or age, and runs a command on each match with -exec. - [Linux commands: cat](https://flaviocopes.com/linux-command-cat.md): Learn how the Linux cat command prints a file to standard output, joins multiple files into one with redirection, and shows line numbers with the -n option. - [Linux commands: touch](https://flaviocopes.com/linux-command-touch.md): Learn how the Linux touch command creates a new empty file, and how running it on a file that already exists just updates that file's modification timestamp. - [Linux commands: tail](https://flaviocopes.com/linux-command-tail.md): Learn how the Linux tail command shows the end of a file, prints the last lines with -n, and follows a log live as it grows with the tail -f option. - [Linux commands: less](https://flaviocopes.com/linux-command-less.md): Learn how the Linux less command shows a file in an interactive viewer, where you scroll, search with /, and press F for live follow mode like tail -f. - [Linux commands: cp](https://flaviocopes.com/linux-command-cp.md): Learn how the Linux cp command copies files from one place to another, and how the -r recursive option lets you copy entire folders and their contents. - [Linux commands: mv](https://flaviocopes.com/linux-command-mv.md): Learn how the Linux mv command moves a file to a new path, how it doubles as the way you rename files, and how to move several files into a folder at once. - [Linux commands: ls](https://flaviocopes.com/linux-command-ls.md): Learn how the Linux ls command lists the files in a folder, and how the -al option adds details like permissions, owner, and size, plus hidden files. - [Linux commands: rmdir](https://flaviocopes.com/linux-command-rmdir.md): Learn how the Linux rmdir command removes empty folders, one or many at a time, and why you need rm -rf instead to delete a folder that still has files. - [Linux commands: pwd](https://flaviocopes.com/linux-command-pwd.md): Learn how the Linux pwd command prints your current working directory, so you always know exactly where you are in the filesystem when you feel lost. - [Linux commands: cd](https://flaviocopes.com/linux-command-cd.md): Learn how the Linux cd command changes the directory you are in, using a folder name, the .. parent and . current shortcuts, or an absolute path from /. - [Linux commands: mkdir](https://flaviocopes.com/linux-command-mkdir.md): Learn how the Linux mkdir command creates folders, makes several at once in a single call, and builds nested directories in one go with the -p option. - [How to find the process that is using a port](https://flaviocopes.com/command-using-port.md): Learn how to find which process is listening on a port using the lsof -i command, then stop it with kill so you can free up a busy port like 3000. - [Introduction to Linux](https://flaviocopes.com/linux-introduction.md): An introduction to Linux, the free and open source operating system that powers most servers, covering distributions, the kernel, shells and Bash. - [The Command Line for Complete Beginners](https://flaviocopes.com/cli-for-beginners.md): A beginner's guide to the command line: what the terminal and shells like Bash, ZSH and Fish are, plus core commands like ls, cd and man to get started. - [Fix the xcrun invalid active developer path error on macOS](https://flaviocopes.com/fix-xcrun-error-invalid-active-developer-path.md): Learn how to fix the xcrun error invalid active developer path on macOS, which appears after a system update, by running xcode-select --install. - [A practical guide to Homebrew](https://flaviocopes.com/homebrew.md): A practical guide to Homebrew, the package manager for macOS and Linux: how to install and use brew install, upgrade and uninstall to manage CLI and GUI apps. - [How to set an alias in a macOS or Linux shell](https://flaviocopes.com/how-to-set-alias-shell.md): Learn how to set a shell alias on macOS or Linux, like alias ll='ls -al', and make it permanent by adding it to your .bash_profile, .zshrc, or fish config. - [Unix Shells Tutorial](https://flaviocopes.com/shells.md): An introduction to Unix shells, the command interpreters you find on Linux and macOS, including popular options like Bash, Zsh, Fish, and the original sh. - [The UNIX Filesystem Commands](https://flaviocopes.com/unix-filesystem.md): Learn the core UNIX filesystem commands, from mkdir, cd, ls, and cp to setting permissions with chmod and chown, so you can manage files from the terminal. - [UNIX Editors](https://flaviocopes.com/unix-editors.md): Learn the core UNIX text editors, including ed, nano, and vim, with the basics of insert and command modes so you can edit files in the terminal. - [How to exit Vim](https://flaviocopes.com/how-to-exit-vim.md): Learn how to finally exit Vim: press escape, then type :wq to write and quit, or :q! to quit without saving your changes. No more getting stuck. - [Shell, watch file content as it populates](https://flaviocopes.com/tail.md): A guide to the tail UNIX command, used to display the last lines of a file with -n, or to watch a file for new content live with the -f option. - [The Fish Shell](https://flaviocopes.com/fish-shell.md): An introduction to the Fish shell and why I love it: syntax highlighting, autocompletion, web-based configuration with fish_config, and plugins via Fisher. - [Introduction to Bash Shell Scripting](https://flaviocopes.com/bash-scripting.md): An introduction to Bash shell scripting, from the shebang line and making a script executable with chmod to variables and calling CLI tools like awk. - [The Bash shell](https://flaviocopes.com/bash.md): A user introduction to the Bash shell, from its GNU origins as the Bourne-again shell to navigating the filesystem with commands like ls and cd. - [How to set environment variables in bash and zsh](https://flaviocopes.com/shell-environment-variables.md): Learn how to set environment variables in Bash and zsh with export, how to persist them in .bashrc or .zshrc, and the env prefix trick for the Fish shell. ## Cloudflare - [Rate limiting with Cloudflare KV](https://flaviocopes.com/rate-limiting-cloudflare-kv.md): Rate limit Cloudflare Workers API routes with KV fixed-window counters and expirationTtl cleanup. Soft limits that work with KV eventual consistency. - [HMAC-signed URLs on Cloudflare Workers](https://flaviocopes.com/hmac-signed-urls-cloudflare-workers.md): Sign URLs with HMAC on Cloudflare Workers using the Web Crypto API. Grant time-limited access without sessions or cookies, no Node crypto needed. - [Serving my site as Markdown to AI agents](https://flaviocopes.com/serving-markdown-to-ai-agents.md): Why and how I made every post on this site available as clean Markdown. Append .md to any post URL and you get the Markdown source, served as a static file. - [Cloudflare Artifacts: Git storage built for AI agents](https://flaviocopes.com/cloudflare-artifacts.md): Learn how Cloudflare Artifacts gives AI agents isolated Git repositories, short-lived access tokens, forks, and a programmable Workers API. - [Cloudflare Drop: drag a folder, get a live site](https://flaviocopes.com/cloudflare-drop.md): Cloudflare Drop deploys a static site by dragging a folder or zip into the browser. No account, no CLI. How it works and how it ties into temporary accounts. - [Temporary Cloudflare accounts: agents can now deploy without signing up](https://flaviocopes.com/cloudflare-temporary-accounts.md): wrangler deploy --temporary deploys a Worker with no Cloudflare account. Live for 60 minutes, claimable with a link. How it works and its limits. - [Workers Cache: a cache in front of your Cloudflare Worker](https://flaviocopes.com/cloudflare-workers-cache.md): Cloudflare launched Workers Cache, a tiered cache that sits in front of your Worker. How to enable it, set Cache-Control headers, and purge by tag. - [Moondream 3.1 on Workers AI: fast vision at the edge](https://flaviocopes.com/moondream-workers-ai.md): Cloudflare brings the Moondream 3.1 vision model to Workers AI. Caption images, ask questions, get object coordinates and bounding boxes — in under a second. - [How the Cloudflare Pages build cache works](https://flaviocopes.com/cloudflare-pages-build-cache.md): How the Cloudflare Pages build cache speeds up deploys, which directories it restores for each framework, and how to keep your own caches between builds. - [How to rebuild a Cloudflare site on a schedule](https://flaviocopes.com/cloudflare-scheduled-rebuilds.md): Learn how to rebuild a Cloudflare Pages site on a schedule using a deploy hook, triggered either by a GitHub Action cron or a Cloudflare Worker cron. - [Cloudflare Email Workers: run code when an email arrives](https://flaviocopes.com/cloudflare-email-workers.md): How to receive and process incoming email with Cloudflare Email Workers, parse it with postal-mime, and forward or act on it. - [Cloudflare Turnstile: stop bots without annoying CAPTCHAs](https://flaviocopes.com/cloudflare-turnstile.md): How to protect a form from bots with Cloudflare Turnstile. Add the widget to your page and verify the token from a Worker. - [Cloudflare Workers: secrets and environments](https://flaviocopes.com/cloudflare-workers-secrets-environments.md): How to handle config, secrets, and multiple environments (staging, production) in Cloudflare Workers without leaking anything. - [Cloudflare Workers observability: logs and traces](https://flaviocopes.com/cloudflare-workers-observability.md): Learn how to see what your Cloudflare Worker does in production using console.log, observability in wrangler.jsonc, and live tailing with wrangler tail. - [Cloudflare Analytics Engine: store and query metrics](https://flaviocopes.com/cloudflare-analytics-engine.md): How to write custom events from a Worker with Analytics Engine and query them later with SQL. Cheap, high-volume time-series data. - [Cloudflare Cron Triggers: run a Worker on a schedule](https://flaviocopes.com/cloudflare-cron-triggers.md): How to run a Cloudflare Worker on a schedule with Cron Triggers. Nightly jobs, periodic checks, and cleanups, with no server to keep running. - [Cloudflare Durable Objects: state that lives in one place](https://flaviocopes.com/cloudflare-durable-objects.md): What Durable Objects are and how to use them, with their built-in SQLite storage. A simple counter and a rate limiter, explained from scratch. - [Cloudflare Queues: run work in the background](https://flaviocopes.com/cloudflare-queues.md): How to use Cloudflare Queues to do work after the response is sent. Producers, consumers, batching, retries, and dead letter queues. - [Cloudflare R2: object storage without egress fees](https://flaviocopes.com/cloudflare-r2.md): How to store and serve files like images and uploads with Cloudflare R2 from a Worker. S3-compatible storage with no egress fees. - [Cloudflare KV: a key-value store for your Workers](https://flaviocopes.com/cloudflare-kv.md): Learn how to use Cloudflare Workers KV, an edge key-value store, to create a namespace and put and get data, ideal for sessions, feature flags and caching. - [Cloudflare D1: a SQL database for your Workers](https://flaviocopes.com/cloudflare-d1.md): How to create a D1 database, manage its schema with migrations, and query it from a Worker. SQLite, served from the edge. - [Serving a website with Cloudflare Workers static assets](https://flaviocopes.com/cloudflare-workers-static-assets.md): How to deploy a static site, an SPA, or a full Astro app on Cloudflare Workers using the static assets feature, with a Worker for the dynamic parts. - [Wrangler: the Cloudflare Workers command line tool](https://flaviocopes.com/cloudflare-wrangler.md): A practical guide to Wrangler, the CLI you use to build, run, deploy, and manage Cloudflare Workers and everything attached to them. - [Cloudflare Workers: your first serverless function](https://flaviocopes.com/cloudflare-workers.md): What Cloudflare Workers are and how to build, run, and deploy your first one. The foundation of the whole Cloudflare developer platform. ## Computer - [How to quickly create a Windows 10 computer on AWS](https://flaviocopes.com/create-windows-cloud.md): Learn how to quickly create a Windows 10 machine in the cloud with AWS WorkSpaces and connect to it remotely from your Mac using the WorkSpaces client app. - [A very short introduction to COBOL](https://flaviocopes.com/cobol.md): A short introduction to COBOL, the COmmon Business-Oriented Language from 1959 still running banks, including how to install GNU COBOL and compile with cobc. - [Give your Raspberry Pi a static IP address](https://flaviocopes.com/raspberry-pi-static-address-lan.md): Learn how to give your Raspberry Pi a fixed LAN IP by setting up a static DHCP lease on your router, bound to the Pi's MAC address that you find with arp. - [How to connect to a Raspberry Pi using a Mac](https://flaviocopes.com/raspberry-pi-connect-vnc.md): Learn how to connect to a Raspberry Pi from a Mac over VNC: enable VNC in the Raspberry Pi configuration, then use VNC Viewer with the Pi's IP address. - [Non-printable ASCII characters list](https://flaviocopes.com/non-printable-ascii-characters.md): A reference table of all the non-printable ASCII characters, listing their decimal and hexadecimal codes alongside names like NULL, BEL, TAB, and ESC. - [Printable ASCII characters list](https://flaviocopes.com/printable-ascii-characters.md): A reference table of all the printable ASCII characters from 32 to 126, with the decimal code, hex code, and the character itself for each one. - [Converting Numbers from Decimal to Binary](https://flaviocopes.com/converting-decimal-to-binary.md): Learn how to convert a decimal number to binary by repeatedly dividing the integer by 2, noting each remainder, then reversing the list to read the result. - [The Binary Number System](https://flaviocopes.com/binary-number-system.md): An introduction to the binary number system, the base-2 positional system of 0s and 1s called bits, and how each position maps to a power of 2. - [The Decimal Number System](https://flaviocopes.com/decimal-number-system.md): Understand how the decimal number system works: base 10 with digits 0 to 9, positional values based on powers of 10, and how it differs from Roman numerals. - [Finite State Machines](https://flaviocopes.com/finite-state-machines.md): Understand finite state machines through examples like traffic lights, learning how states, inputs, transitions and outputs map into a state transition table. ## CSS - [Setting up Tailwind CSS on Vite](https://flaviocopes.com/setting-up-tailwind-css-on-vite.md): Learn how to add Tailwind CSS to a Vite app: install the @tailwindcss/vite plugin, add it to vite.config, and import tailwindcss in your main CSS file. - [Show or hide an element by parent class in Tailwind](https://flaviocopes.com/show-hide-an-element-based-on-existence-of-a-parent-class-in-tailwind.md): Learn a lesser-known Tailwind trick that shows or hides an element based on a parent class, using the group utility with the group-[.is-published] variant. - [How to create a sidebar that’s sticky but also scrolls](https://flaviocopes.com/how-to-create-a-sidebar-thats-sticky-but-also-scrolls.md): Learn how to build a sidebar that stays sticky yet scrolls on short screens using CSS position sticky, top 0, height 100vh, and overflow-y auto, or Tailwind. - [Customizing visited links](https://flaviocopes.com/customizing-visited-links.md): Learn how to style visited links beyond the limits of the CSS :visited selector, by tracking visits in localStorage and adding a data-visited attribute. - [Fix extra space after inline element](https://flaviocopes.com/fix-extra-space-after-inline-element.md): Learn how to fix the extra space that appears after an inline element like a span when Prettier reformats it, by setting the element to display inline-block. - [How to use custom fonts with Tailwind CSS](https://flaviocopes.com/how-to-use-custom-fonts-with-tailwind-css.md): Learn how to use custom fonts with Tailwind CSS by importing a Google Font in your CSS and setting it as the default font-family inside the base layer. - [Apply a style to a children with Tailwind](https://flaviocopes.com/apply-a-style-to-a-children-with-tailwind.md): Learn how to apply a Tailwind style to all child elements of an element using the [&>*] arbitrary variant, or the newer *: variant in Tailwind 3.4. - [CSS, how to select elements that do NOT have a class](https://flaviocopes.com/css-how-to-select-elements-that-do-not-have-a-class.md): Learn how to select HTML elements that do not have a class in CSS using the :not() selector, for example p:not(.description) to style unclassed paragraphs. - [CSS box-sizing: border-box](https://flaviocopes.com/css-border-box.md): Learn how the CSS box-sizing border-box value makes width and height include padding and border, so element sizing finally behaves the way you expect. - [How to have a flex child not fill entire height](https://flaviocopes.com/how-to-flex-child-not-fill-height.md): Learn how to stop a flex child from stretching to fill the full height of its row by applying align-self start, or the self-start class in Tailwind CSS. - [How to embed YouTube videos using the correct aspect ratio](https://flaviocopes.com/how-to-embed-youtube-videos-correct-aspect-ratio.md): Learn how to embed a YouTube video with the correct aspect ratio using the CSS aspect-ratio property or Tailwind's aspect-video class, no padding hacks. - [You can’t generate classes dynamically in Tailwind](https://flaviocopes.com/tailwindcss-cannot-generate-classes-dynamically.md): Why you cannot build Tailwind class names dynamically like bg-color-500, and how to fix it by mapping full classes in a switch or listing them in a comment. - [How to select the first child element with CSS](https://flaviocopes.com/css-select-first-child.md): Learn how to select the first child element in CSS without adding a class, using the first-of-type selector to target the first ul inside a container. - [Fix 'Unknown at rule @tailwind' warning in VS Code](https://flaviocopes.com/fix-unknown-at-rule-tailwind.md): How to fix the Unknown at rule @tailwind warning in VS Code by switching the CSS language mode to Tailwind or setting Unknown At Rules to ignore. - [How to make an element smaller or bigger with CSS](https://flaviocopes.com/css-zoom.md): Learn how to make an HTML element bigger or smaller with the CSS zoom property, using values below 1 to shrink and above 1 to grow, plus a Firefox fallback. - [CSS Border inside the element](https://flaviocopes.com/css-border-inside-element.md): Learn how to draw a CSS border inside an element instead of outside it, using box-shadow with the inset keyword so the box size never shifts on hover. - [How to align center vertically using Tailwind](https://flaviocopes.com/how-to-align-center-vertically-tailwind.md): Learn how to center content vertically and horizontally with Tailwind using the flex, items-center, and justify-center classes on the container element. - [How to apply padding to multiple lines in CSS](https://flaviocopes.com/css-padding-multiple-lines.md): Learn how to apply padding to every line of wrapped text in CSS with box-decoration-break: clone, plus the -webkit- prefix that Safari needs to render it right. - [How to align center in flexbox](https://flaviocopes.com/flexbox-center.md): Learn how to center an element with flexbox by setting display flex and justify-content center on its container, or Tailwind flex and justify-center classes. - [What are good CSS Breakpoint values for Responsive Design?](https://flaviocopes.com/css-breakpoints.md): The CSS breakpoint values I use for responsive design, taken from the Tailwind defaults at 640, 768, 1024 and 1280px, working mobile first with min-width. - [Responsive YouTube Video Embeds](https://flaviocopes.com/responsive-youtube-videos.md): Learn how to make a YouTube video embed responsive by wrapping the iframe in a container div and using a CSS padding trick based on the 16:9 aspect ratio. - [Responsive pre tags in CSS](https://flaviocopes.com/responsive-pre-tags.md): Learn how to make pre tags with long code snippets responsive in CSS by setting white-space to pre-wrap and word-break to break-all so they stop overflowing. - [How to invert colors using CSS](https://flaviocopes.com/css-invert-colors.md): Learn how to invert the colors of an element or image in CSS with filter: invert(100%), handy inside a prefers-color-scheme: dark query for dark mode. - [How to put an item at the bottom of its container using CSS](https://flaviocopes.com/css-how-to-put-item-bottom-container.md): Learn how to put an item at the bottom of its container in CSS by giving the child position: absolute and bottom: 0, with position: relative on the parent. - [How to disable text selection using CSS](https://flaviocopes.com/css-disable-text-selection.md): Learn how to disable text selection in CSS with the user-select: none rule and its browser prefixes, then re-enable it on elements with user-select: text. - [The CSS z-index property](https://flaviocopes.com/css-z-index.md): Learn how the CSS z-index property controls which overlapping elements appear on top, why higher values sit nearer users, and why position must not be static. - [CSS Normalizing](https://flaviocopes.com/css-normalizing.md): Learn why and how to use CSS normalizing with Normalize.css, which smooths out browser inconsistencies while keeping useful defaults, unlike a full CSS reset. - [The CSS float property and clearing](https://flaviocopes.com/css-floating-clearing.md): Learn how the CSS float property uses left, right and none values to wrap content around an element, plus clearing, now that Flexbox and Grid handle layout. - [CSS Padding](https://flaviocopes.com/css-padding.md): Learn how the CSS padding property adds space inside an element border, with padding-top, right, bottom and left, and how the shorthand changes by value count. - [CSS Fonts](https://flaviocopes.com/css-fonts.md): Learn how to work with fonts in CSS using font-family, font-weight, font-size and the font shorthand, plus loading custom fonts with @font-face and @import. - [CSS Comments](https://flaviocopes.com/css-comments.md): Learn how to write comments in CSS with the C-style /* ... */ block syntax, why there are no inline // comments, and how // silently breaks the next rule. - [CSS Backgrounds](https://flaviocopes.com/css-backgrounds.md): Learn how to style an element's background in CSS with properties like background-color, background-image and background-size, plus the background shorthand. - [CSS Box Sizing](https://flaviocopes.com/css-box-sizing.md): Learn how the CSS box-sizing property lets you switch to border-box so width and height include padding and border, making element sizing behave as you expect. - [CSS Filters](https://flaviocopes.com/css-filters.md): Learn how the CSS filter property applies Photoshop-like effects to any element, with functions like blur(), brightness(), grayscale(), opacity() and sepia(). - [CSS Error Handling](https://flaviocopes.com/css-error-handling.md): Learn how CSS handles errors: unlike JavaScript, it stays resilient and skips an invalid line, so a missing semicolon can quietly break the rules around it. - [Importing a CSS file using @import](https://flaviocopes.com/css-import.md): Learn how to import one CSS file into another with the @import directive, why it must come before any other rules, and how to load files per media like print. - [CSS Borders](https://flaviocopes.com/css-border.md): Learn how to work with borders in CSS using border-style, border-color and border-width, the border shorthand, and border-radius to create rounded corners. - [The CSS calc() function](https://flaviocopes.com/css-calc.md): Learn how the CSS calc() function performs math on values, like calc(80% - 100px), mixing percentages and lengths with the +, -, * and / operators. - [The CSS Display property](https://flaviocopes.com/css-display.md): Learn how the CSS display property controls how an element is rendered, covering key values block, inline, inline-block and none, plus flex, grid and table. - [Styling HTML Tables with CSS](https://flaviocopes.com/css-tables.md): Learn how to style HTML tables with CSS now that Grid and Flexbox handle layout, adding borders, spacing, and striped rows with the nth-child selector. - [CSS Pseudo Elements](https://flaviocopes.com/css-pseudo-elements.md): Learn how CSS pseudo elements like before, after, first-letter, and first-line style specific parts of an element and insert content before or after it. - [CSS Pseudo Classes](https://flaviocopes.com/css-pseudo-classes.md): Learn how CSS pseudo classes like hover, focus, first-child, and nth-child let you style elements based on their state or position among siblings. - [CSS Inheritance](https://flaviocopes.com/css-inheritance.md): Learn how CSS inheritance works: properties like font-family and color pass down to child elements, while others like background-color do not. - [CSS Vendor Prefixes](https://flaviocopes.com/css-vendor-prefixes.md): Learn what CSS vendor prefixes like -webkit- and -moz- are, why shipping them in production caused problems, and how Autoprefixer handles them for you. - [How to style lists using CSS](https://flaviocopes.com/css-lists.md): Learn how to style lists with CSS using list-style-type for the marker, list-style-image for a custom one, list-style-position, and the list-style shorthand. - [CSS Transforms](https://flaviocopes.com/css-transforms.md): Learn how the CSS transform property lets you translate, rotate, scale, and skew elements in 2D and 3D space, and combine transforms with perspective. - [CSS Feature Queries](https://flaviocopes.com/css-feature-queries.md): Learn how to use CSS feature queries with the @supports keyword to check if a browser supports a feature like display: grid, plus the and, or and not logic. - [CSS Media Queries and Responsive Design](https://flaviocopes.com/css-media-queries.md): Learn how CSS media queries power responsive design, from media types like screen and print to feature descriptors combined with @media to adapt your layouts. - [The CSS position property](https://flaviocopes.com/css-positioning.md): Learn how the CSS position property works: static, relative, absolute, fixed, and sticky, plus how to move elements with top, right, bottom, and left. - [The CSS Box Model](https://flaviocopes.com/css-box-model.md): Learn how the CSS box model works: every element is a box made of a content area, padding, border and margin, and by default width applies to the content area. - [CSS Typography](https://flaviocopes.com/css-typography.md): Learn how to style text with CSS typography properties like text-transform, text-decoration, text-align, line-height, letter-spacing, and text-shadow. - [CSS url()](https://flaviocopes.com/css-url.md): Learn how the CSS url() function loads resources like background images, using relative paths, root-relative paths, and absolute URLs to external files. - [CSS Units](https://flaviocopes.com/css-units.md): Learn how CSS units work, from pixels and percentages to relative units like em, rem, ex, and ch, plus viewport units and real-world measurements. - [CSS Colors](https://flaviocopes.com/css-colors.md): Learn how to work with colors in CSS using the color, background-color and border-color properties, with values from named colors to RGB, HSL and hex codes. - [CSS Attribute Selectors](https://flaviocopes.com/css-attribute-selectors.md): Learn how to use CSS attribute selectors to target elements by attribute, from presence checks like p[id] to partial matches with the *=, ^= and $= operators. - [CSS Specificity](https://flaviocopes.com/css-specificity.md): Learn how CSS specificity decides which rule wins when several target the same element, and how to calculate it across the type, class, id, and inline slots. - [CSS Cascade](https://flaviocopes.com/css-cascade.md): Learn what the CSS cascade is: the algorithm that decides which rules win for each element based on specificity, importance, inheritance and order in the file. - [CSS Selectors](https://flaviocopes.com/css-selectors.md): Learn the most important CSS selectors, from targeting elements by tag, class, and id to combining them so you can apply styles exactly where you want. - [How to debug CSS by bisecting](https://flaviocopes.com/css-debugging-bisect.md): Learn how to debug CSS by bisecting: delete half a stylesheet in the DevTools Sources panel, see if the bug remains, and repeat until you find the broken rule. - [Making a table responsive using CSS](https://flaviocopes.com/css-responsive-table.md): Learn how to make an HTML table responsive on mobile with CSS, turning rows into blocks and using td before labels so each cell shows its column heading. - [How to continuously rotate an image using CSS](https://flaviocopes.com/rotate-image.md): Learn how to continuously rotate an image, or any HTML element, using CSS animations and a keyframes rule that spins it from 0 to 360 degrees on a loop. - [The Tailwind Cheat Sheet](https://flaviocopes.com/tailwind-cheat-sheet.md): A Tailwind cheat sheet mapping the CSS properties you use most, like margin, padding, width, colors, and flexbox, to their matching utility classes. - [How to setup Tailwind with PurgeCSS and PostCSS](https://flaviocopes.com/tailwind-setup.md): Learn how to set up Tailwind CSS with PostCSS, autoprefixer, and PurgeCSS to trim unused styles, in any project and without webpack involved at all. - [The CSS Guide](https://flaviocopes.com/css.md): CSS is the language that defines the visual appearance of an HTML page in the browser. Learn all about CSS, from the zero to flexbox, CSS Grid and CSS Variables - [Introduction to CSS](https://flaviocopes.com/css-introduction.md): An introduction to CSS, the Cascading Style Sheets language that styles HTML pages, covering its syntax and the three ways to load it into a web page. - [A CSS Animations Tutorial](https://flaviocopes.com/css-animations.md): Learn how CSS animations work: apply the animation property to an element, then define its waypoints with @keyframes from 0% to 100% to control how it moves. - [Introduction to CSS Transitions](https://flaviocopes.com/css-transitions.md): Learn how CSS transitions animate a property from one value to another using transition-property, duration, timing-function, and delay for smooth effects. - [Compare the options for Animations on the Web](https://flaviocopes.com/animations.md): Compare the main options for animations on the web, from CSS transitions and animations to SVG SMIL, the Canvas API, the Web Animations API, and WebGL. - [How to print your HTML with style](https://flaviocopes.com/css-printing.md): Learn how to style your HTML for printing or saving to PDF with CSS, using the media print query to hide elements, set page margins, and control page breaks. - [CSS System Fonts](https://flaviocopes.com/css-system-fonts.md): How to use System Fonts in CSS to improve your site and provide a better experience to your users in terms of speed and page load time - [How to center an element with CSS](https://flaviocopes.com/css-centering.md): Learn how to center an element with CSS, horizontally and vertically, using text-align for text plus modern Flexbox with justify-content and align-content. - [The CSS margin property](https://flaviocopes.com/css-margin.md): Learn how the CSS margin property adds space outside an element border, with margin-top, right, bottom and left, and how the shorthand changes by value count. - [Introduction to PostCSS](https://flaviocopes.com/postcss.md): Learn how PostCSS lets you transform CSS with plugins like Autoprefixer, cssnext, and cssnano, running them at build time, and how it differs from Sass. - [CSS Variables (Custom Properties)](https://flaviocopes.com/css-variables.md): Discover CSS Custom Properties, also called CSS Variables, a powerful new feature of modern browsers that help you write better CSS - [CSS Grid Tutorial](https://flaviocopes.com/css-grid.md): Learn CSS Grid, the two-dimensional layout system for rows and columns, using grid-template-columns and rows, the fr unit, repeat() and grid-template-areas. - [The Flexbox Tutorial](https://flaviocopes.com/flexbox.md): A complete flexbox tutorial: enable it with display flex, then control layout with justify-content, align-items, flex-wrap and per-item flex-grow. - [RGB color codes](https://flaviocopes.com/rgb-color-codes.md): A table summarizing the RGB color codes, which are useful but are hard to remember. Find out what color corresponds to a code, and vice versa. ## Database - [Connect to Postgres local vs Vercel Postgres with Kysely](https://flaviocopes.com/connect-to-postgres-local-vs-vercel-postgres-with-kysely.md): Learn how to set up Kysely with a local Postgres database using pg Pool, then switch to Vercel Postgres with the @vercel/postgres-kysely package. - [Set up Lucia Auth for local Postgres DB vs Vercel Postgres](https://flaviocopes.com/set-up-lucia-auth-for-local-postgres-db-vs-vercel-postgres.md): Learn how to configure Lucia Auth with the postgresql adapter for a local Postgres database and Vercel Postgres, switching the postgres and pg drivers. - [Vercel Postgres, no transactions?](https://flaviocopes.com/vercel-postgres-no-transactions.md): Vercel Postgres with Kysely does not support transactions, so I had to rewrite db.transaction() code as plain queries, or use a direct pg connection instead. - [How to reset Postgres SERIAL number](https://flaviocopes.com/how-to-reset-postgres-serial-number.md): Learn how to reset a Postgres SERIAL sequence back to 1 after deleting rows by running ALTER SEQUENCE tablename_id_seq RESTART, plus a TablePlus shortcut. - [SQL, copy data from one table to another](https://flaviocopes.com/sql-copy-data-from-one-table-to-another.md): Learn how to copy data from one SQL table to another with INSERT INTO and SELECT, including how to skip the primary key column to avoid duplication errors. - [How to use Supabase as your PostgreSQL hosting](https://flaviocopes.com/postgresql-supabase-setup.md): Learn how to use Supabase as your PostgreSQL hosting, grabbing the connection string for your DATABASE_URL and using its pgbouncer pooler with Prisma. - [Where to host a PostgreSQL database](https://flaviocopes.com/postgresql-where-to-host.md): Learn where to host a PostgreSQL database, from a local dev database to remote options like Railway, a DigitalOcean VPS, and managed database services. - [How to define an auto increment primary key in PostgreSQL](https://flaviocopes.com/postgres-auto-increment-primary-key.md): Learn how to define an auto-increment primary key in PostgreSQL using the SERIAL type with a PRIMARY KEY constraint, and the MySQL AUTO_INCREMENT equivalent. - [Fix PostgreSQL 'relation does not exist' error](https://flaviocopes.com/postgres-relation-not-exists.md): Learn how to fix the PostgreSQL relation does not exist error, which happens with mixed-case table names, by quoting the table name like Car in your query. - [Fix psql 'could not connect to server' in PostgreSQL](https://flaviocopes.com/postgresql-fix-error-could-not-connect-server.md): Fix the PostgreSQL psql error could not connect to server after a brew upgrade by reinstalling it with brew uninstall and install, then brew services start. - [Using multiple fields for a unique key in Prisma](https://flaviocopes.com/prisma-multiple-fields-unique-key.md): Learn how to use a compound unique key in Prisma with @@unique, and how to query or delete those rows using the combined user_tweet field with an underscore. - [How to create a PostgreSQL database](https://flaviocopes.com/postgres-create-database.md): Learn how to create a PostgreSQL database by opening the console with psql postgres and running the CREATE DATABASE command, then list it to confirm. - [Prisma, how to reverse order](https://flaviocopes.com/prisma-reverse-order.md): Learn how to reverse the order of results in Prisma by adding an orderBy clause to findMany and sorting by id in descending order to show the newest first. - [Prisma, how to clear the database](https://flaviocopes.com/prisma-clear-database.md): Learn how to clear a database with Prisma using deleteMany, and how to delete related records in order with findMany and Promise.all to respect relations. - [Prisma relations](https://flaviocopes.com/prisma-relations.md): Learn how Prisma relations work by linking User and Tweet models with @relation, connecting records, and loading related data with include when you query. - [How to use Prisma](https://flaviocopes.com/prisma.md): Learn how to use Prisma, the ORM that sits over your database, in a Next.js app: install it, run prisma init, and set up your schema.prisma model file. - [Fix 'prisma/client did not initialize yet' on Vercel](https://flaviocopes.com/prisma-fix-initialize-yet-vercel.md): Fix the @prisma/client did not initialize yet error when deploying to Vercel by adding a postinstall script that runs prisma generate in your package.json. - [How to create an empty SQLite database](https://flaviocopes.com/create-empty-sqllite-database.md): Learn how to create an empty SQLite database the simplest way: just make an empty file with touch storage.db, then copy the file to back it up or clone it. - [How to remove all items from a MongoDB collection](https://flaviocopes.com/mongodb-delete-all-from-collection.md): Learn how to remove all items from a MongoDB collection by calling the deleteMany method and passing it an empty object, with a full Node.js example. - [How to insert multiple items at once in a MongoDB collection](https://flaviocopes.com/mongodb-insert-multiple-items.md): Learn how to insert multiple items at once into a MongoDB collection from Node.js by passing an array of objects to the insertMany() method. - [How to store passwords in the database](https://flaviocopes.com/how-to-store-passwords.md): Never store raw passwords in your database, store a hash instead. Learn how to hash and verify passwords in Node.js with bcrypt using hash() and compare(). - [SQL Views](https://flaviocopes.com/sql-views.md): Learn how to create a SQL view, a virtual table built dynamically from the result of a SELECT query, and how to delete it later with DROP VIEW. - [SQL Joins](https://flaviocopes.com/sql-joins.md): Learn how to perform a join between two SQL tables using JOIN ON to correlate matching columns, with a clear example combining a people and cars table. - [SQL, how to delete data and tables](https://flaviocopes.com/sql-delete-data.md): Learn how to delete data from a SQL table with DELETE FROM and the WHERE clause, and how to remove an entire table using the DROP TABLE command. - [SQL, how to update a table structure](https://flaviocopes.com/sql-update-table-structure.md): Learn how to change a SQL table structure with the ALTER TABLE command, adding a new column with ADD COLUMN or removing one with DROP COLUMN. - [SQL, how to update data](https://flaviocopes.com/sql-update-data.md): Learn how to update data in a SQL table with the UPDATE command, and why the WHERE clause matters so you do not accidentally change every row. - [SQL, Unique and Primary keys](https://flaviocopes.com/sql-unique-primary-keys.md): Learn how to use the UNIQUE constraint to stop duplicate values in a SQL column, and how a PRIMARY KEY uniquely identifies each row in a table. - [SQL, Handling empty cells](https://flaviocopes.com/sql-null.md): Learn how to handle null and empty cells in a SQL database, and how to prevent them by adding the NOT NULL constraint to your table columns. - [SQL, how to use SELECT](https://flaviocopes.com/sql-select.md): Learn how to get data from a SQL table with the SELECT command, choosing columns, counting rows with COUNT, and filtering results with the WHERE clause. - [SQL, adding data to a table](https://flaviocopes.com/sql-insert-data.md): Learn how to insert data into a SQL database table using the INSERT INTO command, adding a single row or multiple rows at once with one statement. - [SQL, creating a table](https://flaviocopes.com/sql-create-table.md): Learn how to create a table in a SQL database with the CREATE TABLE command, defining column names and data types like INT, VARCHAR, DATE, and TEXT. - [MySQL User Permissions](https://flaviocopes.com/mysql-user-permissions.md): Learn how MySQL user permissions work and how to grant privileges like CREATE, SELECT, and ALL PRIVILEGES to an account using the GRANT command on databases. - [SQLite User Permissions](https://flaviocopes.com/sqlite-user-permissions.md): Understand why SQLite has no user permissions: GRANT and REVOKE are not available because the database is a single file, so handle access in your app. - [PostgreSQL vs MySQL, a comparison](https://flaviocopes.com/postgres-vs-mysql.md): A comparison of PostgreSQL and MySQL covering their licenses, the MariaDB fork, similar feature sets, and ACID compliance, to help you pick one to use. - [Creating a user on MySQL](https://flaviocopes.com/mysql-how-to-create-user.md): Learn how to create a new user in MySQL with the CREATE USER command instead of relying on the powerful root account, then connect with the new credentials. - [How to install MySQL on macOS](https://flaviocopes.com/mysql-how-to-install.md): Learn how to install MySQL on macOS with Homebrew, start the server with brew services, and lock it down by running mysql_secure_installation. - [How to list tables in the current database using PostgreSQL](https://flaviocopes.com/postgres-how-to-list-tables-database.md): Learn how to list the tables in the current PostgreSQL database using the dt command in psql, or a SQL query against the information_schema.tables view. - [How to list all databases using PostgreSQL](https://flaviocopes.com/postgres-how-to-list-all-databases.md): Learn how to list all databases in PostgreSQL, using the psql list meta-command or a SQL query that selects datname from the pg_database catalog table. - [How to switch database using PostgreSQL](https://flaviocopes.com/postgres-how-to-switch-database.md): Learn how to switch the active database inside the psql tool in PostgreSQL using the connect command (or its c shortcut) to reconnect to another database. - [How to list all users in PostgreSQL](https://flaviocopes.com/postgres-how-to-list-all-users.md): Learn how to list all users in PostgreSQL by running the du command in the psql interface, which also shows each role's attributes and group memberships. - [PostgreSQL User Permissions](https://flaviocopes.com/postgres-user-permissions.md): Learn how PostgreSQL manages users and permissions through roles, from role attributes like Superuser and Create DB to creating roles with CREATE ROLE. - [Introduction to PostgreSQL](https://flaviocopes.com/postgres-introduction.md): A high-level introduction to PostgreSQL, the popular open source relational database that supports most of the SQL standard and has been around since 1996. - [How to install SQLite on macOS](https://flaviocopes.com/sqlite-how-to-install.md): Learn how to install and use SQLite on macOS, where it comes preinstalled, by running the sqlite3 command and connecting to a database file with TablePlus. - [Do you always need a database for your app?](https://flaviocopes.com/do-you-need-a-database.md): Do you always need a database for your app? Not always. Files, a JSON or Plist file, or Core Data can be enough; it is a balance of complexity and convenience. - [How to install PostgreSQL on macOS](https://flaviocopes.com/postgres-how-to-install.md): Learn how to install PostgreSQL on macOS with Homebrew, using brew install postgresql and brew services start postgresql to run it as a background daemon. - [Introduction to SQL](https://flaviocopes.com/sql-introduction.md): An introduction to SQL, the Structured Query Language used to interact with a database management system like PostgreSQL, MySQL, SQLite, or Oracle. - [What is a Database? And a DBMS?](https://flaviocopes.com/what-is-a-database.md): Learn what a database and a DBMS are, and the key properties of a database management system, from being efficient and persistent to secure and shared. - [Relational Databases](https://flaviocopes.com/relational-databases.md): Relational Databases are the software implementation of the concepts expressed by the theory introduced by the Relational Model. - [Relational Algebra](https://flaviocopes.com/relational-algebra.md): When working with the relational model, we have 2 groups of operations we can use. One of them is relational algebra. - [The Relational Model](https://flaviocopes.com/relational-model.md): The Relational Model is the most popular of the logic data models listed in the Data Models post, and it's at the basis of SQL databases. - [Introduction to the ER Data Model](https://flaviocopes.com/entity-relationship.md): A clear overview of the Entity-Relationship (ER) data model, a conceptual way to model data with entities and relations using a simple visual notation. - [Data models](https://flaviocopes.com/data-models.md): Learn what data models are and how they structure and connect data, from the conceptual Entity-Relationship model to logic models like the relational model. - [Information systems, data and information](https://flaviocopes.com/data-information.md): Understand the difference between data and information, what an information system is, and why a value like 36 only means something once you know it is an age. - [How MongoDB is different from a SQL database](https://flaviocopes.com/mongodb-vs-sql.md): Understand how MongoDB differs from a SQL database like MySQL: it is a schemaless NoSQL document store using JSON-like objects instead of flat, static tables. - [The MongoDB basics tutorial](https://flaviocopes.com/mongodb.md): Learn the basics of MongoDB, the schemaless NoSQL document database, from installing it with Homebrew to storing JavaScript objects without a fixed structure. ## DevTools - [How to disable an ESLint rule](https://flaviocopes.com/how-to-disable-eslint-rule.md): Learn how to disable an ESLint rule for a whole file, a single block or line, or globally in your package.json, with examples for no-console and no-debugger. - [Configuring the macOS command line](https://flaviocopes.com/macos-terminal-setup.md): Learn how to set up the macOS command line from scratch, installing Homebrew, switching your default shell to Fish, and customizing it with fish_config. - [Parcel, a simpler webpack](https://flaviocopes.com/parcel.md): Learn how Parcel works as a zero-config web app bundler, an alternative to webpack with JS, CSS, and HTML bundling, code splitting, and hot reloading. - [Introduction to Electron](https://flaviocopes.com/electron.md): Learn the basics of Electron, the framework built by GitHub that powers a lot of innovative and very popular cross-platform applications - [Testing JavaScript with Jest](https://flaviocopes.com/jest.md): Learn how to test your JavaScript code with Jest, from writing your first test and using matchers to mocking, async tests, and snapshot testing. - [A list of cool Chrome DevTools Tips and Tricks](https://flaviocopes.com/chrome-devtools-tips.md): The Chrome DevTools provide an amazing set of tools to help you develop on the Web platform. Here are a few tips you might not know yet - [Keep your code clean with ESLint](https://flaviocopes.com/eslint.md): Learn the basics of ESLint, the popular JavaScript linter, how to install and configure it to catch problems and enforce a consistent style across your code. - [Format your code with Prettier](https://flaviocopes.com/prettier.md): Learn how Prettier, the opinionated code formatter, keeps your code styled consistently across JavaScript, CSS, and JSX, and how it differs from ESLint. - [Overview of the Browser DevTools](https://flaviocopes.com/browser-dev-tools.md): An overview of the browser DevTools available in every modern browser, from inspecting HTML and CSS to the console, network panel, and JavaScript debugger. - [An introduction to Yarn](https://flaviocopes.com/yarn.md): An introduction to Yarn, the JavaScript package manager from Facebook and an npm competitor, covering how to install it and manage your project dependencies. - [A short and simple guide to Babel](https://flaviocopes.com/babel.md): A short, simple guide to Babel, the compiler that transpiles modern JavaScript like ES2017 down to ES5, including presets and using it with webpack. - [Introduction to Webpack](https://flaviocopes.com/webpack.md): Webpack is a tool that has got a lot of attention in the last few years, and it is now seen used in almost every project. Learn about it. - [VS Code: use language-specific settings](https://flaviocopes.com/vscode-language-specific-settings.md): Learn how to set language-specific settings in VS Code, like a different tab size for HTML, CSS, JavaScript, and Go, using per-language settings blocks. - [Using node-webkit to create a Desktop App](https://flaviocopes.com/node-webkit-desktop-app.md): In this post I'm scratching the surface of node-webkit, by deploying and building a package for a web application, on Mac and Windows. - [Introduction to Frontend Testing](https://flaviocopes.com/frontend-testing.md): Learn how to start testing frontend applications with Mocha and Chai, running specs in the browser, headless with PhantomJS, and across browsers using Testem. - [Bower, the browser package manager](https://flaviocopes.com/bower-package-manager.md): Bower defines itself as a browser package manager, and it’s a powerful tool to manage your project assets: javascript, CSS and images. - [Introduction to Yeoman](https://flaviocopes.com/introduction-to-yeoman.md): Learn how Yeoman scaffolds web app projects, generating apps for frameworks like Ember and Angular with Bower for packages and Grunt for production builds. ## Docker - [Using Railway private networking](https://flaviocopes.com/using-railway-private-networking.md): Learn how to use Railway private networking to connect services securely and avoid egress fees, using the railway.internal URL with port and http, not https. - [Dockerfiles used to deploy Astro and PocketBase on Railway](https://flaviocopes.com/dockerfiles-used-to-deploy-astro-and-pocketbase-on-railway.md): The two Dockerfiles I used to deploy Astro and PocketBase on Railway, and why avoiding Alpine Linux fixed internal networking between the services. - [Updating a deployed container based on a Docker image](https://flaviocopes.com/docker-update-container.md): Learn how to update a deployed Docker container after the image changes on Docker Hub: stop, remove, pull, and rerun it, or automate it with Watchtower. - [How to commit changes to a Docker image](https://flaviocopes.com/docker-commit-changes-image.md): Learn how to commit changes to a Docker image with the docker commit command, creating a new tagged version and adding a changelog message with --change. - [How to access files outside a Docker container](https://flaviocopes.com/docker-access-files-outside-container.md): Learn how to access and persist files outside a Docker container using bind mounts and volumes with the docker run -v flag, so your data is not lost. - [Sharing Docker Images on Docker Hub](https://flaviocopes.com/docker-hub.md): Learn how to share your Docker images on Docker Hub: register an account, sign in with docker login, then publish an image with docker tag and docker push. - [Working with Docker Images from the command line](https://flaviocopes.com/docker-images-command-line.md): Learn how to work with Docker images from the command line, listing them with docker images and removing images and dangling ones with docker rmi and prune. - [Working with Docker Containers from the command line](https://flaviocopes.com/docker-containers-command-line.md): Learn how to work with Docker containers from the command line, using docker ps to list them and docker container stop, rm, and inspect to manage them. - [What to do if a Docker container immediately exits](https://flaviocopes.com/docker-container-exits.md): Learn what to do when a Docker container immediately exits on start: run docker logs to read the error, then remove the container and rebuild the image. - [Build a Node.js Hello World Docker container](https://flaviocopes.com/docker-node-container-example.md): Learn how to build a simple Node.js Hello World Docker container from scratch, writing the Dockerfile, running docker build, and mapping ports. - [Using Docker Desktop to manage a Container](https://flaviocopes.com/docker-desktop-manage-container.md): Learn how to manage a Docker container with Docker Desktop, using its dashboard to start, stop, and restart it, open a CLI, and view logs and stats. - [First steps with Docker after the installation](https://flaviocopes.com/docker-first-steps.md): Learn your first steps with Docker after installing it: clone the getting-started project, build an image with docker build, and run it with docker run. - [Installing Docker on macOS](https://flaviocopes.com/docker-installation-macos.md): Learn how to install Docker on macOS step by step with Docker Desktop for Mac, moving the app to Applications and checking it works with docker version. - [Dockerfiles](https://flaviocopes.com/docker-dockerfiles.md): Learn what a Dockerfile is and how to use it to build a Docker image, with instructions like FROM, COPY, RUN, EXPOSE, and CMD, then build it with docker build. - [Introduction to Docker Containers](https://flaviocopes.com/docker-containers.md): An introduction to Docker containers, the isolated environments that bundle an app with all its dependencies so it runs anywhere with docker run. - [Introduction to Docker Images](https://flaviocopes.com/docker-images.md): An introduction to Docker images, the templates containers are created from, how they are built from a Dockerfile and stored in a registry like Docker Hub. - [Introduction to Docker](https://flaviocopes.com/docker-introduction.md): An introduction to Docker and how containers and images let you package an application so it runs the same way everywhere, on any machine or server. ## Essays - [On AI doomerism](https://flaviocopes.com/on-ai-doomerism.md): My take on AI doomerism: it is tiring and overblown, passion-driven developers won't be replaced, and landing a job still comes down to your network. - [Why learn to code if finding a job is more difficult?](https://flaviocopes.com/why-learn-to-code-if-finding-a-job-is-more-difficult.md): Why learning to code still pays off even in a tough job market: tech hiring is cyclical, it always bounces back, and coding skills are valuable in any field. - [The Path to Learn Web Development](https://flaviocopes.com/the-path-to-learn-web-development.md): My path to learn web development from zero: start with the fundamentals of HTTP, HTML, and CSS, master your tools, then move on to JavaScript and TypeScript. - [Full-Stack TypeScript Stack vs Laravel-Rails](https://flaviocopes.com/full-stack-typescript-stack-vs-laravel-rails.md): Why I choose a full-stack TypeScript stack over Laravel or Rails: one language across the stack, more jobs, a faster ecosystem, types, JSX and free hosting. - [Will AI replace Web Developers?](https://flaviocopes.com/will-ai-replace-web-developers.md): Will AI replace web developers? My answer: AI is great if you know your stuff, but it ships outdated, insecure code, so it makes you faster, not obsolete. - [AI and the future of software developers](https://flaviocopes.com/ai-and-the-future-of-software-developers.md): My take on whether AI will replace developers: stay competent and keep learning, and you can be the one directing AI to work faster, not the one replaced. - [The valley of sorrow in learning programming](https://flaviocopes.com/the-valley-of-sorrow-in-learning-programming.md): A reflection on the valley of sorrow in learning to program, the hard middle stretch where most people quit, and what it takes to push through and finish. - [Where do you see yourself in 5 years?](https://flaviocopes.com/where-do-you-see-yourself-in-5-years.md): Why I think the classic 'where do you see yourself in 5 years?' interview question is pointless, and what my own unpredictable career taught me about it. - [From no-code to some-code](https://flaviocopes.com/from-no-code-to-low-code.md): My take on going from no-code to some-code: I drafted a landing page in Notion, exported it to HTML, and added the custom code I needed for a payment button. - [How do you manage to learn several languages?](https://flaviocopes.com/how-do-you-manage-to-learn-several-languages.md): How I learn several programming languages without getting overwhelmed: pick one, focus on it for a while, then build real things to make it stick. - [Don't hop from one language to another](https://flaviocopes.com/dont-hop-languages.md): Why hopping from one language to another slows you down when learning to code, and why you should pick one, like Python or JavaScript, and stick with it. - [Tsundoku](https://flaviocopes.com/tsundoku.md): A reflection on tsundoku, the Japanese habit of buying books and letting them pile up unread, why I collect them anyway, and why technical books age fast. - [I don't want to manage your data](https://flaviocopes.com/manage-data.md): Why I avoid managing user data on the web unless a product truly needs it, the liability and security it brings, and my wish for a browser-managed data layer. - [The best stack might be the one you know best. Or maybe not.](https://flaviocopes.com/best-stack.md): My thoughts on picking a tech stack: the one you know best is the safest choice, but trying something new like Svelte or Vue is how you build expertise. - [Music for programming](https://flaviocopes.com/music-for-programming.md): How music helps me get in the zone while coding, why I stick to instrumental genres like Synthwave and Sovietwave, and where I find good background tracks. - [Ideas are like fish, both stink after three days](https://flaviocopes.com/ideas-are-like-fish.md): My take on why a brand new idea feels like the greatest thing ever, but if you give it three days it starts to stink and you finally see its flaws. - [Ideas](https://flaviocopes.com/ideas.md): A personal note on where my ideas come from: constant exposure to great minds, that creative high when an idea hits, and why you must ride it while it lasts. - [I love books](https://flaviocopes.com/love-books.md): A personal essay on why I keep a large library of paper books, from programming and self-improvement to business, and why printed books still beat the Kindle. - [Software is a superpower](https://flaviocopes.com/software-superpower.md): Why software is a superpower: it lets you build systems and automations that work for you 24/7, so a one-person business can run like a small army. - [How to go from tutorials to your own project](https://flaviocopes.com/from-tutorials-to-project.md): My advice on moving from tutorials to building your own project: you only truly learn a technology by building something real, so pick an idea and start. - [The Developer’s Dilemma](https://flaviocopes.com/developer-dilemma.md): An essay on the developer dilemma: should you use an existing platform like Teachable and Podia, or build your own? Why I lean toward simple, custom solutions. - [Coding is an art](https://flaviocopes.com/coding-is-art.md): Coding is a creative craft, not just a job: my thoughts on getting in the zone, why lines of code is a terrible productivity metric, and keeping the joy in it. - [The GPL License](https://flaviocopes.com/gpl-license.md): A clear overview of the GPL license: what you can, cannot and must do with GPL software, from sharing source code to why you can never relicense it. - [Overcoming JavaScript fatigue and loving the ecosystem](https://flaviocopes.com/solve-javascript-fatigue.md): How I went from JavaScript fatigue and anxiety to loving the ecosystem, by embracing ES6, Babel, and build tools instead of fighting every change. - [What is Imposter Syndrome](https://flaviocopes.com/imposter-syndrome.md): What imposter syndrome is, the forms it takes for developers, and why the real cure is to look back and see how far you have come since you started. - [How to write Unmaintainable Code](https://flaviocopes.com/unmaintainable-code.md): An ironic list of 25 tips for writing the most unmaintainable code possible, from cryptic variable names to skipping version control and never writing tests. - [Tutorial purgatory from the perspective of a tutorial maker](https://flaviocopes.com/tutorial-purgatory.md): How to escape tutorial purgatory: you already know enough to start building, so pick a project you care about and learn the rest with Google as you go. - [Have you filled a developer bucket?](https://flaviocopes.com/developer-bucket.md): An essay on the developer bucket: how harsh comments drain other developers, how a kind thank-you refills them, and why we should be kinder in text. - [Everyone can learn programming](https://flaviocopes.com/everyone-can-learn-programming.md): Just like everyone can learn the math basics. Or just like everyone can learn how to drive a car, or learn how to use a smartphone - [Do I need a degree to be a programmer?](https://flaviocopes.com/programmer-degree.md): Do you need a degree to be a programmer? My answer is no: programming has no gatekeeping, and self-study and persistence matter far more than any degree. - [Should I write comments?](https://flaviocopes.com/comments.md): My take on commenting code: write as few comments as you can, and use them to explain the why behind a decision, not the what your code should already show. - [How to learn how to learn](https://flaviocopes.com/how-to-learn.md): My techniques for learning faster as a developer: beating procrastination, chunking time, dividing big topics, summarizing books, and resting your mind. - [How to estimate programming time](https://flaviocopes.com/estimating.md): My take on estimating programming time: why no one can estimate software, what we always forget, and why continuous communication beats detailed estimates. - [The idea is nothing](https://flaviocopes.com/ideas-are-worthless.md): My take on why your idea is worth nothing and execution is everything: share it openly, find a real unsatisfied need, and focus on the customer. ## Express.js - [Build a REST API using Node.js, Express and MongoDB](https://flaviocopes.com/rest-api-express-mongodb.md): Learn how to build a REST API with Node.js, Express, and MongoDB by creating a trip cost calculator with GET and POST endpoints using insertOne and find. - [Manage Cookies with Express](https://flaviocopes.com/express-cookies.md): Learn how to manage cookies in Express with the res.cookie() method, set options like httpOnly, secure, and expires, and clear one with res.clearCookie(). - [Handling CORS in Express](https://flaviocopes.com/express-cors.md): Learn how to handle CORS in Express so the browser allows cross-origin requests, why they fail, and how to enable them with the cors middleware package. - [Handling file uploads in forms using Express](https://flaviocopes.com/express-forms-files.md): Learn how to handle file uploads from forms in Express, sending data as multipart/form-data and parsing the uploaded files with the formidable library. - [Handling forms in Express](https://flaviocopes.com/express-forms.md): Learn how to process form submissions in Express, reading POST data with the express.urlencoded() middleware and accessing fields on req.body. - [Work with HTTP headers in Express](https://flaviocopes.com/express-headers.md): Learn how to read and change HTTP headers in Express using req.headers, req.header() to get one value, res.set() to set a header, and the res.type() shortcut. - [Setup Let's Encrypt for Express](https://flaviocopes.com/express-letsencrypt-ssl.md): Learn how to set up free HTTPS for your Express app on a VPS using Let's Encrypt and Certbot to generate the SSL certificate and automate its renewal. - [Express Middleware](https://flaviocopes.com/express-middleware.md): Learn how Express middleware works: functions added with app.use() that can edit the request or response, then call next(), like the cookie-parser package. - [Handling redirects with Express](https://flaviocopes.com/express-redirects.md): Learn how to redirect server-side in Express with the res.redirect() method, returning a 302 by default or 301, and redirecting to absolute or relative paths. - [Retrieve the POST query parameters using Express](https://flaviocopes.com/express-post-query-variables.md): Learn how to retrieve POST request data in Express using the express.json() or express.urlencoded() middleware and reading the values from req.body. - [Express, Request Parameters](https://flaviocopes.com/express-request-parameters.md): A handy reference to the Express Request object properties like body, params, query, cookies, and ip, plus how to read GET query strings from req.query. - [An Express HTTPS server with a self-signed certificate](https://flaviocopes.com/express-https-self-signed-certificate.md): Learn how to run an Express HTTPS server on localhost by creating a self-signed certificate with OpenSSL, enough for secure local development and testing. - [Routing in Express](https://flaviocopes.com/express-routing.md): Routing is the process of determining what should happen when a URL is called, or also which parts of the application should handle a specific incoming request. - [Sanitizing input in Express using express-validator](https://flaviocopes.com/express-sanitize-input.md): Learn how to sanitize input in your Express app with express-validator, chaining methods like trim(), escape() and normalizeEmail() after validation. - [Send files using Express](https://flaviocopes.com/express-send-files.md): Learn how to send a file as a download in Express using the Response.download() method, set a custom filename, and run a callback when done. - [Send a response using Express](https://flaviocopes.com/express-send-response.md): Learn how to send a response in Express using send() for strings or JSON, end() for an empty body, and status() or sendStatus() to set the HTTP status. - [Express Sessions](https://flaviocopes.com/express-sessions.md): Learn to identify users across requests in Express with the express-session middleware: set a secret, read and write req.session, and store data in Redis. - [Send a JSON response using Express](https://flaviocopes.com/express-send-json-response.md): Learn how to send a JSON response in Express using the Response.json() method, which takes an object or array and converts it to JSON before sending it. - [Serving Static Assets with Express](https://flaviocopes.com/express-static-assets.md): Learn how to serve static assets like images and CSS in Express with the express.static() middleware, exposing a public folder at the root URL of your app. - [Express Templates](https://flaviocopes.com/express-templating.md): Express is capable of handling server-side template engines. Template engines allow us to add data to a view, and generate HTML dynamically. - [Validating input in Express using express-validator](https://flaviocopes.com/express-validate-input.md): Learn how to validate input in Express endpoints with express-validator, using check() rules like isEmail() and isLength() to verify data before you trust it. - [Retrieve the GET query string parameters using Express](https://flaviocopes.com/express-get-query-variables.md): The query string is the part that comes after the URL path and starts with a question mark ('?'). Let's see how to get the properties and their values. - [Express, a popular Node.js Framework](https://flaviocopes.com/express.md): A complete guide to Express, the popular Node.js web framework, covering installation, routing, the request and response objects, middleware and templating. ## Git - [Git Worktrees](https://flaviocopes.com/git-worktrees.md): An introduction to Git worktrees, which let you check out multiple branches in separate directories at once, great for quick fixes and parallel AI agents. - [How to install Git on Linux (Ubuntu)](https://flaviocopes.com/how-to-install-git-on-linux-ubuntu.md): Learn how to install Git on Linux Ubuntu with sudo apt install git, verify it with git --version, and set up your name, email, and editor with git config. - [The Git Cheat Sheet](https://flaviocopes.com/the-git-cheat-sheet.md): My new free book, the Git Cheat Sheet, is an extensive collection of Git command line commands you can read on freeCodeCamp or download as a PDF. - [How to install Git on macOS](https://flaviocopes.com/how-to-install-git-on-macos.md): Learn how to install Git on macOS using Homebrew or the official installer, verify it with git --version, and set up your name and email identity. - [How to Install Git on Windows](https://flaviocopes.com/how-to-install-git-on-windows.md): Learn how to install Git on Windows with the Git for Windows installer, choose the right setup options, verify the version, and configure your identity. - [Benefits of using Git (and GitHub) as a solo dev](https://flaviocopes.com/benefits-of-using-git-and-github-as-a-solo-dev.md): Git is not just for teams. Here is why I use Git and GitHub as a solo dev: backups, version history, branches, git bisect, and push-to-deploy workflows. - [Git, what if you forgot to add a file to a commit?](https://flaviocopes.com/git-what-if-you-forgot-to-add-a-file-to-a-commit.md): Forgot to add a file to your last Git commit? Learn how to use git commit --amend to stage the missing file and optionally fix the commit message. - [Git, detached HEAD](https://flaviocopes.com/git-detached-head.md): Understand the Git detached HEAD state, when HEAD points to a commit instead of a branch, and how to create a branch so you do not lose new commits. - [Git, rebase vs merge](https://flaviocopes.com/git-rebase-vs-merge.md): When should you use git rebase vs merge? My take: rebase your feature branch onto main for a clean history, then fast-forward merge, and never rebase main. - [Git, squashing vs not squashing](https://flaviocopes.com/git-squashing-vs-not-squashing.md): My take on when to squash Git commits and when not to, across solo work, feature branches, and team branches where git blame and authorship matter. - [Trigger deploys on Netlify with submodules](https://flaviocopes.com/netlify-deploy-git-submodule-github-actions.md): Learn how to trigger a Netlify rebuild when a Git submodule changes by calling a Netlify build hook from a GitHub Action that runs on every push. - [Using git submodules to have a portion of a website public](https://flaviocopes.com/git-submodules-publish-github.md): Learn how to use a Git submodule to make one folder of your site public on GitHub, with git submodule add plus a local symlink for editing. - [How to set up Git and GitHub from Zero](https://flaviocopes.com/github-setup-from-zero.md): Learn how to set up Git and GitHub from zero: install Git with the GitHub Desktop app, create a free GitHub account, and get ready to commit and push code. - [How to authenticate to GitHub using username and password](https://flaviocopes.com/github-auth-username-password.md): Learn how to authenticate to GitHub when username and password no longer work, by creating a personal access token with repo scope to use as the password. - [How to set GitHub credentials for macOS](https://flaviocopes.com/setup-github-credentials-macos.md): Learn how to set up GitHub authentication on macOS for the git command line and VS Code by installing the gh CLI with Homebrew and running gh auth login. - [How to add a Git remote](https://flaviocopes.com/git-add-remote.md): Learn how to add a Git remote to your repository with git remote add origin, pointing it at your GitHub repo so you can push your code there. - [Push to 2 Git repositories at once and keep them in sync](https://flaviocopes.com/how-to-push-two-repositories-sync.md): Learn how to push to two Git repositories at once and keep them in sync by adding a second push URL to your origin remote with git remote set-url. - [How to remove a Git remote](https://flaviocopes.com/git-remove-remote.md): Learn how to remove a Git remote with git remote rm origin, after listing your remotes with git remote -v, so you can connect the repo to a new origin. - [Squashing Git commits](https://flaviocopes.com/git-squash.md): Learn what squashing Git commits means and why you would do it, collapsing a messy series of commits into one clean commit when you merge a branch. - [I posted my password / API key on GitHub](https://flaviocopes.com/git-secrets.md): Posted a password or API key to GitHub? Invalidate it now since rollback keeps it in history, then prevent leaks with .env files and the git-secrets hook. - [How to update a Git branch from another branch](https://flaviocopes.com/how-to-git-update-branch.md): Learn how to update a Git branch with changes from another branch by running git checkout on it, then git merge to pull in the other branch's commits. - [How to make your first Pull Request on GitHub](https://flaviocopes.com/how-to-make-first-github-pull-request.md): Learn how to make your first GitHub pull request without using Git, by editing a file right in the browser, forking the repo, and proposing the change. - [How to discover a bug using git bisect](https://flaviocopes.com/git-bisect.md): How I debug almost all problems that involve a long history of changes, tracked using Git, and discover when you introduced a bug in your code - [How to setup the Git SSH keys](https://flaviocopes.com/how-to-setup-git-ssh-keys.md): When working with Git using the command line, the most common way to handle authentication is through the use of SSH keys. Find out how to set them up. - [The complete Git guide](https://flaviocopes.com/git.md): The complete Git guide: what this distributed version control system is, how to install it, and how to track changes with commits, branches and remotes. - [A developer's introduction to GitHub](https://flaviocopes.com/github.md): A developer's introduction to GitHub, the platform built on Git: how to use issues, stars and forks, pull requests, project management and webhooks. - [An incomplete list of great Git tutorials](https://flaviocopes.com/git-tutorials.md): A curated list of Git tutorials I recommend, from beginner-friendly guides and visual walkthroughs to the Pro Git book and classic talks by Linus Torvalds. - [Git workflow to manage work on multiple branches](https://flaviocopes.com/git-workflow.md): My Git workflow for managing work across branches: permanent master and develop branches, feature and hotfix branches, and tagging each release. - [A Git Cheat Sheet](https://flaviocopes.com/git-cheat-sheet.md): A handy Git cheat sheet of commands I always forget: squash commits with rebase -i, cherry-pick, revert a file, pretty log graphs, and undo a pushed commit. ## Go - [Interfaces in Go](https://flaviocopes.com/golang-interfaces.md): An introduction to interfaces in Go, a type that defines method signatures so any struct implementing those methods can be used through the interface. - [Methods in Go](https://flaviocopes.com/golang-methods.md): Learn how methods work in Go, functions attached to a struct, and the difference between a value receiver that copies and a pointer receiver. - [Pointers in Go](https://flaviocopes.com/golang-pointers.md): Learn how pointers work in Go, using & to get a variable memory address and * to read its value, so you can change the original inside a function. - [Functions in Go](https://flaviocopes.com/golang-functions.md): Learn how to define and call functions in Go, set typed parameters, return one or multiple values, and write a variadic function that takes any number. - [Structs in Go](https://flaviocopes.com/golang-structs.md): Learn how structs work in Go, a type that groups fields of different types so you can define, initialize, access with dot syntax, and even nest them. - [Operators in Go](https://flaviocopes.com/golang-operators.md): An overview of operators in Go, from assignment and comparison to arithmetic, increment and decrement, and the boolean &&, || and ! operators. - [Conditionals in Go](https://flaviocopes.com/golang-conditionals.md): Learn how to use conditionals in Go, from the if, else, and else if statements to the switch statement, which needs no break after each case. - [Loops in Go](https://flaviocopes.com/golang-loops.md): Learn how loops work in Go, which has only the for statement. See the classic for, a while-style loop, an infinite loop with break, and range iteration. - [Maps in Go](https://flaviocopes.com/golang-maps.md): Learn how to use maps in Go, the dictionary or hash map type. Create one with make, add and read values by key, and remove items with delete(). - [Slices in Go](https://flaviocopes.com/golang-slices.md): An introduction to slices in Go, a resizable view over an array. Learn how to create them with make, grow them with append, and copy them with copy(). - [Arrays in Go](https://flaviocopes.com/golang-arrays.md): An introduction to arrays in Go, a fixed-length sequence of one type. Learn how to declare, initialize, and access them, and why arrays are value types. - [Strings in Go](https://flaviocopes.com/golang-strings.md): An introduction to strings in Go, which are immutable sequences of bytes. Learn indexing, slicing, concatenation with +, and the handy strings package. - [Variables and types in Go](https://flaviocopes.com/golang-variables-types.md): Learn how to declare variables in Go with var and the := operator, use const for values that never change, and pick from basic types like int and string. - [Introduction to Go workspaces](https://flaviocopes.com/golang-workspaces.md): An introduction to the Go workspace and GOPATH, the $HOME/go home base where Go installs the packages and tooling your projects depend on. - [How to compile and run a Go program](https://flaviocopes.com/golang-compile-run-program.md): Learn how to compile and run a Go program with go run and go build, then cross-compile a binary for other systems using the GOOS and GOARCH variables. - [How to create your first Go program](https://flaviocopes.com/golang-first-program.md): Learn how to write your first Go program, a Hello World, and understand package main, importing the fmt package, and the special main() function. - [Introduction to the Go programming language](https://flaviocopes.com/golang-introduction.md): An introduction to Go, the fast, simple, compiled language created at Google to power tools like Docker and Kubernetes, and what makes it worth learning. - [Deploying a Go Application in a Docker Container](https://flaviocopes.com/golang-docker.md): Learn how to deploy a Go app in a Docker container, from the official golang image to slimming the image with multi-stage builds and a static binary. - [Go tutorial: REST API backed by PostgreSQL](https://flaviocopes.com/golang-tutorial-rest-api.md): Learn how to build a read-only JSON REST API in Go backed by PostgreSQL, using net/http to serve endpoints and database/sql to query without an ORM. - [The complete guide to Go Data Structures](https://flaviocopes.com/golang-data-structures.md): An index of classic data structures implemented in Go: the binary search tree, the graph, and the set, each implemented and explained in its own post. - [Go Data Structures: Binary Search Tree](https://flaviocopes.com/golang-data-structure-binary-search-tree.md): Learn how the binary search tree works and how to implement it in Go, with Insert, Search, Remove and in-order, pre-order and post-order traversals. - [Go Data Structures: Set](https://flaviocopes.com/golang-data-structure-set.md): Learn how the set data structure works and how to implement it in Go with a map and Add, Remove, Contains, Size and Clear, plus locking for concurrency. - [Building a Web Crawler with Go to detect duplicate titles](https://flaviocopes.com/golang-web-crawler.md): Learn how to build a web crawler in Go that follows links, collects page titles with the golang.org/x/net/html package, and flags duplicate titles for SEO. - [Getting started with Go CPU and memory profiling](https://flaviocopes.com/golang-profiling.md): Get started with CPU and memory profiling in Go using the pkg/profile package, a one-line defer in main(), then analyze the result with go tool pprof. - [Visualize your local Git contributions with Go](https://flaviocopes.com/go-git-contributions.md): Learn how to build a Go CLI tool that scans your local Git repositories and draws a GitHub-style contributions graph, using command-line flags to add folders. - [Use Go to get a list of repositories from GitHub](https://flaviocopes.com/go-github-api.md): Learn how to query the GitHub Search API with Go using only net/http, then unmarshal the JSON into structs and print the top starred repos as a table. - [Go CLI tutorial: fortune clone](https://flaviocopes.com/go-tutorial-fortune.md): Learn how to build a fortune CLI clone in Go that finds the fortunes folder, walks the files with filepath.Walk, and prints a random quote split on %. - [Building a CLI command with Go: cowsay](https://flaviocopes.com/go-tutorial-cowsay.md): Learn how to build a cowsay CLI clone in Go that reads piped input, wraps it in an ASCII speech balloon, and prints a cow you can swap with a flag. - [Build a Command Line app with Go: lolcat](https://flaviocopes.com/go-tutorial-lolcat.md): Learn how to build a lolcat CLI in Go that rainbow-colors text with ANSI escape codes and an rgb() function, working as a pipe that reads from stdin. - [Debugging Go with VS Code and Delve](https://flaviocopes.com/go-debugging-vscode-delve.md): Learn how to debug Go in VS Code with Delve: install the Go extension and Delve via Homebrew, then start debugging with the launch.json config by pressing F5. ## GraphQL - [GraphQL API vs REST API](https://flaviocopes.com/graphql-vs-rest.md): Compare GraphQL and REST APIs: a single endpoint versus many, requesting exactly the fields you need versus over-fetching, and free HTTP caching REST gives you. - [How to authenticate using GraphQL Cookies and JWT](https://flaviocopes.com/graphql-auth-apollo-jwt-cookies.md): Learn how to add login to a GraphQL API powered by Apollo: send credentials, return a JWT, store it in a cookie, and use that token for every later request. - [How to create a GraphQL Server with Node.js and Express](https://flaviocopes.com/graphql-node-express.md): Learn how to create a GraphQL server with Node.js and Express by adding the express-graphql middleware on a /graphql route, then defining schema and resolvers. - [A complete introduction to Apollo, the GraphQL toolkit](https://flaviocopes.com/apollo.md): Apollo is a suite of tools to create a GraphQL server, and to consume a GraphQL API. Let's explore Apollo in detail, both Apollo Client and Apollo Server. - [An introduction to GraphQL](https://flaviocopes.com/graphql.md): GraphQL is a query language for your API, and a set of server-side runtimes (implemented in various backend languages) for executing queries ## HTML - [An HTML element id is a global variable](https://flaviocopes.com/an-html-element-id-is-a-global-variable.md): Did you know an HTML element with an id attribute is automatically exposed as a global JavaScript variable you can reference by name? Here is how it works. - [Disabled form fields are not POSTed](https://flaviocopes.com/disabled-form-fields-are-not-posted.md): A quick gotcha: disabled form fields are not sent in a POST request, so use the readonly attribute instead when you want a field that still gets submitted. - [Had an issue with bfcache](https://flaviocopes.com/bfcache-issue.md): Learn how the browser bfcache served a stale htmx counter in Chrome on back and forward, and how I fixed it with no-cache, no-store meta tags and headers. - [Force download links in HTML](https://flaviocopes.com/html-force-download-links.md): Learn how to force a file download in HTML by adding the download attribute to an a tag, so the browser saves the file instead of opening it in the tab. - [Hide a broken image in HTML when the file is missing](https://flaviocopes.com/html-remove-broken-image.md): Learn how to avoid a broken image in HTML when the file is missing by using the img onerror attribute to remove the element or swap in a fallback image. - [How to make sure your input field can only upload images](https://flaviocopes.com/how-to-accept-only-images-input-file.md): Learn how to restrict a file input to images only using the HTML accept attribute with values like image/* or image/png, and why you validate server-side too. - [What's the use of the hashtag # (number sign) in the links?](https://flaviocopes.com/html-hashtag-in-links.md): Understand what the hashtag in HTML links means, from the href placeholder to fragment links that jump to an element with a matching id on the same page. - [How to have an image show up when sharing links to your site](https://flaviocopes.com/html-open-graph.md): Learn how to make an image show up when your links are shared on social media by adding Open Graph meta tags like og:image, og:title and og:description. - [Preserving white space and line breaks in a string in HTML](https://flaviocopes.com/html-preserve-white-space.md): Learn how to preserve white space and line breaks in an HTML string with the CSS white-space pre-wrap property, or the whitespace-pre-wrap class in Tailwind. - [Changing the favicon in dark mode](https://flaviocopes.com/dark-mode-favicon.md): Learn how to show a different favicon in dark and light mode using an SVG favicon with embedded CSS and the prefers-color-scheme media query to swap colors. - [Responsive images using srcset](https://flaviocopes.com/html-responsive-images-srcset.md): Learn how to use the HTML img tag srcset attribute to serve responsive images, pairing the w descriptors with the sizes attribute and vw units. - [How to change an HTML image URL in dark mode](https://flaviocopes.com/dark-mode-change-img-source.md): Learn how to swap an HTML image in dark mode without CSS or JavaScript, using the picture tag with a source and the prefers-color-scheme dark media feature. - [How to create a comment in HTML](https://flaviocopes.com/how-to-comment-html.md): Learn how to add comments in HTML using the opening and closing comment tags, why they stay visible in page source, and how too many can slow your page. - [Accessibility on the Web](https://flaviocopes.com/accessibility.md): Learn the basics of web accessibility in HTML, from using semantic tags and proper heading structure to alt text and screen readers like ChromeVox. - [HTML container tags](https://flaviocopes.com/html-container-tags.md): Learn the difference between the HTML container tags article, section and div, and when to use nav, aside, header, main and footer in your page markup. - [The HTML figure tag](https://flaviocopes.com/html-figure-tag.md): Learn how to use the HTML figure tag with figcaption to display an image alongside its caption, a semantic way to group media and its description. - [The HTML picture tag](https://flaviocopes.com/html-picture-tag.md): Learn how to use the HTML picture tag to serve different image formats like WebP with a JPG fallback, using source tags with type and media attributes. - [The HTML a tag (links)](https://flaviocopes.com/html-links.md): Learn how to create links with the HTML a tag and its href attribute, the difference between absolute and relative URLs, and how to open links in a new tab. - [The HTML img tag](https://flaviocopes.com/html-img-tag.md): Learn how to display images with the HTML img tag using the src and alt attributes, then make them responsive with the srcset and sizes attributes. - [HTML tables](https://flaviocopes.com/html-tables.md): Learn how to build HTML tables with the table, tr, th and td tags, span cells using colspan and rowspan, and organize rows with thead, tbody and tfoot. - [HTML tags for text](https://flaviocopes.com/html-text-tags.md): Learn the HTML tags for text, from p, span, br and the h1 to h6 headings to strong, em, blockquote, code, lists and the difference between b and strong. - [The HTML audio tag](https://flaviocopes.com/html-audio-tag.md): Learn how to embed audio in HTML with the audio tag, from the controls, autoplay, loop and preload attributes to multiple sources and play events. - [The HTML video tag](https://flaviocopes.com/html-video-tag.md): Learn how to embed video in HTML with the video tag, from the controls, poster, autoplay, muted and loop attributes to multiple sources and play events. - [HTML forms](https://flaviocopes.com/html-forms.md): Learn how to build HTML forms, from the form tag with its method and action to input fields, validation with required and pattern, textarea and select. - [The HTML iframe tag](https://flaviocopes.com/html-iframe-tag.md): Learn how the HTML iframe tag embeds content from other origins, and how to control it with the src, srcdoc, sandbox, allow and referrerpolicy attributes. - [An introduction to HTML](https://flaviocopes.com/html-introduction.md): Learn HTML from the ground up: its history and living standard, tags vs elements, attributes, the head and body structure, and block vs inline elements. ## htmx - [Hide HTML elements based on HTMX request status](https://flaviocopes.com/conditionally-hide-html-elements-based-on-htmx-request-status.md): Learn how to show or hide HTML elements based on the HTMX request status, targeting the htmx-request and htmx-added classes with custom Tailwind variants. - [Why I use htmx](https://flaviocopes.com/why-i-use-htmx.md): Why I use htmx as the H in my AHA Stack: it lets any element trigger an HTTP request and ship HTML over the wire, so I write far less client-side JavaScript. - [htmx trigger request via JS event](https://flaviocopes.com/htmx-trigger-request-via-js-event.md): Learn how to trigger an htmx request from a JavaScript event by dispatching a custom event on the body and listening for it with hx-trigger from:body. - [htmx, include hidden input fields outside of a form](https://flaviocopes.com/htmx-include-hidden-input-fields-outside-of-a-form.md): Learn how to send extra data with htmx without a hidden input or a form by using the hx-vals attribute on a button to pass key-value pairs with the request. - [htmx send files using htmx.ajax() call](https://flaviocopes.com/htmx-send-files-using-htmxajax-call.md): Learn how to send files with an htmx.ajax() call by setting hx-encoding to multipart/form-data and passing the source element so the files reach the server. - [htmx + Alpine template tag](https://flaviocopes.com/htmx-alpine-template-tag.md): Learn how to make htmx work inside an Alpine template tag by re-processing the form with htmx.process() in x-init once the x-if condition becomes true. - [htmx, redirect after request](https://flaviocopes.com/htmx-redirect-after-request.md): Two ways to redirect after an htmx request: a client-side redirect on the htmx:afterRequest event, or the cleaner HX-Redirect response header. - [HTMX, perform something on page load](https://flaviocopes.com/htmx-perform-something-on-page-load.md): Learn how to run code on page load with htmx using the htmx.onLoad() function, for example to automatically trigger a click on a button when the page loads. ## Hugo - [How to lazy load images in Hugo](https://flaviocopes.com/lazy-load-images-hugo.md): Learn how to lazy load images in Hugo by overriding the image render hook so the generated img tags get loading=lazy, cutting bandwidth on long pages. - [How to get current file name in Hugo without .md](https://flaviocopes.com/hugo-get-current-file-name.md): Learn how to get the current file name in Hugo without the .md extension using a short template snippet that trims it from .File.LogicalName. - [How to get the current url in Hugo](https://flaviocopes.com/hugo-get-current-url.md): Learn how to get the current URL in Hugo using the .Page.RelPermalink value, trimming the slashes to get a clean relative path like ebooks or ebooks/php. - [Hugo iterate pages of section](https://flaviocopes.com/hugo-iterate-pages-section.md): Learn how to iterate over the pages of a specific section in Hugo using range and a where filter on .Site.Pages to loop the markdown files in that folder. - [Hugo embed HTML in Markdown](https://flaviocopes.com/hugo-embed-html-markdown.md): Learn how to embed raw HTML inside Markdown in Hugo after the switch to Goldmark by enabling the unsafe renderer option in your config file. - [How to add Tailwind to Hugo](https://flaviocopes.com/hugo-add-tailwind.md): Learn how to add Tailwind CSS to a Hugo theme, from installing it with npm and setting the content paths to wiring up build and watch scripts for your CSS. - [How to pass multiple parameters to a partial in Hugo](https://flaviocopes.com/hugo-partial-multiple-parameters.md): How do you pass multiple parameters to a partial in Hugo? It's not as simple as it seems, you need to use a trick. Let's find out. ## JavaScript - [Better Auth: an introduction](https://flaviocopes.com/better-auth.md): What Better Auth is and how it works: the auth instance, the database schema, the catch-all route, and the client. Authentication for TypeScript apps, explained. - [Underscores in numbers](https://flaviocopes.com/underscores-in-numbers.md): Learn how JavaScript numeric separators let you add underscores inside numbers like 1_000 for readability, a feature available since ECMAScript 2021. - [Dynamic function name in JS](https://flaviocopes.com/dynamic-function-name-in-js.md): How I created a dynamic function name in JavaScript using globalThis and a random suffix, so two reCAPTCHA forms from the same Astro component don't clash. - [Unterminated string literal](https://flaviocopes.com/unterminated-string-literal.md): Fix the confusing JavaScript 'Unterminated string literal' error that points to no line, caused by code placed before an import, by keeping imports at the top. - [How to implement file upload with drag and drop with Alpine](https://flaviocopes.com/how-to-implement-file-upload-with-drag-and-drop-with-alpine.md): Learn how to build file upload with drag and drop in Alpine.js, using the @dragover, @dragleave, and @drop events to collect files and POST them with fetch. - [Google Recaptcha missing-input-secret](https://flaviocopes.com/google-recaptcha-missing-input-secret.md): How to fix the Google reCAPTCHA missing-input-secret error by sending the secret and response as URL parameters with URLSearchParams instead of a JSON body. - [Change the color of a webpage dynamically using JS and CSS](https://flaviocopes.com/change-the-color-of-a-webpage-dynamically-using-js-and-css.md): Learn how to change a web page colors on the fly with JavaScript and the CSS filter property, switching between pastel, grayscale, and normal modes. - [How to destructure an object to an already defined variable](https://flaviocopes.com/how-to-destructure-an-object-to-an-already-defined-variable.md): Learn how to destructure an object into already declared variables in JavaScript using the parentheses assignment syntax, with a leading semicolon for safety. - [How to slugify a string in JavaScript](https://flaviocopes.com/how-to-slugify-a-string-in-javascript.md): Learn how to slugify a string in JavaScript with a small function that lowercases text, strips accents and invalid characters, and turns spaces into hyphens. - [Ensure an image upload is smaller than a specific size](https://flaviocopes.com/how-to-ensure-an-image-upload-is-smaller-than-a-specific-size.md): Learn how to make sure an image upload stays under a size limit like 3MB by checking the files size in a React onChange handler and rejecting bigger files. - [JavaScript, how to remove multiple line breaks](https://flaviocopes.com/javascript-how-to-remove-multiple-line-breaks.md): Learn how to remove multiple line breaks from a string in JavaScript with a single replace call and a regular expression that collapses them into one. - [Get all regex matches with capturing groups in JavaScript](https://flaviocopes.com/how-to-get-retrieve-all-results-of-a-regex-with-capturing-groups-in-js.md): Learn how to get every match of a regex in JavaScript with matchAll() and the g flag, and read named capturing groups from each result using match.groups. - [JavaScript regex to capture a URL without query string](https://flaviocopes.com/a-regular-expression-to-capture-a-url-without-query-string-parameters.md): Learn how to use a JavaScript regular expression to capture a URL without its query string parameters, removing anything after the ? or # symbol. - [Getting year-month-date from JS dates](https://flaviocopes.com/getting-year-month-date-from-js-dates.md): Learn how to get just the year, month, and day from a JavaScript date by slicing toISOString() with slice(0, 10) instead of calling getFullYear(). - [Slugify a string in JavaScript](https://flaviocopes.com/slugify-a-string-in-javascript.md): Learn how to slugify a string in JavaScript using the slugify library, and how to strip dots and other punctuation with its remove regex option. - [How to clone anything in JavaScript](https://flaviocopes.com/how-to-clone-javascript.md): Learn how to deep clone anything in JavaScript with structuredClone(), why objects and arrays are copied by reference, and when you still need a polyfill. - [How to add leading zero to a number in JavaScript](https://flaviocopes.com/js-add-leading-zero.md): Learn how to add a leading zero to a number in JavaScript using padStart, so values under 10 print as 09 instead of 9, handy for clock-style displays. - [How to await in a loop in JavaScript](https://flaviocopes.com/await-loop-javascript.md): Learn how to use await inside a loop in JavaScript with for...of and for...in, why you must be in an async function, and why forEach and map will not work. - [JavaScript, how to get string until character](https://flaviocopes.com/js-get-string-until-character.md): Learn how to get the part of a string before a specific character in JavaScript using split, a quick one-liner that returns everything up to that point. - [How to redirect to a new URL using JavaScript](https://flaviocopes.com/javascript-redirect-to-url.md): Learn how to redirect to a new URL using JavaScript, setting location.href inside a setTimeout to send people to another page after a short delay. - [Fix uploading files using fetch and multipart/form-data](https://flaviocopes.com/fix-formdata-multipart-fetch.md): Fix file uploads with fetch and FormData that never reach the server: do not set the multipart/form-data Content-Type header and let the browser add it. - [How to change image URLs in a markdown string](https://flaviocopes.com/how-to-change-image-url-markdown.md): Learn how to rewrite image URLs inside a markdown string with a regex, replacing spaces with hyphens and pointing them to a /images/slug/ folder for Next.js. - [Fix installing the Node.js canvas package on macOS](https://flaviocopes.com/fix-node-canvas-error-pre-gyp-macos.md): Learn how to fix the node-pre-gyp build error when installing the Node.js canvas package on macOS by brew installing cairo, pango and the other dependencies. - [How to dynamically import JavaScript modules](https://flaviocopes.com/javascript-dynamic-import.md): Learn how to dynamically import a JavaScript module when the path is built at runtime, using the await import() syntax instead of a static import statement. - [Fix the 'Parse failure: Unterminated string constant' error](https://flaviocopes.com/fix-parse-failure-unterminated-string-constant.md): How to fix the Parse failure Unterminated string constant error in Astro on Windows by renaming a parent folder with odd characters to plain ASCII. - [How to solve the document is not defined error](https://flaviocopes.com/error-document-not-defined.md): Learn how to fix the 'document is not defined' error in Node.js or Next.js: document is browser-only, so guard it with a typeof window check. - [JavaScript, how to get the class name of an object](https://flaviocopes.com/javascript-get-object-class-name.md): Learn how to get the class name of an object in JavaScript by reading its constructor name property, plus how to compare the constructor to a class directly. - [How to fix decimals arithmetic in JavaScript](https://flaviocopes.com/javascript-decimal-arithmetics.md): Learn why 0.1 + 0.2 does not equal 0.3 in JavaScript due to binary floating point, and how to fix decimal arithmetic with toFixed() or a library like big.js. - [Fix tsconfig.json 'No inputs were found in config file'](https://flaviocopes.com/fix-tsconfig-json-no-inputs-found.md): How to fix the tsconfig.json No inputs were found in config file error in an Astro project by adding an empty TypeScript file or an include path. - [How to add days to a date in JavaScript](https://flaviocopes.com/how-to-add-days-date-javascript.md): Learn how to add days to a Date object in JavaScript by combining the setDate() and getDate() methods to get a date like 30 days from now. - [How to debug JavaScript code](https://flaviocopes.com/debugging.md): Learn how to debug JavaScript code by finding where a bug comes from, figuring out why it happens, and using techniques like logging variables to the console. - [How I built a dashboard for the iPad with JavaScript](https://flaviocopes.com/dashboard-ipad-javascript.md): How I built a signups counter dashboard for the iPad with JavaScript, using a small Node.js and Express server to serve an auto-refreshing full-screen page. - [How to conditionally load data with SWR](https://flaviocopes.com/swr-conditionally-load-data.md): Learn how to conditionally load data with SWR by passing null as the key until your data is ready, so the request only fires once you can make it. - [How to use SWR](https://flaviocopes.com/swr.md): Learn how to use SWR in a Next.js app to fetch data with the useSWR hook and a fetcher function, handling the data, isLoading, and isError states. - [How to copy the properties of an inner object to the outer](https://flaviocopes.com/javascript-copy-object-properties.md): Learn how to copy the properties of an inner object up to the outer object in JavaScript using Object.assign, so you avoid copying each property by hand. - [How to convert a callback into async/await](https://flaviocopes.com/javascript-convert-callback-async-await.md): Learn how to convert a callback-based function into async/await in JavaScript by wrapping the body in a Promise and calling resolve, for cleaner code. - [Fix 'TypeError: Attempted to assign to readonly property'](https://flaviocopes.com/fix-error-assign-readonly-property.md): Learn how to fix the TypeError: Attempted to assign to readonly property in JavaScript, caused by mutating a string you forgot to pass to JSON.parse() first. - [Johnny Five, receiving input from the device](https://flaviocopes.com/johnny-five-input.md): Learn how to read input from a sensor with Johnny Five and Node.js, wiring a water level sensor to an analog pin and reacting to values with within(). - [Johnny Five, how to use a REPL](https://flaviocopes.com/johnny-five-repl.md): Learn how to use the Johnny Five REPL to control hardware live from the terminal, requiring classes and chaining commands like lcd.clear().print(). - [Johnny Five, how to work with an LCD Screen](https://flaviocopes.com/johnny-five-lcd.md): Learn how to wire and control a 1602A LCD screen with Johnny Five and Node.js, initializing the LCD class and showing text with the print() method. - [Johnny Five, how to light a LED](https://flaviocopes.com/johnny-five-light-led.md): Learn how to light and blink an LED on an Arduino using Johnny Five and Node.js, creating a Board and a Led on pin 13 and calling led.blink(). - [Johnny Five Tutorial](https://flaviocopes.com/johnny-five.md): Learn how to control electronic devices like Arduino with JavaScript using the Johnny Five library and Node.js, talking over the Firmata protocol. - [How to use window.confirm()](https://flaviocopes.com/javascript-confirm.md): Learn how to use the browser confirm() method to show a confirmation dialog that blocks the script and returns true or false based on the OK or Cancel button. - [How to use window.prompt()](https://flaviocopes.com/javascript-prompt.md): Learn how to use the browser window.prompt() API to get input from the user, including a default value, and how it returns null when they click Cancel. - [Wait for all promises to resolve in JavaScript](https://flaviocopes.com/javascript-resolve-all-promises.md): Learn how to start multiple promises at once and wait for all of them to resolve using await Promise.all(), instead of awaiting each one after another. - [JavaScript Algorithms: Bubble Sort](https://flaviocopes.com/bubble-sort-javascript.md): Learn how to implement bubble sort in JavaScript by comparing each item with its neighbor and swapping them, plus why its worst case is O(n^2). - [JavaScript Algorithms: Merge Sort](https://flaviocopes.com/merge-sort-javascript.md): Learn how merge sort works in JavaScript, a divide and conquer algorithm that splits the array, sorts the halves, and merges them in O(n log n) time. - [JavaScript Algorithms: Quicksort](https://flaviocopes.com/quicksort-javascript.md): Learn how the quicksort algorithm works in JavaScript, using recursion and a pivot to split an array into smaller and bigger items, with O(n log n) speed. - [JavaScript Algorithms: Selection Sort](https://flaviocopes.com/selection-sort-javascript.md): Learn how the selection sort algorithm works and how to implement it in JavaScript, including why its time complexity is O(n^2), with a clear code example. - [JavaScript Algorithms: Binary Search](https://flaviocopes.com/binary-search-javascript.md): Learn how to implement binary search in JavaScript on a sorted array, halving the search range each step to find an item in O(log n) time. - [JavaScript Algorithms: Linear Search](https://flaviocopes.com/linear-search-javascript.md): Learn the linear search algorithm in JavaScript, the simplest way to find an item by scanning an array element by element, with O(n) time complexity. - [JavaScript, how to replace an item of an array](https://flaviocopes.com/how-to-replace-item-array-javascript.md): Learn how to replace an item in a JavaScript array: if you know its index, a simple assignment swaps the value, otherwise find the index first. - [JavaScript, how to find duplicates in an array](https://flaviocopes.com/how-to-find-duplicates-array-javascript.md): Learn how to find and remove duplicates in a JavaScript array using a Set to dedupe in one line, plus two ways to list which values were actually duplicated. - [JavaScript, how to extend a class](https://flaviocopes.com/how-to-extend-class-javascript.md): Learn how to extend a class in JavaScript with the extends keyword, so a subclass like Fish inherits methods from a base Animal class and adds its own. - [JavaScript, how to filter an array](https://flaviocopes.com/how-to-filter-array-javascript.md): Learn how to filter an array in JavaScript using the built-in filter() method with a callback, which returns a new array containing only the items that match. - [JavaScript, how to find a character in a string](https://flaviocopes.com/how-to-find-character-string-javascript.md): Learn how to find a character in a string in JavaScript using includes() to check if it is present and indexOf() to get the position of the first occurrence. - [JavaScript, how to exit a function](https://flaviocopes.com/how-to-exit-a-function-javascript.md): Learn how to exit a JavaScript function early using the return keyword, which stops execution immediately and can hand back a value or an error object. - [JavaScript, how to export multiple functions](https://flaviocopes.com/how-to-export-multiple-functions-javascript.md): Learn how to export multiple functions from a JavaScript file with a named export like export { sum, mul }, then import them all or just the ones you need. - [JavaScript, how to export a function](https://flaviocopes.com/how-to-export-a-function-javascript.md): Learn how to export a function from a JavaScript file using export default, then bring it into another file with a matching import statement. - [JavaScript Data Structures: Linked lists](https://flaviocopes.com/javascript-data-structures-linked-lists.md): Learn how to implement a linked list in JavaScript from scratch, building Item and LinkedList classes with append, size, find and insert methods. - [JavaScript Data Structures: Queue](https://flaviocopes.com/javascript-data-structures-queue.md): Learn how to implement a queue in JavaScript using a class with private fields, with enqueue and dequeue methods following the First In, First Out order. - [The Stack JavaScript Data Structure](https://flaviocopes.com/javascript-data-structures-stack.md): Learn how to implement a stack in JavaScript using a class with private fields, with push and pop methods following the First In, Last Out (FILO) order. - [The Array JavaScript Data Structure](https://flaviocopes.com/javascript-data-structures-array.md): An introduction to the array data structure in JavaScript, how it differs from low-level languages, and the methods to add, remove and loop over items. - [Destructure a JavaScript object to existing variables](https://flaviocopes.com/javascript-destructure-object-to-existing-variable.md): Learn how to destructure an object into existing variables in JavaScript by wrapping the assignment in parentheses, plus the semicolon trick you need. - [How to test for an empty object in JavaScript](https://flaviocopes.com/javascript-check-empty-object.md): Learn how to check if an object is empty in JavaScript using Object.keys() and a constructor check to avoid false positives, with simple examples. - [How to get the index of an item in a JavaScript array](https://flaviocopes.com/how-to-get-index-item-array-javascript.md): Learn how to find the index of an item in a JavaScript array, using indexOf for primitive values and findIndex with a callback for objects. - [Fix Gatsby 'cannot find module gatsby-cli/lib/reporter'](https://flaviocopes.com/gatsby-fix-lib-reporter-error.md): Learn how to fix the Gatsby Cannot find module gatsby-cli/lib/reporter error by deleting node_modules and reinstalling with yarn instead of npm install. - [Add an item at the beginning of an array in JavaScript](https://flaviocopes.com/how-to-add-item-beginning-array-js.md): Learn how to add an item to the start of a JavaScript array using the splice() method with a start index of 0 and a delete count of 0 so nothing gets removed. - [Fix the 'cb.apply is not a function' error in GitBook](https://flaviocopes.com/cb-apply-not-a-function.md): How to fix the cb.apply is not a function error from graceful-fs when running GitBook on a newer Node.js, by commenting out the statFix polyfill lines. - [How to swap two array elements in JavaScript](https://flaviocopes.com/javascript-swap-array-elements.md): Learn how to swap two elements in a JavaScript array, both with a temporary variable and with a one-line destructuring assignment that needs no temp. - [How to handle promise rejections](https://flaviocopes.com/javascript-promises-rejection.md): Learn how to handle promise rejections in JavaScript with the catch() method, why you should always add it, and where to place it in a chain of promises. - [Chaining method calls in JavaScript](https://flaviocopes.com/javascript-chaining.md): Learn how to chain method calls in JavaScript like car.start().drive() by returning this from each method, and why arrow functions break the pattern. - [A curious usage of commas in JavaScript](https://flaviocopes.com/javascript-commas.md): Understand the comma operator in JavaScript: wrapping expressions like ('a', 'b') evaluates both and returns the last one, a curious trick you can assign. - [Namespaces in JavaScript](https://flaviocopes.com/javascript-namespaces.md): Learn how namespaces work in JavaScript, from grouping code under an object literal to fully hiding it inside a block or function with let and const scope. - [Custom errors in JavaScript](https://flaviocopes.com/javascript-custom-errors.md): Learn how to create custom errors in JavaScript by extending the built-in Error class, then handle each type with instanceof for cleaner error handling. - [Custom events in JavaScript](https://flaviocopes.com/javascript-custom-events.md): Learn how to create and dispatch custom events in JavaScript, using the Event and CustomEvent objects in the browser and the EventEmitter class in Node.js. - [Are values passed by reference or by value in JavaScript?](https://flaviocopes.com/javascript-value-reference.md): Are values passed by reference or by value in JavaScript? Primitive types pass by value while objects pass by reference, as these examples show. - [Introduction to XState](https://flaviocopes.com/xstate.md): An overview of XState, the JavaScript library for finite state machines, covering how to install it and define a machine with the Machine factory function. - [The JavaScript super keyword](https://flaviocopes.com/javascript-super.md): Learn what the super keyword does in JavaScript classes, how it calls the parent class constructor when you extend a class, and where you can use it. - [Event delegation in the browser using vanilla JavaScript](https://flaviocopes.com/javascript-event-delegation.md): Learn how to do event delegation in the browser with vanilla JavaScript, building an on() helper so one listener handles dynamically added child elements. - [JavaScript Proxy Objects](https://flaviocopes.com/javascript-proxy-objects.md): Learn how to use JavaScript Proxy objects to intercept and change how an object behaves, defining traps like get, set and deleteProperty in a handler. - [How to accept unlimited parameters in a JavaScript function](https://flaviocopes.com/how-to-unlimited-function-parameters-js.md): Learn how to write a JavaScript function that accepts an unlimited number of arguments, using rest parameters that collect them into a single array. - [How to check if a value is a number in JavaScript](https://flaviocopes.com/how-to-check-value-is-number-javascript.md): Learn how to check if a value is a number in JavaScript using the isNaN() function or the typeof operator, which returns number for numeric values. - [How to reverse a JavaScript array](https://flaviocopes.com/how-to-reverse-array-javascript.md): Learn how to reverse a JavaScript array with the reverse() method, and how to keep the original intact by first copying it with the spread operator or slice. - [The importance of timing when working with the DOM](https://flaviocopes.com/dom-timing.md): Understand why storing a DOM input value in a variable does not update when the field changes, and how to read the value at submit time instead. - [How to change commas into dots with JavaScript](https://flaviocopes.com/how-to-comma-dot-javascript.md): Learn how to change commas into dots in a JavaScript number string with a regex and replace(), then use parseFloat() and toFixed(2) to clean up the decimals. - [What is hoisting in JavaScript?](https://flaviocopes.com/javascript-hoisting.md): Learn what hoisting means in JavaScript: how the engine moves declarations into memory, and why function declarations can be called before they are defined. - [What is object destructuring in JavaScript?](https://flaviocopes.com/javascript-object-destructuring.md): Learn what object destructuring means in JavaScript and how to extract object properties into named variables, including how to rename a variable as you go. - [The JavaScript for..of loop](https://flaviocopes.com/javascript-for-of-loop.md): Learn the JavaScript for..of loop, combining the conciseness of forEach with the ability to break and continue, plus getting the index with entries(). - [What are the ways we can break out of a loop in JavaScript?](https://flaviocopes.com/javascript-break-loop.md): Learn the ways to break out of a loop in JavaScript using the break keyword in for, for..of and while loops, plus why continue and for..in differ. - [What's the difference between a method and a function?](https://flaviocopes.com/javascript-difference-method-function.md): Learn the difference between a function and a method in JavaScript: a method is a function stored on an object property that can access it through this. - [null vs undefined in JavaScript: the difference](https://flaviocopes.com/javascript-difference-null-undefined.md): Understand the difference between null and undefined in JavaScript, two primitive types, how to check for each, and why typeof null returns 'object'. - [How to access an object property value in JavaScript](https://flaviocopes.com/javascript-access-object-property.md): Learn the two ways to read an object property value in JavaScript, the dot syntax and the square brackets accessor for dynamic or invalid key names. - [Arrow functions vs regular functions in JavaScript](https://flaviocopes.com/javascript-functions-vs-arrow-functions.md): Learn how arrow functions differ from regular functions in JavaScript, from being always anonymous to how each one binds the value of this differently. - [How to return multiple values from a function in JavaScript](https://flaviocopes.com/javascript-return-multiple-values.md): Learn how to simulate returning multiple values from a JavaScript function by returning an array or an object and unpacking them with destructuring. - [How can you tell what type a value is, in JavaScript?](https://flaviocopes.com/javascript-value-type.md): Learn how to tell what type a value is in JavaScript using the typeof operator, the values it returns, and why typeof null and arrays both give 'object'. - [Primitive types vs objects in JavaScript](https://flaviocopes.com/difference-primitive-types-objects.md): Learn the difference between primitive types and objects in JavaScript: primitives are immutable and copied by value, while objects are passed by reference. - [stopPropagation vs preventDefault vs return false in JS](https://flaviocopes.com/events-stoppropagation-preventdefault.md): When to use event.stopPropagation, event.preventDefault, and return false in DOM events, and why returning false does nothing in vanilla JavaScript. - [Event bubbling and event capturing](https://flaviocopes.com/javascript-event-bubbling-capturing.md): Learn how event bubbling and capturing control the order DOM event handlers fire in JavaScript, and how to switch to capturing with addEventListener. - [How to check if a key exists in a JavaScript object](https://flaviocopes.com/how-to-check-key-exists-javascript.md): Learn how to check if a key exists in a JavaScript object using the in operator or hasOwnProperty(), and how they differ when properties are inherited. - [How to shuffle elements in a JavaScript array](https://flaviocopes.com/how-to-shuffle-array-javascript.md): Learn how to shuffle the elements of a JavaScript array by calling sort() with a function that returns Math.random() minus 0.5 for a random order each time. - [Get the last segment of a path or URL in JavaScript](https://flaviocopes.com/how-to-get-last-item-path-javascript.md): Learn how to get the last segment of a path or URL in JavaScript using substring() together with lastIndexOf('/') + 1, wrapped in a small reusable function. - [Introduction to Deno](https://flaviocopes.com/deno.md): Get started with Deno, the modern Node.js alternative from Ryan Dahl, with built-in TypeScript, ES modules, a first-class await, and no package manager. - [How to detect if an Adblocker is being used with JavaScript](https://flaviocopes.com/how-to-detect-adblocker.md): Learn how to detect an adblocker with JavaScript by adding a bait element with the adsbox class and checking if its offsetHeight is 0, then show your promo. - [Fix 'regeneratorRuntime is not defined' in Parcel](https://flaviocopes.com/parcel-regeneratorruntime-not-defined.md): How to fix the regeneratorRuntime is not defined error in Parcel by importing regenerator-runtime or adding a browserslist field to package.json. - [How to detect dark mode using JavaScript](https://flaviocopes.com/javascript-detect-dark-mode.md): Learn how to detect dark mode in JavaScript with window.matchMedia and the prefers-color-scheme query, and listen for change events when the mode switches. - [Loading an external JS file using Gatsby](https://flaviocopes.com/gatsby-load-external-js.md): Learn how to load an external JavaScript file in a Gatsby site, like a Wistia embed, by appending the script in gatsby-browser.js from the onClientEntry hook. - [Gatsby, how to change the favicon](https://flaviocopes.com/gatsby-change-favicon.md): Learn how to change the favicon in a Gatsby site by replacing static/favicon.ico, or by pointing the gatsby-plugin-sharp icon option in gatsby-config.js. - [Fix the 'is not a function' error in JavaScript](https://flaviocopes.com/is-not-a-function.md): How to fix the JavaScript 'is not a function' error you get when an IIFE follows a require() with no semicolon, and why a leading semicolon solves it. - [How to force credentials to every Axios request](https://flaviocopes.com/axios-credentials.md): Learn how to send credentials and cookies with every Axios request by setting withCredentials: true, and how to apply it globally with axios.create(). - [How to check if an element is a descendant of another](https://flaviocopes.com/how-to-check-element-descendant.md): Learn how to check if an element is a descendant of another in JavaScript by walking up the parentNode chain until you match the parent element id. - [How to create an exit intent popup](https://flaviocopes.com/tutorial-exit-intent-popup.md): Learn how to build an exit intent popup with plain JavaScript, listening for the DOM event fired when the mouse leaves the window to show the popup. - [Fix 'Cannot assign to read only property exports' in JS](https://flaviocopes.com/cannot-assign-readonly-property-export.md): Fix the TypeError: Cannot assign to read only property exports error from Webpack by switching from CommonJS module.exports to ES Modules export default. - [How to remove the first character of a string in JavaScript](https://flaviocopes.com/how-to-remove-first-char-string-js.md): Learn how to remove the first character of a string in JavaScript with the slice() method, passing 1 as the argument, which returns a new unmodified string. - [How to remove the last character of a string in JavaScript](https://flaviocopes.com/how-to-remove-last-char-string-js.md): Learn how to remove the last character of a string in JavaScript with the slice() method, passing 0 and -1, which returns a new unmodified string. - [How to write text into to an HTML canvas](https://flaviocopes.com/how-to-write-text-html-canvas.md): Learn how to write text onto an HTML canvas, getting a 2d context and calling its fillText() method, plus how to style it with the font and fillStyle. - [How to divide an array in half in JavaScript](https://flaviocopes.com/how-to-cut-array-half-javascript.md): Learn how to divide an array in half in JavaScript using slice() together with Math.ceil() on the length, so odd-length arrays split down the middle. - [How to cut a string into words in JavaScript](https://flaviocopes.com/how-to-cut-string-words-javascript.md): Learn how to cut a string into words in JavaScript using the split() method with a space separator, which returns an array of the individual words. - [How to load an image in an HTML canvas](https://flaviocopes.com/how-to-load-image-html-canvas.md): Learn how to load an image into a canvas in Node.js with the canvas package, using loadImage() which returns a promise, then rendering it with drawImage(). - [How to slow down a loop in JavaScript](https://flaviocopes.com/how-to-slow-loop-javascript.md): Learn how to slow down a loop in JavaScript by building a sleep() function with a promise and setTimeout, then awaiting it inside a for...of loop. - [How to divide an array in multiple equal parts in JS](https://flaviocopes.com/how-to-divide-array-js.md): Learn two ways to divide an array into multiple parts in JavaScript: make fixed-size chunks with splice and map, or split it into a fixed number of groups. - [How to get the first n items in an array in JS](https://flaviocopes.com/how-to-get-first-items-in-array-js.md): Learn how to get the first n items of a JavaScript array using the built-in slice() method, passing 0 and n, without modifying the original array. - [The same POST API call in various JavaScript libraries](https://flaviocopes.com/how-to-post-api-javascript.md): See the same POST API request written five ways in JavaScript, with XHR, the Fetch API, the Node https module, the request library, and Axios side by side. - [Let vs Const in JavaScript](https://flaviocopes.com/javascript-let-const.md): Should you use let or const in JavaScript? My take: default to const because it prevents reassignment, and only reach for let when you truly need to reassign. - [What is a JavaScript Frontend Framework?](https://flaviocopes.com/what-is-a-frontend-framework.md): Learn what a JavaScript frontend framework is, why tools like React, Vue, and Angular exist, and how they let you build modern apps declaratively, not by hand. - [How to remove duplicates from a JavaScript array](https://flaviocopes.com/how-to-remove-duplicates-array-javascript.md): Learn how to remove duplicate values from a JavaScript array in one line by passing it to a Set and spreading the result, which works for any primitives. - [How to remove all the node_modules folders content](https://flaviocopes.com/how-to-bulk-remove-node-modules.md): Learn how to bulk remove every node_modules folder with a single find command, freeing up gigabytes of disk space across all your old Node.js projects. - [How to convert an Array to a String in JavaScript](https://flaviocopes.com/how-to-convert-array-to-string-javascript.md): Learn how to convert an array to a string in JavaScript using the toString() method or join(), which lets you pass a custom separator between elements. - [List of keywords and reserved words in JavaScript](https://flaviocopes.com/javascript-reserved-words.md): A reference to all the keywords and reserved words in JavaScript, like await, class and const, that you cannot use as variable identifiers in your code. - [How to send the authorization header using Axios](https://flaviocopes.com/axios-send-authorization-header.md): Learn how to send the Authorization header with Axios by adding a headers object to the config argument of axios.post() and axios.get() requests. - [This decade in JavaScript](https://flaviocopes.com/a-decade-of-javascript.md): Looking back at how JavaScript and the Web evolved from 2010 to 2019, from jQuery and Mootools to ES6, async/await, npm, build tools, and frameworks. - [How to flatten an array in JavaScript](https://flaviocopes.com/javascript-flatten-array.md): Learn how to flatten a JavaScript array with the ES2019 flat() and flatMap() methods, including using flat(Infinity) to fully flatten nested arrays. - [JavaScript Nullish Coalescing](https://flaviocopes.com/javascript-nullish-coalescing.md): Learn the JavaScript nullish coalescing operator (??) and how it sets a default value only when the left side is null or undefined, unlike falsy-based ||. - [How to replace white space inside a string in JavaScript](https://flaviocopes.com/how-to-replace-whitespace-javascript.md): Learn how to remove or replace all the whitespace inside a string in JavaScript with a regular expression, using the whitespace metacharacter and the g flag. - [JavaScript Optional Chaining](https://flaviocopes.com/javascript-optional-chaining.md): The optional chaining operator is a very useful operator which we can use to work with objects and their properties or methods - [JavaScript Dynamic Imports](https://flaviocopes.com/javascript-dynamic-imports.md): Learn how JavaScript dynamic imports overcome the limits of static imports, letting you load a module conditionally at runtime with the await import() syntax. - [How to use top-level await in JavaScript](https://flaviocopes.com/javascript-await-top-level.md): Learn how top-level await lets you use await outside an async function, dropping the IIFE boilerplate, and why it only works inside ES modules and .mjs files. - [Calculate the number of days between 2 dates in JavaScript](https://flaviocopes.com/how-to-count-days-between-dates-javascript.md): Learn how to calculate the number of days or nights between two dates in JavaScript by adding a day at a time in a loop, an approach that handles DST safely. - [How to iterate over object properties in JavaScript](https://flaviocopes.com/how-to-iterate-object-properties-javascript.md): Learn how to iterate over the properties of a JavaScript object, since map and forEach do not work on objects, using a for...in loop or Object.entries(). - [How to format a date in JavaScript](https://flaviocopes.com/how-to-format-date-javascript.md): Learn how to format a date in JavaScript with built-in Date methods like toISOString(), toLocaleString(), and toDateString(), plus their UTC counterparts. - [How to upload a file using Fetch](https://flaviocopes.com/how-to-upload-files-fetch.md): Learn how to upload a file to the server with the Fetch API, capturing it from a file input, appending it to a FormData object, and POSTing it to an endpoint. - [How to get the days between 2 dates in JavaScript](https://flaviocopes.com/how-to-get-days-between-dates-javascript.md): Learn how to get every day between two dates in JavaScript with a function that loops from the start, adding a day at a time, and returns an array of Dates. - [How to wait for 2 or more promises to resolve in JavaScript](https://flaviocopes.com/how-to-wait-multiple-promises-javascript.md): Learn how to wait for two or more promises to resolve in JavaScript with Promise.all(), reading the results from the returned array, using await or then(). - [JavaScript labeled statements](https://flaviocopes.com/javascript-labeled-statements.md): Learn about JavaScript labeled statements, a rarely used feature that lets you break out of an outer loop from inside a nested loop or switch statement. - [Check if a date is in the past in JavaScript](https://flaviocopes.com/how-to-check-date-is-past-javascript.md): Learn how to check if a JavaScript date falls on a past day compared to another, using setHours(0,0,0,0) to ignore the time and compare only the calendar day. - [How to check if two dates are the same day in JavaScript](https://flaviocopes.com/how-to-check-dates-same-day-javascript.md): Learn how to check if two dates fall on the same day in JavaScript by comparing their getFullYear(), getMonth(), and getDate() values in a helper function. - [How to get the month name from a JavaScript date](https://flaviocopes.com/how-to-get-month-from-javascript-date.md): Learn how to get the month name from a JavaScript Date using the toLocaleString() method with the month long or short option, in any locale you want. - [How to get yesterday's date using JavaScript](https://flaviocopes.com/how-to-get-yesterday-date-javascript.md): Learn how to get yesterday's date in JavaScript by taking today's Date and calling setDate() with getDate() minus 1, which even handles month boundaries. - [How to get tomorrow's date using JavaScript](https://flaviocopes.com/how-to-get-tomorrow-date-javascript.md): Learn how to get tomorrow's date in JavaScript by taking a Date and calling setDate() with getDate() plus 1, then optionally resetting time with setHours(). - [How to send urlencoded data using Axios](https://flaviocopes.com/axios-urlencoded.md): Learn how to send urlencoded data with Axios using the qs module's stringify() method and the application/x-www-form-urlencoded content-type header. - [How to get last element of an array in JavaScript?](https://flaviocopes.com/how-to-get-last-item-array-javascript.md): Learn how to get the last element of a JavaScript array without knowing its size, using the length property and the array.length - 1 index. - [How to check if a JavaScript value is an array?](https://flaviocopes.com/how-to-check-javascript-value-array.md): Learn how to determine if a JavaScript value is an array using the Array.isArray() static method, which returns true only for real arrays. - [How to join two arrays in JavaScript](https://flaviocopes.com/how-to-join-arrays-javascript.md): Learn how to join two arrays in JavaScript into a single new array, using the modern spread operator or the concat() method that works in older browsers. - [How to join two strings in JavaScript](https://flaviocopes.com/how-to-join-strings-javascript.md): Learn how to join two strings in JavaScript using the + operator, the += operator to append in place, or the String concat() method to combine them. - [Links used to activate JavaScript functions](https://flaviocopes.com/links-for-javascript.md): Which href value should you use for a JavaScript link, # or javascript:void(0)? Learn the difference and why # needs you to return false from the handler. - [let vs var in JavaScript: what's the difference?](https://flaviocopes.com/javascript-difference-let-var.md): Learn the difference between let and var in JavaScript: let is block scoped and not hoisted, while var is function scoped and attaches to the global object. - [Why you should not modify a JavaScript object prototype](https://flaviocopes.com/javascript-why-not-modify-object-prototype.md): Find out why modifying a built-in JavaScript prototype like Array.prototype causes library conflicts and breaks future-proofing, and what to do instead. - [Add item to an array at a specific index in JavaScript](https://flaviocopes.com/how-to-add-item-to-array-javascript.md): Learn how to add an item to an array at a specific index in JavaScript using the splice() method with a delete count of 0 to insert without removing anything. - [How to break out of a for loop in JavaScript](https://flaviocopes.com/how-to-break-for-loop-javascript.md): Learn how to break out of a for or for..of loop in JavaScript with the break statement, and why you cannot break out of a forEach loop the same way. - [How to check if an object is empty in JavaScript](https://flaviocopes.com/how-to-check-object-empty.md): Learn how to check if an object is empty in JavaScript using Object.entries().length and a constructor check, plus the Lodash isEmpty() shortcut. - [Return the result of an async function in JavaScript](https://flaviocopes.com/how-to-return-result-asynchronous-function.md): Learn how to return the result of an asynchronous function in JavaScript, using async and await, wrapping the call in an IIFE, or falling back to callbacks. - [Is JavaScript still worth learning?](https://flaviocopes.com/javascript-worth-learning.md): Is JavaScript still worth learning? My take: it is more alive than ever, the most popular and powerful language, and the only one browsers run natively. - [== vs === in JavaScript: what's the difference?](https://flaviocopes.com/javascript-comparison-operator-difference.md): Learn the difference between the == and === operators in JavaScript: === checks both type and value while == coerces types, so default to === in most cases. - [What does the double negation operator !! do in JavaScript?](https://flaviocopes.com/javascript-double-negation-operator.md): Learn what the double negation operator !! does in JavaScript: it is two negations that coerce any value into its boolean equivalent, true or false. - [How to check if a JavaScript array contains a specific value](https://flaviocopes.com/how-to-check-array-contains-item.md): Learn how to check if a JavaScript array contains a specific value using the includes() method, which returns true or false depending on whether it is found. - [How to check types in JavaScript without using TypeScript](https://flaviocopes.com/how-to-check-types-javascript.md): Learn how to get type checking in JavaScript without TypeScript, using a tsconfig.json with checkJs enabled and JSDoc comments so VS Code flags type errors. - [How to rename fields when using object destructuring](https://flaviocopes.com/how-to-rename-object-destructuring.md): Learn how to rename a field while destructuring a JavaScript object, assigning a property to a new variable name with the colon syntax, as in firstName: name. - [How to use the JavaScript bcrypt library](https://flaviocopes.com/javascript-bcrypt.md): Learn how to securely hash and verify passwords in JavaScript with bcrypt, using bcrypt.hash() with salt rounds and bcrypt.compare() to check a match. - [JavaScript Symbols](https://flaviocopes.com/javascript-symbols.md): Learn about JavaScript symbols, a primitive type from ES2015 created with Symbol(), where every value is unique and often used to identify object properties. - [JavaScript Public Class Fields](https://flaviocopes.com/javascript-public-class-fields.md): Learn how JavaScript public class fields let you declare a field like count = 0 directly in the class body, instead of setting it inside the constructor. - [How to sort an array by date value in JavaScript](https://flaviocopes.com/how-to-sort-array-by-date-javascript.md): Learn how to sort a JavaScript array of objects by a date property, using sort() with a callback that subtracts the dates, and slice() to avoid mutating it. - [JavaScript Private Class Fields](https://flaviocopes.com/javascript-private-class-fields.md): Learn how JavaScript private class fields, declared with a # prefix, finally enforce real privacy on a class instead of the old underscore convention. - [Add an event listener to multiple elements in JavaScript](https://flaviocopes.com/how-to-add-event-listener-multiple-elements-javascript.md): Learn how to add the same event listener to multiple elements in JavaScript, either by looping over querySelectorAll with forEach or by using event bubbling. - [How to get the value of a CSS property in JavaScript](https://flaviocopes.com/javascript-get-css-property-value.md): Learn how to read the value of any CSS property in JavaScript with getComputedStyle(), including styles set in an external stylesheet, not just inline ones. - [JavaScript Operators](https://flaviocopes.com/javascript-operators.md): Learn how JavaScript operators combine expressions into more complex ones, from binary operators like addition to unary operators and the ternary operator. - [The JavaScript in operator](https://flaviocopes.com/javascript-in-operator.md): Learn how the JavaScript in operator checks whether an object has a property, including properties inherited from its ancestors in the prototype chain. - [The JavaScript reduce() Function](https://flaviocopes.com/javascript-reduce.md): Learn how the JavaScript reduce() method runs a callback over every array item to compute a single result, using an accumulator and an optional initial value. - [The JavaScript map() Function](https://flaviocopes.com/javascript-map.md): Learn how to use the JavaScript array map() method to build a new array by running a function on every element, then chain it with filter() to refine results. - [The JavaScript filter() Function](https://flaviocopes.com/javascript-filter.md): Learn how to use the JavaScript array filter() method to build a new array from elements that pass a test, a clean way to remove items from an array. - [The JavaScript Global Object](https://flaviocopes.com/javascript-global-object.md): Learn about the JavaScript global object and the properties, functions, and objects it exposes globally without a namespace, like NaN, parseInt(), and Math. - [JavaScript Error Objects](https://flaviocopes.com/javascript-errors.md): Learn about the JavaScript error objects, Error, RangeError, ReferenceError, SyntaxError and TypeError, their message and name properties, and when each fires. - [JavaScript Object Properties](https://flaviocopes.com/javascript-object-properties.md): Learn how JavaScript object properties work, from naming them with any string to reading their values with dot notation and bracket notation. - [JavaScript Recursion](https://flaviocopes.com/javascript-recursion.md): Learn how recursion works in JavaScript when a function calls itself, using a factorial function as an example and understanding the call stack along the way. - [JavaScript Ternary Operator](https://flaviocopes.com/javascript-ternary-operator.md): Learn how the JavaScript ternary operator gives you a short way to write a conditional with three operands, choosing one of two expressions to run. - [JavaScript Logical Operators](https://flaviocopes.com/javascript-logical-operators.md): Learn the JavaScript logical operators and (&&), or (||), and not (!), including short-circuit evaluation for guarding access and setting default values. - [JavaScript Return Values](https://flaviocopes.com/javascript-return-values.md): Learn how return values work in JavaScript, why every function returns undefined by default, and how the return keyword ends a function and hands back a value. - [The JavaScript Spread Operator](https://flaviocopes.com/javascript-spread-operator.md): Learn how the JavaScript spread operator (...) expands an array, object or string, letting you clone them or pass an array as individual function arguments. - [JavaScript Function Parameters](https://flaviocopes.com/javascript-function-parameters.md): Learn how JavaScript function parameters work, including ES6 default values and the ES2018 trailing comma so you can rearrange parameters without bugs. - [The JavaScript delete Operator](https://flaviocopes.com/javascript-delete-operator.md): Learn how the JavaScript delete operator removes a property or method from an object, using either the dot notation or the square bracket syntax. - [The JavaScript Switch Conditional](https://flaviocopes.com/javascript-switch.md): Learn how the JavaScript switch conditional picks one case to run based on an expression, why each case needs a break, and how return works inside a function. - [The JavaScript if/else conditional](https://flaviocopes.com/javascript-if.md): Learn how the JavaScript if/else conditional works, from truthy and falsy expressions to omitting the block for a single statement and nesting else if blocks. - [JavaScript Equality Operators](https://flaviocopes.com/javascript-equality-operators.md): Learn the JavaScript equality operators ==, !=, === and !==, the difference between strict and loose checks, and quirks like NaN never equaling NaN. - [JavaScript Type Conversions (casting)](https://flaviocopes.com/javascript-type-conversion.md): Learn how to convert values between types in JavaScript, casting numbers, strings and booleans using helpers like String(), Number() and the toString() method. - [JavaScript Scope](https://flaviocopes.com/javascript-scope.md): Learn how JavaScript scope decides where a variable is visible, covering global, function and block scope and how var differs from let and const. - [JavaScript Statements](https://flaviocopes.com/javascript-statements.md): Learn what JavaScript statements are and how they perform operations, covering expression, declaration, control flow and loop statements. - [JavaScript instanceof Operator](https://flaviocopes.com/javascript-instanceof-operator.md): Learn how the JavaScript instanceof operator checks if an object is an instance of a class, including parent classes it inherits from in the prototype chain. - [JavaScript Operators Precedence Rules](https://flaviocopes.com/javascript-operator-precedence.md): Learn how JavaScript operator precedence decides which operations run first, so an expression like 1 * 2 + 5 / 2 % 2 evaluates the way you expect. - [JavaScript Comparison Operators](https://flaviocopes.com/javascript-comparison-operators.md): Learn how the JavaScript comparison operators less than, greater than and their or-equal variants compare numbers, and how they order strings by Unicode value. - [JavaScript new Operator](https://flaviocopes.com/javascript-new-operator.md): Learn how the JavaScript new operator creates an object from a class or constructor function, including how arguments are passed to the constructor. - [JavaScript typeof Operator](https://flaviocopes.com/javascript-typeof-operator.md): Learn how the JavaScript typeof operator returns a string for any value, from number and string to object and function, and how to detect undefined. - [JavaScript Internationalization](https://flaviocopes.com/javascript-internationalization.md): Learn how to use the JavaScript Intl API for internationalization, including Collator, DateTimeFormat, NumberFormat, PluralRules, and getCanonicalLocales(). - [JavaScript Assignment Operator](https://flaviocopes.com/javascript-assignment-operator.md): Learn how the JavaScript assignment operator = sets a value on a variable, and the compound shortcuts +=, -=, *=, /= and %= that combine it with arithmetic. - [JavaScript Reference: Object](https://flaviocopes.com/javascript-object.md): A reference to the JavaScript Object type and its built-in properties and methods, from creating objects to static helpers like Object.keys() and seal(). - [The Object valueOf() method](https://flaviocopes.com/javascript-object-prototype-valueof.md): Learn how the JavaScript valueOf() method returns the primitive value of an object, a feature normally used internally by JavaScript and rarely by you. - [The Object toString() method](https://flaviocopes.com/javascript-object-prototype-tostring.md): Learn how the JavaScript toString() method returns a string representation of an object, defaulting to [object Object] unless you override it yourself. - [The Object toLocaleString() method](https://flaviocopes.com/javascript-object-prototype-tolocalestring.md): Learn how the JavaScript toLocaleString() method returns a string representation of an object and accepts an optional locale argument to customize it. - [The Object propertyIsEnumerable() method](https://flaviocopes.com/javascript-object-prototype-propertyisenumerable.md): Learn how the JavaScript propertyIsEnumerable() method checks whether a property exists on an object and is enumerable, returning true or false. - [The Object isPrototypeOf() method](https://flaviocopes.com/javascript-object-prototype-isprototypeof.md): Learn how the JavaScript isPrototypeOf() method checks whether an object appears in the prototype chain of another object, returning true or false. - [The Object hasOwnProperty() method](https://flaviocopes.com/javascript-object-prototype-hasownproperty.md): Learn how the JavaScript hasOwnProperty() method checks if an object has a property of its own, returning true or false for the property name you pass in. - [The Object values() method](https://flaviocopes.com/javascript-object-values.md): Learn how the JavaScript Object.values() method returns an array containing all the own property values of an object, and how it also works with arrays. - [The Object setPrototypeOf() method](https://flaviocopes.com/javascript-object-setprototypeof.md): Learn how the JavaScript Object.setPrototypeOf() method sets the prototype of an object, accepting the object and the prototype you want to assign. - [The Object seal() method](https://flaviocopes.com/javascript-object-seal.md): Learn how the JavaScript Object.seal() method locks an object so you cannot add or remove properties, while still letting you change existing ones. - [The Object preventExtensions() method](https://flaviocopes.com/javascript-object-preventextensions.md): Learn how the JavaScript Object.preventExtensions() method blocks adding new properties to an object, while existing ones can still be changed or removed. - [The Object keys() method](https://flaviocopes.com/javascript-object-keys.md): Learn how the JavaScript Object.keys() method returns an array of an object own enumerable property names, and how to use it with reduce to copy an object. - [The Object isSealed() method](https://flaviocopes.com/javascript-object-issealed.md): Learn how the JavaScript Object.isSealed() method tells you whether an object is sealed, returning true for any object you passed through Object.seal(). - [The Object isFrozen() method](https://flaviocopes.com/javascript-object-isfrozen.md): Learn how the JavaScript Object.isFrozen() method tells you whether an object is frozen, returning true for any object you passed through Object.freeze(). - [The Object isExtensible() method](https://flaviocopes.com/javascript-object-isextensible.md): Learn how the JavaScript Object.isExtensible() method checks if you can add properties to an object, returning false after freeze, seal, or preventExtensions. - [The Object is() method](https://flaviocopes.com/javascript-object-is.md): Learn how the JavaScript Object.is() method compares two values for equality, including how it treats NaN as equal and tells 0 apart from -0, unlike ===. - [The Object getPrototypeOf() method](https://flaviocopes.com/javascript-object-getprototypeof.md): Learn how the JavaScript Object.getPrototypeOf() method returns the prototype of an object, and why it returns null for an object that has no prototype. - [The Object getOwnPropertySymbols() method](https://flaviocopes.com/javascript-object-getownpropertysymbols.md): Learn how the JavaScript Object.getOwnPropertySymbols() method returns an array of the Symbol keys defined on an object, a companion to the ES2015 Symbol type. - [The Object getOwnPropertyNames() method](https://flaviocopes.com/javascript-object-getownpropertynames.md): Learn how the JavaScript Object.getOwnPropertyNames() method returns all own property names, including non-enumerable ones that Object.keys() leaves out. - [The Object getOwnPropertyDescriptors() method](https://flaviocopes.com/javascript-object-getownpropertydescriptors.md): Learn how the JavaScript Object.getOwnPropertyDescriptors() method returns descriptors for all own properties, so you can copy getters and setters correctly. - [The Object getOwnPropertyDescriptor() method](https://flaviocopes.com/javascript-object-getownpropertydescriptor.md): Learn how the JavaScript Object.getOwnPropertyDescriptor() method returns the descriptor of a property, with its value, writable, enumerable, and configurable. - [The Object freeze() method](https://flaviocopes.com/javascript-object-freeze.md): Learn how the JavaScript Object.freeze() method makes an object immutable, so no properties can be added, removed, or changed, and returns that same object. - [The Object entries() method](https://flaviocopes.com/javascript-object-entries.md): Learn how the JavaScript Object.entries() method returns an array of an object own [key, value] pairs, how it works with arrays, and how to count properties. - [The Object defineProperty() method](https://flaviocopes.com/javascript-object-defineproperty.md): Learn how the JavaScript Object.defineProperty() method creates or configures a single object property using a property name and a property descriptor object. - [The Object defineProperties() method](https://flaviocopes.com/javascript-object-defineproperties.md): Learn how the JavaScript Object.defineProperties() method creates or configures several object properties at once using property descriptor objects. - [The Object create() method](https://flaviocopes.com/javascript-object-create.md): Learn how the JavaScript Object.create() method makes a new object with a prototype you choose, and how the optional second argument adds property descriptors. - [The Object assign() method](https://flaviocopes.com/javascript-object-assign.md): Learn how the JavaScript Object.assign() method copies enumerable own properties from one or more objects into a target, and why the copy is only shallow. - [JavaScript Property Descriptors](https://flaviocopes.com/javascript-property-descriptors.md): Learn what JavaScript property descriptors are and how value, writable, configurable, enumerable, get and set define the behavior of an object property. - [JavaScript Reference: Number](https://flaviocopes.com/javascript-number.md): A reference for the JavaScript Number object: how to create number values, plus its properties like MAX_SAFE_INTEGER and EPSILON and its built-in methods. - [The Number isFinite() method](https://flaviocopes.com/javascript-number-isfinite.md): Learn how the JavaScript Number.isFinite() method checks whether a value is a finite number, returning false for strings, booleans, objects, and arrays. - [The Number toFixed() method](https://flaviocopes.com/javascript-number-tofixed.md): Learn how the JavaScript Number toFixed() method returns a string with a number in fixed point notation, and how to set how many decimal digits to keep. - [The Number toLocaleString() method](https://flaviocopes.com/javascript-number-tolocalestring.md): Learn how the JavaScript Number toLocaleString() method formats a number according to a locale, so you can show it in US, Italian, or Arabic conventions. - [The Number toExponential() method](https://flaviocopes.com/javascript-number-toexponential.md): Learn how the JavaScript Number toExponential() method returns a string with the number in exponential notation, and how to set the fractional part digits. - [The Number toPrecision() method](https://flaviocopes.com/javascript-number-toprecision.md): Learn how the JavaScript Number toPrecision() method returns a string representing a number to a given number of significant digits, padding or rounding it. - [The Number valueOf() method](https://flaviocopes.com/javascript-number-valueof.md): Learn how the JavaScript Number valueOf() method returns the primitive number value wrapped inside a Number object, turning that object back into a number. - [The Number toString() method](https://flaviocopes.com/javascript-number-tostring.md): Learn how the JavaScript Number toString() method returns a string representation of a number, and how the optional radix prints it in binary, octal, or hex. - [The Number parseInt() method](https://flaviocopes.com/javascript-number-parseint.md): Learn how the JavaScript Number.parseInt() method parses a string into an integer, including extracting a leading number and using the radix for octal or hex. - [The Number parseFloat() method](https://flaviocopes.com/javascript-number-parsefloat.md): Learn how the JavaScript Number.parseFloat() method parses a string into a floating point number, including how it extracts a leading number from text. - [The Number isSafeInteger() method](https://flaviocopes.com/javascript-number-issafeinteger.md): Learn how the JavaScript Number.isSafeInteger() method checks if a value is an integer within the safe range, between -2^53 and 2^53, where precision holds. - [The Number isNaN() method](https://flaviocopes.com/javascript-number-isnan.md): Learn how the JavaScript Number.isNaN() method works, returning true only for NaN or 0/0 and false for every other value you pass to it. - [The Number isInteger() method](https://flaviocopes.com/javascript-number-isinteger.md): Learn how the JavaScript Number.isInteger() method checks whether a value is an integer, returning false for decimals, strings, booleans, objects, and arrays. - [JavaScript Reference: String](https://flaviocopes.com/javascript-string.md): A reference to the JavaScript String type, from the static String.fromCharCode() method to instance methods like slice(), split() and replace(). - [The String valueOf() method](https://flaviocopes.com/javascript-string-valueof.md): Learn how the JavaScript valueOf() method returns the primitive string value of a String object, working exactly like the toString() method does. - [Memoization in JavaScript](https://flaviocopes.com/javascript-memoization.md): Learn how memoization speeds up JavaScript by caching the results of pure function calls, with a factorial example that stores results right on the function. - [The String trimStart() method](https://flaviocopes.com/javascript-string-trimstart.md): Learn how the JavaScript trimStart() method returns a new string with the white space removed only from the start, leaving any trailing white space in place. - [The String trimEnd() method](https://flaviocopes.com/javascript-string-trimend.md): Learn how the JavaScript trimEnd() method returns a new string with the white space removed only from the end, leaving any leading white space in place. - [The String trim() method](https://flaviocopes.com/javascript-string-trim.md): Learn how the JavaScript trim() method returns a new string with the white space removed from the beginning and the end, leaving the original string untouched. - [The String toUpperCase() method](https://flaviocopes.com/javascript-string-touppercase.md): Learn how the JavaScript toUpperCase() method returns a new string with all the text in upper case, without mutating the original or taking any parameter. - [The String toString() method](https://flaviocopes.com/javascript-string-tostring.md): Learn how the JavaScript toString() method returns the primitive string representation of a String object, working just like the valueOf() method does. - [The String toLowerCase() method](https://flaviocopes.com/javascript-string-tolowercase.md): Learn how the JavaScript toLowerCase() method returns a new string with all the text in lower case, without mutating the original or taking any parameter. - [The String toLocaleUpperCase() method](https://flaviocopes.com/javascript-string-tolocaleuppercase.md): Learn how the JavaScript toLocaleUpperCase() method returns an uppercase string using locale-specific case mappings, handy for languages like Turkish. - [The String toLocaleLowerCase() method](https://flaviocopes.com/javascript-string-tolocalelowercase.md): Learn how the JavaScript toLocaleLowerCase() method returns a lowercase string using locale-specific case mappings, handy for languages like Turkish. - [The String substring() method](https://flaviocopes.com/javascript-string-substring.md): Learn how the JavaScript substring() method returns part of a string and how it differs from slice() by turning any negative argument into 0. - [The String startsWith() method](https://flaviocopes.com/javascript-string-startswith.md): Learn how the JavaScript startsWith() method checks whether a string starts with a given substring, and how a second argument sets where to start checking. - [The String split() method](https://flaviocopes.com/javascript-string-split.md): Learn how the JavaScript split() method breaks a string into an array of tokens every time it finds a separator pattern, with the case-sensitive match removed. - [The String slice() method](https://flaviocopes.com/javascript-string-slice.md): Learn how the JavaScript slice() method returns a new portion of a string between a begin and end position, and how negative indexes count back from the end. - [The String repeat() method](https://flaviocopes.com/javascript-string-repeat.md): Learn how the JavaScript repeat() method returns a new string repeated a given number of times, returning an empty string for 0 and a RangeError for negatives. - [The String padStart() method](https://flaviocopes.com/javascript-string-padstart.md): Learn how the JavaScript padStart() method adds characters to the start of a string until it reaches a target length, using a space or a pad string you provide. - [The String padEnd() method](https://flaviocopes.com/javascript-string-padend.md): Learn how the JavaScript padEnd() method adds characters to the end of a string until it reaches a target length, using a space or a pad string you provide. - [The String normalize() method](https://flaviocopes.com/javascript-string-normalize.md): Learn how the JavaScript normalize() method returns a string converted to a Unicode normalization form like NFC, NFD, NFKC or NFKD, with NFC as the default. - [The String match() method](https://flaviocopes.com/javascript-string-match.md): Learn how the JavaScript match() method runs a regular expression against a string and returns an array of matches and capture groups, or null if none match. - [The String localeCompare() method](https://flaviocopes.com/javascript-string-localecompare.md): Learn how the JavaScript localeCompare() method compares two strings by locale, returning a negative, zero or positive number, ideal for sorting text. - [The String lastIndexOf() method](https://flaviocopes.com/javascript-string-lastindexof.md): Learn how the JavaScript lastIndexOf() method returns the position of the last occurrence of a substring inside a string, or -1 when the value is not found. - [The String indexOf() method](https://flaviocopes.com/javascript-string-indexof.md): Learn how the JavaScript indexOf() method returns the position of the first occurrence of a substring, or -1 when it is not found, plus an optional start index. - [The String includes() method](https://flaviocopes.com/javascript-string-includes.md): Learn how the JavaScript includes() method checks whether a string contains a given substring, and how an optional second argument sets where the search starts. - [The String endsWith() method](https://flaviocopes.com/javascript-string-endswith.md): Learn how the JavaScript endsWith() method checks whether a string ends with a given value, plus how a second argument lets you treat it as a shorter string. - [The String concat() method](https://flaviocopes.com/javascript-string-concat.md): Learn how the JavaScript concat() method joins the current string with one or more strings passed as arguments, returning the combined string as a result. - [The String codePointAt() method](https://flaviocopes.com/javascript-string-codepointat.md): Learn how the JavaScript codePointAt() method returns the full Unicode code point of a character, handling symbols that need two 16-bit units in one call. - [The String charCodeAt() method](https://flaviocopes.com/javascript-string-charcodeat.md): Learn how the JavaScript charCodeAt() method returns the Unicode 16-bit integer code for the character at a given index in a string, unlike charAt(). - [The String charAt() method](https://flaviocopes.com/javascript-string-charat.md): Learn how the JavaScript charAt() method returns the character at a given index in a string, and why an out-of-range index gives you an empty string back. - [The ES2019 Guide](https://flaviocopes.com/es2019.md): Discover the features added in ES2019: Array.flat and flatMap, Object.fromEntries, optional catch binding, String.trimStart and trimEnd, and JSON improvements. - [How I run little JavaScript snippets](https://flaviocopes.com/run-javascript-snippets.md): The tools I use to run little JavaScript snippets while testing ideas: the browser DevTools, the Quokka.js VS Code extension, and the RunJS desktop app. - [The String search() method](https://flaviocopes.com/javascript-string-search.md): Learn how the JavaScript search() method returns the index of the first match of a string or regular expression inside a string, or -1 when there is no match. - [The String replace() method](https://flaviocopes.com/javascript-string-replace.md): Learn how the JavaScript replace() method swaps the first match in a string for new text, and how a regex with the g flag lets you replace every match. - [How to list all methods of an object in JavaScript](https://flaviocopes.com/how-to-list-object-methods-javascript.md): Learn how to list the methods of a JavaScript object with Object.getOwnPropertyNames() filtered by typeof, plus how to walk the prototype chain with a Set. - [Fix the 'Unexpected identifier' error importing JS modules](https://flaviocopes.com/how-to-solve-unexpected-identifier-modules.md): Learn how to fix the Unexpected identifier error when using ES module import in the browser, by adding type='module' to your script tag so imports work. - [The node_modules folder size is a privilege, not a problem](https://flaviocopes.com/node-modules-size.md): My take on the node_modules folder size debate: those hundreds of megabytes are open source you can inspect, and tools like pnpm fix the disk concern. - [JavaScript Generators Tutorial](https://flaviocopes.com/javascript-generators.md): Generators are a special kind of function with the ability to pause itself, and resume later, allowing other code to run in the meantime. - [Casting in JavaScript](https://flaviocopes.com/javascript-casting.md): Learn how to cast values from one type to another in JavaScript, converting to strings with String() and toString(), to numbers, and to booleans. - [How to style DOM elements using JavaScript](https://flaviocopes.com/javascript-style-dom.md): Learn how to style DOM elements with JavaScript, using classList to add and remove classes or the style property to set inline CSS like color and border. - [Loosely typed vs strongly typed languages](https://flaviocopes.com/loosely-strongly-typed.md): Understand the difference between loosely typed and strongly typed languages, why JavaScript is loosely typed, and how strong typing catches errors early. - [Passing undefined to a JavaScript IIFE](https://flaviocopes.com/javascript-iife-undefined.md): Learn why old pre-ES5 JavaScript passed undefined into an IIFE: it guaranteed a real undefined value back when undefined could be reassigned to anything. - [Dynamically select a method of an object in JavaScript](https://flaviocopes.com/javascript-dynamic-method.md): Learn how to dynamically call a method on a JavaScript object by picking its name with a ternary and the square bracket notation, then invoking it with (). - [The definitive guide to debugging JavaScript](https://flaviocopes.com/javascript-debugging.md): Learn how to debug JavaScript, from narrowing down where the error comes from and reading the code to using console.log and the browser DevTools debugger. - [Destructuring Objects and Arrays in JavaScript](https://flaviocopes.com/javascript-destructuring.md): Learn how to use JavaScript destructuring to pull values out of objects and arrays into named variables, rename them, and skip array items you do not need. - [Work with objects and arrays using Rest and Spread](https://flaviocopes.com/javascript-rest-spread.md): Learn how to use the rest and spread syntax in JavaScript to expand arrays, clone objects and pass an array as function arguments using the three-dot operator. - [Introduction to PeerJS, the WebRTC library](https://flaviocopes.com/peerjs.md): Learn how PeerJS makes WebRTC easy: run a signaling server with npx peerjs, then connect two browsers as peers to send data directly between them. - [call() and apply() in JavaScript](https://flaviocopes.com/javascript-call-apply.md): Learn how to use call() and apply() in JavaScript to invoke a function with a chosen this value, where call() takes a list and apply() takes an array. - [How to count the number of properties in a JavaScript object](https://flaviocopes.com/how-to-count-properties-object-javascript.md): Learn how to count the number of properties in a JavaScript object using Object.keys() to get an array of its enumerable keys and reading the length property. - [Sort an array of objects by a property in JavaScript](https://flaviocopes.com/how-to-sort-array-of-objects-by-property-javascript.md): Learn how to sort a JavaScript array of objects by a property value, using sort() with a callback that compares the values and returns 1 or -1 for the order. - [How to set default parameter values in JavaScript](https://flaviocopes.com/how-to-set-default-parameter-values-javascript.md): Learn how to set default parameter values in JavaScript functions, the ES6 way with param = value, and how to set defaults for destructured options objects. - [How to encode a URL with JavaScript](https://flaviocopes.com/how-to-encode-url.md): Learn how to encode a URL in JavaScript and when to use encodeURI() for a full URL versus encodeURIComponent() for a single query parameter value. - [How to empty a JavaScript array](https://flaviocopes.com/how-to-empty-javascript-array.md): Learn how to empty a JavaScript array, either by setting its length to 0 to clear it in place or by reassigning the variable to a new empty array with let. - [How to merge two objects in JavaScript](https://flaviocopes.com/how-to-merge-objects-javascript.md): Learn how to merge two JavaScript objects into a new one with the spread operator, where later properties win, or do a deep merge with the Lodash merge(). - [Angular](https://flaviocopes.com/angular.md): Why I don't have Angular tutorials and am not planning to write them: I focus on the React and Vue I actually use, and Angular is not too different. - [How to hide a DOM element using plain JavaScript](https://flaviocopes.com/how-to-hide-element.md): Learn how to hide a DOM element with plain JavaScript by setting its style.display property to none, then show it again with block or inline. - [Should you use or learn jQuery in 2020?](https://flaviocopes.com/jquery.md): To use or not to use? To learn or not to learn? Let's see how you can avoid jQuery altogether, and the reasons you should keep using it - [The JSONP Guide](https://flaviocopes.com/jsonp.md): Learn how JSONP loads JSON from third-party servers to bypass the same-origin policy, using a callback function and supporting only GET, before CORS existed. - [Introduction to JSON](https://flaviocopes.com/json.md): Learn how JSON stores and interchanges data as human-readable key-value pairs, its supported data types, and why it is used far beyond JavaScript. - [What is a Single Page Application?](https://flaviocopes.com/single-page-application.md): Learn what a single page application is, how it loads once and updates the page with JavaScript instead of full reloads, plus the pros and cons including SEO. - [Get the index in a JavaScript for-of loop](https://flaviocopes.com/how-to-get-index-in-for-of-loop.md): Learn how to get the index of the current iteration in a JavaScript for-of loop by calling the array entries() method with destructuring syntax. - [HTML Canvas API Tutorial](https://flaviocopes.com/canvas.md): A guide to the HTML Canvas API: drop a canvas element, grab its 2d context with getContext, then draw shapes, text and images to the screen with JavaScript. - [Generate a random number between two numbers in JavaScript](https://flaviocopes.com/how-to-generate-random-number-between.md): Learn how to generate a random number between two values in JavaScript by combining Math.random() and Math.floor(), for example to pick a number from 1 to 6. - [Async vs sync code](https://flaviocopes.com/async-vs-sync.md): Understand the difference between synchronous and asynchronous code, and why async APIs let Node.js handle more traffic than blocking languages like PHP. - [How to use Async and Await with Array.prototype.map()](https://flaviocopes.com/javascript-async-await-array-map.md): Learn how to run an async function inside Array.prototype.map() and wait for every result by wrapping the returned promises in Promise.all() the right way. - [The ES2018 Guide](https://flaviocopes.com/es2018.md): Discover the features added in ES2018 (ES9): object rest and spread properties, asynchronous iteration, Promise.finally, and several regex improvements. - [The ES2017 Guide](https://flaviocopes.com/es2017.md): Discover the features added in ES2017 (ES8): string padding with padStart and padEnd, Object.values, Object.entries, async functions, and trailing commas. - [How to initialize a new array with values in JavaScript](https://flaviocopes.com/how-to-initialize-array-with-values.md): Learn how to initialize a new JavaScript array of a given length filled with the same value, using the Array() constructor with the ES6 fill() method. - [The ES2016 Guide](https://flaviocopes.com/es2016.md): Discover the two features added in ES2016 (ES7): Array.prototype.includes for cleanly checking if an array contains a value, and the exponentiation operator. - [How to get the current URL in JavaScript](https://flaviocopes.com/how-to-get-current-url-javascript.md): Learn how to get the current URL in JavaScript with window.location and location.href, plus handy properties like pathname, hostname, hash, and search. - [The ES6 Guide](https://flaviocopes.com/es6.md): Discover the major features added in ES6 (ES2015): arrow functions, promises, classes, let and const, modules, destructuring, and the spread operator. - [How to create a multiline string in JavaScript](https://flaviocopes.com/how-to-create-multiline-string-javascript.md): Learn how to create a multiline string in JavaScript using template literals, the backtick-delimited strings added in ES6 that let text span several lines. - [How to check if a string starts with another in JavaScript](https://flaviocopes.com/how-to-check-string-starts-with.md): Learn how to check if a string starts with another in JavaScript using the startsWith() method, including its optional position parameter to start later. - [Get the unique properties of objects in a JavaScript array](https://flaviocopes.com/how-to-get-unique-properties-of-object-in-array.md): Learn how to extract the unique values of a property from an array of objects in JavaScript, combining map() with a Set and the spread operator. - [How to validate an email address in JavaScript](https://flaviocopes.com/how-to-validate-email-address-javascript.md): There are lots of ways to validate an email address. Learn the correct way, and also find out all the options you have, using plain JavaScript - [Quotes in JavaScript](https://flaviocopes.com/javascript-quotes.md): Learn the three types of quotes you can use in JavaScript: single quotes, double quotes and backticks, including multiline strings and variable interpolation. - [The JavaScript Cookbook](https://flaviocopes.com/javascript-cookbook.md): A collection of practical JavaScript how-to articles covering common tasks with strings, numbers, dates, objects, arrays, functions and loops. - [How to use JavaScript Classes](https://flaviocopes.com/javascript-classes.md): Learn how to use JavaScript classes introduced in ES6, from defining a constructor and methods to creating objects with new and inheritance using extends. - [JavaScript Exceptions](https://flaviocopes.com/javascript-exceptions.md): When the code runs into an unexpected problem, the JavaScript idiomatic way to handle this situation is through exceptions - [JavaScript Prototypal Inheritance](https://flaviocopes.com/javascript-prototypal-inheritance.md): JavaScript is quite unique in the popular programming languages landscape because of its usage of prototypal inheritance. Let's find out what that means - [How to make your JavaScript functions sleep](https://flaviocopes.com/javascript-sleep.md): Learn how to make a JavaScript function sleep for a set time, since the language has no native sleep, by wrapping setTimeout in a promise and using async/await. - [Generate random and unique strings in JavaScript](https://flaviocopes.com/javascript-generate-random-unique-strings.md): Learn how I generated thousands of unique random strings in Node.js using the randomstring package and a Set to guarantee every string stays unique. - [The JavaScript Math library](https://flaviocopes.com/javascript-math-object.md): Learn the JavaScript Math object and its constants and static functions, from Math.PI and Math.E to Math.abs(), Math.round(), and the trigonometry helpers. - [The JavaScript Arithmetic operators](https://flaviocopes.com/javascript-math-operators.md): Learn the JavaScript arithmetic operators, from addition, subtraction, multiplication, and division to remainder, exponentiation, increment, and decrement. - [Semicolons in JavaScript](https://flaviocopes.com/javascript-automatic-semicolon-insertion.md): JavaScript semicolons are optional. I personally like avoiding using semicolons in my code, but many people prefer them. - [A Moment.js tutorial](https://flaviocopes.com/momentjs.md): Learn how to use Moment.js, the JavaScript library for managing dates in the browser and Node.js, including how to install it, parse dates, and format output. - [The definitive guide to JavaScript Dates](https://flaviocopes.com/javascript-dates.md): Learn how to work with dates in JavaScript using the Date object, from creating instances with new Date() to milliseconds since 1970 and UNIX timestamps. - [How to inspect a JavaScript object](https://flaviocopes.com/how-to-inspect-javascript-object.md): Learn how to inspect a JavaScript object using console.log, console.dir, JSON.stringify(), a for...in loop, and util.inspect from the Node util module. - [How to trim the leading zero in a number in JavaScript](https://flaviocopes.com/how-to-trim-leading-zero-number.md): Learn how to trim the leading zero from a number in JavaScript, using parseInt() with radix 10, the unary plus operator, or a regular expression like /^0+/. - [A quick reference guide to Modern JavaScript Syntax](https://flaviocopes.com/javascript-modern-syntax.md): A quick reference to modern JavaScript syntax like arrow functions, the spread operator, and destructuring, so you can tell JS apart from framework features. - [How to replace all occurrences of a string in JavaScript](https://flaviocopes.com/how-to-replace-all-occurrences-string-javascript.md): Learn how to replace all occurrences of a string in JavaScript, using a global regex with the g flag and the i flag for case, or chaining split() and join(). - [The V8 JavaScript Engine](https://flaviocopes.com/v8.md): Understand V8, the JavaScript engine that powers Google Chrome and Node.js, how it provides the runtime, and how it uses just-in-time compilation for speed. - [JavaScript Asynchronous Programming and Callbacks](https://flaviocopes.com/javascript-callbacks.md): Learn how asynchronous JavaScript works with callbacks, why the language is single threaded and synchronous by default, and the problem of callback hell. - [Introduction to CommonJS](https://flaviocopes.com/commonjs.md): Learn how CommonJS, the module system used in Node.js, lets you import code with require and share it with exports, the synchronous format npm is built on. - [Introduction to ES Modules](https://flaviocopes.com/es-modules.md): Learn how ES Modules, the ECMAScript standard for modules, let you import and export values across JavaScript files, and how they differ from CommonJS require. - [How to check if a JavaScript object property is undefined](https://flaviocopes.com/how-to-check-undefined-property-javascript.md): Learn the correct way to check if a JavaScript object property is undefined using the typeof operator, which returns the string undefined for missing values. - [How to append an item to an array in JavaScript](https://flaviocopes.com/how-to-append-item-to-array.md): Learn the ways to append an item to an array in JavaScript: use push() to mutate the original array, or concat() to return a new array with the items added. - [How to remove a property from a JavaScript object](https://flaviocopes.com/how-to-remove-object-property-javascript.md): There are various ways to remove a property from a JavaScript object. Find out the alternatives and the suggested solution - [How to redirect to another web page using JavaScript](https://flaviocopes.com/how-to-redirect-using-javascript.md): Learn how to redirect to another page in JavaScript, with window.location and its href, assign(), and replace() methods, plus why true 301s need the server. - [JavaScript Immediately-invoked Function Expressions (IIFE)](https://flaviocopes.com/javascript-iife.md): Learn what an Immediately-invoked Function Expression (IIFE) is in JavaScript, its syntax, and how it isolates variables without polluting the global object. - [JavaScript Strict Mode](https://flaviocopes.com/javascript-strict-mode.md): Learn what JavaScript strict mode is, how to enable it with the 'use strict' directive, and how it helps catch mistakes like accidental globals. - [How to get the current timestamp in JavaScript](https://flaviocopes.com/how-to-get-timestamp-javascript.md): Learn how to get the current UNIX timestamp in JavaScript with Date.now(), and how to convert it from milliseconds to seconds using Math.floor(). - [this in JavaScript](https://flaviocopes.com/javascript-this.md): Learn how the value of this changes in JavaScript depending on where you use it, from undefined in strict mode to the object it is bound to inside a method. - [How to convert a string to a number in JavaScript](https://flaviocopes.com/how-to-convert-string-to-number-javascript.md): Learn how to convert a string to a number in JavaScript using the Number object, parseInt() and parseFloat(), the unary plus, or multiplying by 1 for speed. - [How to format a number as a currency value in JavaScript](https://flaviocopes.com/how-to-format-number-as-currency-javascript.md): Learn how to format a number as a currency value in JavaScript using Intl.NumberFormat, setting the locale, currency code, and minimumFractionDigits. - [How to uppercase the first letter of a string in JavaScript](https://flaviocopes.com/how-to-uppercase-first-letter-javascript.md): Learn how to uppercase the first letter of a string in JavaScript by combining charAt(0).toUpperCase() with slice(1), wrapped in a capitalize() function. - [Unicode in JavaScript](https://flaviocopes.com/javascript-unicode.md): Learn how to work with Unicode in JavaScript, learn what Emojis are made of, ES6 improvements and some pitfalls of handling Unicode in JS - [Introduction to Unicode and UTF-8](https://flaviocopes.com/unicode.md): Unicode is an industry standard for consistent encoding of written text. Learn the basics and most important parts of it, in particular concerning UTF-8 - [The Beginner's Guide to Meteor](https://flaviocopes.com/meteor.md): A beginner's guide to Meteor, the full-stack JavaScript platform for real-time web apps, covering its principles, reactivity, package system, and meteor CLI. - [How to deep clone a JavaScript object](https://flaviocopes.com/how-to-clone-javascript-object.md): JavaScript offers many ways to copy an object, but not all provide deep copy. Learn the most efficient way, and also find out all the options you have - [How to remove an item from an Array in JavaScript](https://flaviocopes.com/how-to-remove-item-from-array.md): JavaScript offers many ways to remove an item from an array. Learn the canonical way, and also find out all the options you have, using plain JavaScript - [How to check if a string contains a substring in JavaScript](https://flaviocopes.com/how-to-string-contains-substring-javascript.md): Learn how to check if a string contains a substring in JavaScript, the modern way with the includes() method, or the pre-ES6 way with indexOf() and !== -1. - [How to use JavaScript Regular Expressions](https://flaviocopes.com/javascript-regular-expressions.md): Learn everything about JavaScript Regular Expressions with this brief guide that summarizes the most important concepts and shows them off with examples - [A tutorial to JavaScript Arrow Functions](https://flaviocopes.com/javascript-arrow-functions.md): Learn how JavaScript arrow functions work, from their short syntax and implicit return to how they handle this differently from regular functions. - [JavaScript Closures explained](https://flaviocopes.com/javascript-closures.md): Learn how closures work in JavaScript: a function runs with the lexical scope where it was defined, so it remembers and can access its parent scope variables. - [The JavaScript Glossary](https://flaviocopes.com/javascript-glossary.md): A glossary of JavaScript terms every developer should know, from asynchronous code and callbacks to scoping, immutability, polyfills, and tree shaking. - [JavaScript Functions](https://flaviocopes.com/javascript-functions.md): Learn all about JavaScript functions: declaration syntax, parameters, return values, nested functions, object methods, arrow functions, IIFEs, and hoisting. - [The JavaScript Event Loop](https://flaviocopes.com/javascript-event-loop.md): The Event Loop is one of the most important aspects to understand about JavaScript. This post explains it in simple terms - [Write JavaScript loops using map, filter, reduce and find](https://flaviocopes.com/javascript-loops-map-filter-reduce-find.md): Learn how to replace JavaScript loops with a functional approach using map(), filter(), reduce(), and find() to process arrays declaratively, not imperatively. - [JavaScript Loops](https://flaviocopes.com/javascript-loops.md): JavaScript provides many way to iterate through loops. This tutorial explains all the various loop possibilities in modern JavaScript - [JavaScript Events Explained](https://flaviocopes.com/javascript-events.md): Learn how JavaScript events work in the browser, from registering handlers with addEventListener to the Event object, bubbling, capturing, and throttling. - [Discover JavaScript Timers](https://flaviocopes.com/javascript-timers.md): Learn how to schedule code to run later in JavaScript with setTimeout and setInterval, pass arguments to your callback, and cancel a timer by its id. - [JavaScript Expressions](https://flaviocopes.com/javascript-expressions.md): Expressions are units of code that can be evaluated and resolve to a value. Expressions in JS can be divided in categories. - [Roadmap to Learn JavaScript](https://flaviocopes.com/javascript.md): A roadmap to learn JavaScript from the basics to advanced topics, covering types, functions, async programming with promises, events, and the web platform. - [A guide to JavaScript Template Literals](https://flaviocopes.com/javascript-template-literals.md): Introduced in ES2015, aka ES6, Template Literals offer a new way to declare strings, but also some new interesting constructs which are already widely popular. - [The Set JavaScript Data Structure](https://flaviocopes.com/javascript-data-structures-set.md): Learn how to use the Set data structure introduced in ES6 to store a collection of unique values, add, check and delete items, iterate them, and the WeakSet. - [The Map JavaScript Data Structure](https://flaviocopes.com/javascript-data-structures-map.md): Learn how to use the Map data structure introduced in ES6 to associate values with any key, add, get and delete items, iterate entries, plus WeakMap. - [JavaScript Loops and Scope](https://flaviocopes.com/javascript-loops-and-scope.md): Learn the classic JavaScript loops and scope gotcha where var captures the wrong value inside callbacks, and how using let in the loop fixes it cleanly. - [How to use async/await in JavaScript](https://flaviocopes.com/javascript-async-await.md): Learn how to use async/await in JavaScript, the ES2017 syntax built on promises that makes asynchronous code look synchronous and easier to read and debug. - [An introduction to Functional Programming with JavaScript](https://flaviocopes.com/javascript-functional-programming.md): Learn functional programming in JavaScript: first class and higher order functions, immutability, pure functions, map and reduce, recursion, and composition. - [A list of sample Web App Ideas](https://flaviocopes.com/sample-app-ideas.md): A big list of sample web app ideas to build for tutorials and practice, from a weight tracker, calculator, and notes app to AI-powered apps and API clients. - [JavaScript Variables](https://flaviocopes.com/javascript-variables.md): A variable is a literal assigned to an identifier, so you can reference and use it later in the program. Learn how to declare one with JavaScript - [JavaScript Types](https://flaviocopes.com/javascript-types.md): JavaScript does have types: learn the primitive types like number, string, boolean, symbol, null and undefined, plus object types, and how typeof works. - [The Lexical Structure of JavaScript](https://flaviocopes.com/javascript-lexical-structure.md): A deep dive into the building blocks of JavaScript: unicode, semicolons, white space, case sensitivity, comments, literals, identifiers and reserved words - [How to use promises in JavaScript](https://flaviocopes.com/javascript-promises.md): Learn how to use JavaScript promises to handle asynchronous code without too many callbacks, covering the pending, resolved and rejected states and chaining. - [The Complete ECMAScript 2015-2019 Guide](https://flaviocopes.com/ecmascript.md): ECMAScript is the standard upon which JavaScript is based, and it's often abbreviated to ES. Discover everything about ECMAScript and its latest features - [Introduction to the JavaScript Programming Language](https://flaviocopes.com/javascript-introduction.md): An introduction to JavaScript, the most popular programming language in the world: its history since 1995, what makes it high level and dynamic, and versions. - [An introduction to JavaScript Arrays](https://flaviocopes.com/javascript-array.md): Learn the basics of JavaScript arrays: create them with literals or the Array constructor, access elements by index, and build multi-dimensional arrays. - [JavaScript Coding Style](https://flaviocopes.com/javascript-coding-style.md): This JavaScript Coding Style is the set of conventions I use every day when using JavaScript. It's a live document, with the main set of rules I follow - [How to upload files to the server using JavaScript](https://flaviocopes.com/file-upload-using-ajax.md): Learn how to upload files to the server with JavaScript using FormData and the Fetch API, then handle them in Node.js and Express with express-fileupload. - [Deferreds and Promises in JavaScript (+ Ember.js example)](https://flaviocopes.com/deferreds-and-promises-in-javascript.md): Learn how Promises and Deferreds work in JavaScript, moving through pending, resolved, and rejected states, with jQuery Deferred and AJAX examples. - [Things to avoid in JavaScript (the bad parts)](https://flaviocopes.com/things-to-avoid-in-javascript-bad-parts.md): A list of things to avoid when writing JavaScript, like using new Object() over literals, == instead of ===, eval, with, and editing built-in prototypes. ## Laravel - [Creating CLI commands in Laravel](https://flaviocopes.com/creating-cli-commands-in-laravel.md): Learn how to create your own Artisan CLI commands in Laravel with php artisan make:command, defining the command signature and its handle() method. - [Deploying a site to Laravel Forge](https://flaviocopes.com/deploying-a-site-to-laravel-forge.md): Learn how to deploy a Laravel app with Laravel Forge and DigitalOcean: create a server, connect GitHub, set env vars, and run the deploy script. - [Only authenticated users can add items to the database](https://flaviocopes.com/only-authenticated-users-can-add-items-to-the-database.md): Learn how to restrict data changes in Laravel so only authenticated users can add or delete records, using Auth::check and the @auth and @guest directives. - [Setting up authentication using Laravel Breeze](https://flaviocopes.com/setting-up-authentication-using-laravel-breeze.md): Learn how to add authentication to a Laravel app with Breeze, scaffolding registration, login, and a dashboard with php artisan breeze:install. - [Using Tailwind CSS with Laravel](https://flaviocopes.com/using-tailwind-css-with-laravel.md): Learn how to set up Tailwind CSS in a Laravel project with Vite, installing the packages, adding the @tailwind directives, and running npm run dev to compile. - [Store form input in the database with Laravel](https://flaviocopes.com/using-forms-to-accept-user-input-and-store-it-into-the-database.md): Learn how to build a Laravel form that stores user input in the database using an Eloquent model, a controller, routes, and a Blade view to display it. - [Dynamic routes in Laravel](https://flaviocopes.com/dynamic-routes-in-laravel.md): Learn how to create dynamic routes in Laravel using a route segment like {slug}, pass it to your Blade view, and load the matching record with the model. - [Laravel migrations: create and modify a database schema](https://flaviocopes.com/how-to-use-migrations-to-create-and-modify-the-database-schema.md): Learn how to use Laravel migrations to create and modify your database schema with php artisan make:migration and migrate, and roll back changes when needed. - [Connecting a database to Laravel](https://flaviocopes.com/connecting-a-database-to-laravel.md): Learn how to connect a database to Laravel the easy way with SQLite, by setting DB_CONNECTION=sqlite in your .env so a file is created on first migration. - [How to use Blade templates in Laravel](https://flaviocopes.com/how-to-use-blade-templates-in-laravel.md): An introduction to Blade templates in Laravel: learn the double-brace syntax for printing data, plus directives for conditionals, loops, and authentication. - [Introduction to Laravel](https://flaviocopes.com/introduction-to-laravel.md): An introduction to Laravel: set up PHP and Composer, create a project, run it with php artisan serve, and learn how routes and Blade views render your pages. - [Fix Cloudflare 'too many redirects' on Laravel Forge SSL](https://flaviocopes.com/site-deployed-on-laravel-forge-and-dns-on-cloudflare-saying-too-many-redirects-after-setting-up-ssl-tls.md): Fix the too many redirects error on a Laravel Forge site with Cloudflare DNS by switching the SSL/TLS encryption mode from Flexible to Full (strict). ## Mac - [How I investigated why my iPhone was running hot](https://flaviocopes.com/debug-iphone-running-hot.md): I used USB diagnostics, crash reports, and Xcode Instruments to investigate a hot iPhone, but the evidence did not reveal one clear cause. - [Freeing space on a Mac](https://flaviocopes.com/freeing-space-on-a-mac.md): How I freed up space on my Mac using OmniDiskSweeper to find the biggest folders, then deleting Homebrew caches, leftover app data, and unused apps. - [Concatenating videos on macOS](https://flaviocopes.com/concatenating-videos-on-macos.md): Learn how to concatenate multiple videos into one file on macOS using a single ffmpeg concat command, with QuickTime Player as a fallback when it fails. - [Fix files creation date in macOS](https://flaviocopes.com/fix-files-creation-date-in-macos.md): Learn how to fix the creation date of files in macOS using the SetFile -d command, handy for GoPro videos or photos that ended up with the wrong date. - [Removing all Homebrew stuff](https://flaviocopes.com/removing-all-homebrew-stuff.md): How I removed every Homebrew package to free up space, using brew remove --force with brew list to wipe all formulae and casks, then reinstalled what I needed. - [How to play a sound from the macOS command line](https://flaviocopes.com/how-to-play-a-sound-from-the-macos-command-line.md): Learn how to play a sound from the macOS command line with the built-in afplay command, control the playback rate, and make your Mac talk with say. - [AppleScript by example, episode 1](https://flaviocopes.com/applescript-by-example-episode-1.md): Learn AppleScript by example with a script that grabs the front Finder window path and opens it in Terminal, then run it from the shell with osascript. - [How to concatenate strings in AppleScript](https://flaviocopes.com/how-to-concatenate-strings-in-applescript.md): Learn how to concatenate strings in AppleScript using the & operator instead of the + you might expect from JavaScript, Swift, or Python. - [How to find the bundle ID of a Mac app](https://flaviocopes.com/how-to-find-the-bundle-id-of-a-mac-app.md): Learn how to find the bundle ID of a Mac app, the reverse-domain string like com.apple.finder, by running osascript with the id of app AppleScript command. - [How to add an “Open in Terminal” icon in macOS Finder](https://flaviocopes.com/how-to-add-an-open-in-terminal-icon-in-macos-finder.md): Learn how to add an Open in Terminal button to the macOS Finder toolbar using an Automator app that runs AppleScript to cd into the current folder. - [How to add an “Open in VS Code” icon in macOS Finder](https://flaviocopes.com/how-to-add-an-open-in-vs-code-icon-in-macos-finder.md): Learn how to add an Open in VS Code button to the macOS Finder toolbar using an Automator app that runs a shell script with osascript and the open command. - [Run a Node.js script from your macOS menu bar](https://flaviocopes.com/run-a-nodejs-script-from-your-macos-menu-bar.md): Learn how to run a Node.js script from the macOS menu bar using AppleScript and the Script Editor, with a do shell script command. - [How to hide a file or folder in macOS Finder ](https://flaviocopes.com/macos-hide-files-folders.md): Learn how to hide a file or folder in the macOS Finder from the terminal using chflags hidden, and how to make it visible again with chflags nohidden. - [Take screenshots as JPG on macOS](https://flaviocopes.com/macos-screenshots-jpg.md): Learn how to make macOS save screenshots as JPG instead of PNG with the defaults write com.apple.screencapture type jpg command to shrink huge files. - [How to remove the shadow from window screenshots in macOS](https://flaviocopes.com/remove-shadow-macos-screenshots.md): Learn how to remove the drop shadow from macOS window screenshots with a single defaults write com.apple.screencapture disable-shadow terminal command. - [Convert an image or resize it using macOS Shortcuts](https://flaviocopes.com/macos-shortcuts-images.md): Learn how to convert any image to JPG or resize it on macOS using the Shortcuts app, set up as a Finder Quick Action you can trigger with a right-click. - [Why Safari is a great browser](https://flaviocopes.com/safari-is-great.md): Why Safari became my main browser, from Sign in with Apple and Apple Pay to power efficiency, privacy, and reader mode, and how it holds up for development. - [Low data mode](https://flaviocopes.com/low-data-mode.md): A look at how iOS low data mode saves bandwidth when using an iPhone hotspot or roaming, and why I wish macOS had the same option to curb background downloads. - [A way to set up automations in macOS easily](https://flaviocopes.com/macos-easy-automations.md): Learn an easy way to set up automations on macOS using Automator and a Calendar alert to run a daily task, like backing up a SQLite database file. - [Reverting a file to a previous version, on a Mac](https://flaviocopes.com/macos-revert-file-version.md): Learn how to revert a file to a previous version on a Mac using the File, Revert To menu and the Time Machine view to browse and restore older saves. - [Fix the Fish shell 'terminated by signal SIGKILL' error](https://flaviocopes.com/fix-fish-shell-error-terminated-bysignal-sigkill.md): Learn how to fix the Fish shell error terminated by signal SIGKILL Forced quit, which I hit running npx, by closing the terminal and opening a new shell. - [Setup your website to allow full-screen on iOS](https://flaviocopes.com/website-ios-full-screen.md): Learn how to set up a website to run full screen from the iOS home screen, by adding the apple-mobile-web-app-capable meta tag so it opens without Safari UI. - [Fix 'Rails is not currently installed on this system' on macOS](https://flaviocopes.com/error-rails-not-currently-installed-macos.md): How to fix the 'Rails is not currently installed on this system' error on macOS by installing rvm, then using it to install Ruby and Rails and sourcing rvm. - [Fix 'Your CLT does not support macOS 11' error](https://flaviocopes.com/how-to-fix-clt-support-macos-11.md): How to fix the Homebrew 'Your CLT does not support macOS 11' error by removing the Command Line Tools and reinstalling them with xcode-select --install. - [How to install a local SSL certificate in macOS](https://flaviocopes.com/macos-install-ssl-local.md): Learn how to install and trust a local SSL certificate in macOS so your browser stops warning on HTTPS, by adding it to the System keychain in Chrome. - [Productivity gains of using a Mac and an iOS device](https://flaviocopes.com/macos-productivity-tips.md): How the Apple ecosystem boosts my productivity every day, from AirDrop and Universal Clipboard to instant hotspot and snapping iPhone photos into Finder. - [How to install an older version of a Homebrew package](https://flaviocopes.com/homebrew-install-older-version.md): Learn how to install an older version of a Homebrew package by finding the formula's old .rb file on GitHub and passing its raw URL straight to brew install. - [How to use the macOS terminal](https://flaviocopes.com/macos-terminal.md): The terminal is one key piece of your programming arsenal. It allows you to perform tasks that are otherwise impossible to achieve. ## Networking - [How to update Pi-hole](https://flaviocopes.com/how-to-update-pihole.md): Learn how to update Pi-hole on your Raspberry Pi by running the pihole -up command over SSH, and how to automate it on a schedule with a cron job. - [What is a reverse proxy?](https://flaviocopes.com/reverse-proxy.md): Learn what a reverse proxy is and what it is useful for, from routing requests to internal Node.js services with Nginx to caching, SSL, and load balancing. - [Nginx reverse proxy for multiple Node.js apps in subfolders](https://flaviocopes.com/nginx-reverse-proxy.md): Learn how to set up an nginx reverse proxy so multiple Node.js apps can run on different ports yet be served from subfolders under one domain. - [How to configure Nginx for HTTPS](https://flaviocopes.com/nginx-https-certbot.md): Learn how to set up HTTPS on your Nginx web server using Certbot to obtain a free Let's Encrypt SSL certificate, then configure Nginx to serve it securely. - [How to generate a local SSL certificate](https://flaviocopes.com/how-to-generate-local-ssl-cert.md): Learn how to generate a local SSL certificate with openssl, creating cert.pem and key.pem, then load them in an Express HTTPS server or create-react-app. - [An introduction to REST APIs](https://flaviocopes.com/rest-api.md): An introduction to REST APIs: how endpoints and routes work, how GET, POST, PUT, and DELETE map to actions, and what HTTP status codes you return. - [The UDP Protocol](https://flaviocopes.com/udp.md): A high level overview of UDP, the connectionless User Datagram Protocol that is faster but less reliable than TCP, and powers DNS, DHCP, and HTTP/3. - [The TCP Protocol](https://flaviocopes.com/tcp.md): A high level overview of TCP, the connection-oriented Transfer Control Protocol behind the web, covering its handshake, reliability, and the role of ports. - [DNS, Domain Name System](https://flaviocopes.com/dns.md): A high-level overview of how DNS, the Domain Name System, maps domain names to IP addresses through a tree of servers starting at the root DNS server. - [What is a port](https://flaviocopes.com/ports.md): Learn what a port is in networking, how it lets many apps share one machine, and the default ports like 80 for HTTP and 443 for HTTPS out of 65535 total. - [The HTTP/2 protocol](https://flaviocopes.com/http-2.md): Learn how the HTTP/2 protocol speeds up the web with request multiplexing, header compression, server push and binary framing, plus a look at HTTP/3. - [What is a CDN?](https://flaviocopes.com/cdn.md): Learn what a CDN (Content Delivery Network) is: a network of servers spread worldwide that cache your assets near users to cut latency and speed up your site. - [The HTTP Status Codes List](https://flaviocopes.com/http-status-codes.md): Every HTTP response comes with a status code that signals with a clear number information about how the request was processed - [Caching in HTTP](https://flaviocopes.com/http-caching.md): Learn how HTTP caching works, from the Cache-Control and Expires headers to conditional GET requests with If-Modified-Since, ETag and 304 Not Modified. - [The curl guide to HTTP requests](https://flaviocopes.com/http-curl.md): Learn how to use curl to make HTTP requests from the command line, including GET and POST, sending JSON, following redirects with -L and HTTP authentication. - [The HTTPS protocol](https://flaviocopes.com/https.md): Learn how the HTTPS protocol encrypts your traffic to stop man-in-the-middle attacks, the role of TLS, what stays unencrypted, and why HTTP/2 makes it fast. - [The HTTP protocol](https://flaviocopes.com/http.md): Learn how the HTTP protocol powers the web, from its history and hyperlinks to the structure of a request, the GET, POST and other methods, and statelessness. - [What is an RFC?](https://flaviocopes.com/rfc.md): Learn what an RFC, or Request for Comments, is: the technical documents managed by the IETF that define Internet standards like IP, TCP, DNS, and OAuth. - [HTTP vs HTTPS](https://flaviocopes.com/http-vs-https.md): Learn the differences between HTTP and HTTPS, from end-to-end encryption and ports 80 and 443 to why HTTPS is actually faster thanks to HTTP/2 and SEO. - [The HTTP Response Headers List](https://flaviocopes.com/http-response-headers.md): A reference to the HTTP response headers, from Cache-Control, Content-Type, ETag and Location to Set-Cookie, Strict-Transport-Security and the CORS headers. - [The HTTP Request Headers List](https://flaviocopes.com/http-request-headers.md): Every HTTP request has a set of mandatory and optional headers. This post aims to list all those headers, and describe them. - [How HTTP requests work](https://flaviocopes.com/http-request.md): Learn what happens when you type a URL and press enter, from the DNS lookup and TCP handshake to sending the HTTP request and parsing the response HTML. - [Introduction to WebSockets](https://flaviocopes.com/websockets.md): Learn how WebSockets give you a long-lived, bidirectional channel between client and server, how they differ from HTTP, and how to open a connection with wss. ## News - [The Summer of Code, update #2](https://flaviocopes.com/the-summer-of-code-update-2.md): Four days after my first Summer of Code update: 73 more tools, 12 quiz courses, fstack, a rebuilt Cook with AI, and a Git work log. - [inferencecost.dev: what will AI inference cost you at 10k users?](https://flaviocopes.com/inferencecost.md): I built inferencecost.dev, a calculator for the biggest line item in AI product budgets: LLM inference. Compare ~30 models under your workload assumptions. - [Sitebase: all the features your website needs, in one place](https://flaviocopes.com/sitebase.md): I'm building sitebase.dev: waiting lists, forms, newsletter signups, analytics, uptime monitoring and more, embedded in any site with one script. Currently in private beta. - [StackPlan: figure out where to deploy your app, and what it'll cost](https://flaviocopes.com/stackplan.md): I built stackplan.dev, a deployment stack advisor. Describe your app, get a recommended hosting stack with real cost estimates. Why I built it and how. - [The Summer of Code](https://flaviocopes.com/the-summer-of-code.md): July and August: no new courses, no launches, just building. A recap of the first week: StackPlan, 140+ free tools, Sitebase, the bootcamp platform, and a new 30 Days of Code course. - [New: 90 free tools for developers](https://flaviocopes.com/introducing-tools.md): I launched a new tools section on the site: 90 free calculators and utilities for developers, running entirely in your browser. No signup, no ads. - [The AI Workshop (July 2026 cohort)](https://flaviocopes.com/ai-workshop-jul-2026.md): The AI Workshop July 2026 cohort covers agents, Claude Code, Cursor, Codex, MCP, skills, subagents, and practical AI workflows. - [The AI Workshop (June 2026 cohort)](https://flaviocopes.com/ai-workshop-jun-2026.md): The AI Workshop June 2026 cohort is here, focused on practical AI workflows: agents, editor workflows, reviews, automation, MCP, skills, and subagents. - [The AI Workshop (May 2026 cohort)](https://flaviocopes.com/ai-workshop-may-2026.md): The AI Workshop May 2026 cohort enrolls May 1st to 5th, covering Claude Code, Cursor, Codex, MCP, spec-driven development, and AI-assisted reviews. - [The AI Workshop (Apr 2026 cohort)](https://flaviocopes.com/ai-workshop-apr-2026.md): The AI Workshop April 2026 cohort is open for enrollment April 1st to 5th, covering Codex plugins, Cursor Cloud Agents, Claude Cowork, and more AI tools. - [2026 Bootcamp](https://flaviocopes.com/2026-bootcamp.md): Reference: the 2026 AI-first Web Engineering Bootcamp, a 10-week project-based cohort that started on February 24, 2026. - [The AI Workshop (Feb 2026 cohort)](https://flaviocopes.com/ai-workshop-feb-2026.md): The AI Workshop February 2026 cohort is open, with new lessons on Claude Code, Git worktrees, skills, subagents, and tools like Conductor, Amp, and Zed. - [The AI Workshop (Jan 2026 cohort)](https://flaviocopes.com/ai-workshop-jan-2026.md): The AI Workshop January 2026 cohort is open, with new lessons on Claude Code Web, plugins, Cursor Bugbot and Debug Mode, GPT-5.2, and an AI glossary. - [The AI Workshop (Dec 2025 cohort)](https://flaviocopes.com/ai-workshop-dec-2025.md): The December 2025 AI Workshop cohort kicks off the new monthly format, covering Claude Code, Cursor, MCP, and models like Gemini 3, GPT 5.1, and Opus 4.5. - [The React Masterclass](https://flaviocopes.com/the-react-masterclass.md): A recap of the launch of my React Masterclass, a short, self-serve course that teaches you React and its ecosystem from the ground up. - [The TypeScript Masterclass](https://flaviocopes.com/the-typescript-masterclass.md): Announcing my TypeScript Masterclass, a text and video course that teaches TypeScript right from the start, treating it as the core rather than a JS add-on. - [The JavaScript Handbook (2025 edition)](https://flaviocopes.com/the-javascript-handbook-2025-edition.md): The 2025 edition of my free JavaScript Handbook is out, with modernized async content, clearer type coercion, and fixes to the examples and wording. - [The TypeScript Handbook (2025 edition)](https://flaviocopes.com/the-typescript-handbook-2025-edition.md): The 2025 edition of my TypeScript Handbook is out, adding type guards, generics, as const assertions, and a clear explanation of unknown versus any. - [The CSS Handbook (2025 edition)](https://flaviocopes.com/the-css-handbook-2025-edition.md): The 2025 edition of my free CSS Handbook is out, rewritten with modern selectors like :has(), :is(), and :where(), plus refreshed CSS fundamentals. - [The Node.js Handbook (2025 edition)](https://flaviocopes.com/the-nodejs-handbook-2025-edition.md): The 2025 edition of my free Node.js Handbook is out, fully rewritten to be beginner-friendly with complete coverage of Node.js v22 LTS and ES modules. - [The AI workshop was a success!](https://flaviocopes.com/ai-workshop-first-cohort-success.md): My first AI workshop cohort was a success, with hands-on Claude Code lessons for developers and solopreneurs. The next cohort starts in September. ## Next.js - [How to install shadcn-ui on latest Next.js beta-RC](https://flaviocopes.com/how-to-install-shadcn-ui-on-latest-nextjs-beta-rc.md): Installing shadcn/ui on the latest Next.js RC fails over dependencies, so here is how to force it with npx --force shadcn@latest init and add components. - [Next.js, passing an id to a server action](https://flaviocopes.com/passing-an-id-to-a-server-action.md): Learn two ways to pass an id to a Next.js server action: a hidden input read from FormData, or binding the id to the action with bind(). - [How to get the Request headers in Next.js app router](https://flaviocopes.com/how-to-get-the-request-headers-in-nextjs-app-router.md): Learn how to read request headers in the Next.js app router using the headers() function from next/headers in a Server Component, then pass them to clients. - [Next.js embed youtube video](https://flaviocopes.com/nextjs-embed-youtube-video.md): Learn how to embed a YouTube video in a Next.js page: just drop in an iframe pointing at the youtube.com/embed URL with the video id. - [Fix “Module not found: Can't resolve encoding” in Next.js](https://flaviocopes.com/fix-module-not-found-cant-resolve-encoding-in-nextjs.md): Fix the 'Module not found: Can't resolve encoding' error in Next.js, coming from node-fetch, by running npm install encoding to add the missing package. - [Revalidation and ISR gotcha on Vercel](https://flaviocopes.com/revalidation-and-isr-gotcha-on-vercel.md): A gotcha I hit with Next.js ISR on Vercel: revalidation runs in a separate serverless function that cannot write to the filesystem or see your build files. - [Fix PostCSS 'must export a plugins key' error in Next.js](https://flaviocopes.com/fix-postcss-export-plugins-key.md): How to fix the Next.js error Your custom PostCSS configuration must export a plugins key by adding a postcss.config.json file with an empty plugins array. - [How to run a script build time in Next.js](https://flaviocopes.com/nextjs-run-script-build-time.md): Learn how to run a script at build time in Next.js by adding a postbuild entry to your package.json scripts that runs a Node file after next build. - [How to fix error serializing Date object JSON in Next.js](https://flaviocopes.com/nextjs-serialize-date-json.md): Learn why Next.js throws a JSON serializable error when getServerSideProps returns a Date object, and how to fix it with JSON.parse(JSON.stringify(data)). - [Blank page after router.push() in Next.js?](https://flaviocopes.com/nextjs-blank-page-router-push.md): How to fix the blank page you get after calling router.push() in Next.js: stop using return with it, just call router.push() on its own line and nothing else. - [How I set up a Next.js project structure](https://flaviocopes.com/nextjs-project-structure.md): Learn how I organize a Next.js project beyond pages and public, with a components folder, a lib folder for utilities, and jsconfig.json absolute imports. - [Fix 'Constructor requires new operator' in Next.js](https://flaviocopes.com/nextjs-fix-constructor-requires-new-operator.md): Fix the Next.js TypeError Constructor requires 'new' operator, which usually means you used the next/image Image component without importing it at the top. - [Fix the 'module not found' error in Next.js](https://flaviocopes.com/nextjs-fix-module-not-found.md): Fix the Next.js Module not found: Can't resolve 'net' error, caused by running backend code on the client; move that library call into getStaticProps instead. - [Next.js blank page after res.redirect()](https://flaviocopes.com/nextjs-fix-blank-page-redirect.md): Fix the blank page you get after calling res.redirect() in a Next.js API route on Vercel by switching to res.writeHead() with a 302 Location header instead. - [How to parse Markdown in Next.js](https://flaviocopes.com/nextjs-parse-markdown.md): Learn how to parse Markdown in Next.js using marked, dompurify, and jsdom, running DOMPurify.sanitize() inside getStaticProps so it works server-side in Node. - [How to add Google Analytics 4 to Next.js](https://flaviocopes.com/nextjs-google-analytics.md): Learn how to add Google Analytics 4 to Next.js by tracking route changes with gtag in a _app.js useEffect and injecting the GA script from _document.js. - [How to upload files in a Next.js form](https://flaviocopes.com/nextjs-upload-files.md): Learn how to handle file uploads in a Next.js form by parsing multipart data with next-connect and multiparty middleware and disabling the default bodyParser. - [Next.js, adding features just to development mode](https://flaviocopes.com/nextjs-development-only.md): Learn how to enable features only in development mode in Next.js by checking process.env.NODE_ENV, so API routes, pages, or JSX stay hidden in production. - [Next.js, how to open a link in a new window](https://flaviocopes.com/nextjs-open-link-new-window.md): Learn how to open a link in a new window in Next.js by adding a target attribute set to _blank on the inner a tag while href stays on the Link component. - [How to add ReCaptcha to a Next.js form](https://flaviocopes.com/nextjs-recaptcha.md): Learn how to add Google reCAPTCHA v2 to a Next.js form with the react-google-recaptcha component and validate the token server-side via the siteverify API. - [Next.js Email Authentication using NextAuth](https://flaviocopes.com/nextjs-email-authentication.md): Learn how to add email-based authentication to Next.js with NextAuth.js, from configuring an SMTP email provider and JWT sessions to the useSession hook. - [Cache data globally in Next.js at build time](https://flaviocopes.com/nextjs-cache-data-globally.md): Learn how to cache API data globally in Next.js at build time by writing it to a local JSON file with fs and reading it from getStaticProps on every page. - [Fix 'Already 10 Prisma Clients are actively running'](https://flaviocopes.com/nextjs-fix-prismaclient-unable-run-browser.md): Fix the Next.js Already 10 Prisma Clients are actively running error by exporting one shared PrismaClient instance from lib/prisma.js and reusing it. - [Fix 'PrismaClient is unable to be run in the browser' in Next.js](https://flaviocopes.com/nextjs-fix-already-10-prisma-clients.md): Fix the Next.js error PrismaClient is unable to be run in the browser by keeping Prisma code and its import inside getStaticProps on a page route only. - [Absolute imports in Next.js](https://flaviocopes.com/nextjs-absolute-imports.md): Learn how to set up absolute imports in Next.js by adding a jsconfig.json file with baseUrl set to the project root, so you can drop those relative paths. - [How to programmatically change a route in Next.js](https://flaviocopes.com/nextjs-programmatically-change-route.md): Learn how to programmatically change a route in Next.js with the useRouter hook and router.push(), or the Router object when you are outside a component. - [How to force a page refresh in Next.js](https://flaviocopes.com/nextjs-force-page-refresh.md): Learn how to force a full page refresh in Next.js with the useRouter hook and router.reload(), or the imported Router object when you are outside a component. - [Next.js: show in development, hide in production](https://flaviocopes.com/nextjs-show-something-only-in-dev.md): Learn how to show content only in development and hide it in production in Next.js by checking process.env.NODE_ENV and conditionally rendering on that flag. - [Fix Next.js component state not refreshing on navigation](https://flaviocopes.com/nextjs-refresh-state-navigation.md): Fix Next.js component state that does not refresh when you navigate by adding key={router.asPath} to the Component in _app.js so React remounts the page. - [Fix the 'can't resolve module' error in Next.js](https://flaviocopes.com/nextjs-module-not-found.md): Fix the Next.js Module not found: Can't resolve 'fs' error, which happens when you import a Node module helper but never call it inside getStaticProps(). - [Fix Tailwind 'unable to resolve dependency tree' in Next.js](https://flaviocopes.com/nextjs-tailwind-resolve-dependency-tree.md): Learn how to fix the unable to resolve dependency tree error when installing Tailwind in a Next.js project by installing tailwindcss@latest and postcss@latest. - [How to change a Next.js app port](https://flaviocopes.com/nextjs-change-app-port.md): Learn how to change the port a Next.js app runs on in development, away from the default 3000, by editing the dev script in package.json to use next dev -p. - [How to get cookies server-side in a Next.js app](https://flaviocopes.com/nextjs-cookies.md): Learn how to read cookies during server-side rendering in Next.js by forwarding ctx.req.headers.cookie to your Axios request inside getInitialProps for auth. - [How to use Next.js API Routes](https://flaviocopes.com/nextjs-api-routes.md): Learn how to use Next.js API routes to build backend endpoints inside your app, writing Node.js handlers in /pages/api that return JSON, with dynamic routing. - [How to use the Next.js Router](https://flaviocopes.com/nextjs-router.md): Learn how to use the Next.js Router from next/router to change routes programmatically, calling useRouter to access the push() and prefetch() methods. - [The Next.js App Bundles](https://flaviocopes.com/nextjs-app-bundles.md): Learn how Next.js splits your app code into separate JavaScript bundles like index.js, _app.js, webpack.js, and main.js, and what each preloaded file contains. - [The icons added by Next.js to your app](https://flaviocopes.com/nextjs-bottom-icon.md): Learn what the little icons Next.js shows in development mode mean: the lightning marks a prerendered, statically optimized page, the triangle a live compile. - [Adding a wrapper component to your Next.js app](https://flaviocopes.com/nextjs-wrapper-component.md): Learn how to add a wrapper layout component in Next.js to share a nav and sidebar across pages, comparing a higher order component with a props approach. - [Lazy loading modules in Next.js](https://flaviocopes.com/nextjs-lazy-load-modules.md): Learn how to lazy load heavy modules in Next.js with dynamic imports, so a large dependency like Moment.js does not bloat your page bundle and slow first load. - [How to analyze the Next.js app bundles](https://flaviocopes.com/nextjs-analyze-app-bundle.md): Learn how to analyze your Next.js app bundles using @next/bundle-analyzer and cross-env scripts, so you can see exactly what code ends up in each bundle. - [Deploying a Next.js app in production](https://flaviocopes.com/nextjs-deploy-to-production.md): Learn how to build and run the production version of a Next.js app with npm run build and npm run start, getting optimized, prerendered static HTML pages. - [Run code only on server or client in Next.js](https://flaviocopes.com/nextjs-server-client-code.md): Learn how to run code only on the server or only on the client in Next.js by checking typeof window, and how Next.js strips server-only blocks from bundles. - [Deploying a Next.js application on Now](https://flaviocopes.com/nextjs-deploy-on-now.md): Learn how to deploy a Next.js app with Now, the platform from the makers of Next.js (now Vercel), using the Now CLI to log in and ship to a now.sh URL. - [Next.js: populate the head tag with custom tags](https://flaviocopes.com/nextjs-customize-head.md): Learn how to customize the head tag in a Next.js page using the Head component from next/head to set the title, meta tags, and any HTML you want in the header. - [View source to confirm SSR is working in Next.js](https://flaviocopes.com/nextjs-ssr.md): Learn how to confirm server-side rendering is working in your Next.js app by viewing the page source and spotting your rendered HTML, plus why SSR helps SEO. - [Using the router to detect the active link in Next.js](https://flaviocopes.com/nextjs-active-link.md): Learn how to detect the active link in Next.js with useRouter and router.pathname, then assign a CSS class to highlight the current page in your navigation. - [Prefetching content in Next.js](https://flaviocopes.com/nextjs-prefetching.md): Learn how Next.js prefetching works: the Link component automatically prefetches in-viewport pages in production, and how to opt out with prefetch set to false. - [Styling Next.js components using CSS](https://flaviocopes.com/nextjs-styling-components-css.md): Learn how to style Next.js components with the built-in styled-jsx library, writing scoped CSS inside a style jsx block so it only affects that one component. - [Feed data to a Next.js component using getInitialProps](https://flaviocopes.com/nextjs-getinitialprops.md): Learn how to feed data to a Next.js component with getInitialProps, which supplies props up front and makes server-side rendering work for dynamic routes. - [Dynamic content in Next.js with the router](https://flaviocopes.com/nextjs-dynamic-content.md): Learn how to serve dynamic content in Next.js with dynamic routes, creating a pages/blog/[id].js file and reading router.query.id through the useRouter hook. - [Linking two pages in Next.js using Link](https://flaviocopes.com/nextjs-link-two-pages.md): Learn how to link two pages in Next.js with the Link component, how the pages folder maps to URLs, and how automatic code splitting keeps bundles small. - [How to install Next.js](https://flaviocopes.com/how-to-install-nextjs.md): Learn how to install Next.js from scratch, from setting up Node and npm to running npm install next react react-dom and starting the Next dev server. - [Next.js vs Gatsby vs create-react-app](https://flaviocopes.com/next-vs-gatsby-vs-cra.md): Compare Next.js, Gatsby, and create-react-app: how Gatsby builds static sites while Next.js server-renders dynamic apps on Node.js, and where each one fits. - [Getting started with Next.js, a tutorial](https://flaviocopes.com/nextjs.md): Next.js is a very popular Node.js framework which enables an easy server-side React rendering, and provides many other amazing features ## Node.js - [Bumping Node.js dependencies](https://flaviocopes.com/bumping-nodejs-dependencies.md): Learn how to update your package.json dependencies with npm-check-updates (ncu) and taze, targeting only minor or patch versions to avoid breaking changes. - [Fix node modules import errors in VS Code](https://flaviocopes.com/fix-node-modules-import-errors-in-vs-code.md): How to fix the Cannot find module fs error in VS Code by installing the @types/node package as a dev dependency and reloading the editor window. - [Fix Node.js imports types errors in VS Code](https://flaviocopes.com/fix-nodejs-imports-types-errors-in-vs-code.md): How to fix VS Code complaining that Node.js types cannot be found, by installing @types/node, adding it to tsconfig, and restarting the editor. - [How to click a link with a specific text with Puppeteer](https://flaviocopes.com/how-to-click-a-link-with-a-specific-text-with-puppeteer.md): Learn how to click a link or button by its text in Puppeteer using page.$x with an XPath contains() selector, handy for a cookie Accept all button. - [How to do a screenshot using Puppeteer](https://flaviocopes.com/how-to-do-a-screenshot-using-puppeteer.md): Learn how to take a screenshot with Puppeteer using the page.screenshot() method, set a path to save the file, and add the fullPage option for the whole page. - [Save some text to a file in Node.js](https://flaviocopes.com/save-some-text-to-a-file-in-nodejs.md): Learn how to save text to a file in Node.js using the fs module and the writeFile method, with a simple example that handles errors and confirms when done. - [nodemailer, how to embed an image into an email](https://flaviocopes.com/nodemailer-how-to-embed-an-image-into-an-email.md): Learn how to embed an image in a nodemailer email by reading it with fs.readFileSync, encoding it as a base64 data URI, and dropping it into the HTML body. - [How to send an email using nodemailer](https://flaviocopes.com/how-to-send-an-email-using-nodemailer.md): Learn how to send an email from Node.js using nodemailer, from creating an SMTP transporter to defining the message options and sending your first email. - [Restarting a Node process without file changes](https://flaviocopes.com/restarting-a-node-process-without-file-changes.md): Learn how to make nodemon restart a Node process after a crash, not just on file changes, with a trick that runs touch on your app file when it exits. - [How to turn an image into a data URI string](https://flaviocopes.com/how-to-turn-an-image-into-a-data-uri-string.md): Learn how to turn an image file into a data URI string in Node.js by reading it and base64-encoding it with Buffer, then embed it directly inside an img tag. - [How to get an image width and height using Node](https://flaviocopes.com/how-to-get-an-image-width-and-height-using-node.md): Learn how to get an image width and height in Node.js using the image-size npm module and its sizeOf() function, which reads the file from its location. - [How to download an image from URL in Node](https://flaviocopes.com/how-to-download-an-image-from-url-in-node.md): Learn how to download an image from a URL in Node.js using the https module, streaming the response into a write stream with pipe() and handling redirects. - [Logging all the requests coming through an Express app](https://flaviocopes.com/logging-all-the-requests-coming-through-an-express-app.md): Learn how to log all the requests coming through an Express app, using the express-requests-logger middleware or a simple custom middleware function. - [Axios crashes the Node.js process when the request fails](https://flaviocopes.com/axios-crashes-the-nodejs-process-when-the-request-fails.md): Fix axios crashing your Node.js process when a request fails by adding a .catch() handler to the promise so the rejected request is handled instead. - [Ubuntu how to upgrade Node.js](https://flaviocopes.com/ubuntu-how-to-upgrade-nodejs.md): Learn how to upgrade Node.js on Ubuntu using the NodeSource setup script with curl and apt-get, and how to pick the LTS or current version you want. - [Optimize images from a Node.js script](https://flaviocopes.com/optimize-images-from-a-nodejs-script.md): Learn how to optimize images from a Node.js script with sharp, converting a PNG to lossless webp and resizing or rotating it in just a few lines. - [Calling the ImageOptim macOS app from a Node.js script](https://flaviocopes.com/calling-the-imageoptim-macos-app-from-a-nodejs-script.md): Learn how to launch the ImageOptim macOS app from a Node.js script using the child_process module and the open -a command to optimize a folder of images. - [How to execute a shell command using Node.js](https://flaviocopes.com/how-to-execute-a-shell-command-using-nodejs.md): Learn how to run a shell command from a Node.js script by importing the child_process module and calling child.exec() with the command you want to run. - [How to use .env files in Node.js with import syntax](https://flaviocopes.com/how-to-use-env-files-in-nodejs-with-import-syntax.md): Learn how to use a .env file in a Node.js project with ES modules import syntax by installing the dotenv package and calling dotenv.config() in your script. - [How to download and save an image using Node.js](https://flaviocopes.com/how-to-download-and-save-an-image-using-nodejs.md): Learn how to download and save an image in Node.js with Axios by requesting it as a stream and piping the response into a file write stream you can await. - [How to use import in Node.js](https://flaviocopes.com/how-to-use-import-nodejs.md): Learn how to use import instead of require in Node.js by adding type module to your package.json, so you can switch to clean ES modules import syntax. - [How to bulk convert file names using Node.js](https://flaviocopes.com/how-to-bulk-convert-filenames-nodejs.md): Learn how to bulk convert file names with a Node.js script that uses glob to find files and fs.copyFile to rename index.md files into slug-based names. - [How to deep copy JavaScript objects using structuredClone](https://flaviocopes.com/how-to-deep-copy-structuredclone.md): Learn how to deep copy a JavaScript object with structuredClone(), the modern DOM API in Node.js 17+ that replaces hacks like JSON.parse(JSON.stringify()). - [Node.js get all files in a folder recursively](https://flaviocopes.com/nodejs-get-all-files-folder.md): Learn how to get all the files in a folder recursively in Node.js using the glob library and a pattern like /**/index.md to match files in any subfolder. - [How to use the Node.js fs module with async/await](https://flaviocopes.com/node-fs-await.md): Learn how to use the Node.js fs module with async/await through the promise-based node:fs/promises API, so you can await calls like fs.readdir() directly. - [How to list files in a folder in Node](https://flaviocopes.com/node-list-files-folder.md): Learn how to list the files in a folder in Node.js using the fs module readdirSync() method to get an array of filenames you can then iterate over. - [How to empty a folder in Node.js](https://flaviocopes.com/node-empty-folder.md): Learn how to empty a folder in Node.js and remove all files from a directory using the fs-extra library and its emptyDirSync() method. - [How to set up a cron job that runs a Node.js app](https://flaviocopes.com/cron-job-nodejs-app.md): Learn how to set up a cron job that runs a Node.js app by writing a run.sh script, making it executable with chmod, and scheduling it through crontab -e. - [npm can install packages in the parent folder](https://flaviocopes.com/npm-install-packages-parent-folder.md): Learn why npm can install packages in a parent folder: it walks up the tree looking for a package.json or node_modules, and how to fix it with npm init. - [Set the current working directory of a Node.js program](https://flaviocopes.com/node-set-current-working-directory.md): Learn how to set the current working directory of a Node.js program with process.chdir(__dirname) so your relative file paths keep working from any folder. - [referenceerror: window is not defined, how to solve ](https://flaviocopes.com/how-to-fix-referenceerror-window-not-defined.md): Learn how to fix the referenceerror: window is not defined error in Node.js or Next.js by guarding browser-only code with a typeof window check first. - [Stick an element to the bottom of the page with Flexbox](https://flaviocopes.com/css-how-to-stick-bottom-flexbox.md): Learn how to stick a footer to the bottom of the page with Flexbox: a column flex container, min height of the screen, and flex-grow on the element above it. - [Fix 'import call expects exactly one argument' error](https://flaviocopes.com/fix-import-call-expects-one-argument.md): Learn how to fix the Safari error import call expects exactly one argument, the same as Chrome's import error, by adding type module to your script tag. - [Fix 'cannot use import statement outside a module'](https://flaviocopes.com/fix-cannot-use-import-outside-module.md): Learn how to fix the cannot use import statement outside a module error by adding type module to package.json in Node.js, or to your script tag in browsers. - [Fix '__dirname is not defined in ES module scope'](https://flaviocopes.com/fix-dirname-not-defined-es-module-scope.md): Learn how to fix the __dirname is not defined in ES module scope error by recreating it with fileURLToPath(import.meta.url) and path.dirname in Node.js. - [npm run dev is a long-running program](https://flaviocopes.com/npm-run-dev-long-running-program.md): Understand why npm run dev is a long-running process and how to stop it with ctrl-c so the dev server starts back on port 3000 instead of 3001. - [How to upload an image to S3 using Node.js](https://flaviocopes.com/node-aws-s3-upload-image.md): Learn how to upload an image to AWS S3 from Node.js with the aws-sdk, creating an S3 client, sending the image blob, and reading its public Location URL. - [Fix Homebrew 'Permission denied @ apply2files' error](https://flaviocopes.com/homebrew-fix-permission-denied-apply2files.md): How to fix the Homebrew Permission denied @ apply2files error during brew cleanup by recreating the missing folder, like the Docker cli-plugins directory. - [How to upload files to S3 from Node.js](https://flaviocopes.com/node-upload-files-s3.md): Learn how to upload files to AWS S3 from Node.js: create a bucket and an IAM user, store the keys in .env, then send the file with the aws-sdk s3.upload(). - [How to get the file extension in Node.js from the MIME type](https://flaviocopes.com/node-get-file-extension-mime-type.md): Learn how to get a file extension in Node.js from its name with path.extname() or from a MIME type using mime.extension() from the mime-types package. - [How to get the file extension in Node.js](https://flaviocopes.com/node-get-file-extension.md): Learn how to get a file extension in Node.js using the built-in path module and its extname() method, which returns values like .png or .jpg from a file name. - [Fix 'util.pump is not a function' in Node.js](https://flaviocopes.com/node-solve-pump-not-function.md): Learn how to fix the util.pump is not a function error in Node.js, caused by old code; replace the removed util.pump with pipeline from the stream module. - [Serve an HTML page using Node.js](https://flaviocopes.com/node-serve-html-page.md): Learn how to serve an index.html page using Node.js with no dependencies, using the http module and piping fs.createReadStream() to the response. - [How to use Sequelize to interact with PostgreSQL](https://flaviocopes.com/sequelize.md): Learn how to use Sequelize with PostgreSQL in Node.js: install pg, configure connection, define a model, and query data with findAll, create, and update. - [How to check the current Node.js version at runtime](https://flaviocopes.com/node-version-runtime.md): Learn how to check the current Node.js version at runtime with process.version, and how to read the major version number from the process.versions object. - [How to test an npm package locally](https://flaviocopes.com/npm-local-package.md): Learn how to test your own npm package locally before publishing, using npm link to create a symlink and require it from another project as usual. - [Use promises and await with Node.js callbacks](https://flaviocopes.com/node-promisify.md): Learn how to use promises and async/await with Node.js callback-based functions by wrapping them with promisify from the util module to escape callback hell. - [How to get the names of all the files in a folder in Node](https://flaviocopes.com/how-to-get-files-names.md): Learn how to list all the files and folders inside a directory in Node.js using fs.readdirSync, then inspect each one with lstatSync and isDirectory(). - [How to mass rename files in Node.js](https://flaviocopes.com/node-mass-rename-files.md): Learn how to mass rename a set of files in Node.js with the fs module, using readdirSync, mkdirSync, and renameSync to move each file into its own folder. - [How to download an image using Node.js](https://flaviocopes.com/node-download-image.md): Learn how to download an image or file in Node.js using the request module and fs, piping the response into createWriteStream to save it to disk. - [How to create and save an image with Node.js and Canvas](https://flaviocopes.com/canvas-node-generate-image.md): Learn how to create and save an image with Node.js and the canvas package, using createCanvas, fillText, loadImage and toBuffer to generate PNG social cards. - [How to print a canvas to a data URL](https://flaviocopes.com/node-print-canvas-to-data-url.md): Learn how to print a canvas to a data URL in Node.js using the canvas npm package and toDataURL(), then embed the generated image directly in your HTML. - [Incrementing multiple folders numbers at once using Node.js](https://flaviocopes.com/rename-folder-names-node.md): Learn how to build a small Node.js CLI that renames numbered folders in bulk, reading them with fs.readdirSync and incrementing each number with renameSync. - [The Node Core Modules](https://flaviocopes.com/node-core-modules.md): A reference to the Node.js core modules that ship with the platform, like fs, http, crypto, path, events, and stream, and what each one lets you do. - [How to read a CSV file with Node.js](https://flaviocopes.com/node-read-csv.md): Learn how to read a CSV file with Node.js using the neat-csv package, which wraps csv-parser in a simple async/await interface returning an array of objects. - [How to write a CSV file with Node.js](https://flaviocopes.com/node-write-csv.md): Learn how to write a CSV file with Node.js using the objects-to-csv package: turn an array of objects into a file with toDisk() and append new rows. - [What are peer dependencies in a Node module?](https://flaviocopes.com/npm-peer-dependencies.md): Understand peerDependencies in a package.json: unlike dependencies, they are not auto-installed, so the consuming project must add them to avoid warnings. - [How to handle file uploads in Node.js](https://flaviocopes.com/how-to-handle-file-uploads-node.md): Learn how to handle file uploads in Node.js with Express and the express-fileupload middleware, reading the file from req.files and saving it with mv(). - [How to get both parsed body and raw body in Express](https://flaviocopes.com/express-get-raw-body.md): Learn how to get both the parsed JSON body and the raw body in Express by adding a verify function to body-parser that saves the buffer to req.rawBody. - [How to spawn a child process with Node.js](https://flaviocopes.com/how-to-spawn-child-process-node.md): Learn how to spawn a child process in Node.js with the child_process spawn() function, passing a command and an args array, then piping its stdout. - [How to enable ES Modules in Node.js](https://flaviocopes.com/how-to-enable-es-modules-nodejs.md): Learn how to enable ES Modules and the import syntax in Node.js by adding type module to your package.json or renaming files to use the .mjs extension. - [Fix the 'Missing write access' error in npm](https://flaviocopes.com/npm-fix-missing-write-access-error.md): Learn how to fix the Missing write access to node_modules error when installing global npm packages, using sudo chown -R to take ownership of the folder. - [Introduction to Puppeteer](https://flaviocopes.com/puppeteer.md): Learn how Puppeteer lets you control a headless Chrome browser from Node.js to scrape pages, automate forms, take screenshots, and generate PDFs. - [Web Scraping using Node.js and Puppeteer](https://flaviocopes.com/web-scraping.md): Learn how to do web scraping with Node.js and Puppeteer, controlling a headless Chrome instance to load a page and extract the information you need from it. - [The Node.js Runtime v8 options list](https://flaviocopes.com/node-runtime-v8-options.md): A reference list of the Node.js runtime and V8 engine options you can pass when starting a program, from --optimize-for-size to harmony feature flags. - [What is pnpm?](https://flaviocopes.com/pnpm.md): Learn how pnpm works as a drop-in replacement for npm that saves disk space by hard-linking packages from a single central store shared across projects. - [Use the Chrome DevTools to debug a Node.js app](https://flaviocopes.com/node-debug-devtools.md): Learn how to debug a Node.js app with the Chrome DevTools by running node --inspect and opening about://inspect to attach the full debugger and profiler. - [How to use MongoDB with Node.js](https://flaviocopes.com/node-mongodb.md): Learn how to use MongoDB with Node.js: connect with MongoClient, then insert, find, update, and delete documents using the official mongodb npm package. - [Run a web server from any folder](https://flaviocopes.com/local-web-server.md): Learn how to spin up a quick local web server from any folder using http-server with Node.js, Python http.server, or PHP's built-in php -S command. - [Why should you use Node.js in your next project?](https://flaviocopes.com/node-when-to-use.md): When is it a good idea to use Node.js over other technologies? Why Node.js and not another solution? This post aims to answer that question. - [How to write a JSON object to file in Node.js](https://flaviocopes.com/how-to-save-json-object-to-file-nodejs.md): Learn how to write a JSON object to a file in Node.js with JSON.stringify() and fs.writeFileSync(), then read it back later using fs.readFileSync(). - [How to determine if a date is today in JavaScript](https://flaviocopes.com/how-to-determine-date-is-today-javascript.md): Learn how to determine if a Date is today in JavaScript by comparing its getDate(), getMonth(), and getFullYear() values against a fresh new Date() instance. - [How to get the last updated date of a file using Node.js](https://flaviocopes.com/how-to-get-last-updated-date-file-node.md): Learn how to get the last modified date of a file in Node.js by calling fs.statSync on the path and reading the mtime Date property it returns. - [How to remove a file with Node.js](https://flaviocopes.com/how-to-remove-file-node.md): Learn how to remove a file from the filesystem in Node.js with the fs module, using the asynchronous fs.unlink() or the blocking fs.unlinkSync() method. - [How to create an empty file in Node.js](https://flaviocopes.com/how-to-create-empty-file-node.md): Learn how to create an empty file in Node.js using fs.openSync() with the w flag, and how to wrap it in fs.closeSync() when you do not need the descriptor. - [How to check if a file exists in Node.js](https://flaviocopes.com/how-to-check-if-file-exists-node.md): Learn how to check if a file exists in Node.js using fs.existsSync() for a synchronous check, or fs.access() for an asynchronous, non-blocking approach. - [Node, the difference between development and production](https://flaviocopes.com/node-difference-dev-prod.md): Learn how to set up different configurations for development and production in Node.js using the NODE_ENV environment variable, plus Express config hooks. - [The Node events module](https://flaviocopes.com/node-module-events.md): A reference to the Node.js events module and its EventEmitter class, covering methods like on(), emit(), once(), listenerCount(), and removeListener(). - [The Node os module](https://flaviocopes.com/node-module-os.md): A guide to the Node.js os module for reading information about the underlying operating system, including os.cpus(), os.freemem(), os.platform(), and os.EOL. - [How to exit from a Node.js program](https://flaviocopes.com/node-terminate-program.md): Learn how to exit a Node.js program the right way, from process.exit() and process.exitCode to gracefully handling the SIGTERM signal to close servers. - [How to read environment variables from Node.js](https://flaviocopes.com/node-environment-variables.md): Learn how to read environment variables in Node.js through process.env, set custom ones on the command line, and load a .env file with dotenv. - [The Pug Guide](https://flaviocopes.com/pug.md): Learn how to use the Pug template engine with Node.js and Express, from interpolating variables to loops, conditionals, includes, and extending templates. - [Error handling in Node.js](https://flaviocopes.com/node-exceptions.md): Learn how to handle errors in Node.js using throw and Error objects, try/catch blocks, the uncaughtException event, promises, and async/await. - [The basics of working with MySQL and Node](https://flaviocopes.com/node-mysql.md): Learn the basics of working with MySQL and Node.js using the mysqljs/mysql package: create a connection and run SELECT and INSERT queries with escaping. - [Using WebSockets with Node.js](https://flaviocopes.com/node-websockets.md): WebSockets are an alternative to HTTP communication in Web Applications. They offer a long lived, bidirectional communication channel between client and server. - [The Node http module](https://flaviocopes.com/node-module-http.md): A reference to the Node.js http module for networking, covering properties like METHODS and STATUS_CODES, methods like createServer(), and its core classes. - [The Node path module](https://flaviocopes.com/node-module-path.md): A reference to the Node.js path module for working with file paths, covering basename(), dirname(), extname(), join(), normalize(), parse(), and resolve(). - [Working with folders in Node](https://flaviocopes.com/node-folders.md): Learn how to work with folders in Node.js using the fs module to check, create, read, rename, and remove directories, plus the fs-extra module. - [Working with file descriptors in Node](https://flaviocopes.com/node-file-descriptors.md): Learn how to work with file descriptors in Node.js by opening files with the fs module open() and openSync() methods and the right access flags. - [Node file stats](https://flaviocopes.com/node-file-stats.md): Learn how to get the details of a file in Node.js using the fs module stat() method to check isFile(), isDirectory(), symbolic links, and file size. - [Writing files with Node](https://flaviocopes.com/node-writing-files.md): Learn how to write files in Node.js with the fs module, using writeFile() and writeFileSync(), file flags, appendFile() to add content, and streams. - [Node File Paths](https://flaviocopes.com/node-file-paths.md): Learn how to work with file paths in Node.js using the path module: extract dirname, basename, and extname, and combine paths with join and resolve. - [Reading files with Node](https://flaviocopes.com/node-reading-files.md): Learn how to read files in Node.js with the fs module, using the asynchronous readFile() and synchronous readFileSync(), and why streams suit big files. - [HTTP requests in Node using Axios](https://flaviocopes.com/node-axios.md): Learn how to make HTTP requests in Node.js with Axios, the promise-based library for GET and POST calls, adding query parameters and handling JSON for you. - [The Node fs module](https://flaviocopes.com/node-module-fs.md): A guide to the Node.js fs module and its methods for working with the file system, from readFile and writeFile to rename, plus their blocking Sync versions. - [Making HTTP requests with Node](https://flaviocopes.com/node-make-http-requests.md): Learn how to perform HTTP requests in Node.js with the built-in https module, covering GET, POST, PUT, and DELETE using https.request() and options. - [Build an HTTP Server](https://flaviocopes.com/node-http-server.md): Learn how to build a basic HTTP server in Node.js using the http module and createServer(), handling the request and response objects to send Hello World. - [The Node Event emitter](https://flaviocopes.com/node-event-emitter.md): Learn how to work with custom events in Node.js using the EventEmitter class from the events module, with on, emit, once, and removeListener methods. - [Understanding setImmediate()](https://flaviocopes.com/node-setimmediate.md): Understand how Node.js setImmediate() runs a callback in the next event loop iteration, and how it differs from setTimeout(0) and process.nextTick(). - [Understanding process.nextTick()](https://flaviocopes.com/node-process-nexttick.md): Understand how Node.js process.nextTick() works with the event loop, running your callback at the end of the current operation before the next tick starts. - [The Node.js Event Loop](https://flaviocopes.com/node-event-loop.md): Understand the Node.js event loop and how its single thread, call stack, message queue, and ES6 job queue enable asynchronous, non-blocking I/O. - [npm dependencies and devDependencies](https://flaviocopes.com/npm-dependencies-devdependencies.md): Learn the difference between npm dependencies and devDependencies, how the -D flag adds dev-only packages, and how --production skips them on deploy. - [npm global or local packages](https://flaviocopes.com/npm-packages-local-global.md): Learn the difference between local and global npm packages, why you should install most packages locally, and when a global install with -g makes sense. - [Uninstalling npm packages with npm uninstall](https://flaviocopes.com/npm-uninstall-packages.md): Learn how to uninstall an npm package with npm uninstall, removing it from package.json, plus the -D flag for dev dependencies and -g for global packages. - [Accept input from the command line in Node](https://flaviocopes.com/node-input-from-cli.md): Learn how to accept input from the command line in Node.js and make CLI programs interactive using the built-in readline module and the Inquirer.js package. - [Output to the command line using Node](https://flaviocopes.com/node-output-to-cli.md): Learn how to output to the command line in Node.js with the console module, from console.log and format specifiers to count(), trace(), time(), and colors. - [Node, accept arguments from the command line](https://flaviocopes.com/node-cli-args.md): Learn how to accept command line arguments in a Node.js program using process.argv, the array that holds every value passed after the node command itself. - [How to use the Node.js REPL](https://flaviocopes.com/node-repl.md): Learn how to use the Node.js REPL, the Read-Evaluate-Print-Loop, to run JavaScript interactively with tab autocomplete, the _ variable, and dot commands. - [How much JavaScript do you need to know to use Node?](https://flaviocopes.com/node-javascript-language.md): How much JavaScript do you need before learning Node.js? The core concepts to grasp first, from types and functions to closures and the event loop. - [How to install Node.js](https://flaviocopes.com/node-installation.md): Learn how to install Node.js on your system using the official installer, a package manager like Homebrew with brew install node, or nvm to switch versions. - [A brief history of Node.js](https://flaviocopes.com/node-history.md): A look back at the history of Node.js from its 2009 birth through io.js, the Node.js Foundation, the leftpad incident, and the rise of V8 and npm. - [Node Buffers](https://flaviocopes.com/node-buffers.md): Learn what Node.js buffers are: fixed-size chunks of memory for handling binary data, why they pair with streams, and how to create one with Buffer.from. - [Get HTTP request body data using Node](https://flaviocopes.com/node-request-data.md): Learn how to get the data sent as JSON in an HTTP request body in Node.js, using body-parser with Express or the request stream data and end events. - [Make an HTTP POST request using Node](https://flaviocopes.com/node-http-post.md): Learn how to make an HTTP POST request in Node.js using the Axios library, the Request library, or the built-in https module with https.request(). - [Differences between Node and the Browser](https://flaviocopes.com/node-difference-browser.md): Understand the key differences between writing JavaScript for Node.js and the browser, from the missing DOM and filesystem access to CommonJS versus ES modules. - [Expose functionality from a Node file using exports](https://flaviocopes.com/node-export-module.md): Learn how to expose functionality from a Node.js file using module.exports and exports, and understand the difference between the two approaches. - [How to log an object in Node](https://flaviocopes.com/node-inspect-object.md): Learn how to log a full object in Node.js, getting past the [Object] placeholder after two levels of nesting using JSON.stringify or util.inspect. - [How to get the current folder in Node](https://flaviocopes.com/node-get-current-folder.md): Learn how to get the current folder in Node.js and understand the difference between ./, __dirname, and process.cwd() when referencing the filesystem. - [Install an older version of an npm package](https://flaviocopes.com/npm-install-previous-package-version.md): Learn how to install an older version of an npm package, something that might be useful to solve a compatibility problem - [Node.js Streams](https://flaviocopes.com/nodejs-streams.md): Learn what Node.js streams are, why they make reading and writing data memory and time efficient, and how to use pipe() and the four types of streams. - [Find the installed version of an npm package](https://flaviocopes.com/npm-know-version-installed.md): Learn how to find the installed version of an npm package with npm list, npm list --depth=0, and npm view to check the latest version on the registry. - [Parsing JSON with Node.js](https://flaviocopes.com/nodejs-parse-json.md): Learn how to parse JSON in Node.js with JSON.parse, do it asynchronously to avoid blocking, and read a JSON file using require() or the fs module. - [Update all the Node dependencies to their latest version](https://flaviocopes.com/update-npm-dependencies.md): Learn how to update all your npm dependencies in package.json to their latest versions, using npm update for semver ranges and npm-check-updates for big bumps. - [Should you commit the node_modules folder to Git?](https://flaviocopes.com/should-commit-node-modules-git.md): Should you commit the node_modules folder to Git? My take is no, add it to .gitignore, plus the pros and cons so you can make your own decision. - [Semantic Versioning using npm](https://flaviocopes.com/npm-semantic-versioning.md): Learn Semantic Versioning in npm: how the major.minor.patch numbers work and how the ^ and ~ range symbols control which versions npm update will install. - [The package-lock.json file](https://flaviocopes.com/package-lock-json.md): Learn what the package-lock.json file does in npm: it locks the exact version of every installed package so the project installs the same everywhere. - [How to use or execute a package installed using npm](https://flaviocopes.com/how-to-use-npm-package.md): Learn how to use an npm package you installed, importing a library like lodash with require(), and running an executable like cowsay with npx. - [How to update Node.js](https://flaviocopes.com/how-to-update-node.md): Learn how to update Node.js depending on how you installed it, with the official package installer, Homebrew's brew upgrade node, or nvm install and nvm use. - [Where does npm install the packages?](https://flaviocopes.com/where-npm-install-packages.md): Learn where npm installs your packages, in the local node_modules folder for a normal install and in a global location you can find with npm root -g. - [The package.json guide](https://flaviocopes.com/package-json.md): Learn how the package.json file works in Node.js projects, from the name, version, scripts, and dependencies fields to semver version rules. - [The npx Node Package Runner](https://flaviocopes.com/npx.md): Learn how npx runs Node commands without installing them globally, executes local node_modules binaries, and can even run a package at a specific version. - [Run package.json scripts upon any file changes in a folder](https://flaviocopes.com/package-json-watch.md): Learn how to re-run a package.json script automatically whenever a file in a folder changes, using the watch npm package to rebuild on every save. - [Interact with the Google Analytics API using Node.js](https://flaviocopes.com/google-analytics-api-nodejs.md): Learn how to query the Google Analytics API from Node.js using the googleapis package, authenticating with a JSON Web Token to pull sessions and traffic data. - [Where to host a Node.js app](https://flaviocopes.com/nodejs-hosting.md): A Node.js application can be hosted in a lot of places, depending on your needs. This is a list of all the various options you have at your disposal - [HTTP requests using Axios](https://flaviocopes.com/axios.md): Axios is a very popular JavaScript library you can use to perform HTTP requests, that works in both Browser and Node.js platforms - [Introduction to Node.js](https://flaviocopes.com/nodejs.md): An introduction to Node.js, the server-side JavaScript runtime built on Google Chrome's V8 engine, and how its asynchronous, non-blocking I/O model works. - [An introduction to the npm package manager](https://flaviocopes.com/npm.md): An introduction to npm, the standard package manager for Node.js: how to install dependencies, install single packages, handle versioning, and run scripts. ## Phaser - [How to create a platformer game with Phaser.js](https://flaviocopes.com/phaserjs-platform-game-tutorial.md): Build a complete platformer game with Phaser.js: set up the project, add platforms and a player, handle arrow-key movement and jumping, and collect stars. - [Phaser: collisions and screen boundaries](https://flaviocopes.com/phaser-collisions-boundaries.md): Learn how to detect collisions in Phaser with collider and overlap, and keep objects on screen using setCollideWorldBounds and setBounce. - [Phaser: Physics](https://flaviocopes.com/phaser-physics.md): Learn how to use Phaser physics with the Arcade engine, enabling it in your config and creating sprites and static or dynamic groups for your game. - [Phaser: Multiple scenes](https://flaviocopes.com/phaser-multiple-scenes.md): Learn how to use multiple scenes in Phaser by extending Phaser.Scene in separate files, passing them as an array, and switching with this.scene.start. - [Phaser: Animations](https://flaviocopes.com/phaser-animations.md): Learn how to animate a sprite in Phaser by loading a sprite sheet and building the animation with this.anims.create, setting frame rate and repeat. - [Phaser: Sprites](https://flaviocopes.com/phaser-sprites.md): Learn how to add sprites in Phaser with this.load.sprite and this.add.sprite, and why sprites differ from images: they can be animated. - [Phaser: Playing sounds](https://flaviocopes.com/phaser-sounds.md): Learn how to play sounds in Phaser by preloading an audio file with this.load.audio, adding it with this.sound.add, and calling play when you need it. - [Phaser: Keyboard events](https://flaviocopes.com/phaser-keyboard-events.md): Learn how to handle keyboard events in Phaser by listening on this.input.keyboard, or using createCursorKeys to check arrow keys with isDown. - [Phaser: Mouse input](https://flaviocopes.com/phaser-mouse-input.md): Learn how to handle mouse input in Phaser by making a GameObject interactive with setInteractive, then listening for events like pointerup with on. - [Phaser: The game loop](https://flaviocopes.com/phaser-game-loop.md): Learn how the Phaser game loop works through the update function that runs forever, moving objects by changing x and y or calling setVelocity. - [Phaser: Adding images](https://flaviocopes.com/phaser-images.md): Learn how to add images in Phaser by preloading them in preload, then placing them with this.add.image and adjusting origin, scale, and flip. - [Phaser: GameObjects](https://flaviocopes.com/phaser-gameobjects.md): Learn how to add GameObjects in Phaser inside the create function, drawing shapes with this.add.circle and text with this.add.text and its options. - [Phaser: Scenes](https://flaviocopes.com/phaser-scenes.md): Learn how scenes work in Phaser through the preload, create, and update functions you pass to the scene property to load assets and build your game. - [Phaser: The Canvas](https://flaviocopes.com/phaser-canvas.md): Learn how Phaser renders your game inside an HTML canvas, and how to configure it with new Phaser.Game by setting width, height, and backgroundColor. - [Setting up a project to build a JavaScript game with Phaser](https://flaviocopes.com/phaser-setup.md): Learn how to set up a modern project to build a JavaScript HTML5 game with Phaser 3, installing phaser with npm and bundling your code using Parcel. ## PHP - [Deploying PHP applications](https://flaviocopes.com/php-deployment.md): Learn how to deploy PHP applications, from PHP's classic drop-a-file simplicity to modern Git deploys on a PaaS like the DigitalOcean App Platform. - [How to use Composer and Packagist in PHP](https://flaviocopes.com/php-composer-packagist.md): Learn how to use Composer, the PHP package manager, to install packages like Carbon with composer require and autoload them via vendor/autoload.php. - [How to work with files/folders in PHP](https://flaviocopes.com/php-files-folders.md): Learn how to work with files in PHP using file_exists and filesize, open them with fopen, read with fgets, write with fwrite, and delete with unlink. - [How to use PHP Cookie-based Sessions](https://flaviocopes.com/php-sessions.md): Learn how to use cookie-based sessions in PHP with session_start, store data server-side in $_SESSION, and clear it with session_unset. - [How to use Cookies in PHP](https://flaviocopes.com/php-cookies.md): Learn how to use cookies in PHP, reading them from the $_COOKIE superglobal and creating them with setcookie, including how to set an expiration date. - [How to use HTTP Headers in PHP](https://flaviocopes.com/php-http-headers.md): Learn how to set HTTP response headers in PHP with the header function, from status codes and Content-Type to forcing a 301 redirect with a Location header. - [How to use forms in PHP](https://flaviocopes.com/php-forms.md): Learn how to handle forms in PHP, reading submitted data from the $_GET and $_POST superglobals and moving the form handler into a separate post.php file. - [Handling HTTP requests in PHP](https://flaviocopes.com/php-http-requests.md): Learn how to handle HTTP requests in PHP with file-based routing and the superglobals $_GET, $_POST, $_REQUEST, and $_SERVER to read request data. - [How to use exceptions in PHP](https://flaviocopes.com/php-exceptions.md): Learn how to use exceptions in PHP with try and catch blocks, inspect the error with getMessage, catch specific types, and run cleanup code in finally. - [How to deal with errors in PHP](https://flaviocopes.com/php-errors.md): Learn how PHP handles warnings, notices, and errors, where to find them, and how to configure display_errors and the error log in your php.ini file. - [How to create your first PHP program](https://flaviocopes.com/php-first-program.md): Write your first PHP program, a Hello World that uses echo inside php tags, and understand how Apache runs it server-side before sending HTML to the browser. - [How to set up PHP](https://flaviocopes.com/php-setup.md): Learn how to set up PHP on your local machine with MAMP, which bundles the Apache server and MySQL so you can start writing PHP from the htdocs folder. ## Python - [Fix the 'Unable to import django.db' error in VS Code](https://flaviocopes.com/error-unable-import-django-db.md): Fix the 'Unable to import django.db' pylint error in VS Code by running Python: Select Interpreter and choosing your project's virtual environment. - [How to check if a variable is a number in Python](https://flaviocopes.com/python-check-number.md): Learn how to check if a variable is a number in Python using type() or isinstance() to compare it against the int class, or float for floating point numbers. - [How to check if a variable is a string in Python](https://flaviocopes.com/python-check-string.md): Learn how to check if a variable is a string in Python using the type() function or isinstance(), comparing the value against the built-in str class. - [How to use Python reduce()](https://flaviocopes.com/python-reduce.md): Learn how to use Python reduce() to calculate a single value from a list, like summing expenses, using a lambda and importing it from functools. - [How to use Python filter()](https://flaviocopes.com/python-filter.md): Learn how to use the Python filter() function to keep only the items of an iterable that pass a test, using a named function or a concise lambda function. - [How to use Python map()](https://flaviocopes.com/python-map.md): Learn how to use the Python map() function to run a function on every item of an iterable and build a new list, using a named or inline lambda function. - [Introduction to multithreading in Python](https://flaviocopes.com/python-multithreading.md): An introduction to multithreading in Python: using the threading module and Thread() to run a slow function on its own thread while your program continues. - [The PEP8 Python style guide](https://flaviocopes.com/python-pep8-style-guide.md): A guide to the PEP8 Python style guide: indent with 4 spaces, name variables with snake_case and classes with CamelCase, and write cleaner, pythonic code. - [Python Ternary Operator](https://flaviocopes.com/python-ternary-operator.md): Learn how to use the ternary operator in Python to write a conditional in a single line, using the result if true if condition else result if false syntax. - [Python Operator Overloading](https://flaviocopes.com/python-operator-overloading.md): Learn how operator overloading works in Python: define dunder methods like __gt__ and __add__ so your classes work with comparison and arithmetic operators. - [Python Polymorphism](https://flaviocopes.com/python-polymorphism.md): Learn how polymorphism works in Python: defining the same method, like eat(), on different classes so you can call it without knowing each object's type. - [Python Constants](https://flaviocopes.com/python-constants.md): Python has no true constants, but you can get close with an Enum that nobody can reassign, or just follow the convention of naming a variable in uppercase. - [Python Enums](https://flaviocopes.com/python-enums.md): Learn how to use enums in Python by importing Enum from the enum module to bind readable names to constant values, then read them back with .value. - [How to check the current Python version](https://flaviocopes.com/python-check-version.md): Learn how to check the current Python version at runtime using the sys module and sys.version_info, comparing the tuple to require 3.7 or higher. - [How to install Pygame Zero on macOS](https://flaviocopes.com/python-pygame-installation.md): Learn how to install Pygame Zero on macOS, and how to fix the SDL.h file not found error during pip install by installing pgzero straight from GitHub. - [GUI programming in Python with tkinter](https://flaviocopes.com/python-tkinter.md): Get started with GUI programming in Python using the tkinter toolkit. Learn to create a window with Tk(), add Label, Entry and Button widgets, and more. - [Python List comprehensions](https://flaviocopes.com/python-list-comprehensions.md): Learn how Python list comprehensions let you create lists in a concise, readable way, and when to reach for them instead of a for loop or the map() function. - [Regular Expressions in Python](https://flaviocopes.com/python-regular-expressions.md): An introduction to regular expressions in Python using the re module. Learn re.match() and re.search(), pattern syntax, capturing groups, and flags. - [Python, how to write to a file](https://flaviocopes.com/python-write-to-file.md): Learn how to write to a file in Python using open() with append or write mode, then the write() and writelines() methods, and remember to close the file. - [Python, create a TCP server](https://flaviocopes.com/python-tcp-server.md): Learn how to create a TCP server in Python using the socketserver package with TCPServer and a request handler, then test it with the Netcat nc command. - [Python, create a Web (HTTP) server](https://flaviocopes.com/python-http-server.md): Learn how to create an HTTP server in Python with the http.server module, from the quick python -m http.server command to a custom request handler class. - [Python, read the content of a file](https://flaviocopes.com/python-read-file-content.md): Learn how to read the content of a file in Python using the open() function and the read() and readline() methods, then close the file when you are done. - [Install third-party Python packages with pip](https://flaviocopes.com/python-pip.md): Learn how to install third-party Python packages from PyPI using pip, from pip install to upgrading, pinning a version, uninstalling, and showing details. - [Python, create a network request](https://flaviocopes.com/python-create-network-request.md): Learn how to make a network request in Python with the built-in urllib package, using request.urlopen() to fetch a URL and parse the response as JSON. - [The with statement in Python](https://flaviocopes.com/python-with-statement.md): Learn how the with statement in Python simplifies exception handling, automatically closing a file you open with open() so you do not have to call close(). - [Python, how to create an empty file](https://flaviocopes.com/python-create-empty-file.md): Learn how to create an empty file in Python using the open() function with append or write mode, why you must close it, and how to catch the OSError raised. - [Python, how to create a directory](https://flaviocopes.com/python-create-directory.md): Learn how to create a directory in Python with the os.mkdir() method, and how to wrap it in a try block to gracefully handle the OSError it can raise. - [Python Exceptions](https://flaviocopes.com/python-exceptions.md): Learn how exception handling works in Python with try, except, else, and finally blocks, how to raise your own errors, and how to define a custom exception. - [Python, how to check if a file or directory exists](https://flaviocopes.com/python-check-file-exists.md): Learn how to check if a file or directory exists in Python using the os.path.exists() method, which returns True if the path exists and False if it does not. - [Python, how to get the details of a file](https://flaviocopes.com/python-get-file-details.md): Learn how to get the details of a file in Python with the os module, using os.path.getsize() for the size or os.stat() to read its size and modified date. - [Python, how to check if a number is odd or even](https://flaviocopes.com/python-number-odd-even.md): Learn how to check if a number is odd or even in Python with the modulo operator, testing if n % 2 equals 0, and filtering a list of numbers with filter(). - [Python, how to list files and folders in a directory](https://flaviocopes.com/python-list-files-folders.md): Learn how to list files and folders in a directory in Python using os.listdir(), then os.path.isfile() and os.path.isdir() to tell the two apart. - [Python Annotations](https://flaviocopes.com/python-annotations.md): Python is dynamically typed, but annotations let you optionally add type hints to variables and functions, which tools like mypy can check for type errors. - [Python Introspection](https://flaviocopes.com/python-introspection.md): Learn how introspection works in Python, using help(), type(), dir(), and id() to inspect functions and objects, plus the inspect module for more detail. - [Python Docstrings](https://flaviocopes.com/python-docstrings.md): Learn how to document your Python code with docstrings, the triple-quoted strings you add to functions, classes, and modules and read back with help(). - [Python Decorators](https://flaviocopes.com/python-decorators.md): Learn how Python decorators work: using the @ syntax to wrap a function in another function that can run code before and after it, like a logtime example. - [Python, how to create a list from a string](https://flaviocopes.com/python-howto-list-from-string.md): Learn how to create a list from a string in Python using the split() method, passing the separator like a space to break the string into a list of words. - [How I deleted all my old tweets using Python](https://flaviocopes.com/how-to-delete-old-tweets.md): How I used Python and the delete-tweets tool to bulk-delete old tweets, from requesting my Twitter archive to setting API keys and clearing my history. - [Use a GoPro as a remote webcam using Python](https://flaviocopes.com/use-gopro-remote-python.md): Learn how to control a GoPro as a remote webcam with Python using the goprocam package over WiFi, to take photos, shoot video, and download media. - [Python Virtual Environments](https://flaviocopes.com/python-virtual-environments.md): Learn how to use Python virtual environments to isolate module versions per project, creating one with python -m venv and activating it with source activate. - [Python Closures](https://flaviocopes.com/python-closures.md): Learn how closures work in Python: when you return a nested function, it keeps access to the variables of its enclosing function even after it ends. - [Python Lambda Functions](https://flaviocopes.com/python-lambda-functions.md): Learn how lambda functions work in Python: tiny anonymous functions with the lambda keyword and a single expression, often used with map() and filter(). - [Python Nested Functions](https://flaviocopes.com/python-nested-functions.md): Learn how nested functions work in Python: defining a function inside another to hide local helpers, and using nonlocal to reach the outer variables. - [Python Recursion](https://flaviocopes.com/python-recursion.md): Understand recursion in Python, where a function calls itself. Learn it through the classic factorial example, and why you get a RecursionError at 1000 calls. - [Python, accept arguments from command line](https://flaviocopes.com/python-command-line-arguments.md): Learn how to accept command line arguments in Python, from reading the sys.argv list to using the argparse module to define options and valid choices. - [Python variables scope](https://flaviocopes.com/python-variables-scope.md): Understand variable scope in Python and the difference between global and local variables, including why accessing a local variable outside raises a NameError. - [Debugging Python](https://flaviocopes.com/python-debugging.md): Learn how to debug Python with the built-in pdb debugger: add a breakpoint() to your code, inspect variables, and step through with the n, s, and c commands. - [The Python Standard Library](https://flaviocopes.com/python-standard-library.md): An introduction to the Python standard library, a huge collection of built-in modules like math, re, json and datetime, and how to import and use them. - [Python Classes](https://flaviocopes.com/python-classes.md): Learn how to define classes in Python and create objects from them, including methods, the self argument, and the __init__ constructor for properties. - [Python Modules](https://flaviocopes.com/python-modules.md): Learn how Python modules work: every file is a module you can pull in with import or from .. import, and how __init__.py turns a folder into a package. - [Python Loops](https://flaviocopes.com/python-loops.md): Learn how while and for loops work in Python, iterating lists or a range() of numbers, getting the index with enumerate(), and using break and continue. - [Python Objects](https://flaviocopes.com/python-objects.md): Learn how everything in Python is an object with attributes and methods, how id() shows its memory location, and how mutable and immutable types differ. - [Python Functions](https://flaviocopes.com/python-functions.md): Learn how functions work in Python: how to define one with def, pass parameters and default values, return one or more values, and call it from your code. - [Python Dictionaries](https://flaviocopes.com/python-dictionaries.md): Learn how Python dictionaries store key/value pairs: how to read and change values, use get(), pop(), and keys(), and add or remove items from a dictionary. - [Python Sets](https://flaviocopes.com/python-sets.md): Learn how to use sets in Python, the unordered and mutable data structure, including intersection, union and difference operations, len() and the in operator. - [Python Tuples](https://flaviocopes.com/python-tuples.md): Learn how to use tuples in Python, the immutable and ordered data structure created with parentheses, including indexing, slicing, len(), sorted() and more. - [Python Lists](https://flaviocopes.com/python-lists.md): Learn how Python lists work: access items by index, slice them, check length with len(), add items with append() and extend(), and sort them with sort(). - [Python Control Statements](https://flaviocopes.com/python-control-statements.md): Learn how control statements work in Python using if, elif, and else to make decisions based on a condition, plus the inline if/else for one-line choices. - [Python, Accepting Input](https://flaviocopes.com/python-accept-input.md): Learn how to accept user input in a Python command line app with the input() function, which pauses execution until the user types and presses enter. - [Python Numbers](https://flaviocopes.com/python-numbers.md): Learn how numbers work in Python with the int, float, and complex types, the arithmetic operators, and built-in helpers like abs() and round() for rounding. - [Python Booleans](https://flaviocopes.com/python-booleans.md): Learn how Python booleans work, with the True and False values, how other types evaluate as truthy or falsy, and the handy any() and all() global functions. - [Python Strings](https://flaviocopes.com/python-strings.md): Learn how to work with strings in Python, from concatenation and the str() conversion to built-in methods, escaping, the len() function, slicing, and more. - [Python Operators](https://flaviocopes.com/python-operators.md): Learn how Python operators work: assignment and arithmetic operators, comparison and boolean operators, bitwise operators, and the is and in keywords. - [Python Data Types](https://flaviocopes.com/python-data-types.md): An introduction to Python data types like str, int, and float, how to check a type with type() or isinstance(), and how to cast a value to another type. - [The basics of working with Python](https://flaviocopes.com/python-basics.md): A guide to the basics of working with Python: how to create variables, write expressions and statements, add comments, and why indentation actually matters. - [Python 2 vs Python 3](https://flaviocopes.com/python-2-vs-3.md): Understand the difference between Python 2 and Python 3, why Python 2 reached end of life in 2020, and why all new code today should be written in Python 3. - [Running Python programs](https://flaviocopes.com/python-running-programs.md): Learn the different ways to run Python programs, from typing code in the interactive REPL and IDLE to saving your code in a file and executing it. - [Installing Python 3 on macOS](https://flaviocopes.com/python-installation-macos.md): Learn how to install the latest Python 3 on macOS using the official installer from python.org, since macOS ships only an outdated Python 2 by default. - [Introduction to Python](https://flaviocopes.com/python-introduction.md): An introduction to Python, the interpreted, dynamically typed language created by Guido van Rossum that powers web development, automation, data, and ML. ## React - [The React Context API](https://flaviocopes.com/react-context-api.md): Learn how the React Context API lets you share state across your app without prop drilling, using createContext, a Provider, and the useContext hook. - [The use hook](https://flaviocopes.com/the-use-hook.md): Learn how the React use() hook reads a promise inside Suspense so React suspends the component until it resolves, even when you call it conditionally. - [The useOptimistic hook](https://flaviocopes.com/the-useoptimistic-hook.md): Learn how the React useOptimistic hook updates the UI immediately before the server responds, then reconciles with the real state, shown with a todo app. - [The useFormStatus Hook](https://flaviocopes.com/the-useformstatus-hook.md): Learn how the React useFormStatus hook reads a form action's pending state from a nested component like a shared submit button, without prop drilling. - [The useActionState hook](https://flaviocopes.com/the-useactionstate-hook.md): Learn how the React useActionState hook lets a client component read a server action's state and pending status to show messages and disable the button. - [Server Actions](https://flaviocopes.com/server-actions.md): Learn how React Server Actions work using the 'use server' directive to define server-only functions you can call from a client component form action. - [Form Actions](https://flaviocopes.com/form-actions.md): Learn how React form actions simplify handling form submissions by passing the FormData object straight to your action, with no onSubmit handler or refs. - [use() and data fetching](https://flaviocopes.com/use-and-data-fetching.md): Learn how the React use() hook improves data fetching, replacing useEffect with Server Components that stream a promise into a Suspense boundary in React 19. - [What’s new in React 19](https://flaviocopes.com/whats-new-in-react-19.md): A tour of the new features in React 19, including Server Components, server actions, directives, and the new hooks that change how you build React apps. - [Adding React Framer Motion animations to an Astro site](https://flaviocopes.com/adding-react-framer-motion-animations-to-an-astro-site.md): Learn how to add a React Framer Motion animation to an Astro site, installing the React integration and using the client:load directive to hydrate it. - [Fix Uncaught Error Objects are not valid as a React child](https://flaviocopes.com/fix-uncaught-error-objects-are-not-valid-as-a-react-child.md): How to fix the Uncaught Error Objects are not valid as a React child, caused by forgetting to destructure props in your component function parameters. - [Fix the “Objects are not valid as a React child” error](https://flaviocopes.com/fix-the-objects-are-not-valid-as-a-react-child-error.md): How to fix the Objects are not valid as a React child found object Promise error in the Next.js pages folder by removing async from your page component. - [Using Vite to create a new React app](https://flaviocopes.com/vite-react-app.md): Learn how to create a new React app with Vite instead of create-react-app, running npm create vite@latest, picking React, then npm install and npm run dev. - [How to repeat displaying something in JSX](https://flaviocopes.com/repeat-something-jsx.md): Learn how to repeat something in JSX, like rendering a number of stars from a rating value, using the [...Array(n)].map() spread array trick. - [How to use useEffect callback with event callbacks](https://flaviocopes.com/fix-useeffect-event-callback.md): How to fix a useEffect event callback reading a stale variable value, by adding that variable to the hook dependency array so it stays up to date. - [Why does useEffect run two times?](https://flaviocopes.com/react-useeffect-two-times.md): Learn why useEffect runs two times in React 18, caused by strict mode in development, and how to stop it by removing the StrictMode wrapper component. - [Introduction to Remix](https://flaviocopes.com/remix.md): An introduction to Remix, the React framework that always runs on a server. Learn to scaffold a project with create-remix and load data with loader(). - [React DOM events on components](https://flaviocopes.com/react-dom-events-components.md): Learn how to handle DOM events like onMouseEnter on a React component by passing them as props and attaching the handlers to a real DOM element inside it. - [React, how to make responsive JSX](https://flaviocopes.com/react-responsive-jsx.md): Learn how to make responsive JSX in React using the react-responsive package and its useMediaQuery hook to detect screen size and render different layouts. - [Change the Heroicons SVG stroke width in React](https://flaviocopes.com/react-heroicons-stroke-width.md): How to change the stroke width of Heroicons in a React app to render thinner icons, simply by setting the stroke-width CSS property on the svg path element. - [React, how to dynamically choose a component to render](https://flaviocopes.com/react-dynamically-render-component.md): Learn how to dynamically choose which React component to render, from React.createElement and an object lookup to just passing the component itself as a value. - [Fix 'resolver is not a function' in React](https://flaviocopes.com/react-resolver-not-function.md): How to fix the TypeError: resolver is not a function error in a Next.js or React app, which is caused by a missing default export that you need to restore. - [React, how to make a checked checkbox editable](https://flaviocopes.com/react-checkbox-editable.md): Learn how to make a React checkbox start checked but still editable by using the defaultChecked attribute instead of checked, which locks the input state. - [The easy-peasy React state management library](https://flaviocopes.com/react-easy-peasy.md): Learn how to manage state in React with easy-peasy, a simple library built on Redux, using a store, the StoreProvider, useStoreState and useStoreActions hooks. - [useLocation and useHistory undefined in React Router](https://flaviocopes.com/react-router-uselocation-usehistory-undefined.md): Why do useLocation and useHistory return undefined in React Router? Because the Router wraps the same component using them, so move the Router one level up. - [React Router, how to get data from a dynamic route](https://flaviocopes.com/react-router-data-from-route.md): Learn how to get data from a dynamic route in React Router, using the useParams hook to read the id parameter, or reading it from props.match.params instead. - [React, edit text on doubleclick](https://flaviocopes.com/react-edit-doubleclick.md): Learn how to make text editable on double-click in React by toggling a state to swap a p element for an input, handling onChange and Enter and Escape keys. - [React, focus an item in React when added to the DOM](https://flaviocopes.com/react-focus-input-field.md): Learn the simplest way to focus an input in React as soon as it is added to the DOM: just use the autoFocus attribute, with a capital F in your JSX. - [How to move around blocks of code with React and Tailwind](https://flaviocopes.com/react-move-component-different-place.md): Learn how to move a React component to a different place depending on screen size, using Tailwind responsive classes like hidden xl:block to show it twice. - [Using useState with an object: how to update](https://flaviocopes.com/react-usestate-object.md): Learn how to update an object in React useState by creating a new object with the spread operator so the component rerenders, and how to remove a property. - [Can I use React hooks inside a conditional? ](https://flaviocopes.com/react-hooks-conditionals.md): Can you call React hooks inside a conditional? No, and here is why it breaks the order of hooks, plus how I fixed it by passing null to the useSWR hook. - [Fix 'cannot update a component while rendering' in React](https://flaviocopes.com/react-update-while-rendering-different-component.md): Learn how to fix the cannot update a component while rendering a different component error in React by moving your setState call inside a useEffect hook. - [How to configure HTTPS in a React app on localhost](https://flaviocopes.com/react-how-to-configure-https-localhost.md): Learn how to configure HTTPS on localhost in a create-react-app project by setting HTTPS=true and generating a local SSL certificate with openssl. - [Fix React form state not updating on browser autofill](https://flaviocopes.com/react-form-browser-autofill.md): How I fixed a React login form where browser autofill filled the fields but React state did not update, using a useRef and useEffect workaround to sync them. - [Fix 'dangerouslySetInnerHTML did not match' in React](https://flaviocopes.com/react-fix-dangerouslysetinnerhtml-did-not-match.md): Learn how to fix the React dangerouslySetInnerHTML did not match warning, caused by nesting a p tag inside another p tag, by switching the wrapper to a div. - [How to render HTML in React](https://flaviocopes.com/how-to-render-html-react.md): Learn how to render an HTML string in React without it being escaped, using the built-in dangerouslySetInnerHTML attribute or the react-html-parser library. - [How to debug a React application](https://flaviocopes.com/react-debugging.md): Learn how to debug a React app with the React Developer Tools, console.log, the debugger statement, and the VS Code debugger for Next.js server-side code. - [How to learn React](https://flaviocopes.com/how-to-learn-react.md): My recommended path to learn React from zero: build a solid JavaScript base first, study the React Handbook, then practice by building real sample apps. - [How to use the React Developer Tools](https://flaviocopes.com/react-developer-tools.md): Learn how to use the React Developer Tools browser extension to inspect your component tree and each component's props, state, and hooks while debugging. - [The Reach Router Tutorial](https://flaviocopes.com/react-reach-router.md): A quickstart to Reach Router in your React app, covering installation, defining routes with the path prop, navigation, links, and URL parameters. - [Connect your React app to a backend on the same origin](https://flaviocopes.com/how-to-serve-react-from-same-origin.md): How to serve a React and a server-side backend app from the same origin, without having to use CORS on the server and worrying about ports - [How to use the useReducer React hook](https://flaviocopes.com/react-hook-usereducer.md): Learn how the useReducer React hook manages complex state by dispatching actions to a pure reducer function, a Redux style alternative to useState. - [How to use the useContext React hook](https://flaviocopes.com/react-hook-usecontext.md): Learn how to use the useContext React hook to read the current value from the nearest Context Provider and re-render the component when that value changes. - [How to use the useRef React hook](https://flaviocopes.com/react-hook-useref.md): Learn how the useRef React hook lets you access a DOM element imperatively by attaching a ref and reading it through the current property of the ref. - [How to use the useMemo React hook](https://flaviocopes.com/react-hook-usememo.md): Learn how the useMemo React hook caches the result of an expensive calculation so it runs only once, and how the dependencies array controls recomputation. - [useEffect React hook, how to use](https://flaviocopes.com/react-hook-useeffect.md): Learn how to use the useEffect React hook to run side effects after render, control runs with a dependency array, and clean up with a returned function. - [How to use the useCallback React hook](https://flaviocopes.com/react-hook-usecallback.md): Learn what the useCallback React hook is for: it memoizes a function so it is not recreated on every render, which helps when passing callbacks to children. - [How to use the useState React hook](https://flaviocopes.com/react-hook-usestate.md): Learn how the useState React hook adds state to a function component, returning the current value and an updater function via array destructuring. - [How to get the value of an input element in React](https://flaviocopes.com/react-how-to-get-value-input.md): Learn how to get the value of a form input in React by storing it in state with useState and updating it from the input onChange event handler. - [React, how to transfer props to child components](https://flaviocopes.com/react-pass-props-to-children.md): Learn how to forward all the props a React component receives from its parent straight down to its own children using the JavaScript spread operator. - [Conditional rendering in React](https://flaviocopes.com/react-conditional-rendering.md): Learn how to conditionally render different JSX in a React component, using the ternary operator for if/else and the && operator when you only need an if. - [How to return multiple elements in JSX](https://flaviocopes.com/jsx-return-multiple-elements.md): Learn how to return multiple elements from a React component in JSX, working around the single-parent rule with a wrapper div, an array, or a Fragment. - [How to handle errors in React](https://flaviocopes.com/react-handle-errors.md): Learn how to handle errors in React with error boundaries: a component using componentDidCatch that catches crashes and shows a fallback message to users. - [How to pass a parameter to event handlers in React](https://flaviocopes.com/react-pass-parameter-event.md): Learn how to pass a parameter to an onClick event handler in React by wrapping the call in an arrow function, so it does not run immediately on mount. - [Testing React components](https://flaviocopes.com/react-testing-components.md): Learn how to test your first React component with Jest and react-testing-library, using render and fireEvent to check the output and simulate click events. - [React Render Props](https://flaviocopes.com/react-render-props.md): Learn the render props pattern in React, passing a function as a prop, often children, so a component can share its state with the components it renders. - [React Portals](https://flaviocopes.com/react-portals.md): Learn how React Portals render an element outside its component hierarchy with ReactDOM.createPortal, a perfect fit for modal windows styled at full screen. - [React StrictMode](https://flaviocopes.com/react-strictmode.md): Learn what React StrictMode is and how to use it to surface potential problems, deprecations, and bad practices, with warnings shown only in development. - [Handling Forms in React](https://flaviocopes.com/react-forms.md): Learn how to handle forms in React, including the difference between controlled and uncontrolled components and how to track input changes with onChange. - [Using SASS in React](https://flaviocopes.com/react-sass.md): Learn how to use SASS or SCSS to style a React application built with create-react-app, with no configuration needed, just import your scss file. - [CSS in React](https://flaviocopes.com/react-css.md): Learn the different ways to style a React app with CSS, from importing a CSS file and using className to inline styles with the style attribute. - [How to install React](https://flaviocopes.com/react-installation.md): Learn how to set up React, from loading it with script tags on a page to scaffolding a full project with create-react-app, CodeSandbox, or Codepen. - [Server Side Rendering with React](https://flaviocopes.com/react-server-side-rendering.md): Learn what server side rendering is, why it helps page speed and SEO, and how to render a React app to a string with Express and ReactDOMServer. - [Code Splitting in React](https://flaviocopes.com/react-code-splitting.md): Learn what code splitting is and how to add it to a React app with React.lazy and Suspense, so you load JavaScript only when a component is actually needed. - [React: Presentational vs Container Components](https://flaviocopes.com/react-presentational-vs-container-components.md): Understand the difference between presentational and container components in React: one is concerned with the look, the other with making things work. - [React Concept: Composition](https://flaviocopes.com/react-composition.md): Learn why composition is a key concept in React: build small, focused components, then combine them by specializing them and passing methods as props. - [Introduction to create-react-app](https://flaviocopes.com/react-create-react-app.md): Learn how to use create-react-app to start a React project with npx create-react-app, getting a dev server, hot reloading, and Jest with zero config. - [Introduction to React Hooks](https://flaviocopes.com/react-hooks.md): Learn how React Hooks let function components hold state with useState, run side effects with useEffect, and share logic through your own custom hooks. - [React Concept: Purity](https://flaviocopes.com/react-purity.md): Understand purity in React: a pure function returns the same output for the same input with no side effects, and a pure component depends only on its props. - [React Concept: Immutability](https://flaviocopes.com/react-immutability.md): Understand what immutability means in React, why you never mutate state directly but copy it instead, and how it gives you predictability and performance. - [React Lifecycle Events](https://flaviocopes.com/react-lifecycle-events.md): Learn the React class component lifecycle events across the mounting, updating, and unmounting phases, including render and componentDidMount. - [React Higher Order Components](https://flaviocopes.com/react-higher-order-components.md): Learn what React higher order components are: functions that take a component and return an enhanced one, a reusable pattern often named with a with prefix. - [Unidirectional Data Flow in React](https://flaviocopes.com/react-unidirectional-data-flow.md): Understand unidirectional data flow in React: state flows down to child components through props, actions update state, and data never flows back upward. - [How to reference a DOM element in React](https://flaviocopes.com/react-ref-element.md): Learn how to reference a DOM element in React using the ref attribute, so you can access the underlying node to call a DOM API or set focus on it. - [Introduction to Gatsby](https://flaviocopes.com/gatsby.md): An introduction to Gatsby, the React-based framework for building fast JAMstack sites: it pulls data with GraphQL, compiles to static HTML, and ships a PWA. - [How much JavaScript you need to know to use React?](https://flaviocopes.com/react-javascript.md): Find out how much JavaScript you need before learning React, from classes and ES modules to arrow functions, destructuring, and the spread operator. - [Should you use jQuery or React?](https://flaviocopes.com/jquery-vs-react.md): Should you use jQuery or React? My take: pick React for a single page app and its declarative views, and keep jQuery for bits of a server-rendered page. - [Props vs State in React](https://flaviocopes.com/react-state-vs-props.md): Understand the difference between props and state in React: props are passed down by the parent and never changed, while state is managed by the component. - [How to loop inside React JSX](https://flaviocopes.com/react-how-to-loop.md): Learn how to loop inside React JSX using the array map() method to render a list of items, returning a li element with a key prop for each value. - [React: How to show a different component on click](https://flaviocopes.com/react-show-different-component-on-click.md): Learn how to show a different React component when a button is clicked by storing a value in useState and conditionally rendering based on that state. - [React concepts: declarative](https://flaviocopes.com/react-declarative.md): Understand what it means that React is declarative: you describe what the UI should look like, and React updates the DOM for you, unlike imperative jQuery. - [React PropTypes](https://flaviocopes.com/react-proptypes.md): Learn how to use React PropTypes to declare the expected type of each prop, catch wrong values early, and mark a prop as mandatory with isRequired. - [The React Fragment](https://flaviocopes.com/react-fragment.md): Learn how to use React.Fragment, and its empty-tag shorthand, to return multiple elements from a component without adding an extra wrapper div to the output. - [React Props](https://flaviocopes.com/react-props.md): Learn how props pass data from parent to child components in React, how to set default values, and how the special children prop works in your components. - [The React State](https://flaviocopes.com/react-state.md): Learn how to work with state in React class components: set it in the constructor, read it from this.state, and update it only through setState to re-render. - [React Events](https://flaviocopes.com/react-events.md): Learn how to handle events in React using camelCase props like onClick and onSubmit, passing a function instead of a string and reading the event object. - [The Virtual DOM](https://flaviocopes.com/react-virtual-dom.md): Learn how the Virtual DOM works in React, keeping a copy of the DOM, diffing changes when a component is marked dirty, and batching updates to the real DOM. - [React Components](https://flaviocopes.com/react-components.md): Learn what React components are: isolated, reusable pieces of UI you compose together, and the two ways to define them as function or class components. - [Introduction to React](https://flaviocopes.com/react-introduction.md): An introduction to React, the JavaScript library from Facebook for building user interfaces, and the four core concepts: components, JSX, state, and props. - [Introduction to React Router](https://flaviocopes.com/react-router.md): Learn how React Router links the URL to your React app using BrowserRouter, Link, and Route components to show the right component for each path. - [Styled Components](https://flaviocopes.com/styled-components.md): Learn how Styled Components let you write CSS-in-JS scoped to a single React component, so styles never leak, with support for props and vendor prefixes. - [Getting started with JSX](https://flaviocopes.com/jsx.md): Get started with JSX, the declarative syntax React uses to describe UI in JavaScript: learn how to embed JS, write HTML like className, and loop in JSX. - [Learn how to use Redux](https://flaviocopes.com/redux.md): Redux is a state manager that's usually used along with React, but it's not tied to that library. Learn Redux by reading this simple and easy to follow guide - [The roadmap to learn React](https://flaviocopes.com/react.md): React is a JavaScript library that aims to simplify development of visual interfaces. Learn why it's so popular and what problems does it solve. - [Tutorial: create a Spreadsheet using React](https://flaviocopes.com/tutorial-react-spreadsheet.md): A tutorial to build a simple spreadsheet in React, like a Google Sheets or Excel clone, with Table and Cell components, formulas, and local storage. - [Create an app with Electron and React](https://flaviocopes.com/react-electron.md): Learn how to build an Electron desktop app with React and create-react-app, wiring up foreman and ESLint, or starting from electron-react-boilerplate. - [How to pass props to a child component via React Router](https://flaviocopes.com/react-pass-props-router.md): Learn how to pass props to a child component through React Router by using the Route render prop, so the component reads them directly as normal props. - [Build a simple counter with React](https://flaviocopes.com/react-example-counter.md): Build a simple counter in React: render buttons that increment the count by 1, 10, 100, or 1000, wiring each click through state and an onClickFunction prop. - [React app example: fetch GitHub users from the API](https://flaviocopes.com/react-example-githubusers.md): Build a small React app where a form takes a GitHub username, fetches that user from the GitHub API with Axios, and shows the result in a Card component. ## Redis - [How to use Redis from Node.js](https://flaviocopes.com/how-to-use-redis-nodejs.md): Learn how to use Redis from Node.js with the node-redis client: connect, store and read keys, and work with lists, sets, hashes, and pub/sub subscriptions. - [Redis Publish/subscribe](https://flaviocopes.com/redis-publish-subscribe.md): Learn how Redis publish/subscribe messaging works, using the SUBSCRIBE and PUBLISH commands to send a message on a channel to multiple subscribers at once. - [How to use Redis Hashes](https://flaviocopes.com/redis-hashes.md): Learn how to use Redis hashes to store object-like items with multiple fields under one key, using HMSET, HGETALL, HSET and HINCRBY to manage their values. - [How to use Redis Sorted Lists](https://flaviocopes.com/redis-sorted-lists.md): Learn how to use Redis sorted sets, which attach a score to each item, with ZADD, ZRANK, ZRANGE and ZINCRBY, perfect for building a leaderboard. - [Using Redis Sets](https://flaviocopes.com/redis-sets.md): Learn how to use Redis sets, which are unordered and hold each item once, with SADD, SMEMBERS, SISMEMBER, SCARD and SINTER to intersect two sets. - [Redis Lists](https://flaviocopes.com/redis-lists.md): Learn how to work with Redis lists using LPUSH and RPUSH to add items, LLEN to count them, LPOP and RPOP to remove them, and LRANGE to read a range of items. - [First steps with Redis](https://flaviocopes.com/redis-first-steps.md): Take your first steps with Redis using redis-cli, learning the SET and GET commands, key expiration with SETEX and TTL, and atomic INCR and DECR operations. - [How to install Redis](https://flaviocopes.com/redis-installation.md): Learn how to install Redis on macOS with Homebrew using brew install redis, and on Linux with apt-get, then start the server listening on port 6379. - [Introduction to Redis](https://flaviocopes.com/redis-introduction.md): An introduction to Redis, the open source NoSQL key/value store that keeps data in memory for high performance, and is used as a cache and a message broker. - [The Heroku Redis Maxmemory Policy](https://flaviocopes.com/heroku-redis-maxmemory-policy.md): Learn how the Heroku Redis maxmemory-policy setting controls eviction when memory fills up, compare options like allkeys-lru, and set it from the Heroku CLI. ## Services - [Val Town: write and deploy code in seconds](https://flaviocopes.com/val-town.md): A hands-on tutorial for Val Town, where you write JavaScript and deploy it to a live URL instantly, with HTTP, cron, and email triggers plus SQLite storage. - [Railway: Effortless Web App Deployments](https://flaviocopes.com/railway.md): A complete guide to Railway, the deployment platform that ships your app from a GitHub repo with zero config, plus managed databases, volumes and domains. - [Deploying an Astro + PostgreSQL app on Railway](https://flaviocopes.com/deploying-an-astro-postgresql-app-on-railway.md): Learn how to deploy an Astro and PostgreSQL app on Railway, connecting the DATABASE_URL variable, setting a custom start command, and running migrations. - [Best SMTP server for development](https://flaviocopes.com/best-smtp-server-for-development.md): Why I use Resend as my SMTP server for development: you can generate multiple named API keys, hook them into Supabase, and revoke each one afterward. - [Supabase email rate limit](https://flaviocopes.com/supabase-email-rate-limit.md): How to fix the Supabase 'email rate limit exceeded' error when testing auth emails, by setting up your own SMTP server in the authentication settings. - [Durable cache on Netlify](https://flaviocopes.com/durable-cache-on-netlify.md): A quick note on Netlify Durable Caching, a technique to cache serverless function responses across all edge nodes, handy for speeding up Astro server pages. - [Fix 'Too many redirects' after enabling Cloudflare proxy](https://flaviocopes.com/fix-too-many-redirects-error-after-enabling-cloudflare-proxy.md): Learn how to fix the Too many redirects error after enabling the Cloudflare proxy, by switching the SSL/TLS encryption mode from Flexible to Full. - [Deploy to Fly via GitHub action](https://flaviocopes.com/deploy-to-fly-via-github-action.md): Learn how to set up continuous deployment to Fly.io with a GitHub Actions workflow that runs flyctl deploy using a FLY_API_TOKEN secret on every push. - [Deployment strategy on fly.io](https://flaviocopes.com/deployment-strategy-on-flyio.md): Understand how deployment works on Fly.io, where each service gets its own Dockerfile and services talk to each other over the internal .internal domain. - [Fly.io, list all regions available](https://flaviocopes.com/flyio-list-all-regions-available.md): Learn how to list all the regions available on Fly.io, either from the regions docs page or by running the fly platform regions command in your terminal. - [Run an app on fly.io](https://flaviocopes.com/run-an-app-on-flyio.md): Learn how to deploy an app on fly.io: create an account, install flyctl, run fly auth login, add a Dockerfile, then fly launch and fly deploy. - [Run PocketBase on fly.io](https://flaviocopes.com/run-pocketbase-on-flyio.md): Learn how to run PocketBase on fly.io with a Dockerfile, then attach a persistent volume with fly volumes create so your data survives deploys. - [Running a recent Node version on DigitalOcean App platform](https://flaviocopes.com/running-a-recent-node-version-on-digitalocean-app-platform.md): Learn how to run a recent Node.js version on DigitalOcean App Platform by switching the buildpack to ubuntu-22 and setting the engines field in package.json. - [Sending emails with nodemailer on Vercel](https://flaviocopes.com/sending-emails-with-nodemailer-on-vercel.md): Learn how to send emails with nodemailer on Vercel, where the callback version of sendMail silently fails in serverless and you must await the promise instead. - [Render app deploy stuck on in progress](https://flaviocopes.com/render-app-deploy-stuck-on-in-progress.md): Learn how to fix a Render deploy stuck forever on in progress, caused by binding to 127.0.0.1, by starting your app on host 0.0.0.0 instead. - [How to use ES modules in Netlify functions](https://flaviocopes.com/how-to-use-es-modules-in-netlify-functions.md): Learn how to use ES modules in Netlify functions: add type module to package.json, switch to export async function handler, and return instead of callback. - [How to return HTML from a Netlify function](https://flaviocopes.com/how-to-return-html-from-a-netlify-function.md): Learn how to return HTML from a Netlify function by setting the Content-type header to text/html instead of returning plain text in the response body. - [Trigger a Netlify, Vercel, or Cloudflare redeploy via link](https://flaviocopes.com/how-to-trigger-a-netlify-vercel-cloudflare-pages-redeploy-using-a-link.md): Learn how to trigger a Netlify, Vercel, or Cloudflare Pages redeploy from a link by loading a hidden page that sends a POST request to your deploy hook. - [How to fix the objectID required error on Algolia](https://flaviocopes.com/fix-algolia-objectid-required.md): Learn how to fix the Algolia error that the objectID attribute is required to use action=updateObject, caused by a record with an empty objectID to remove. - [Cloud cron jobs with Netlify Scheduled Functions](https://flaviocopes.com/netlify-cloud-cron-jobs.md): Learn how to set up cloud cron jobs with Netlify Scheduled Functions, scheduling runs with @hourly, @daily, or a cron expression in netlify.toml. - [How to use Netlify Edge Functions](https://flaviocopes.com/netlify-edge-functions.md): Learn how to use Netlify Edge Functions to run code on the CDN edge for geolocation, A/B testing, and redirects, configured through a netlify.toml file. - [How to create a IAM user in AWS](https://flaviocopes.com/aws-how-to-create-iam-user.md): Learn how to create an AWS IAM user with programmatic access, attaching a policy like AmazonS3FullAccess and getting the access key ID and secret access key. - [How to test Netlify Functions locally](https://flaviocopes.com/netlify-functions-testing.md): Learn how to test Netlify Functions locally with the Netlify CLI: run netlify functions:serve, hit them on port 9999, and pick up your environment variables. - [How to make your S3 buckets public](https://flaviocopes.com/aws-s3-public.md): Learn how to make your AWS S3 bucket publicly readable when the ACL settings do not work, by adding a bucket policy that allows s3:GetObject for everyone. - [Fix the 'Upload preset not found' error in Cloudinary](https://flaviocopes.com/cloudinary-fix-upload-preset-not-found.md): Fix the Cloudinary Upload preset not found error, a 400 Bad Request, by creating an upload preset in the dashboard and passing its name as upload_preset. - [How to host a Web Application using DigitalOcean Apps](https://flaviocopes.com/digitalocean-apps.md): Learn how to deploy and host a web app on the DigitalOcean App Platform by pushing to a GitHub repo, letting the platform handle the server for you. - [How to create your first VPS on DigitalOcean](https://flaviocopes.com/digitalocean-create-vps.md): A step-by-step guide to creating your first Linux VPS on DigitalOcean, from setting up your account to spinning up and configuring a droplet from scratch. - [How to use npm packages in Netlify Functions](https://flaviocopes.com/netlify-functions-npm-packages.md): Learn how to use npm packages in Netlify Functions: run npm init, install what you need, commit node_modules, then require() them in your function. - [How to use environment variables in Netlify functions](https://flaviocopes.com/netlify-functions-env-variables.md): Learn how to read environment variables in Netlify Functions through process.env, where to set them in the dashboard, and how Edge Functions use Deno.env.get. - [How to access query parameters in Netlify functions](https://flaviocopes.com/netlify-functions-query-parameters.md): Learn how to access query parameters in a Netlify Function by reading the event.queryStringParameters object available inside the handler function. - [How I fixed the trailing slash in Netlify rewrites](https://flaviocopes.com/netlify-fix-trailing-slash-rewrite.md): How I fixed broken relative links and images caused by missing trailing slashes in Netlify rewrites, using a tiny client-side script to append the slash. - [How to use Firebase Firestore as your database](https://flaviocopes.com/firebase-firestore.md): Learn how to use Firebase Firestore as your database: create collections and documents, read and write data from JavaScript, and set up security rules. - [Netlify Lambda Functions Tutorial](https://flaviocopes.com/netlify-functions.md): Learn how to use Netlify Functions to add dynamic, serverless logic to your JAMstack sites, writing a Node.js handler that runs on AWS Lambda for you. - [How to authenticate to any Google API](https://flaviocopes.com/google-api-authentication.md): Learn how to authenticate to any Google API through the Developers Console: create a project, set up service credentials, and use the JSON key file. - [Airtable API for Developers](https://flaviocopes.com/airtable.md): Learn why Airtable, a hybrid of spreadsheet and database, is great for prototyping MVPs, and how its REST API and excellent docs make it easy to work with. - [Glitch, a great Platform for Developers](https://flaviocopes.com/glitch.md): Glitch is a pretty amazing platform to learn and experiment with code. This post introduces you to Glitch and makes you go from zero to hero - [Auto trigger deploys on Netlify](https://flaviocopes.com/netlify-auto-deploy.md): Learn how to auto-trigger daily Netlify deploys for scheduled Hugo posts by hitting a build hook webhook on a timer with IFTTT, so posts publish on their own. - [Code Linters and Formatters for Web Developers](https://flaviocopes.com/online-code-linters-formatters.md): There are many online tools that help you lint or format code. This post list many of the most useful ones for HTML, CSS and JavaScript - [A tutorial to host your Static Site on Netlify](https://flaviocopes.com/netlify.md): Discover Netlify, a great hosting service ideal for static sites which has a nice free plan, free CDN and it's blazing fast - [How to start with Firebase Hosting](https://flaviocopes.com/firebase-hosting.md): Firebase is a Google Cloud service, an articulated product, mainly targeted at mobile applications. Firebase Hosting is one small part of it. ## Svelte - [How to simulate a for loop in Svelte templates](https://flaviocopes.com/svelte-simulate-for-loop.md): Learn how to simulate a for loop in Svelte templates with the each block and the Array(n) syntax to repeat a block a number of times based on a variable. - [How to redirect to a URL in Sapper](https://flaviocopes.com/sapper-redirect-to-url.md): Learn how to redirect to another URL in Sapper by calling this.redirect with a 301 status inside the preload function of your Svelte route module. - [How to dynamically apply CSS in Svelte](https://flaviocopes.com/svelte-dynamically-apply-css.md): Learn how to dynamically apply CSS in Svelte by toggling a class based on a variable, using the class:name directive and its concise shorthand syntax. - [Access a URL parameter outside Sapper script module](https://flaviocopes.com/sapper-access-url-param-outside-module.md): Learn how to access a URL parameter in Sapper outside the preload function by returning it from preload and exposing it as a prop with export let. - [Cross-component State Management in Svelte](https://flaviocopes.com/svelte-state-management.md): Learn how to manage state across components in Svelte with three approaches: passing props down the tree, the Context API, and shared stores. - [Working with events in Svelte](https://flaviocopes.com/svelte-events.md): Learn how to work with events in Svelte using the on:event syntax for DOM events, plus modifiers like stopPropagation and preventDefault to control them. - [Resolve promises in Svelte templates](https://flaviocopes.com/svelte-templates-promises.md): Learn how to resolve promises directly in Svelte templates with the await block, showing different markup for the waiting, then, and catch states. - [Svelte templates: loops](https://flaviocopes.com/svelte-templates-loops.md): Learn how to create loops in Svelte templates with the each block, getting the iteration index and adding a key to lists so updates stay reliable. - [Svelte Lifecycle Events](https://flaviocopes.com/svelte-lifecycle-events.md): Learn how to work with lifecycle events in Svelte, hooking into onMount, onDestroy, beforeUpdate, and afterUpdate to run code at the right moment. - [Reactive Statements in Svelte](https://flaviocopes.com/svelte-reactive-statements.md): Learn how to use reactive statements in Svelte with the $: syntax to define blocks that automatically re-run whenever the variables they reference change. - [Handling State Updates in Svelte](https://flaviocopes.com/svelte-reactive-assignments.md): Learn how Svelte handles state updates with plain assignments like count++, and why you must reassign an array after using push so Svelte detects the change. - [Svelte Bindings](https://flaviocopes.com/svelte-bindings.md): Learn how to use bindings in Svelte to create two-way data binding between your state and the UI, with bind:value, bind:checked, and bind:group for forms. - [How to add comments in Svelte templates](https://flaviocopes.com/svelte-comments.md): Learn how to add comments in Svelte templates and why, unlike plain HTML comments, Svelte strips them out completely so they never reach the browser. - [Svelte Slots](https://flaviocopes.com/svelte-slots.md): Learn how to use slots in Svelte to compose components, passing content into a child with the slot element, plus default content and named slots. - [How to rerender a Svelte component on demand](https://flaviocopes.com/svelte-rerender-on-demand.md): How to rerender a Svelte component on demand and in particular how to rerender it when I want to run a function prop again - [Svelte templates: conditional logic](https://flaviocopes.com/svelte-templates-conditionals.md): Learn how to use conditional logic in Svelte templates with the if and else blocks, rendering markup based on truthy or falsy values or any JS expression. - [Export functions and variables from a Svelte component](https://flaviocopes.com/svelte-export-from-component.md): Learn how to export functions and variables from a Svelte component using a script tag with context='module', so other components can import them. - [How to import components in Svelte](https://flaviocopes.com/svelte-import-components.md): Learn how to import components in Svelte, where each .svelte file is a single file component you bring in with an import statement and use like an HTML tag. - [How to work with props in Svelte](https://flaviocopes.com/svelte-props.md): Learn how to work with props in Svelte and let two components with a parent/child relationship communicate with each other - [Getting started with Svelte - a short tutorial](https://flaviocopes.com/svelte-getting-started.md): Get started with Svelte, the compiled JavaScript framework, by scaffolding a project with npx degit, installing dependencies, and running npm run dev. ## Swift - [What iPhone Developer Mode does, and when you should enable it](https://flaviocopes.com/iphone-developer-mode.md): Learn what iPhone Developer Mode unlocks for Xcode, debugging, Instruments, and local apps, plus its security and privacy tradeoffs. - [Swift: How to use SF Symbols](https://flaviocopes.com/swift-sf-symbols.md): Learn how to use SF Symbols in Swift, the Apple app that lets you browse over 1500 icons and find the name to pass to a Label via systemImage. - [SwiftUI: the Label view](https://flaviocopes.com/swiftui-label.md): Learn how to use the Label view in SwiftUI to show an icon next to some text, passing a title and an SF Symbols icon name to the systemImage parameter. - [SwiftUI: how to create a Tab View](https://flaviocopes.com/swiftui-tabview.md): Learn how to create a tab bar in SwiftUI with TabView, adding each screen with the tabItem modifier and a Label so users can switch by tapping an icon. - [SwiftUI: the NavigationView view](https://flaviocopes.com/swiftui-navigationview.md): Learn how to use NavigationView in SwiftUI to set a navigationTitle and let users tap a NavigationLink to move from one view to another in your app. - [SwiftUI: formatting decimals in Text view](https://flaviocopes.com/swiftui-formatting-decimals-text-view.md): Learn how to format a decimal number in a SwiftUI Text view using the specifier parameter, so a Double like 34.000000 finally shows as a clean 34. - [SwiftUI: conditionally show items in the view](https://flaviocopes.com/swiftui-conditionally-show-hide.md): Learn how to conditionally show or hide views in a SwiftUI form, using an if statement and a Toggle to reveal extra options only when it is enabled. - [SwiftUI forms: DatePicker](https://flaviocopes.com/swiftui-forms-datepicker.md): Learn how to use the DatePicker control in SwiftUI to let users pick a date and time, and how displayedComponents limits it to just the date or time. - [SwiftUI forms: Stepper](https://flaviocopes.com/swiftui-forms-stepper.md): Learn how to use the Stepper control in SwiftUI to pick a number with minus and plus buttons, and how the in parameter limits the range of values. - [SwiftUI forms: Slider](https://flaviocopes.com/swiftui-forms-slider.md): Learn how to use the Slider control in SwiftUI to let users drag to pick a value, setting its value, in range, and step parameters to control the range. - [SwiftUI forms: Picker](https://flaviocopes.com/swiftui-forms-picker.md): Learn how to use the Picker control in SwiftUI to choose one option from a list, bind it with selection, and why it needs a NavigationView to work. - [SwiftUI forms: Toggle](https://flaviocopes.com/swiftui-forms-toggle.md): Learn how to use the Toggle control in SwiftUI to get an on or off choice from the user, binding a Bool value to its isOn parameter like the Settings app. - [SwiftUI forms: TextField](https://flaviocopes.com/swiftui-forms-textfield.md): Learn how to use the TextField control in SwiftUI to get text input from the user, binding it to a @State property and setting placeholder text. - [SwiftUI forms](https://flaviocopes.com/swiftui-forms.md): Learn how forms work in SwiftUI by wrapping controls like TextField, Toggle, and Picker in a Form view that styles them right for each platform. - [SwiftUI: the ForEach view](https://flaviocopes.com/swiftui-foreach.md): Learn how to use the ForEach view in SwiftUI to loop over a range or an array and generate views, including how the id parameter identifies each item. - [SwiftUI: the List view](https://flaviocopes.com/swiftui-list.md): Learn how to use the List view in SwiftUI to show data in rows, group items with the Section view, and change its look with the listStyle modifier. - [SwiftUI: images](https://flaviocopes.com/swiftui-images.md): Learn how to display an image in SwiftUI with the Image view, from loading an asset or a system image to modifiers like resizable, frame, and clipShape. - [SwiftUI: alert messages](https://flaviocopes.com/swiftui-alert.md): Learn how to show an alert in SwiftUI using the .alert() modifier and an isPresented boolean, so a message pops up when a condition becomes true. - [SwiftUI: the Button view and updating the app state](https://flaviocopes.com/swiftui-button-view.md): Learn how to use the Button view in SwiftUI to run an action when tapped, and why you need the @State property wrapper to update your app's state. - [SwiftUI: properties](https://flaviocopes.com/swiftui-properties.md): Learn how to add properties to a SwiftUI view and use them in your text, like a name constant interpolated into a Text view to greet the user. - [SwiftUI: spacing](https://flaviocopes.com/swiftui-spacing.md): Learn how to add spacing between views in SwiftUI using the spacing parameter of a VStack, the Spacer view, and the frame modifier to size the gap. - [SwiftUI: stacks and groups](https://flaviocopes.com/swiftui-stacks.md): Learn how to lay out multiple views in SwiftUI using HStack, VStack, and ZStack to align them on each axis, plus Group to bundle views together. - [SwiftUI: exploring views and modifiers](https://flaviocopes.com/swiftui-views-modifiers.md): Learn how views and modifiers work in SwiftUI, how a modifier like font() returns a brand new view, and why the order you apply modifiers matters. - [Introduction to SwiftUI](https://flaviocopes.com/swiftui-introduction.md): An introduction to SwiftUI, Apple's modern declarative and reactive way to build iOS, iPadOS, watchOS, and macOS apps with far less code than UIKit. - [Swift Modules](https://flaviocopes.com/swift-modules.md): Learn how modules work in Swift to group files so you can reuse and encapsulate code, and how importing frameworks like SwiftUI and UIKit brings them in. - [Why iOS](https://flaviocopes.com/why-ios.md): Why I started learning iOS development as a long-time web developer: Swift and SwiftUI open a new world, letting me build apps the web simply cannot. - [Some thoughts on SwiftUI](https://flaviocopes.com/thoughts-swiftui.md): My thoughts on SwiftUI as a long-time React developer: it borrows declarative, data-driven UI from React and is finally mature enough to commit to. - [Introduction to Swift and iOS development for Web developers](https://flaviocopes.com/ios-for-web-devs.md): My take on iOS development for web developers: how Swift and the App Store compare to the open Web, from Apple's walled garden to native power and reach. - [Installing iOS and Mac beta releases](https://flaviocopes.com/apple-install-beta-releases.md): Learn how to install the iOS, iPadOS, and macOS beta releases Apple ships after WWDC, using the free Apple Beta Software Program or a developer membership. - [How to join the Apple Developer Program](https://flaviocopes.com/apple-developer-program.md): Learn how to join the Apple Developer Program, the $99 per year membership you need to publish your apps to the App Store and access private betas. - [Swift, how to get a random item from an array](https://flaviocopes.com/swift-array-random-item.md): Learn how to get a random item from an array in Swift using the randomElement() method, which returns an optional Element from your array. - [How to shuffle an array in Swift](https://flaviocopes.com/swift-array-shuffle.md): Learn how to shuffle an array in Swift two ways: the shuffle() method that mutates the array in place, and shuffled() that returns a new shuffled array. - [Swift Operators Precedence and Associativity](https://flaviocopes.com/swift-operators-precedence.md): Learn how operator precedence and associativity decide the order Swift evaluates an expression, so you know why 1 + 2 * 3 returns 7 and not 9. - [Swift Protocols](https://flaviocopes.com/swift-protocols.md): Learn how protocols work in Swift to give different types a shared set of properties and methods, and how a struct or class adopts and conforms to them. - [Swift Functions](https://flaviocopes.com/swift-functions.md): Learn how to declare functions in Swift with the func keyword, pass labeled parameters, return values, and use tuples to return more than one value. - [Swift Classes](https://flaviocopes.com/swift-classes.md): An introduction to classes in Swift: defining properties and methods, why classes are reference types, writing initializers with self, and inheritance. - [Swift Structures](https://flaviocopes.com/swift-structures.md): Learn how structures work in Swift, from defining stored properties and methods to why structs are value types that get copied when passed around. - [Swift Enumerations](https://flaviocopes.com/swift-enumerations.md): An introduction to enumerations in Swift: how to group options under a type, use them in switch statements, and assign raw values you read with rawValue. - [Swift optionals and nil](https://flaviocopes.com/swift-optionals-nil.md): Learn how optionals and nil work in Swift, how to declare an optional with a question mark, and how to safely unwrap its value using an if let statement. - [Swift Tuples](https://flaviocopes.com/swift-tuples.md): Learn how to use tuples in Swift to group several values together, name and decompose their elements, return multiple values, and even swap variables. - [Swift Dictionaries](https://flaviocopes.com/swift-dictionaries.md): An introduction to dictionaries in Swift: how to create key-value pairs, read and change values by key, add and remove entries, and use count and isEmpty. - [Swift Sets](https://flaviocopes.com/swift-sets.md): Learn how to use sets in Swift to store unique, unordered items, from insert and contains to count, plus set math like union and intersection. - [Arrays in Swift](https://flaviocopes.com/swift-arrays.md): An introduction to arrays in Swift: how to declare and type them, access items, and use methods like append, insert, remove, count, isEmpty, and sort. - [Booleans in Swift](https://flaviocopes.com/swift-booleans.md): An introduction to booleans in Swift using the Bool type, which holds true or false and powers conditionals like if statements and the ternary operator. - [Strings in Swift](https://flaviocopes.com/swift-strings.md): Learn how to work with strings in Swift, including string literals, multi-line strings, interpolation, and concatenation, with beginner-friendly examples. - [Numbers in Swift](https://flaviocopes.com/swift-numbers.md): Learn how numbers work in Swift, from the main Int and Double types to sized integers like Int8 and UInt, and how to convert one numeric type to another. - [Semicolons in Swift](https://flaviocopes.com/swift-semicolons.md): Learn why semicolons are optional in Swift, and the one case where you actually need one: writing more than one statement on the same line of code. - [Swift Comments](https://flaviocopes.com/swift-comments.md): Learn how to write comments in Swift, including single-line comments, multi-line comments, and the handy ability to nest multi-line comments together. - [Swift Loops Control Transfer Statements](https://flaviocopes.com/swift-loops-control-transfer.md): Learn how to use the continue and break statements in Swift to control the flow inside a loop, skipping an iteration or ending the loop early. - [Swift loops: the repeat-while loop](https://flaviocopes.com/swift-loops-repeat-while.md): Learn how the repeat-while loop works in Swift, where the condition is checked at the end so the loop body always runs at least once before repeating. - [Swift loops: the while loop](https://flaviocopes.com/swift-loops-while.md): Learn how to use the while loop in Swift to repeat a block of code as long as a condition stays true, with the condition checked before each iteration. - [Swift loops: the for-in loop](https://flaviocopes.com/swift-loops-for-in.md): Learn how to use for-in loops in Swift to iterate a set number of times with a range, or loop over the elements of an array, a set, or a dictionary. - [Swift Conditionals: ternary conditional](https://flaviocopes.com/swift-conditionals-ternary-operator.md): Learn how to use the ternary conditional operator in Swift, a shorter version of an if statement that returns one value when true and another when false. - [Swift conditionals: the switch statement](https://flaviocopes.com/swift-conditionals-switch.md): Learn how to use switch statements in Swift to handle multiple cases cleanly, including the mandatory default case, matching enum cases, and value ranges. - [Swift conditionals: the if statement](https://flaviocopes.com/swift-conditionals-if.md): Learn how to use if and else conditionals in Swift, write boolean conditions cleanly, and why Swift prevents the bug of assigning instead of comparing. - [Swift Operators](https://flaviocopes.com/swift-operators.md): A guide to Swift operators, covering the assignment, arithmetic, compound assignment, comparison, range, and logical operators you use to work with values. - [Swift Objects](https://flaviocopes.com/swift-objects.md): In Swift everything is an object that can receive messages. Learn how values get methods and properties, and meet the class, struct, and enum object types. - [Swift Variables](https://flaviocopes.com/swift-variables.md): Learn how variables work in Swift, the difference between var and let constants, how type inference assigns a type, and why a variable is bound to it. - [Introduction to the Swift programming language](https://flaviocopes.com/swift-introduction.md): An introduction to Swift, the statically typed, compiled language Apple created in 2014 to build apps for iOS, iPadOS, watchOS, macOS, and beyond. ## Tools - [A hands-on guide to The Agency, a collection of AI agents](https://flaviocopes.com/agency-agents.md): How to install and use The Agency (agency-agents), a collection of specialized AI agents for Claude Code, Cursor, and other coding tools - [How to recover lost data from an SD card](https://flaviocopes.com/how-to-recover-lost-data-from-an-sd-card.md): Learn how to recover lost or deleted files from an SD card using photorec, a free command line tool you can install with Homebrew and run with sudo. - [Searching for the perfect e-ink writing device](https://flaviocopes.com/searching-for-the-perfect-e-ink-writing-device.md): My research into the perfect e-ink writing device, weighing the Remarkable, Freewrite Traveler, and Boox tablets like the Note Air3 for writing outdoors. - [Fixing TS issues in VS Code - Astro](https://flaviocopes.com/fixing-ts-issues-in-vs-code-astro.md): How to fix common TypeScript issues in VS Code with Astro, from reloading the window to checking @ path aliases and running npx astro sync. - [Pasting code snippets in Discord](https://flaviocopes.com/pasting-code-snippets-in-discord.md): Learn how to paste clean code snippets in Discord by wrapping them in triple backticks, then adding a language tag like js for syntax highlighting. - [regex select entire line starting with..](https://flaviocopes.com/regex-select-entire-line-starting-with.md): Learn how to use a regex like ^booktitle:.* in VS Code to select an entire line starting with a given prefix, then delete it by replacing with nothing. - [How to disable 1Password in an input field](https://flaviocopes.com/how-to-disable-1password-in-an-input-field.md): Learn how to stop the 1Password icon from showing in an input field by adding the data-1p-ignore attribute, or by renaming the field name and id attributes. - [Fix tsconfig.json 'cannot find type definition file for node'](https://flaviocopes.com/fix-error-in-tsconfigjson-cannot-find-type-definition-file-for-node.md): Fix the tsconfig.json 'cannot find type definition file for node' error by installing the @types/node package as a dev dependency and reloading VS Code. - [How to automatically run Prettier on all files in a project](https://flaviocopes.com/how-to-automatically-run-prettier-on-all-files-in-a-project.md): Learn how to run Prettier across every file in your project by adding a .prettierrc config and running npx prettier -w . to format them all at once. - [Notion API, how to retrieve the entries in a database](https://flaviocopes.com/notion-api-how-to-retrieve-the-entries-in-a-database.md): Learn how to retrieve all entries in a Notion database with the official API by initializing the client and calling notion.databases.query(). - [Vite Tutorial](https://flaviocopes.com/vite-tutorial.md): Understand what Vite is and why it is fast: instead of bundling, it ships native ES modules to browsers, with scaffolding, a dev server with HMR, and builds. - [Hiding classes in VS Code](https://flaviocopes.com/hiding-classes-in-vs-code.md): Learn how the Tailwind Fold VS Code extension hides long class lists in your JSX and HTML files for a cleaner look, then reveals them again when you click. - [What is SWC?](https://flaviocopes.com/swc.md): An introduction to SWC, the Rust-based tool that compiles JavaScript and TypeScript like Babel but up to 20x faster, now used by Vite 4 and Turbopack. - [Notion API, update the icon emoji of a page](https://flaviocopes.com/notion-api-update-the-icon-emoji-of-a-page.md): Learn how to update the icon emoji of a Notion page using the Notion API by calling notion.pages.update with an icon object of type emoji. - [Notion API, update a checkbox value in a database](https://flaviocopes.com/notion-api-update-a-checkbox-value-in-a-database.md): Learn how to update a checkbox value in a Notion database with the API by calling notion.pages.update() with the page id and the new checkbox property value. - [Notion API, select all pages with a specific emoji](https://flaviocopes.com/notion-api-select-all-pages-with-a-specific-emoji.md): Learn how to find all Notion subpages that use a specific emoji icon by listing child_page blocks, retrieving each page, and checking its icon emoji value. - [What's the best platform to deploy your projects?](https://flaviocopes.com/which-platform-to-deploy.md): A guide to choosing the best platform to deploy your projects, from playgrounds like Replit and Glitch to Vercel, Netlify, Railway, Render, and your own VPS. - [How to do an endless video stream](https://flaviocopes.com/endless-video-stream.md): How I created an endless YouTube live stream from a pre-recorded video using ffmpeg with stream_loop set to -1 and my RTMP stream key, looping it forever. - [Fix a package.json error after installing Prettier](https://flaviocopes.com/fix-error-package-json-prettier.md): Fix a confusing package.json error after installing the Prettier config for Astro: the real culprit was an empty tailwind.config.js that needed empty braces. - [How to fix prettier messing up your HTML on save](https://flaviocopes.com/vscode-prettier-fix-html-mess.md): Fix Prettier messing up your HTML on save in VS Code by setting the HTML editor.defaultFormatter to vscode.html-language-features in settings.json. - [Search and replace in VS Code using Regular Expressions](https://flaviocopes.com/vscode-search-replace-regex.md): Learn how to search and replace in VS Code using regular expressions with capturing groups, referencing matches with $1 and $2 to fix thousands of files. - [Fix a PostCSS Webpack error ruleSet rules oneOf... etc etc](https://flaviocopes.com/fix-postcss-webpack-ruleset-oneof.md): Learn how to fix the Next.js PostCSS webpack ruleSet oneOf error and Cannot find module tailwindcss, caused by a stray postcss.config.js in a parent folder. - [Syntax highlight any block on a Web Page](https://flaviocopes.com/syntax-highlight-any-block-web-page.md): Learn how to syntax highlight any element on a web page with highlight.js and hljs.highlightElement, even when your code is not inside a code tag. - [How to fix the ffmpeg not found error with youtube-dl](https://flaviocopes.com/fix-ffmpeg-not-found-youtube-dl.md): Fix the 'ffmpeg not found' error from youtube-dl when extracting audio to mp3, by installing ffmpeg on your Mac with a single brew install ffmpeg command. - [Format Astro files in VS Code with Prettier](https://flaviocopes.com/how-to-format-astro-vscode.md): Learn how to auto-format .astro files in VS Code with Prettier by installing prettier-plugin-astro and enabling Format On Save and Format On Paste. - [What is a webhook?](https://flaviocopes.com/webhooks.md): Understand what a webhook is: a POST request handler that another service calls when an event happens, like a payment, so your app can react and run some work. - [Remove EXIF data from images](https://flaviocopes.com/remove-exif-images.md): Learn how to remove EXIF data like location from images on a Mac, using the ImageOptim app or the exiv2 command line tool with exiv2 rm to strip the metadata. - [Scraping with Puppeteer](https://flaviocopes.com/puppeteer-scraping.md): Learn web scraping with Puppeteer by building a JavaScript job board that scrapes remote jobs from a site and stores them in a database to display later. - [Clear the terminal in VS Code](https://flaviocopes.com/vscode-clear-terminal.md): Fix cmd-k not clearing the terminal in VS Code by editing the keybinding When clause to terminalFocus, or use the Terminal: Clear command from the palette. - [How to automatically cut silence in videos](https://flaviocopes.com/cut-silence-videos.md): Learn how to automatically cut the silent pauses out of your videos using jumpcutter, a small Python program, so editing talking-head videos takes less time. - [How to set up hot reload on Electron](https://flaviocopes.com/electron-hot-reload.md): Learn how to set up hot reload in an Electron app with the electron-reloader module, so your window refreshes on every file change without restarting. - [How to remove empty lines in VS Code](https://flaviocopes.com/vscode-remove-empty-lines.md): Learn how to remove hundreds of empty lines in VS Code at once using regex find and replace, matching repeated newlines and collapsing them to a single one. - [How to open VS Code from the command line](https://flaviocopes.com/vscode-command-line.md): Learn how to open VS Code from the terminal with the code command, by installing the shell command from the Command Palette so you can run code foldername. - [How to block distractions using uBlock Origin](https://flaviocopes.com/block-distractions-ublock-origin.md): A trick to block distractions with uBlock Origin: use its element picker to permanently hide annoying parts of a page, like the StackOverflow sidebar. - [Configuring VS Code](https://flaviocopes.com/vscode-setup.md): Learn how I configure VS Code from scratch for JavaScript and React, setting the Fira Code font, a 2-space tab size, format on save, and favorite extensions. - [Emmet Tutorial](https://flaviocopes.com/emmet.md): Learn how to use Emmet to write HTML incredibly fast with abbreviations that expand into full markup, built right into VS Code and available for every editor. - [How to use VS Code](https://flaviocopes.com/vscode.md): VS Code (Visual Studio Code) is an incredibly powerful editor that's hugely growing in popularity. Find out why, and its main features for developers - [VS Code setup for React development](https://flaviocopes.com/vscode-react-setup.md): Learn how to set up VS Code for React development, adding ESLint with the Airbnb config and Prettier so you get linting hints and automatic format on save. ## Tutorials - [How to add a simple dark mode](https://flaviocopes.com/how-to-add-a-simple-dark-mode.md): Learn how to add a simple dark mode with a few lines of CSS, using prefers-color-scheme and filter invert(100%) while re-inverting images, code, and emoji. - [How to self-host Plausible analytics](https://flaviocopes.com/how-to-self-host-plausible-analytics.md): Learn how to self-host Plausible Analytics on a cheap DigitalOcean Droplet, using Docker Compose, an Nginx reverse proxy, and Certbot for free HTTPS. - [Tracking file downloads from a website](https://flaviocopes.com/tracking-file-downloads.md): Learn how to track file downloads on a static website with Plausible, swapping in its file downloads script and listing extensions like pdf and epub. - [How to create ebooks with Markdown](https://flaviocopes.com/how-to-create-ebooks-markdown.md): My process for creating ebooks from Markdown using honkit: set up book.json and SUMMARY.md, then generate PDF, ePub, and Mobi versions with help from Calibre. - [How do I update my website using the iPad](https://flaviocopes.com/update-site-ipad.md): How I update my website from an iPad, using the github.dev trick of swapping .com for .dev to edit and push my static site files right inside the browser. - [How to add search to a Ghost site](https://flaviocopes.com/how-to-add-search-ghost-site.md): Learn how to add working search to a Ghost site with the Ghost Finder library, wiring up a search page, a custom template, and your Content API key. - [Algorithm Complexity and Big O Notation](https://flaviocopes.com/complexity-big-o-notation.md): An introduction to algorithm complexity and Big O notation, from O(1) and O(log n) to O(n^2), and how it tells you how an algorithm scales with input size. - [How I use text expanding to save time](https://flaviocopes.com/text-expanding.md): How I use text expanding to save time answering repetitive emails, setting up snippets with abbreviations in the macOS app Dash to type long replies fast. - [What is a magic number in programming?](https://flaviocopes.com/magic-numbers.md): Learn what a magic number is in programming: a hard-coded value with no clear meaning, and why you should replace it with a named constant like PIN_ID. - [How to start a blog using Hugo](https://flaviocopes.com/start-blog-with-hugo.md): A detailed tutorial to start a blog with Hugo, from writing posts in Markdown and picking a theme to deploying your static site for free on Netlify. - [How I prototype a Web Page](https://flaviocopes.com/how-prototype-webpage.md): The simple workflow I use to prototype a web page: set up Tailwind with PostCSS, run a watch task, and live-reload the browser with browser-sync as I edit. - [How I record my videos](https://flaviocopes.com/how-i-record-videos.md): A look at my video recording setup, from ScreenFlow screencasting and a Samson Meteor mic to using a Canon DSLR as a webcam with Camera Live and CamTwist. - [How I added Dark Mode to my website](https://flaviocopes.com/dark-mode.md): How I added dark mode to my website with the prefers-color-scheme media query, serving a light theme by default and a dark theme when the system prefers it. ## TypeScript - [Zod: Type-Safe Schema Validation for TypeScript](https://flaviocopes.com/zod.md): Learn how to use Zod, the TypeScript-first schema validation library that validates data at runtime and infers your types from a single schema definition. - [How I fixed some trouble importing types in .d.ts files](https://flaviocopes.com/how-i-fixed-some-trouble-importing-types-in-dts-files.md): How I fixed TypeScript types not being picked up in a .d.ts file, like an Astro env.d.ts, by switching from a top-level import to an inline import() type. - [TypeScript type for a string or array of strings](https://flaviocopes.com/typescript-declare-a-type-that-can-be-a-string-or-array-of-strings.md): Learn how to declare a TypeScript type that can be either a string or an array of strings using a union, written as string or string[]. - [Disable TypeScript 'declared but never read' check](https://flaviocopes.com/typescript-disable-declared-never-read.md): Fix the TypeScript error 'declared but its value is never read' by setting noUnusedLocals to false in tsconfig.json, plus noUnusedParameters for parameters. - [Object destructuring with types in TypeScript](https://flaviocopes.com/typescript-object-destructuring.md): Learn the correct TypeScript syntax for adding types to object destructuring, why name: string fails, and how a dedicated type or interface keeps it clean. - [TypeScript Tutorial](https://flaviocopes.com/typescript.md): Understand the key concepts of TypeScript, the strict superset of JavaScript built by Microsoft, and learn how to compile your first .ts file with tsc. ## Vue.js - [Roadmap to become a Vue.js 2 developer in 2020](https://flaviocopes.com/vue-developer-roadmap.md): This is a graph I made with the technologies that will make you a well-rounded developer proficient in Vue.js programming. - [Vue 2, why data must be a function](https://flaviocopes.com/vue-data-function.md): Using Vue you might surely asked yourself the question 'why must data be a function that returns an object, and not just an object?' - [Vue 2, how to use v-model](https://flaviocopes.com/vue-model.md): Learn how to use the Vue 2 v-model directive to create a two-way binding on form inputs, plus handy modifiers like .lazy, .trim, and .number for cleaner data. - [How to dynamically apply a class using Vue 2](https://flaviocopes.com/vue-apply-class-dynamically.md): Learn how to dynamically apply a class in Vue 2 using a class binding with a ternary, so an element gets one class or another depending on a condition. - [Store Vue data to localStorage using Vuex](https://flaviocopes.com/vuex-persist-localstorage.md): Learn how to automatically persist your Vuex store to localStorage or sessionStorage using the vuex-persist library, so your app data survives a page reload. - [The Vue.js 2 Cheat Sheet](https://flaviocopes.com/vue-cheat-sheet.md): A handy Vue.js 2 cheat sheet covering directives, form bindings, event modifiers, lifecycle hooks, and the options you use in your day-to-day Vue coding. - [Dynamically show a Vue 2 component](https://flaviocopes.com/vue-dynamically-show-components.md): Learn how to dynamically show or hide a Vue 2 component based on your app state, using the v-if and v-else directives to switch what appears on the page. - [The Vue 2 Router](https://flaviocopes.com/vue-router.md): Learn how to use Vue Router, the official routing library for Vue 2, to sync URLs with your views, install it, and map routes to components in your app. - [Using Tailwind with Vue.js 2](https://flaviocopes.com/vue-tailwind.md): Learn how to set up Tailwind CSS in a Vue CLI 3 project in a few steps, from installing the package and creating a config file to wiring it up with PostCSS. - [How to use SCSS with Vue.js 2 Single File Components](https://flaviocopes.com/vue-using-scss.md): Learn how to use SCSS in your Vue.js 2 single file components, enabling it through the Vue CLI or by installing node-sass and writing style lang scss blocks. - [Vue 2, how to use a prop as the class name](https://flaviocopes.com/vue-prop-as-class-name.md): Learn how to use a Vue 2 prop value as a class name, binding it with a class binding, and how to combine it with a fixed class using array syntax. - [Vue 2, use a component inside another component](https://flaviocopes.com/vue-import-component.md): Learn how to import and use a Vue 2 component inside another, by importing the .vue file in the script tag and registering it in the components option. - [Vuex, the Vue.js 2 State Manager](https://flaviocopes.com/vuex.md): Learn how to use Vuex, the official state management library for Vue.js 2, to centralize your app state with a store, mutations, getters, and commit. - [Vue.js 2 Components Communication](https://flaviocopes.com/vue-components-communication.md): Learn how components communicate in a Vue.js app, passing data down with props, sending events from children to parents, and using a global event bus. - [Vue.js 2 Events](https://flaviocopes.com/vue-events.md): Vue.js allows us to intercept any DOM event by using the v-on directive on an element. This topic is key to making a component interactive - [Vue.js 2 Component Props](https://flaviocopes.com/vue-props.md): Learn how Vue.js 2 props let you pass data from parent to child components, including how to declare them, set types and defaults, and make a prop required. - [Vue.js 2 Slots](https://flaviocopes.com/vue-slots.md): Learn how Vue.js 2 slots let a parent component inject content into a child, from a single default slot to named slots for more complex component layouts. - [Vue.js 2 Components](https://flaviocopes.com/vue-components.md): Learn how Vue.js 2 components work as independent units with their own state, markup, and style, and the four ways to define them, from new Vue to .vue files. - [Vue.js 2 Filters](https://flaviocopes.com/vue-filters.md): Filters are the way Vue.js lets us apply formatting and transformations to a value that's used in a template interpolation. - [Vue 2 methods vs watchers vs computed properties](https://flaviocopes.com/vue-methods-watchers-computed-properties.md): Vue.js gives you methods, watchers, and computed properties. Learn when to use each one, from reacting to DOM events to deriving cached values from your data. - [Vue.js 2 Watchers](https://flaviocopes.com/vue-watchers.md): Learn how Vue.js 2 watchers let you spy on a single piece of component state and run a function whenever that property value changes, with a clear example. - [Styling Vue.js 2 components using CSS](https://flaviocopes.com/vue-css.md): Learn the options for styling Vue.js 2 components with CSS, from inline style and dynamic style bindings to scoped style blocks inside single file components. - [Vue.js 2 Computed Properties](https://flaviocopes.com/vue-computed-properties.md): Learn how Vue.js 2 computed properties let you derive new values from your data and cache the result, and how they differ from calling a method in a template. - [Vue.js 2 Methods](https://flaviocopes.com/vue-methods.md): Learn how Vue.js 2 methods work as functions tied to the Vue instance, how to define them in the methods option, pass parameters, and access data with this. - [Vue.js 2 Directives](https://flaviocopes.com/vue-directives.md): Vue.js uses a templating language that's a superset of HTML. We can use interpolation, and directives. This article explains directives. - [Vue.js 2 templates and interpolations](https://flaviocopes.com/vue-templates.md): Learn how Vue.js 2 templates work as a superset of HTML, where you output component state with interpolation and add behavior with directives like v-bind. - [Vue.js 2 Single File Components](https://flaviocopes.com/vue-single-file-components.md): Learn how Vue.js 2 single file components let you keep a component's template, JavaScript logic, and CSS together in one .vue file for a cleaner structure. - [Create your first app with Vue.js 2](https://flaviocopes.com/vue-first-app.md): Build your first Vue.js 2 app from scratch, starting with a simple CDN example and then moving to the Vue CLI default app to see how the files fit together. - [Configuring VS Code for Vue Development](https://flaviocopes.com/vue-vscode.md): Learn how to set up VS Code for Vue.js development with the Vetur extension, which adds syntax highlighting, snippets, IntelliSense, linting, and formatting. - [The Vue.js DevTools](https://flaviocopes.com/vue-devtools.md): Learn how to install the Vue.js DevTools on Chrome, Firefox, or as a standalone app, and use the panel to inspect your components and state and ease debugging. - [The Vue.js 2 CLI: learn how to use it](https://flaviocopes.com/vue-cli.md): Learn how to use the Vue CLI to scaffold a new Vue project, work with presets and plugins, and even do rapid prototyping of .vue files from the terminal. - [An overview of Vue.js 2](https://flaviocopes.com/vue-introduction.md): An overview of Vue.js 2, a simple, tiny, and performant JavaScript frontend framework, covering what a framework is, why developers love Vue, and its niche. ## Web Platform - [Generate UUIDs in JavaScript with crypto.randomUUID()](https://flaviocopes.com/generating-uuids-in-javascript-with-windowcryptorandomuuid.md): Learn how to generate a v4 UUID in JavaScript with window.crypto.randomUUID(), a built-in Web Crypto API method that needs no external libraries. - [Unregister service workers in Safari](https://flaviocopes.com/unregister-service-workers-in-safari.md): Learn how to unregister a service worker in Safari on macOS, where there is no DevTools button, by running navigator.serviceWorker.getRegistrations in console. - [File upload with drag and drop in vanilla JavaScript](https://flaviocopes.com/how-to-implement-file-upload-with-drag-and-drop-in-vanilla-js.md): Learn how to build file upload with drag and drop in vanilla JavaScript using the ondragover, ondragleave, and ondrop events, then POST the files as FormData. - [Cookie not being set in Safari](https://flaviocopes.com/cookie-not-being-set-in-safari.md): How to fix a cookie not being set in Safari during local development: Safari rejects the Secure attribute on localhost, so drop it and logins work again. - [What to do if WebRTC on iOS shows a black box](https://flaviocopes.com/webrtc-ios-black-box.md): Fix WebRTC video showing a black box on iOS Safari by adding the playsinline attribute to your video tags, which is written playsInline in JSX. - [Asking Google to index your page](https://flaviocopes.com/ask-google-index-page.md): Learn how to ask Google to index a new or updated page faster using the URL inspection tool in Google Search Console and the Request indexing button. - [How to use the FormData object](https://flaviocopes.com/formdata.md): Learn what the FormData object is and how to use it to send form fields and files with fetch, using append(), get() and set() to build a multipart body. - [How to set the fragment part of a URL](https://flaviocopes.com/how-to-set-fragment-part-url.md): Learn how to programmatically set the fragment portion of a URL in JavaScript, the part after the # hash symbol, by assigning to window.location.hash. - [How to get the fragment part of a URL](https://flaviocopes.com/how-to-get-fragment-part-url.md): Learn how to get the fragment portion of a URL in JavaScript, the part after the # hash symbol, by reading the window.location.hash property. - [How to make an hr invisible](https://flaviocopes.com/hr-tag-invisible.md): Learn how to make an hr tag invisible but still take up space, using it as a divider between sections by removing its border and adding a top margin. - [How to use Google Fonts](https://flaviocopes.com/google-fonts.md): Learn how to use Google Fonts on your website, from picking a family and checking its license to embedding it with a link tag or a CSS import rule. - [How to reset a form](https://flaviocopes.com/how-to-reset-form.md): Learn how to reset a form to its original state in HTML using an input with type reset, or programmatically in JavaScript by calling the form.reset() method. - [How to create a staging version of your site](https://flaviocopes.com/website-staging-version.md): Learn how to create a staging version of your site with Netlify deploy previews, by pushing a branch and opening a GitHub pull request to get a separate URL. - [How to add an image to the DOM using JavaScript](https://flaviocopes.com/how-to-add-image-dom.md): Learn how to add an image to the DOM with JavaScript by creating an img element with createElement, setting its src, and appending it with appendChild. - [How to fix the Chrome blue noise/lines rendering problem](https://flaviocopes.com/how-to-fix-chrome-rendering-issue.md): How to fix the blue lines and noise rendering glitch in Chrome on macOS by turning off the Use hardware acceleration when available option in settings. - [Safari, warn before quitting](https://flaviocopes.com/safari-warn-before-quit.md): Learn how to stop accidentally quitting Safari with cmd-Q by remapping its keyboard shortcut to cmd-option-Q from the macOS Keyboard settings. - [How to use insertAdjacentHTML](https://flaviocopes.com/insertadjacenthtml.md): Learn how to use the DOM insertAdjacentHTML method to insert HTML into a page, and the four positions beforebegin, afterbegin, beforeend and afterend. - [How to remove all CSS from a page at once](https://flaviocopes.com/how-to-remove-all-css.md): Learn how to strip all the CSS from a page at once by running one console command that selects every style and stylesheet link and calls remove() on each. - [What is a GB-second?](https://flaviocopes.com/what-is-a-gb-second.md): Learn what a GB-second is in AWS Lambda, the metric that multiplies how long your function runs by the memory it uses to measure your serverless usage. - [Get query string values with URLSearchParams](https://flaviocopes.com/urlsearchparams.md): Learn how to read and modify query string values in the browser with the URLSearchParams API, using window.location.search and methods like get and has. - [How to reload the browser window when you save a file](https://flaviocopes.com/how-to-reload-browser-file-save.md): Learn how to automatically reload the browser whenever you save a file in a plain HTML and JS project, by installing and running the browser-sync tool. - [How to make a page editable in the browser](https://flaviocopes.com/designmode.md): Learn how to make any web page editable right in the browser using document.designMode set to on, or by enabling contentEditable on the body element. - [How to disable a button using JavaScript](https://flaviocopes.com/how-to-disable-button-javascript.md): Learn how to disable or enable a button with JavaScript by selecting the element and setting its disabled property to true or false, useful for gating forms. - [How to copy to the clipboard using JavaScript](https://flaviocopes.com/clipboard-api.md): Learn how to copy to the clipboard in JavaScript using the Clipboard API on navigator.clipboard, the successor to document.execCommand for copy and paste. - [How to check if a checkbox is checked using JavaScript?](https://flaviocopes.com/how-to-check-checkbox-checked.md): Learn how to check whether a checkbox is checked in JavaScript by inspecting its checked property, and why you should not rely on getAttribute or value. - [How to create an HTML attribute using vanilla Javascript](https://flaviocopes.com/how-to-create-attribute-dom.md): Learn how to add an attribute to a DOM element with vanilla JavaScript: create it with createAttribute(), set its value, and attach it via setAttributeNode(). - [How to remove all children from a DOM element](https://flaviocopes.com/how-to-remove-children-element.md): Learn how to remove all the children of a DOM element, the fastest way by setting innerHTML to an empty string, or with a while loop calling removeChild(). - [Touch events](https://flaviocopes.com/touch-events.md): Learn the basics of touch events in JavaScript, handling touchstart, touchend, touchmove, and touchcancel to track taps and multitouch on mobile devices. - [Mouse events](https://flaviocopes.com/mouse-events.md): Learn the basics of mouse events in JavaScript, from mousedown, mouseup, and click to mousemove, plus event properties like button and clientX you can read. - [Keyboard events](https://flaviocopes.com/keyboard-events.md): Learn how to handle keyboard events in JavaScript with keydown and keyup on the document, and read the KeyboardEvent key, code, and modifier properties. - [Handling forms in JavaScript](https://flaviocopes.com/form-events.md): Learn how to handle forms with JavaScript: intercept the submit event with event.preventDefault(), then react to input events like change, focus and blur. - [How to work with scrolling on Web Pages](https://flaviocopes.com/scrolling.md): Learn how to work with scrolling on web pages: listen for the scroll event, read scrollX and scrollY, and throttle the handler to keep performance smooth. - [Web Components Custom Elements](https://flaviocopes.com/web-components-custom-elements.md): Learn how to use Web Components Custom Elements to create your own HTML tags, extending HTMLElement and registering them with window.customElements.define. - [How to use the Drag and Drop API](https://flaviocopes.com/drag-and-drop.md): Learn how to use the HTML Drag and Drop API, marking elements draggable, setting drop targets with dragover, and handling events like dragstart and drop. - [How to use getUserMedia()](https://flaviocopes.com/getusermedia.md): Learn how to use navigator.mediaDevices.getUserMedia() to access the user's camera and microphone, passing a constraints object for video and audio input. - [How to use the Geolocation API](https://flaviocopes.com/geolocation-api.md): Learn how to use the Geolocation API: read coordinates with navigator.geolocation getCurrentPosition(), track changes with watchPosition(), over HTTPS only. - [The Navigator Object](https://flaviocopes.com/navigator.md): Learn what the browser Navigator object is and how window.navigator exposes Web Platform APIs through properties like geolocation, language, and userAgent. - [The Streams API](https://flaviocopes.com/stream-api.md): Using streams we can receive a resource from the network, or from other sources, and process it as soon as the first bit arrives - [The BroadcastChannel API](https://flaviocopes.com/broadcastchannel-api.md): Learn the basics of 1-to-many communication with the BroadcastChannel API: create a channel, send data with postMessage(), and listen for the message event. - [The DataView Object](https://flaviocopes.com/dataview.md): Learn how the JavaScript DataView reads and writes mixed types in an ArrayBuffer with methods like setInt16, plus big and little endian byte order. - [Typed Arrays](https://flaviocopes.com/typed-arrays.md): Learn what JavaScript Typed Arrays like Int8Array and Float64Array are, how they act as a view into an ArrayBuffer, and why WebGL and Canvas rely on them. - [The URL Object](https://flaviocopes.com/url.md): Learn how to use the JavaScript URL object, from creating blob URLs with URL.createObjectURL to parsing a URL with the constructor to read its parts. - [ArrayBufferView](https://flaviocopes.com/arraybufferview.md): Learn what an ArrayBufferView is, a portion of an ArrayBuffer with buffer, byteOffset, and byteLength properties, used by typed arrays and DataViews. - [ArrayBuffer](https://flaviocopes.com/arraybuffer.md): Learn what a JavaScript ArrayBuffer is, an opaque set of bytes in memory, how to create one, read its byteLength, and use slice() to copy part of it. - [The FileList Object](https://flaviocopes.com/filelist.md): Learn what the FileList object is, how you get it from an input type file element, and how to read each File with index access, item() and length property. - [The FileReader Object](https://flaviocopes.com/filereader.md): Learn how the browser FileReader object asynchronously reads file content with readAsText(), readAsDataURL() and readAsArrayBuffer(), using the onload event. - [The File Object](https://flaviocopes.com/file.md): Learn what the browser File object is, a Blob with name, lastModified, size and type properties, and how to read it from an input type file change event. - [The Blob Object](https://flaviocopes.com/blob.md): Learn what a Blob (Binary Large Object) is in the browser, an opaque chunk of bytes, and how to create one with the Blob() constructor and a MIME type. - [Why use a preview version of a browser?](https://flaviocopes.com/browser-preview-version.md): Why use a preview browser like Chrome Canary, Firefox Nightly, or Safari Technology Preview? To test upcoming web platform features months before they ship. - [What is Serverless?](https://flaviocopes.com/serverless.md): Learn what serverless means: you deploy a function to a cloud provider, get a URL to call, and pay only for the requests you serve as it scales automatically. - [How to only accept images in an input file field](https://flaviocopes.com/how-to-accept-images-file-input.md): Learn how to limit a file input to images using the accept attribute, setting image/* or specific MIME types like image/png to filter what users can upload. - [JSON Web Token (JWT) explained](https://flaviocopes.com/jwt.md): Learn how JSON Web Tokens work for API authentication: the server signs a token with HMAC SHA256, and the client sends it back on every request. - [How to replace a DOM element](https://flaviocopes.com/how-to-replace-dom-element.md): Learn how to replace a DOM element with another in JavaScript using the modern replaceWith() method, or the older parentNode.replaceChild() for wide support. - [How to get the scroll position of an element in JavaScript](https://flaviocopes.com/how-to-get-scroll-position-element.md): Learn how to get the scroll position of an element in JavaScript by reading its scrollTop and scrollLeft properties, which you can also set to scroll it. - [What is the JAMstack?](https://flaviocopes.com/jamstack.md): Learn what the JAMstack is, how JavaScript, APIs and prebuilt Markup combine to serve fast, cheap and secure sites, and tools like Gatsby, Next.js and Hugo. - [WebRTC, the Real Time Web API](https://flaviocopes.com/webrtc.md): Learn how WebRTC enables direct, real-time communication between browsers, using MediaStream, RTCPeerConnection, and RTCDataChannel to connect two webcams. - [How to hide the address bar in Chrome](https://flaviocopes.com/hide-address-bar-chrome.md): Learn how to hide the Chrome address bar for cleaner screenshots and screencasts by launching Chrome from the terminal in application mode with --app=URL flag. - [Add a click event to querySelectorAll elements](https://flaviocopes.com/add-click-event-to-dom-list.md): Learn how to attach a click event listener to every element returned by document.querySelectorAll() by looping over the NodeList with a for..of loop. - [How to change a DOM node value](https://flaviocopes.com/change-dom-node-value.md): Learn how to change a DOM node value by setting its innerText property, and how to grab the element first with the Selectors API document.querySelector method. - [How to check if a DOM element has a class](https://flaviocopes.com/check-dom-element-class.md): Learn how to check if a DOM element has a class using the contains method of the classList object, which implements the DOMTokenList interface. - [How to remove a class from a DOM element](https://flaviocopes.com/remove-class-from-dom-element.md): Learn how to remove a class from a DOM element using the classList.remove() method, and how to add one with classList.add(), since classList is read-only. - [How to loop over DOM elements from querySelectorAll](https://flaviocopes.com/loop-dom-elements.md): Learn how to loop over the elements returned by querySelectorAll, which gives you a NodeList rather than an array, using a clean JavaScript for..of loop. - [How to add a class to a DOM element](https://flaviocopes.com/add-class-to-dom-element.md): Learn how to add a class to a DOM element in JavaScript using the classList.add() method, plus how to remove one with classList.remove(). - [How to wait for the DOM ready event in plain JavaScript](https://flaviocopes.com/dom-ready.md): Learn how to run plain JavaScript as soon as the page is ready by listening for the DOMContentLoaded event on the document with addEventListener. - [The Speech Synthesis API](https://flaviocopes.com/speech-synthesis-api.md): Learn how to use the Speech Synthesis API to make the browser talk, creating a SpeechSynthesisUtterance and tuning its rate, pitch, volume, and voice. - [Working with the DevTools Console and the Console API](https://flaviocopes.com/console-api.md): Learn how to use the browser DevTools console and the Console API, from console.log formatting to console.count, console.trace and timing your code. - [What is the Doctype](https://flaviocopes.com/doctype.md): Any HTML document must start with a Document Type Declaration, abbreviated Doctype, which tells the browser the version of HTML used in the page - [The requestAnimationFrame() guide](https://flaviocopes.com/requestanimationframe.md): Learn how requestAnimationFrame() runs your animation code in sync with the browser render cycle, avoiding the dropped frames you get with setTimeout. - [Web Workers](https://flaviocopes.com/web-workers.md): Learn how to use Web Workers to run JavaScript in a background thread, communicating with the main page through postMessage so heavy work won't block the UI. - [CORS, Cross-Origin Resource Sharing](https://flaviocopes.com/cors.md): An introduction to Cross-Origin Resource Sharing, the way to let clients and servers communicate even if they are not on the same domain - [Roadmap to learn the Web Platform](https://flaviocopes.com/web-platform.md): A roadmap to learn the Web Platform, the ecosystem of browser APIs, tools, and languages, with links to my tutorials on the DOM, storage, workers, and more. - [What are Data URLs](https://flaviocopes.com/data-urls.md): A Data URL is a URI scheme that provides a way to inline data in a document, and it's commonly used to embed images in HTML and CSS - [An in-depth SVG tutorial](https://flaviocopes.com/svg.md): SVG is an awesome and incredibly powerful image format. This tutorial gives you an overview of SVG by explaining all you need to know in a simple way - [XMLHttpRequest (XHR)](https://flaviocopes.com/xhr.md): The introduction of XMLHttpRequest (XHR) in browsers in the mid 2000's was a huge win for the Web Platform. Let's see how it works. - [The WebP Image Format](https://flaviocopes.com/webp.md): Learn about WebP, the open source image format from Google that makes images smaller than JPG and PNG while still supporting transparency and animation. - [The History API](https://flaviocopes.com/history-api.md): Learn how the History API lets you change the address bar and navigation without a reload, using pushState, replaceState and the onpopstate event in SPAs. - [Learn how HTTP Cookies work](https://flaviocopes.com/cookies.md): Cookies are a fundamental part of the Web, as they allow sessions and in general to recognize the users during the navigation - [The Web Storage API: local storage and session storage](https://flaviocopes.com/web-storage-api.md): Learn how the Web Storage API lets you store data in the browser with local storage and session storage, using methods like setItem, getItem, and removeItem. - [The Document Object Model (DOM)](https://flaviocopes.com/dom.md): Learn what the DOM (Document Object Model) is: the browser's representation of a page as nodes, and how to traverse and edit it with window and document. - [Efficiently load JavaScript with defer and async](https://flaviocopes.com/javascript-async-defer.md): Learn how the async and defer attributes change the way scripts load on an HTML page, how they affect parsing and rendering, and which to choose for speed. - [The Selectors API: querySelector and querySelectorAll](https://flaviocopes.com/selectors-api.md): Learn how to use the Selectors API, querySelector and querySelectorAll, to select DOM elements with any CSS selector instead of just selecting them by id. - [Dive into IndexedDB](https://flaviocopes.com/indexeddb.md): Learn how to use IndexedDB, the async key/value database built into browsers, to create stores, add and read data with transactions, and handle versions. - [The Notification API Guide](https://flaviocopes.com/notifications-api.md): Learn how to use the browser Notifications API to show system notifications to users, from requesting permission to creating, customizing, and closing them. - [The Cache API Guide](https://flaviocopes.com/cache-api.md): Learn how the Cache API, part of the Service Worker spec, lets you store URL-addressable resources using caches.open, cache.add, cache.put and cache.match. - [Service Workers Tutorial](https://flaviocopes.com/service-workers.md): Learn how service workers power Progressive Web Apps, a programmable proxy that caches network requests for offline use and enables push notifications. - [The Channel Messaging API](https://flaviocopes.com/channel-messaging-api.md): Learn how the Channel Messaging API lets iframes, workers and documents communicate by passing messages through a MessageChannel with port1 and port2. - [The Push API Guide](https://flaviocopes.com/push-api.md): The Push API allows a web app to receive messages pushed by a server, even if the web app is not currently open in the browser or not running on the device. - [The Fetch API](https://flaviocopes.com/fetch-api.md): Learn all about the Fetch API, the modern approach to asynchronous network requests which uses Promises as a building block - [The Complete Guide to Progressive Web Apps](https://flaviocopes.com/progressive-web-apps.md): Learn how Progressive Web Apps work, from offline support and push notifications to service workers, the web app manifest, and the app shell caching model. - [How I made a CMS-based website work offline](https://flaviocopes.com/offline-website-pwa.md): A case study on making a CMS-based website work offline with Progressive Web App tech, using a Service Worker and the Cache API for cache-first delivery. - [Some useful tricks available in HTML5](https://flaviocopes.com/html5-useful-tricks.md): A quick tour of useful HTML5 features, including autofocus, the download attribute, the hidden attribute, toggling spellcheck, and datalist autosuggestions. ## Other - [Managing node_modules efficiently with pnpm and Bun](https://flaviocopes.com/managing-node-modules-efficiently.md): Learn how modern package managers like pnpm and Bun shrink node_modules and speed up installs by using a global store with symlinks and hard links. - [Some inputs to check for XSS issues](https://flaviocopes.com/some-inputs-to-check-for-xss-issues.md): A reference list of XSS payloads and input strings you can use to test a web app for cross-site scripting vulnerabilities when explaining how XSS works. - [Simplicity](https://flaviocopes.com/simplicity.md): A reflection on simplicity in software: why developers add complexity out of fear of looking dumb, and how simple tech lets you ship faster and test more ideas. - [SQL injection](https://flaviocopes.com/sql-injection.md): Learn what SQL injection is, how attackers exploit unsanitized input to run malicious SQL queries, and why input sanitization is your main defense. - [CSRF (Cross Site Request Forgery) tutorial](https://flaviocopes.com/csrf.md): An introduction to CSRF (Cross Site Request Forgery), how the attack works via GET requests and forms, and how to stop it with tokens and SameSite cookies. - [How to update your Ubuntu server packages](https://flaviocopes.com/how-to-update-ubuntu-packages.md): Learn how to keep an Ubuntu server up to date with the latest packages and security fixes, by running apt-get update, then apt-get upgrade, and rebooting. - [Acronyms in Web Development](https://flaviocopes.com/acronyms-web-development.md): A handy glossary of common web development acronyms like API, CORS, CRUD, DOM, and REST, with a short plain-English explanation of what each one means. - [Fix 'EMFILE: too many open files, watch' in React Native](https://flaviocopes.com/react-native-emfile-too-many-open-files.md): Learn how to fix the EMFILE too many open files watch error in React Native on macOS by installing the watchman utility with Homebrew. - [Fix 'iphoneos cannot be located' in React Native](https://flaviocopes.com/react-native-fix-iphoneos-cannot-be-located.md): Learn how to fix the SDK iphoneos cannot be located error when running pod install for React Native on macOS, using sudo xcode-select to set Xcode. - [Fix 'unrecognized command run-ios' in React Native](https://flaviocopes.com/react-native-fix-unrecognized-run-ios-error.md): Learn how to fix the unrecognized command run-ios error in React Native, which happens when you run npx react-native run-ios outside the project folder. - [Cross Site Scripting (XSS) tutorial](https://flaviocopes.com/xss.md): A guide to cross-site scripting (XSS) attacks, how attackers inject JavaScript to steal cookies and data, the three main types, and how you can prevent them. - [Should you use Vue or React?](https://flaviocopes.com/vue-vs-react.md): My take on Vue vs React: both are great and fast, but Vue is friendlier to beginners while React has a larger job market and the backing of Facebook.