This is how I create an icon for my PixelIcon Project using Adobe Illustrator. It’s not the best process but it’s enjoyable. My icons are in 9×9 pixel grids so I had to try keeping them at around 7×7 pixels. You could download and use them for free at https://sqkhor.com/pixel-icons/
CSS: A Simple Trick to Prevent Stretching of the Last Flexbox Element
Since the introduction of Flexbox in CSS, it has become so ubiquitous that you could find it in almost every website. However, Flexbox doesn’t always behave as expected. For example, once you allow your child element to stretch by giving flex-grow a positive value, the last row always stretches end to end, and it may look awkward when it has…
Underlined Input with Extrusions on both Sides with CSS
I’m not sure how to call this kind of form style, it is pretty common on paper forms, but super rare to find on the web: In fact, I have only seen it once on Condé Nast Traveler website many years ago, but to my disappointment it was just an image, not an actual form…
PHP: Reading JSON from Javascript Fetch API and Axios
If you tried to send a POST request by following tutorials of the new Fetch API in Vanilla JS, or if you use Axios, which sends form data in JSON format by default, you might be surprised that $_POST is empty, the entire JSON data is missing. This is because PHP only reads the form data in url-encoded format: What…
Some Simple PHP Functions that I Find Useful
I’ll keep this list updated. stop() We use this function to gracefully stop the program in place of exit. We used to close all DB connections within this function, but it’s seemed no longer required to close manually, so sometimes we just do some data logging here. is_num() and is_id() It’s funny that in PHP, most…
Building a PHP Site Without a Framework
Nowadays when you want to build a website, the first thing that comes to mind is to choose a framework. Assumed that you have already chosen AMP as your stack of choice (Apache + MySQL + PHP), the most popular frameworks out there are Laravel, CodeIgniter, Slim and probably WordPress (if you consider it as…
Disabling CSS Hover Appearance on Mobile
We all know that hover events don’t really work on touch screens because there’s no cursor. When you touch a button with hover appearance or animation, your phone will emulate the hover behaviour, and does nothing. It’s when you touch the second time, only the button will do what it should do. This may slow…
3 Ways to Centralise Elements Vertically in CSS (2023ish)
One of the most frustrating stuff to do in CSS is to centralise something vertically. Most of the methods we know and tried are kind of ‘hack-ish’, but I’m going to list them out anyway. Let’s assume that we have a little box (#content) that should be placed at the centre of a full-screen box…
Force Toggling a CSS Class
One of the things I found pretty useful when dealing with Bootstrap theme is the ability to force toggle a CSS class with Javascript. Let’s say, you have a select menu with ‘Other’ option, and you would like to display a text input when ‘Other’ is selected: Instead of using if-else statement to show or…
Restoring Adobe Illustrator ‘Film & Video’ Preset to Your Regular Canvas
Have you started your project with a preset in ‘Film & Video’ and got all confused? Here’s how to configure your document back to the ‘original’ state that you have always been working with: 1. Remove the Second Artboard Go to the Artboards panel, select the second artboard (Artboard 2) and click the bin icon….
New DNS Zone on Facebook?
Have you noticed recently that when you browse Facebook on your laptop, it’s no longer “www.facebook.com” but “web.facebook.com”? I’m not sure if this subdomain has existed earlier in other places, but I have only just seen in Malaysia since December 2022. The Impact If you’re just a regular user, then it might not affect you…