The Curious Engineer

All blogs / JavaScript / TypeScript

Zell Liew

zellwk.com

Browse 482+ articles on web development, JavaScript, CSS, and more. Step-by-step tutorials and insights from over a decade of building for the web.

JavaScript / TypeScriptFrontend / CSS / browsers

’15’20’25
Posts
482 from 23 Mar 2013 to 10 Oct 2026
Posting
weekly (45 in the last year)
Kind
personal blog
Feed
https://zellwk.com/rss.xml

2026 45

  1. Redefining My Relationship With You
  2. The omitEmpty Function
  3. Speaking Without Inhibition
  4. Sharpen The Saw — Only 3 Mins
  5. The Circle Of Influence
  6. Be Grateful, But Not Overly Grateful
  7. The Walking Stick On The Journey
  8. Help, Or Don't
  9. Hard Skills, Soft Skills, And Money-Making Skills
  10. Unblocking My Publishing
  11. The Infinite Game of Blogging
  12. I've Built an AI Clone That Works!
  13. Building Responsive Layouts Without Writing More CSS
  14. The State of Tech Education in the AI Age
  15. Building a Real Blog Easily in Astro
  16. Two Wrongs Don't Make a Right
  17. Four Ways to Deal with Claude's Reduced Usage Limits
  18. Worst Enemy
  19. Experimenting with a different way to write
  20. Unorthodox Tailwind is live!
  21. Enhancing Astro With a Markdown Component
  22. Markdown + Astro = ❤️
  23. Disable Sounds in VSCode
  24. Giving Myself an A for 2026
  25. Anchor Habits
  26. Eliminating MCP Token Costs in Claude
  27. I Used AI to Lose Weight (And It Worked)
  28. Skip the Import — A Simpler Way to Use Images in Astro
  29. 4 Reasons That Make Tailwind Great for Building Layouts
  30. Soul-Sucking vs Soul-Enriching
  31. Perceiving Hope in a Hopeless State
  32. Accepting What You Reject
  33. Popover API or Dialog API: Which to Choose?
  34. The Cause of Depression
  35. Distinguishing "Components" and "Utilities" in Tailwind
  36. Public Therapy
  37. Ditching the Eisenhower Matrix
  38. Publishing a Coding Theme
  39. Building a VSCode Theme
  40. Everyone Loves This!
  41. There is No Need to Trap Focus on a Dialog Element
  42. If and Not Components for Astro
  43. Closing off the reflections about 'violence'
  44. Time doesn't heal wounds
  45. Year End Review — 2025

2025 23

  1. Building a Honeypot Field That Works
  2. Composition in CSS
  3. We Might Need Something Between Root and Relative CSS Units for “Base Elements”
  4. Thinking Deeply About Theming and Color Naming
  5. Making a Masonry Layout That Works Today
  6. A Primer on Focus Trapping
  7. Using CSS Cascade Layers With Tailwind Utilities
  8. A Better API for the Intersection and Mutation Observers
  9. A Better API for the Resize Observer
  10. Streaming capabilities comes to zlFetch
  11. Making sense of starting-style
  12. So, You Want to Give Up CSS Pre- and Post-Processors…
  13. Tailwind’s @apply Feature is Better Than it Sounds
  14. Setting up a Corne Keyboard v4
  15. Upcoming Breaking Changes for Splendid Layouts
  16. A little rant about breaking changes
  17. Division of topics
  18. How to stay sane when your partner is in a depressive rut
  19. Feeding the wrong wolf
  20. Compass, Path, and Journey
  21. Reflections on highlighting my violence
  22. Convincing doesn't work
  23. I called the suicide hotline for my wife

2024 41

  1. Don't try to make anyone happy
  2. Killing and Restarting pm2
  3. Forcing the future
  4. Clarifying the Relationship Between Popovers and Dialogs
  5. It sucks. What sucks?
  6. Tooltip Best Practices
  7. Everyone becomes a sellout at some point
  8. Solving Background Overflow With Inherited Border Radii
  9. Understanding Recursion in JavaScript
  10. You can’t write like Seth Godin
  11. Best Practice for Astro Endpoints
  12. Stress for Metamorphosis
  13. How to be good enough
  14. Busyness
  15. Speed of Svelte reactive bindings vs keyboard events
  16. Conditional Slot Forwarding is not a thing in Svelte 4
  17. Breaking out of Svelte's reactive statements
  18. What developers should be learning
  19. A Great Failed Experiment
  20. Data Table Accessibility in 2024
  21. Found the Light
  22. Collecting Payments with Stripe while using Astro
  23. Easy way to remove inline styles
  24. Understanding and using npm exports
  25. DoItAnyway
  26. Invisible adversaries
  27. No more waiting
  28. 4 years is not too many
  29. Handling cookies with Fetch's credentials
  30. Using Cookies vs Local Storage for storing access tokens
  31. Bravery
  32. Move fast, break things
  33. JavaScript Mental Models
  34. Why I love the web
  35. Analytics and Ads
  36. An easy way to implement conversion tracking for Facebook
  37. On Spam
  38. Splendid Layouts in here!
  39. Splendid Layouts
  40. My CSS of Late
  41. 3 Techniques to learn JavaScript effectively

