{"id":24,"date":"2021-09-23T19:14:45","date_gmt":"2021-09-23T19:14:45","guid":{"rendered":"https:\/\/webaffair.net\/blog\/?page_id=24"},"modified":"2025-08-27T01:50:51","modified_gmt":"2025-08-27T01:50:51","slug":"code","status":"publish","type":"page","link":"https:\/\/webaffair.net\/blog\/code\/","title":{"rendered":"Code Tips and Tricks"},"content":{"rendered":"\n<p>The blog posts in this area are mostly notes to myself about things I&#8217;ve learned along the way and don&#8217;t want to forget, so most of these won&#8217;t be articles with long explanations! Since I&#8217;m also into helping people learn to code, though, there are a few things I want to record here that are either basics that most self-taught folks don&#8217;t seem to know (though I have seen some very creative work-arounds for some of them!) or things that are actually pretty easy but most beginners\/self-taught folks might not realize are even possible. Posts written in more of a tutorial style, I&#8217;ve filed under the &#8216;Basics&#8217; sub-category.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Recent Tutorial-Style Posts<\/h2>\n\n\n\n<div class=\"wp-block-query is-layout-flow wp-block-query-is-layout-flow\"><ul class=\"wp-block-post-template is-layout-flow wp-block-post-template-is-layout-flow\"><li class=\"wp-block-post post-317 post type-post status-publish format-standard hentry category-basics tag-css tag-html tag-javascript tag-tools-software-2\">\n\n<article class=\"wp-block-group post-list-item is-layout-grid wp-container-core-group-is-layout-8d2db683 wp-block-group-is-layout-grid\"><h2 class=\"wp-block-post-title\"><a href=\"https:\/\/webaffair.net\/blog\/code\/basics\/introduction-to-browser-development-tools\/\" target=\"_self\" >Introduction to Browser Development Tools<\/a><\/h2>\n\n<div class=\"wp-block-post-date\"><time datetime=\"2025-12-18T00:43:00+00:00\">December 18, 2025<\/time><\/div>\n\n\n\n<div class=\"wp-block-post-excerpt\"><p class=\"wp-block-post-excerpt__excerpt\">All modern desktop browsers now have integrated browser tools, however, there are subtle (and sometimes less subtle) differences between each. I find that Firefox has the best overall, though I do switch to Chrome for some specific debugging tasks. I personally only use Edge or Safari when trying to isolate a bug that only shows <a class=\"wp-block-post-excerpt__more-link\" href=\"https:\/\/webaffair.net\/blog\/code\/basics\/introduction-to-browser-development-tools\/\">Read More<\/a><\/p><\/div>\n\n\n\n<footer class=\"wp-block-group post-footer wp-container-content-db1bbc15 is-content-justification-center is-layout-flex wp-container-core-group-is-layout-64b26803 wp-block-group-is-layout-flex\"><div class=\"taxonomy-post_tag tags wp-block-post-terms has-small-font-size wp-container-content-69bc4bdf\"><a href=\"https:\/\/webaffair.net\/blog\/tag\/css\/\" rel=\"tag\">CSS<\/a><span class=\"wp-block-post-terms__separator\"> <\/span><a href=\"https:\/\/webaffair.net\/blog\/tag\/html\/\" rel=\"tag\">HTML<\/a><span class=\"wp-block-post-terms__separator\"> <\/span><a href=\"https:\/\/webaffair.net\/blog\/tag\/javascript\/\" rel=\"tag\">JavaScript<\/a><span class=\"wp-block-post-terms__separator\"> <\/span><a href=\"https:\/\/webaffair.net\/blog\/tag\/tools-software-2\/\" rel=\"tag\">Tools &amp;. Software<\/a><\/div><\/footer>\n<\/article>\n\n<\/li><li class=\"wp-block-post post-250 post type-post status-publish format-standard has-post-thumbnail hentry category-basics tag-css tag-jcink-skinning\">\n\n<article class=\"wp-block-group post-list-item is-layout-grid wp-container-core-group-is-layout-8d2db683 wp-block-group-is-layout-grid\"><h2 class=\"wp-block-post-title\"><a href=\"https:\/\/webaffair.net\/blog\/code\/basics\/responsive-font-sizes-title-bars\/\" target=\"_self\" >Responsive Font Sizes &amp; Title Bars<\/a><\/h2>\n\n<div class=\"wp-block-post-date\"><time datetime=\"2025-11-20T05:52:47+00:00\">November 20, 2025<\/time><\/div>\n\n<figure style=\"aspect-ratio:auto;\" class=\"wp-block-post-featured-image\"><img loading=\"lazy\" decoding=\"async\" width=\"325\" height=\"700\" src=\"https:\/\/webaffair.net\/blog\/wp-content\/uploads\/2025\/11\/responsive-font-sizes-step10-mobile.jpg\" class=\"attachment-post-thumbnail size-post-thumbnail wp-post-image\" alt=\"\" style=\"width:100%;height:100%;object-fit:contain;\" srcset=\"https:\/\/webaffair.net\/blog\/wp-content\/uploads\/2025\/11\/responsive-font-sizes-step10-mobile.jpg 325w, https:\/\/webaffair.net\/blog\/wp-content\/uploads\/2025\/11\/responsive-font-sizes-step10-mobile-139x300.jpg 139w\" sizes=\"auto, (max-width: 325px) 100vw, 325px\" \/><\/figure>\n\n<div class=\"wp-block-post-excerpt\"><p class=\"wp-block-post-excerpt__excerpt\">Let&#8217;s say we want a reall big, chunky main title for our forum skin. Here&#8217;s, I think, the simplest way to do it, I see this a lot: .maintitle { height: 160px; line-height: 160px; text-align: center; font-size: 40px; } If we add that to the stylesheet and check it on desktop, it looks great. That <a class=\"wp-block-post-excerpt__more-link\" href=\"https:\/\/webaffair.net\/blog\/code\/basics\/responsive-font-sizes-title-bars\/\">Read More<\/a><\/p><\/div>\n\n\n\n<footer class=\"wp-block-group post-footer wp-container-content-db1bbc15 is-content-justification-center is-layout-flex wp-container-core-group-is-layout-64b26803 wp-block-group-is-layout-flex\"><div class=\"taxonomy-post_tag tags wp-block-post-terms has-small-font-size wp-container-content-69bc4bdf\"><a href=\"https:\/\/webaffair.net\/blog\/tag\/css\/\" rel=\"tag\">CSS<\/a><span class=\"wp-block-post-terms__separator\"> <\/span><a href=\"https:\/\/webaffair.net\/blog\/tag\/jcink-skinning\/\" rel=\"tag\">Jcink Skinning<\/a><\/div><\/footer>\n<\/article>\n\n<\/li><li class=\"wp-block-post post-137 post type-post status-publish format-standard hentry category-basics tag-ajax tag-javascript tag-jcink-skinning tag-jquery\">\n\n<article class=\"wp-block-group post-list-item is-layout-grid wp-container-core-group-is-layout-8d2db683 wp-block-group-is-layout-grid\"><h2 class=\"wp-block-post-title\"><a href=\"https:\/\/webaffair.net\/blog\/code\/basics\/ajax-and-images\/\" target=\"_self\" >AJAX and Images<\/a><\/h2>\n\n<div class=\"wp-block-post-date\"><time datetime=\"2024-06-22T22:01:29+00:00\">June 22, 2024<\/time><\/div>\n\n\n\n<div class=\"wp-block-post-excerpt\"><p class=\"wp-block-post-excerpt__excerpt\">Okay so I recently figured this out, fixed it on my scripts, forgot about it, was just reminded, realized I ought to document\/share. So this is getting posted here and a couple other places. When you do a fetch() or $.get() the browser only fetches that specific page, and doesn&#8217;t bring along any external\/linked files. <a class=\"wp-block-post-excerpt__more-link\" href=\"https:\/\/webaffair.net\/blog\/code\/basics\/ajax-and-images\/\">Read More<\/a><\/p><\/div>\n\n\n\n<footer class=\"wp-block-group post-footer wp-container-content-db1bbc15 is-content-justification-center is-layout-flex wp-container-core-group-is-layout-64b26803 wp-block-group-is-layout-flex\"><div class=\"taxonomy-post_tag tags wp-block-post-terms has-small-font-size wp-container-content-69bc4bdf\"><a href=\"https:\/\/webaffair.net\/blog\/tag\/ajax\/\" rel=\"tag\">AJAX<\/a><span class=\"wp-block-post-terms__separator\"> <\/span><a href=\"https:\/\/webaffair.net\/blog\/tag\/javascript\/\" rel=\"tag\">JavaScript<\/a><span class=\"wp-block-post-terms__separator\"> <\/span><a href=\"https:\/\/webaffair.net\/blog\/tag\/jcink-skinning\/\" rel=\"tag\">Jcink Skinning<\/a><span class=\"wp-block-post-terms__separator\"> <\/span><a href=\"https:\/\/webaffair.net\/blog\/tag\/jquery\/\" rel=\"tag\">JQuery<\/a><\/div><\/footer>\n<\/article>\n\n<\/li><li class=\"wp-block-post post-115 post type-post status-publish format-standard has-post-thumbnail hentry category-basics tag-css\">\n\n<article class=\"wp-block-group post-list-item is-layout-grid wp-container-core-group-is-layout-8d2db683 wp-block-group-is-layout-grid\"><h2 class=\"wp-block-post-title\"><a href=\"https:\/\/webaffair.net\/blog\/code\/basics\/using-svg-filters-in-css\/\" target=\"_self\" >Using SVG Filters in CSS<\/a><\/h2>\n\n<div class=\"wp-block-post-date\"><time datetime=\"2024-06-02T06:37:45+00:00\">June 2, 2024<\/time><\/div>\n\n<figure style=\"aspect-ratio:auto;\" class=\"wp-block-post-featured-image\"><img loading=\"lazy\" decoding=\"async\" width=\"593\" height=\"432\" src=\"https:\/\/webaffair.net\/blog\/wp-content\/uploads\/2024\/06\/filter2.png\" class=\"attachment-post-thumbnail size-post-thumbnail wp-post-image\" alt=\"\" style=\"width:100%;height:100%;object-fit:contain;\" srcset=\"https:\/\/webaffair.net\/blog\/wp-content\/uploads\/2024\/06\/filter2.png 593w, https:\/\/webaffair.net\/blog\/wp-content\/uploads\/2024\/06\/filter2-300x219.png 300w\" sizes=\"auto, (max-width: 593px) 100vw, 593px\" \/><\/figure>\n\n<div class=\"wp-block-post-excerpt\"><p class=\"wp-block-post-excerpt__excerpt\">Firstly, you&#8217;ll need the svg itself. Three things to note: 1: Like empty images, empty svgs still take up some minimum space by default. If you&#8217;re borrowing a filter from an svg image that you&#8217;re actually using, that&#8217;s not an issue. If you&#8217;re just using the svg for filters, the svg itself needs to be <a class=\"wp-block-post-excerpt__more-link\" href=\"https:\/\/webaffair.net\/blog\/code\/basics\/using-svg-filters-in-css\/\">Read More<\/a><\/p><\/div>\n\n\n\n<footer class=\"wp-block-group post-footer wp-container-content-db1bbc15 is-content-justification-center is-layout-flex wp-container-core-group-is-layout-64b26803 wp-block-group-is-layout-flex\"><div class=\"taxonomy-post_tag tags wp-block-post-terms has-small-font-size wp-container-content-69bc4bdf\"><a href=\"https:\/\/webaffair.net\/blog\/tag\/css\/\" rel=\"tag\">CSS<\/a><\/div><\/footer>\n<\/article>\n\n<\/li><li class=\"wp-block-post post-9 post type-post status-publish format-standard hentry category-basics tag-css\">\n\n<article class=\"wp-block-group post-list-item is-layout-grid wp-container-core-group-is-layout-8d2db683 wp-block-group-is-layout-grid\"><h2 class=\"wp-block-post-title\"><a href=\"https:\/\/webaffair.net\/blog\/code\/basics\/funky-cursor-colours\/\" target=\"_self\" >Changing the Colors of Input Elements<\/a><\/h2>\n\n<div class=\"wp-block-post-date\"><time datetime=\"2021-09-16T22:09:11+00:00\">September 16, 2021<\/time><\/div>\n\n\n\n<div class=\"wp-block-post-excerpt\"><p class=\"wp-block-post-excerpt__excerpt\">Ever been on a forum site with a really nice dark theme, but then you go to make a post, and are presented with a large blindingly white text area to type in? Maybe with tiny, hard to read font? Of course you have. But this is a 100% fixable problem. <a class=\"wp-block-post-excerpt__more-link\" href=\"https:\/\/webaffair.net\/blog\/code\/basics\/funky-cursor-colours\/\">Read More<\/a><\/p><\/div>\n\n\n\n<footer class=\"wp-block-group post-footer wp-container-content-db1bbc15 is-content-justification-center is-layout-flex wp-container-core-group-is-layout-64b26803 wp-block-group-is-layout-flex\"><div class=\"taxonomy-post_tag tags wp-block-post-terms has-small-font-size wp-container-content-69bc4bdf\"><a href=\"https:\/\/webaffair.net\/blog\/tag\/css\/\" rel=\"tag\">CSS<\/a><\/div><\/footer>\n<\/article>\n\n<\/li><\/ul><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Recent Snippets and Notes<\/h2>\n\n\n<ul class=\"wp-block-latest-posts__list has-dates wp-block-latest-posts\"><li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/webaffair.net\/blog\/code\/snippets\/glitch-disk-full-fixes\/\">Glitch Hosting &#8220;Disk Full&#8221; Fixes<\/a><time datetime=\"2024-01-15T03:25:56+00:00\" class=\"wp-block-latest-posts__post-date\">January 15, 2024<\/time><div class=\"wp-block-latest-posts__post-excerpt\">Add to .gitignore: In the Terminal: Note!! pnpm will not understand ci and will pass it to npm directly, and you will end up with locally-installed npm modules that contribute to your quota. refresh will trigger the editor refresh, pnpm to prune &amp; install, and the app to restart.<\/div><\/li>\n<li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/webaffair.net\/blog\/code\/snippets\/my-favourite-text-gradients\/\">My Favourite Text Gradients<\/a><time datetime=\"2021-09-26T00:22:39+00:00\" class=\"wp-block-latest-posts__post-date\">September 26, 2021<\/time><div class=\"wp-block-latest-posts__post-excerpt\">Note: I am using -webkit prefixed styles for all three relevant rules to ensure that only browsers that implement all three will load the background gradient at all. I could use a proper polyfill and\/or @supports, but honestly this creates more readable code. Non-webkit browsers have started using webkit prefixes too, so this code works&#8230; <a class=\"read-more\" href=\"https:\/\/webaffair.net\/blog\/code\/snippets\/my-favourite-text-gradients\/\">Read More<\/a><\/div><\/li>\n<li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/webaffair.net\/blog\/code\/snippets\/automatically-generate-google-fonts-link\/\">Automatically generate Google Fonts link.<\/a><time datetime=\"2021-09-17T01:05:09+00:00\" class=\"wp-block-latest-posts__post-date\">September 17, 2021<\/time><div class=\"wp-block-latest-posts__post-excerpt\">Useful if you are making a customizable skin, or if you allow users to set font preferences in their account settings. Of course, the basic way you include google fonts on your page is like this: HTML (preconnects are technically optional): Or, CSS Include: So how to generate that link from an array of font&#8230; <a class=\"read-more\" href=\"https:\/\/webaffair.net\/blog\/code\/snippets\/automatically-generate-google-fonts-link\/\">Read More<\/a><\/div><\/li>\n<li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/webaffair.net\/blog\/code\/snippets\/data-binding-updates-and-sqldatasource\/\">Data Binding, Updates, and SQLDataSource<\/a><time datetime=\"2021-09-16T20:07:24+00:00\" class=\"wp-block-latest-posts__post-date\">September 16, 2021<\/time><div class=\"wp-block-latest-posts__post-excerpt\">Random Things to remember: SQLDataSource won&#8217;t bind parameters properly if you don&#8217;t specify a type, but the GUI data source setup window doesn&#8217;t guess nor prompt you to provide them. It&#8217;s under &#8216;Advanced&#8217;; or go into the code and add them. GridView will automatically add anything with &#8216;id&#8217; in the field name to the DataKeys&#8230; <a class=\"read-more\" href=\"https:\/\/webaffair.net\/blog\/code\/snippets\/data-binding-updates-and-sqldatasource\/\">Read More<\/a><\/div><\/li>\n<\/ul>","protected":false},"excerpt":{"rendered":"<p>The blog posts in this area are mostly notes to myself about things I&#8217;ve learned along the way and don&#8217;t want to forget, so most of these won&#8217;t be articles with long explanations! Since I&#8217;m also into helping people learn to code, though, there are a few things I want to record here that are&#8230; <a class=\"read-more\" href=\"https:\/\/webaffair.net\/blog\/code\/\">Read More<\/a><\/p>\n","protected":false},"author":1,"featured_media":87,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-24","page","type-page","status-publish","format-standard","has-post-thumbnail","hentry"],"jetpack-related-posts":[],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/webaffair.net\/blog\/wp-json\/wp\/v2\/pages\/24","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webaffair.net\/blog\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/webaffair.net\/blog\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/webaffair.net\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webaffair.net\/blog\/wp-json\/wp\/v2\/comments?post=24"}],"version-history":[{"count":10,"href":"https:\/\/webaffair.net\/blog\/wp-json\/wp\/v2\/pages\/24\/revisions"}],"predecessor-version":[{"id":214,"href":"https:\/\/webaffair.net\/blog\/wp-json\/wp\/v2\/pages\/24\/revisions\/214"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webaffair.net\/blog\/wp-json\/wp\/v2\/media\/87"}],"wp:attachment":[{"href":"https:\/\/webaffair.net\/blog\/wp-json\/wp\/v2\/media?parent=24"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}