[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"allPosts":3,"i-local-icon:calendar-days":183,"i-local-icon:tag":188,"i-local-icon:arrow-right":190},[4,13,20,27,36,43,52,61,69,76,83,91,98,107,114,121,129,136,143,150,157,163,170,177],{"title":5,"description":6,"id":7,"categories_slug":8,"date_published":11,"path":12},"Why Tailwind CSS suggests changing arbitrary values to standard classes","We should swap out arbitrary values like w-[100px] for standard utility classes like w-25 now that they are supported, to help us stick to a consistent design system and make the CSS much easier to maintain.","content\u002Fblog\u002F24.why-tailwind-suggests-standard-classes-vs-arbitrary-values.md",[9,10],"tailwind","css","2026-01-06","\u002Fblog\u002Fwhy-tailwind-suggests-standard-classes-vs-arbitrary-values",{"title":14,"description":15,"id":16,"categories_slug":17,"date_published":18,"path":19},"The CSS masonry syntax wars","As of November, 2025, the CSS Working Group announced a new CSS display property keyword called grid-lanes, which replaces the Firefox and Chromium\u002FWebkit approach to masonry layouts.","content\u002Fblog\u002F23.css-masonry-syntax-wars.md",[10],"2026-01-04","\u002Fblog\u002Fcss-masonry-syntax-wars",{"title":21,"description":22,"id":23,"categories_slug":24,"date_published":25,"path":26},"Creating a \"Masonry-lite\" Layout with Tailwind CSS Columns","While the 'true' Masonry layout is currently being drafted for the CSS Grid Level 3 specification, you can achieve a 'Masonry-lite' effect using CSS Columns, and if you are using Tailwind CSS, you can do it with just two different classes.","content\u002Fblog\u002F22.masonry-lite-layout-tailwind-css.md",[9,10],"2026-01-02","\u002Fblog\u002Fmasonry-lite-layout-tailwind-css",{"title":28,"description":29,"id":30,"categories_slug":31,"date_published":34,"path":35},"Tailwind CSS - Adding a Shadow to Sticky Headers on Scroll in Vue\u002FNuxt","A sticky header is a standard UI pattern, but it often looks 'flat' when it blends into the content scrolling underneath it. The best way to solve this is to apply a shadow\u002Fbackground, but only once the user has started scrolling.","content\u002Fblog\u002F21.tailwind-css-add-sticky-header-on-scroll.md",[9,32,33],"nuxt","vue","2025-12-30","\u002Fblog\u002Ftailwind-css-add-sticky-header-on-scroll",{"title":37,"description":38,"id":39,"categories_slug":40,"date_published":41,"path":42},"Handling hover states on mobile and touch devices in Tailwind CSS 4","Tailwind CSS v4 has been updated so that the hover variant only applies when the primary input device supports hover.  Options on how to solve the issues this presents.","content\u002Fblog\u002F20.tailwind-css-4-hover-on-touch-device.md",[10,9],"2025-07-09","\u002Fblog\u002Ftailwind-css-4-hover-on-touch-device",{"title":44,"description":45,"id":46,"categories_slug":47,"date_published":50,"path":51},"Change NPM Global Package Location on macOS to Avoid Permission Errors","Configure NPM to use a custom directory for global packages on macOS to avoid permission errors and eliminate the need for sudo commands. Complete setup guide with shell configuration.","content\u002Fblog\u002F18.change-default-npm-global-package-location.md",[48,49],"javascript","macos","2025-06-24","\u002Fblog\u002Fchange-default-npm-global-package-location",{"title":53,"description":54,"id":55,"categories_slug":56,"date_published":59,"path":60},"Fix Cloudflare 'StorageType.persistent is deprecated' Error in Google Lighthouse","Fix the Cloudflare 'StorageType.persistent is deprecated' error that causes Google Lighthouse to give low Best Practices scores. Complete step-by-step guide with screenshots and benefits\u002Fconsiderations.","content\u002Fblog\u002F19.fix-cloudflare-storagetype-persistent-is-depracated.md",[57,58],"seo","development","2025-06-21","\u002Fblog\u002Ffix-cloudflare-storagetype-persistent-is-depracated",{"title":62,"description":63,"id":64,"categories_slug":65,"date_published":67,"path":68},"Using Prettier to format PHP code in VS Code","Learn how to use Prettier to format PHP code in VS Code using the @prettier\u002Fplugin-php community plugin. Complete setup guide with configuration examples and troubleshooting tips.","content\u002Fblog\u002F17.using-prettier-format-php-in-vscode.md",[58,66],"php","2025-06-20","\u002Fblog\u002Fusing-prettier-format-php-in-vscode",{"title":70,"description":71,"id":72,"categories_slug":73,"date_published":74,"path":75},"Using shallowRef with Nuxt 3 useFetch for better performance","Learn how to optimize your Nuxt 3 applications by using shallowRef with useFetch. Discover the performance benefits and when to use deep: false for better reactivity management.","content\u002Fblog\u002F16.using-shallowref-nuxt-usefetch.md",[33,32],"2025-06-15","\u002Fblog\u002Fusing-shallowref-nuxt-usefetch",{"title":77,"description":78,"id":79,"categories_slug":80,"date_published":81,"path":82},"Tailwind CSS 4 - Overriding or replacing screen sizes (breakpoints)","Learn how to override and customize screen sizes (breakpoints) in Tailwind CSS 4's new CSS-first configuration system. Includes migration tips, practical examples, and troubleshooting guide.","content\u002Fblog\u002F15.tailwind-css-4-breakpoint-override.md",[10,9],"2025-05-25","\u002Fblog\u002Ftailwind-css-4-breakpoint-override",{"title":84,"description":85,"id":86,"categories_slug":87,"date_published":89,"path":90},"How to increase the WPGraphQL query limit using graphql_connection_max_query_amount","By default, WPGraphQL limits the amount of posts per page that you can query at any one time to 100.  But by adding a simple filter & function you can change this limit to any value.","content\u002Fblog\u002F14.wpgraphql-increase-post-query-limit.md",[58,88],"wordpress","2024-07-16","\u002Fblog\u002Fwpgraphql-increase-post-query-limit",{"title":92,"description":93,"id":94,"categories_slug":95,"date_published":96,"path":97},"Tailwind CSS - Using subgrid to align child content","As of Tailwind CSS 3.4, CSS subgrids are now available. In this article, we will look at how we can use the new subgrid option to fix a very common layout alignment issue.","content\u002Fblog\u002F13.tailwind-css-subgrid-align-content.md",[10,9],"2024-06-08","\u002Fblog\u002Ftailwind-css-subgrid-align-content",{"title":99,"description":100,"id":101,"categories_slug":102,"date_published":105,"path":106},"How to clear NGINX cache","There are situations where you might need to clear the NGINX cache, such as updating content or resolving caching issues. In this guide, we'll walk you through the steps on how to clear the NGINX cache.","content\u002Fblog\u002F12.how-to-clear-nginx-cache.md",[103,104],"nginx","ubuntu","2024-01-10","\u002Fblog\u002Fhow-to-clear-nginx-cache",{"title":108,"description":109,"id":110,"categories_slug":111,"date_published":112,"path":113},"Tailwind CSS - How to make a grid with different width columns","Explore how to create a two-column grid as an example using Tailwind CSS, where the first column takes up 20% of the width, and the second column occupies the remaining 80% using 3 different methods to accomplish this.","content\u002Fblog\u002F11.tailwind-css-make-grid-different-width-columns.md",[10,9],"2024-01-04","\u002Fblog\u002Ftailwind-css-make-grid-different-width-columns",{"title":115,"description":116,"id":117,"categories_slug":118,"date_published":119,"path":120},"Force SSH Client to use specific private key","SSH config files allow you to define various configuration parameters for SSH connections. By creating a centralized configuration file, you can avoid the need to specify key files, usernames, and other connection details each time they connect to a server.","content\u002Fblog\u002F10.force-ssh-client-to-use-private-key.md",[49],"2024-01-03","\u002Fblog\u002Fforce-ssh-client-to-use-private-key",{"title":122,"description":123,"id":124,"categories_slug":125,"date_published":127,"path":128},"Storing money data in MySQL","When dealing with monetary values, it's crucial to use a data type that supports fixed-point arithmetic.  Explore the best practices for storing money data in MySQL to ensure data integrity and precision.","content\u002Fblog\u002F9.storing-money-in-mysql.md",[126],"mysql","2023-12-04","\u002Fblog\u002Fstoring-money-in-mysql",{"title":130,"description":131,"id":132,"categories_slug":133,"date_published":134,"path":135},"Configuring and Using Aliases in Zsh on MacOS","Configuring aliases in Zsh on MacOS is a simple yet powerful way to enhance your command-line experience. By customising commands to match your workflow, you can save time and reduce the cognitive load associated with remembering complex commands.","content\u002Fblog\u002F8.configuring-and-using-aliases-in-zsh-on-macos.md",[49],"2023-11-26","\u002Fblog\u002Fconfiguring-and-using-aliases-in-zsh-on-macos",{"title":137,"description":138,"id":139,"categories_slug":140,"date_published":141,"path":142},"Selectively disable image lazy loading in WP 5.5+ (without plugin)","A better solution is to only disable lazy loading for selected images by class, particularly for images which increase the LCP metric.","content\u002Fblog\u002F7.selectively-disable-image-lazy-loading-in-wordpress.md",[58,88],"2022-01-12","\u002Fblog\u002Fselectively-disable-image-lazy-loading-in-wordpress",{"title":144,"description":145,"id":146,"categories_slug":147,"date_published":148,"path":149},"Create visual database schema with MySQL Workbench","Rather than manually creating a visual representation of your database schema, which can be extremely time-consuming and error-prone, MySQL Workbench simplifies this task using their database reverse engineer functionality.","content\u002Fblog\u002F6.create-visual-db-schema-mysql-workbench.md",[58,126],"2022-01-04","\u002Fblog\u002Fcreate-visual-db-schema-mysql-workbench",{"title":151,"description":152,"id":153,"categories_slug":154,"date_published":155,"path":156},"NGINX cache based on cookies","If you have a website where it is possible to serve multiple versions of the site using the same URL, you may run into problems where NGINX returns from cache the incorrect version. For example, if your site has multiple themes or you use browser user agent sniffing to provide different content to users.","content\u002Fblog\u002F4.nginx-cache-based-cookies.md",[58,103],"2021-12-26","\u002Fblog\u002Fnginx-cache-based-cookies",{"title":158,"description":159,"id":160,"categories_slug":161,"date_published":155,"path":162},"Javascript cookie not working on another page","When you set a cookie you should specify an expire time and a path. If you don’t specify a path the cookie is accessible only by the current page.","content\u002Fblog\u002F5.javascript-cookie-not-working-other-page.md",[58,48],"\u002Fblog\u002Fjavascript-cookie-not-working-other-page",{"title":164,"description":165,"id":166,"categories_slug":167,"date_published":168,"path":169},"Remove Gutenberg CSS Library from WordPress","If you’re not using the Gutenberg editor (introduced in WordPress version 5), it is a good idea to remove the Gutenberg CSS which is automatically loaded.","content\u002Fblog\u002F3.remove-gutenberg-css-wordpress.md",[58,88],"2021-12-20","\u002Fblog\u002Fremove-gutenberg-css-wordpress",{"title":171,"description":172,"id":173,"categories_slug":174,"date_published":175,"path":176},"WP Synchro SSL error fix","When you create your first import installation in WP Synchro on your local site, it defaults to verifying the SSL certificate on your local setup.","content\u002Fblog\u002F1.wp-synchro-ssl-error-fix.md",[58,88],"2021-12-19","\u002Fblog\u002Fwp-synchro-ssl-error-fix",{"title":178,"description":179,"id":180,"categories_slug":181,"date_published":175,"path":182},"Owl Carousel CLS (Cumulative Layout Shift) fix","In this article, we will look at CLS (Cumulative Layout Shift) and how sliders\u002Fcarousels such as Owl Carousel negatively impact CLS scores and provide a fix.","content\u002Fblog\u002F2.owl-carousel-cls-fix.md",[10,58,88],"\u002Fblog\u002Fowl-carousel-cls-fix",{"left":184,"top":184,"width":185,"height":185,"rotate":184,"vFlip":186,"hFlip":186,"body":187},0,24,false,"\u003Cpath\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    stroke-width=\"1.5\"\n    d=\"M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5m-9-6h.008v.008H12zM12 15h.008v.008H12zm0 2.25h.008v.008H12zM9.75 15h.008v.008H9.75zm0 2.25h.008v.008H9.75zM7.5 15h.008v.008H7.5zm0 2.25h.008v.008H7.5zm6.75-4.5h.008v.008h-.008zm0 2.25h.008v.008h-.008zm0 2.25h.008v.008h-.008zm2.25-4.5h.008v.008H16.5zm0 2.25h.008v.008H16.5z\" \u002F>",{"left":184,"top":184,"width":185,"height":185,"rotate":184,"vFlip":186,"hFlip":186,"body":189},"\u003Cg\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    stroke-width=\"1.5\">\n    \u003Cpath\n      d=\"M9.568 3H5.25A2.25 2.25 0 0 0 3 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.1 18.1 0 0 0 5.224-5.223c.54-.827.368-1.908-.33-2.607l-9.583-9.58A2.25 2.25 0 0 0 9.568 3\" \u002F>\n    \u003Cpath d=\"M6 6h.008v.008H6z\" \u002F>\n  \u003C\u002Fg>",{"left":184,"top":184,"width":185,"height":185,"rotate":184,"vFlip":186,"hFlip":186,"body":191},"\u003Cg fill=\"none\" stroke-width=\"2.0\" stroke=\"currentColor\">\u003Cpath\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    d=\"M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3\">\u003C\u002Fpath>\u003C\u002Fg>"]