2023 31

  1. Changing CSS Variables with Tailwind
  2. The main challenge of building an Astro-first component library
  3. Enough of the homogenous and soulless content all around the internet
  4. The easiest way to get and set CSS Variables in JavaScript
  5. December 2023
  6. The easiest way to get __dirname in Node with ES Modules
  7. The easiest way to use SVGs in an Astro or Svelte app
  8. Automatic reactivity with Vanilla JavaScript with two methods — Getters and Setters and JavaScript Proxies
  9. Iterating over objects in JavaScript
  10. Easy way to parse JSON with JavaScript
  11. Free chapters for Magical Dev School
  12. Making a nice neon button
  13. Splendid Astro Spacing — A Tailwind Utility for Astro
  14. Updates for Understanding Async JS and Rest APIs
  15. Easy caching on the local file system with Node
  16. zlFetch now supports FormData!
  17. Limitations of Scoped CSS
  18. Quality of life improvements for zlFetch
  19. The Magical Dev School Student Portal is live!
  20. Finding my roots in my business
  21. How to get better at design (for developers)
  22. Here’s how to quickly test components that use container queries
  23. When building components in Astro, you might not want to use Astro files
  24. Best practices for container queries
  25. Overcoming styling frustrations caused by Astro islands and slots
  26. How AI will shape the coding ecosystem in the future
  27. Convertkit API: Using Forms vs Tags
  28. Building fancy list items in Astro
  29. The Spirit of CSS Tricks is now gone
  30. How camel-cased classes are way better than kebab-cased classes
  31. Rendering MDX in a Svelte component when using Astro

2022 18

  1. Setting up Visual Studio Code for Web Development — For Beginners and Intermediate Developers
  2. Never let anyone stop you from pursuing your dreams
  3. Understanding the color-scheme property
  4. Using npm packages in the frontend without any bundlers
  5. Best way to install Node and keep it up to date
  6. Understanding CSRF Attacks
  7. How to find a tag id in Convertkit
  8. A library to make localStorage easier to use
  9. New CSS Color syntax — rgb instead of rgba
  10. Don't be ashamed of tutorial hell
  11. Getting a cookie's expiry value on a server
  12. Rsync with a custom port
  13. Rsync with Github actions when using a a custom port
  14. Why I stopped using Operator Mono
  15. Using async/await in Express
  16. Serving HTTPS locally with Node
  17. Get good at the hiring game
  18. Year end review — 2021

2021 18

  1. Dealing with anxiety during job interviews
  2. Why I'm super excited about Astro (a new static site generator)
  3. How and when to use Async and Defer attributes
  4. Trying Your Best is really bad advice (and strategy)
  5. Rapid Mac Setup for Frontend Development
  6. Using Gulp with Dart Sass
  7. Disabling languages for Prettier (in VScode)
  8. Prettier and Standard in VSCode
  9. How to remember JavaScript
  10. Overcoming 7 main problems of learning to code for people who don't have a developer job
  11. 8 lessons I learned from spending 4 years writing one course — Learn JavaScript
  12. How to debug a Github Actions' secret
  13. Deploying to a server via SSH and Rsync in a Github Action
  14. Understanding how to use Github Actions
  15. How to use Reduce in JavaScript
  16. Choosing between Netlify, Vercel and Digital Ocean
  17. How to write super simple and useful regular expressions for the real world
  18. Year End Review — 2020

2020 44

  1. Case Conversion in JavaScript
  2. How I set up my Moonlander
  3. Why we should use Ergonomic keyboards
  4. What's the difference between an Interface and an API?
  5. Understanding JavaScript Prototype
  6. Testing JavaScript Performance
  7. Leading Trim is in the works!
  8. A JavaScript Utility Library?
  9. How to improve without receiving feedback
  10. How to create sites with winding SVG paths
  11. Giving away 99 copies of The Coding Career Handbook by Shawn Wang
  12. TCC: The course that gave me the strength to pursue my dreams
  13. Why use Getters and Setters functions
  14. Creating a deep-assign library
  15. Copying properties from one object to another (including Getters and Setters)
  16. Getting the horizontal and vertical centers of an element
  17. Polymorphism in JavaScript
  18. Arrow Function Best Practices
  19. Getting CSS Translate values with JavaScript
  20. How I work with arrays
  21. Snowpack + Eleventy + Sass + PostCSS
  22. First look at Snowpack
  23. Customised (and effective) Visual Studio Code keyboard shortcuts for Mac and Windows (Part 2)
  24. How to think like a programmer
  25. Customised (and effective) Visual Studio Code keyboard shortcuts for Mac and Windows
  26. Syncing Visual Studio Code settings between Mac and Windows
  27. Bash vs Zsh vs Fish
  28. Preventing a Windows PC from adjusting the screen's brightness automatically
  29. Emulating Mac's Dvorak-Qwerty-⌘ on Windows
  30. Build Your Developer Brand post-mortem
  31. Free Workshop on Branding and Marketing yourself as a developer
  32. Building a Simple CRUD app with Node, Express, and MongoDB
  33. Setting up Windows for web development
  34. A Simple CLI for Convertkit
  35. Element.focus vs aria-activedescendant
  36. Overcoming my panic towards accessibility
  37. Designing Learn JavaScript's course portal (Part 3)
  38. Designing Learn JavaScript's course portal (Part 2)
  39. Installing MongoDB on Mac (Catalina and non-Catalina)
  40. Designing Learn JavaScript's course portal
  41. Building a login system with HTML, CSS, and JavaScript
  42. Getting keyboard-focusable elements
  43. Multi-line gradient links
  44. Year-end review: 2019

2019 47

  1. Mongoose 101: Population
  2. Mongoose 101: Working with subdocuments
  3. Mongoose 101
  4. What to do if you're struggling with a Bootcamp
  5. Understanding Homebrew
  6. Protecting and syncing secret keys
  7. Handling Errors in Express
  8. What programming languages should you learn?
  9. The difference between HTML, CSS, and JavaScript
  10. Style hover, focus, and active states differently
  11. Creating a custom focus style
  12. Designing a focus style
  13. Converting callbacks to promises
  14. Three useful Express middleware
  15. Inconsistent behavior among browsers when clicking on buttons
  16. Dancing with Fear
  17. Seeding a database
  18. Connecting Jest and Mongoose
  19. Endpoint testing with Jest and Supertest
  20. How to setup a local MongoDB Connection
  21. Frontend vs Backend
  22. How to add Flexbox fallback to CSS Grid
  23. How to build a calendar with CSS Grid
  24. Stages of learning
  25. Shutting down Fridays with Zell
  26. Everything You Need to Know About Date in JavaScript
  27. Using Standard with VSCode
  28. How to go through the job application process—an interview with Chris Lienert
  29. On Advocacy
  30. Maybe we should step away from the online-world for a bit
  31. Dealing with nested callbacks
  32. JavaScript async and await in loops
  33. A new (and easy) way to hide content accessibly
  34. JavaScript async and await
  35. Publishing packages that can be used in browsers and Node
  36. How to ignore files from your npm package
  37. The best time to npm init
  38. How to publish packages to npm (the way the industry does things)
  39. How to use JSDelivr
  40. My CSS reset
  41. Migrating to a new Mac
  42. Setting up my new Mac (Part 1—the apps I use)
  43. RSS and Tags are here!
  44. Zellwk.com is now open source!
  45. It's okay to write dirty code
  46. Sit down and figure it out
  47. Using small pockets of idle time

2018 87

  1. Year end review—2018
  2. Checking if an input is empty with JavaScript
  3. Checking if an input is empty with CSS
  4. The Gitignore file
  5. Why support older browsers?
  6. What not to save into a Git repository
  7. Supporting older browsers—Part 3: JavaScript
  8. Undoing changes in Git
  9. Supporting older browsers—Part 2: CSS
  10. Git Tags
  11. Supporting older browsers with Polyfills
  12. Switching to Dvorak as a web developer
  13. How to take a good break
  14. How to review and edit a pull request
  15. Getting out of a productivity funk
  16. How to submit a pull request
  17. Creating a simple form with CSS Grid
  18. How to use Git stashes as a temporary storage
  19. Creating a simple form with Flexbox
  20. How I remember CSS Grid properties
  21. Semantic Versioning
  22. Becoming more productive while working less
  23. Managing your Git branches with Git Flow
  24. When will Learn JavaScript be completed?
  25. What is a branch in Git?
  26. Changing my refund policy
  27. Resolving Git conflicts
  28. How to use the :empty selector and the :blank selector
  29. Cloning a Git repository
  30. What makes a good frontend developer?
  31. Pulling from a Git remote
  32. Stop using big words and industry jargons (and what to do instead)
  33. Pushing to a Git remote
  34. Creating good analogies
  35. Your first Git commit
  36. How to write a good coding article
  37. Setting up a Git Client
  38. The key to teaching
  39. Starting a podcast
  40. Where to find people to teach
  41. Visual Studio Live Share
  42. What to do when life shits on you
  43. Finding mentors
  44. How to get CSS values in JavaScript
  45. Finding motivation
  46. Finding the right materials to learn
  47. Why you shouldn't reassign values in JavaScript
  48. Dealing with overwhelm
  49. Why you learn when you teach
  50. Dealing with confusion
  51. 5 things I learned from Infinity Wars
  52. Which JavaScript framework should you learn?
  53. Finding time to learn
  54. Which should you learn first? Frameworks or JavaScript?
  55. Results of the restructure
  56. How I'm going to teach authentication
  57. New CSS features that are changing web design
  58. Is your code good enough?
  59. Should I teach authentication in Learn JavaScript?
  60. Are you a real developer?
  61. Avengers, Star Wars, and learning code
  62. Why I switched from Sublime Text to Visual Studio Code
  63. My experience at CSS Conf China
  64. Why I restructured Learn JavaScript
  65. Traversing the DOM with JavaScript
  66. How to handle the "bad experience" question
  67. How to build a calculator—part 3
  68. Job search protip—don't look for a junior position
  69. How to build a calculator—part 2
  70. Are you too old to learn to code?
  71. How to build a calculator—part 1
  72. Experiment publicly
  73. Case study—a project from hell
  74. How do you decide what to build?
  75. How to use a linter
  76. Responsive Vertical Rhythm with CSS Custom Properties and CSS Calc
  77. Useful VS Code keyboard shortcuts
  78. Setting up Visual Studio Code (Part 3)—Extensions
  79. Faux Subgrid
  80. Intro to Object Oriented Programming in JavaScript
  81. Setting up Visual Studio Code (Part 2)—HTML, CSS and JavaScript settings
  82. Setting up Visual Studio Code (Part 1)—appearances
  83. Year End Review—2017
  84. Understanding And Using REST APIs
  85. Should you use CSS or JavaScript for animations?
  86. Why mutation can be scary
  87. Can I get a discount?

2017 39

  1. An introduction to animations with Greensock Animation API (GSAP)
  2. CSS Animations explained
  3. Dealing with Imposter Syndrome
  4. CSS Transitions explained
  5. How to make interactive components
  6. Understanding for loops
  7. Understanding if/else statements
  8. How to debug Javascript errors
  9. Learning JavaScript – where should you start and what to do when you're stuck?
  10. Console.log everything!
  11. Understanding JavaScript Functions
  12. Should you use semicolons in JavaScript?
  13. What are variables and why use them in JavaScript
  14. Announcing Learn JavaScript!
  15. How to overcome your fear of JavaScript
  16. How to get hired as a junior web developer
  17. Typi—case study
  18. JavaScript Scope and Closures
  19. Should you use this in JavaScript?
  20. Remembering what you learned
  21. 5 top tips for speedy learning
  22. This in JavaScript
  23. Promises in JavaScript
  24. Callbacks in JavaScript
  25. How to set up your development environment to learn JavaScript
  26. The rules of responsive web typography
  27. Introduction to commonly used ES6 features
  28. Using Fetch
  29. Altering the DOM with JavaScript
  30. Breaking the rules
  31. Writing modular CSS (Part 3) — CSS file structure
  32. 20 things to consider when creating your first Node.js application
  33. Writing modular CSS (Part 2) — Namespaces
  34. Writing modular CSS (Part 1) — BEM
  35. Should you learn [insert shiny new tool]?
  36. How to pair typefaces
  37. Fighting decision paralysis
  38. How to read faster and remember more
  39. Year End Review – 2016

2016 23

  1. How to build a responsive grid system
  2. Designing grids
  3. Don't reinvent the wheel
  4. Learning to code quickly
  5. How to Reset Susy's Span or Gallery
  6. How to Ask Good Coding Questions That Get Great Answers
  7. Everything about the Modular Scale Sass Libary and Modular Scale with Typi
  8. Changing Modular Scale Ratio at Different Breakpoints
  9. Responsive Modular Scale
  10. Were We Wrong About Vertical Rhythm All Along?
  11. Deploying a Static Site with Cron and Git
  12. Advanced Usage with Typi
  13. An In-depth Tutorial to Typi
  14. Beating Procrastination
  15. Moving from HTML Grid Systems to CSS Grid Systems
  16. Is Web Typography Completely Broken?
  17. PX, EM or REM Media Queries?
  18. Viewport Unit Based Typography
  19. Why is Vertical Rhythm an Important Typography Practice?
  20. REM vs EM – The Great Debate
  21. Star Rating Re-imagined with Flexbox
  22. Everything I know about Responsive Web Typography
  23. Year End Review – 2015

2015 21

  1. Animating SVGs (CSSConf.Asia talk)
  2. Trolls & Expert Opinions – Lessons Learned From Publishing on a Popular Website
  3. Website Layout Tools Compared—Flexbox Vs. Susy
  4. Overcoming Your Fears
  5. Migrating From Bootstrap to Susy
  6. What to add to your Gitignore File
  7. How to Modularize HTML Using Template Engines and Gulp
  8. Gulp for Beginners
  9. A Gulp.js Tutorial (Part 2)
  10. A Gulp.js Tutorial
  11. Choosing a Build Tool
  12. Overcoming your Fear of the Command Line
  13. Manage your Frontend Dependencies with Bower
  14. An Overview of a Development Workflow
  15. Common Problems With Susy Gallery And How To Solve Them
  16. Why I stopped blogging, and what do you want to read about next?
  17. How to use Masonry with Susy
  18. Mappy Breakpoints, A Breakpoint Mixin that uses Sass Maps
  19. Configuring Gulp to use LibSass with Susy
  20. Configuring Grunt To Use LibSass With Susy
  21. Learning Susy Update Is Going To Be Delayed

2014 30

  1. How To Write Mobile-first CSS
  2. How to use susy with bootstrap
  3. I'm Going To Make The Learning Susy Book Better, And What That Means For You
  4. Fix 90% of Your Problems With Susy by Getting This One Concept Right
  5. How I Wrote and Sold My First Ebook (and how you can do it too)
  6. How to Create Off Canvas Layouts with Susy
  7. Build Web Layouts Easily with Susy
  8. How to Build a Responsive Website That Supports Older Browsers
  9. Smarter Layouts with Susy
  10. Bootstrap’s grid system vs. susy—a comparison
  11. Creating Asymmetric Layouts With Susy
  12. Understanding Gutter Positions in Susy
  13. How to Debug Your Susy Layout with the Susy Background Image (Even If The Grid Changes)
  14. Organizing Multiple Theme Styles with Sass
  15. A Sexier Float Label Pattern
  16. Compass vs Autoprefixer
  17. Using Codekit 2 Autoprefixer With Compass
  18. Neatly Organized Layouts with Sass Maps and Susy
  19. Static Grids with Susy 2
  20. A Complete Tutorial to Susy 2 (Part 2)
  21. A Complete Tutorial to Susy 2
  22. A Complete Guide to @font-face
  23. How to structure HTML for an actual website (Part 2)
  24. How to structure HTML for an actual website
  25. Understanding and Using CSS Positions
  26. How to use Mailchimp API in Wordpress
  27. Compass Vertical Rhythms
  28. Understanding CSS Box Sizing Property
  29. Understanding Wordpress Actions and Filters
  30. How to find the Wordpress CSS File

2013 15

  1. How to Quicken Wordpress Development with Grunt JS
  2. A Complete Tutorial to Susy (Part 2)
  3. A Complete Tutorial to Susy
  4. Tools I use for learning and using colors
  5. Why color pickers and palettes are bad for you
  6. Wordpress 101 – 5 critical things you need to know to use Wordpress effectively.
  7. 5 things you can do to keep learning when things turn unexpectedly difficult
  8. How to organize and edit your CSS painlessly
  9. Make your website more professional with 1 simple step
  10. Creating a clean and simple website (Part 3 - Style the content and 6 items to take note)
  11. Creating a clean and simple website (Part 2 – Styling the header)
  12. 9 Important CSS Properties You Must Know
  13. Creating a clean and simple website (Part 1 – HTML)
  14. The Layout of a Website
  15. Why I started learning about web design and how you can do it too