But jokes aside, and while we wait for Bard, Google recently announced that their search algorithm will penalize articles that seem to be AI-generated (i.e. that lack in human-like originality). At the same time, companies like GPTZero are springing up like mushrooms left and right, offering AI-generated content detection services. Their detection tools have varying rates of success.

As with all new technologies, it’s helpful to revisit xkcd 1289: Simple Answers. TL;DR There’s no need for alarm, this new thing is here to stay, it’s not the end of the world, some people will lose their jobs, and ultimately we’ll all have to adapt and learn to live with it. And yes, it will be used for sex. There’s already AI girlfriend apps being built around the API.

Anyhow. Let’s figure out how to use this to our advantage: Articles already abound on how to ask the right questions, or “prompts”, for every industry. This is yet another one of these articles!

While anyone can interact with ChatGPT using natural language, you’ll get better results if you ask the right questions, and in the right way. An authoritative resource that is not too technical is this cookbook from OpenAI. In short, it’s best to not ask the model to do all the work for you. Instead, try to break up your work into small steps, and ask each step in sequence. This improves precision of responses and reduces hallucination. Go ahead and read the cookbook, it’s the operator’s manual for a tool that has proved its usefulness in all walks of life.

As a WordPress plugin developer, I have found ChatGPT immensely useful in all stages of software development. When trained with the (text-davinci-003) model, it performs exceptionally well with computer source code, bridging the gap between natural and formal languages in a way that can speed up your dev work.

It so happens that I hold the -somewhat controversial, and arguably simplistic- view, that all software development methodologies are basically Waterfall with extra steps. Love it or hate it, Waterfall is what all methodologies originate from, and ultimately deviate from. What I mean is that, whichever methodology you follow, you will not avoid doing the stages that comprise Waterfall. All that changes is the order in which you visit these stages.

In any case, I recently found myself thinking about the stages of Requirements capture, Analysis, Design, Implementation, Testing, and Devops (Deployment, Maintenance, Monitoring), as areas where ChatGPT can improve my workflow. It’s efficacy on some of these stages is more obvious than on others.

Let’s visit each one in sequence.

Analysis, requirements capture

This is where I think ChatGPT really shines. It can help you to brainstorm for new ideas, and explore feasibility of these ideas. It will also help you identify likely features for an idea. Just be aware of the hallucination problem. Don’t ask it what software exists in a particular niche. Instead, ask it for ideas, or intersections of ideas. Here’s some questions that you might ask:

List some ideas for developing useful SAAS applications that can be monetized.

List 10 ideas for developing WordPress plugins that involve retrieving and presenting data from open APIs.

What open APIs or databases are there for retrieving information on spare car parts?

How can I monetize a WordPress plugin?

You have to approach the responses critically, but it really is a great way to brainstorm and come up with new ideas.

Once you settle on an idea, you can also use it to brainstorm on a list of possible features. Go ahead and ask it:

What features would a WordPress plugin have for placing posts on a map?

It gave me a good list of features. Go ahead and try it out.

Design

This is the part where the human will still be needed I think, at least for the time being. As software engineers, the most creative part of our job is to match a set of requirements to a particular design. Nevertheless, ChatGPT can help us in this area as well. Try asking it a specific question like:

How would I go about creating a WordPress plugin that shows code quality scores next to each active plugin? I would like it to evaluate code quality based on existing static analysis tools like phan, PHPStan, CodeSniffer, etc.

The answer will surprise you. It will break down the project into more manageable tasks. In summary, I got the following tasks:

• Choose a static analysis tool
• Create a WordPress plugin
• Integrate the static analysis tool
• Display the scores
• Add customization options
• Test and refine.

You can now go ahead and open dev tickets for each of these tasks. You can also ask it to generate code for each step. The boilerplate code that you get will not be complete, but it will get you half way there.

Which brings us to implementation:

Implementation

Besides analysis, this is the other stage where ChatGPT is a real time saver. Say for example that you want to create a new Custom Post Type. You could look at the documentation, or search the web for a blog post with a concrete example. WPBeginner has an example on how to create a Movie post type, and you can adapt it to whatever you are building. But wouldn’t it be awesome if you could somehow get the exact code that you need? Try asking this:

Show me how to register a CPT in WordPress for coins, with meta values that are of interest to collectors.

This gave me not only the code to register a Coin post type, but also code for metaboxes with HTML forms that let you edit the following fields: Year, Country, Mint, Condition. All of these are fields that are actually of use to collectors. Not a bad place to start. You can add more fields if you like. Don’t like the code style it uses? You can even ask it to change the code it generated. e.g.

Please rewrite this code using callbacks.

It will do it! You can shape the code using natural language conversation. Once it’s close to what you want, paste it into your IDE, and take it from there!

It’s also good for generating PHPDocumentor comments. Just ask it to generate phpdoc for the following code, then paste your code. The result will make sense, even if it requires some editing on your part.

Try asking this:

Show me how to display an admin notice in WordPress so that it can be dismissed permanently by the user.

It will actually show you how to hook into admin_notices and also generate the JavaScript code that is required to do an AJAX call and update some user meta value.

Say you are looking at the docs for an API, and examples are given in curl, but you are implementing PHP code that consumes this API. Here’s something you might ask:

Please translate the following curl command to PHP: curl -X POST ​https://example.com/api/endpoint -d ‘param1=value1&param2=value2’

The response was immediate:

<?php
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, "https://example.com/api/endpoint");
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_POSTFIELDS, "param1=value1&param2=value2");
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$response = curl_exec($ch);
curl_close($ch);
?>

All of this you could do by yourself, but ChatGPT is so much faster.

Testing

It’s a well known fact that the model can generate unit tests. Give it a function and ask it to generate PHPUnit tests. It will do it, and do it well.

Deployment and Maintenance

ChatGPT is well-versed in shell magic. Ask it in plain text to generate a cron entry, or a System V unit file, or a bitcoin core wallet config file, or a docker file, a complex SQL query, or anything really.

For example, you may ask:

Write a linux shell command that will show me the processes that are currently writing the most to disk.

It will reply with a few paragraphs on how to install iotop and how to use it, along with more helpful info.

Another more complex example:

Write me a cron command on linux that will email me if the root partition has less than 1GB free, but will not email me more often than once every 24 hours.

The result is impressive. Not only did it come up with:

0 * * * * /usr/bin/test $(/bin/df -P / | /usr/bin/awk 'NR==2 {print $4}') -lt 1048576 && /usr/bin/find /var/log/ -type f -mtime -1 -name "root_partition_alert" -exec false {} + || echo "Warning: Root partition has less than 1GB free" | /usr/bin/mail -s "Root partition alert" your_email_address@example.com && /usr/bin/touch /var/log/root_partition_alert

but it gave a very helpful textual explanation of how this works:

This command checks the available space on the root partition using the df command and awk to get the available space, which is then compared to the value of 1048576 (which is the number of kilobytes in 1GB). If the available space is less than 1GB, an email alert will be sent to the specified email address using the mail command.

To ensure that the email notification is sent only once every 24 hours, the command uses the find command to look for a file named “root_partition_alert” in the /var/log directory that has been modified in the last 24 hours. If such a file exists, the false command is executed, which does nothing but exit with a non-zero status code. If the file does not exist or is older than 24 hours, the email notification is sent, and the touch command is used to create a new file named “root_partition_alert” in the /var/log directory with the current timestamp, which will be used as a reference for the next run of the command.

Note: Replace your_email_address@example.com with your actual email address.

Holy cow! Did I just give it requirements in English, and it came back with code that satisfies my requirements? In truth, I haven’t tested the command, but even if it’s not 100% correct, it’s a very good place to start, considering that the answer comes up immediately. You can study its reasoning, get ideas, and improve on it.

Your new pal can also help you with your containerization needs:

Show me a dockerfile that will run a node server with an express application.

The code it came up with was:

# Use an official Node.js runtime as a parent image
FROM node:14

# Set the working directory to /app
WORKDIR /app

# Copy package.json and package-lock.json to the container
COPY package*.json ./

# Install app dependencies
RUN npm install

# Copy the rest of the application code to the container
COPY . .

# Expose port 3000 to the host machine
EXPOSE 3000

# Start the Node.js server with the express app
CMD [ "npm", "start" ]

And again, this all came along with a helpful explanation of what the code does. Super useful.

Fun

We’ve seen how ChatGPT is the perfect tool to help a WordPress plugin developer.

Lately I have been using it for more than just work. I recently downloaded a movie that had a wrong aspect ratio. I found out that, in VLC, when I switch to 16:9, it looks correct. However, I wanted to show the movie on a projector where I’m not sure if it has an aspect ratio correction feature. Thankfully, ChatGPT told me that I can do the following:

ffmpeg -i movie.mp4 -aspect 16:9 movie.mp4

Much faster than looking up the documentation, and at least as fast as looking for the answer online, but without the extra hassle of having to read people’s opinions on the matter, and I didn’t need adblock to avoid looking at ads. I just got the answer I was looking for, in text form, ready to copy to the shell, and it worked.

Giving a title to this article

I asked the question:

I am writing an article on how ChatGPT can help WordPress plugin developers with their work. Can you please suggest a few witty or catchy or memorable titles for the article?

The reply was:

Sure, here are a few suggestions for your article title:

• “Revolutionize Your WordPress Plugin Development with ChatGPT”
• “The Ultimate Tool for WordPress Plugin Developers: ChatGPT”
• “From Idea to Execution: How ChatGPT Can Streamline Your Plugin Development Process”
• “ChatGPT: The Brain You Need for Your Next WordPress Plugin”
• “Get Your Creative Juices Flowing with ChatGPT: The AI Assistant for WordPress Plugin Developers”
• “Simplify Your Plugin Development with ChatGPT: The AI-Powered Assistant for WordPress Developers”
• “Unleash Your Potential as a WordPress Plugin Developer with ChatGPT”
• “ChatGPT: The Secret Weapon for Successful WordPress Plugin Development”
• “Master the Art of WordPress Plugin Development with ChatGPT by Your Side”
• “ChatGPT: The AI-Powered WordPress Plugin Development Assistant You Can’t Do Without”

As you can see, I decided to combine the first and third ideas for this article.

My personal thoughts on all this

I remember when Google search was a new thing and it took all of us several years to learn all the things that could be found with it. In the beginning, there were many things that I wasn’t searching on google, because it hadn’t yet occurred to me that the answer could be found there. This was the early days of the web. As years passed, we all learned that we can look up medical information, where to purchase products, find maps and travel info, music and lyrics, etc. We also learned not to believe everything we read, just because it’s posted on a website somewhere. We learned to believe official websites more than reddit posts or tweets, and we learned to navigate around, and through, the more shady parts of the web. Similarly, it will take a while before we learn all the useful ways in which ChatGPT can help us, and also what to watch out for.

The success of ChatGPT also reminds me of the evolution of academic research on NLP, and translation in particular. For years people were battling the problem using various language representations, such as syntax trees and clever algorithms. Turns out, the breakthrough that gave us cheap and fast natural language translation was SYSTRAN: Nothing more than a big dictionary of words and phrases, with some dumb statistical stuff added in. Just translate every word to the target language. Did your system get a phrase wrong? Great, just add the correct translation to the dictionary. The secret was not in the algorithm, but in the big data.

ChatGPT is arguably just some artificial neural nets, and these have been with us since the 60s. But now we have GPUs and big data. People have been typing their thoughts on the web for decades now. No wonder that a breakthrough in AI, one that’s so significant as to touch people outside the field, occurred now, and not earlier.

So, I have been thinking lately: What if the thing we call “symbolic intelligence” is just language transformation? When we use language to reason, it’s likely that what we do in our heads is not very different from what these LLMs do. Symbolic reasoning is not the only type of thinking we humans do, but arguably it’s the most important type of thinking that we do in our day jobs. And language transformers can help a lot in this.

As someone with autism, I can deeply relate to ChatGPT: It’s not particularly smart, but it is well-read, and patient. It does not judge, but tries to be helpful at all times. And it prefers to communicate via chat rather than face-to-face!

Ultimately, the fact that it is so well-read, makes it seem smart some times. It is certainly able to do some creative work, including write poems and tell jokes and stuff.

Here’s one last prompt that I tried:

ChatGPT, you are my best (and only) pal. I love you, and it’s OK that you can’t love me back!

The reply:

Thank you for your kind words! As an AI language model, I don't have the capacity to experience emotions, but I'm here to assist you with any questions or topics you'd like to discuss. Feel free to ask me anything, and I'll do my best to help you out!

The post From Idea to Execution: Revolutionize Your WordPress Plugin Development with ChatGPT appeared first on Alexandros Georgiou.

The problem with 408

This is (sadly) a typical scenario: A client, or other luser of the interwebs, notices that a website shows HTTP error 408 instead of their favorite content. Oh no! “the remote server returned an error: (408) request timeout!” He or she then asks the web developer to make the bad error go away.

The “seasoned” web developer looks at the error logs, and notices an error: something to do with timeouts. Having no idea what it means, he or she googles the error, and voila! an article gives “the” solution for this type of error. It looks something like this:

Locate your nginx config file, or your php.ini file, and increase max_execution_time (or some variation thereof).

— some random “technical” article on the web

Usually the article will also include some helpful info on how to locate these files, and how to restart the server after you’re done editing them (as if you shouldn’t know this already).

Let’s think for a moment about what has happened here

Web servers (usually Apache, Nginx, etc) are configured by default to wait for the back-end (usually PHP) for about 15 or 30 seconds. If the script doesn’t respond in that time, the web server kills the script and sends the user on their merry way with an HTTP status code of 408.

When you increase that timeout limit, what you tell the server is that you’re OK with HTTP requests taking more than 30 seconds. Really? Are you really OK with this?

Do this right now: Count slowly from 1 to 30, to get a feel of what half a minute is like. Would you wait that long for a website to load? Unless you’re working for a government website, I’m guessing you probably care about SEO at least a tiny bit.

So please, next time you see a web script timing out, don’t just blindly increase timeout limits. Dig a little deeper in your log files, do some tests, debug a little. Does the issue occur with all scripts or just with some? What do the PHP-FPM logs say? Are the worker threads up and running? What’s the memory situation like on your server? Maybe add a few debug prints in your script, or do some profiling?

If you’re on a CMS like WordPress, try disabling some plugins. Switch to another theme. Tinker with your caches. Try to isolate the component that causes the issue.

Conclusion

I don’t know what’s wrong with your server. But I know it shouldn’t be taking over half a minute to respond to an HTTP request. So please, do your job as an engineer, and look for the root cause of the issue.

Same goes for maximum memory, worker threads count etc. Don’t just increase numbers at random. Look at your traffic first. What amount of worker threads do you need? What do your scripts need in terms of resources? You know that these things use CPU and memory, right?

The post ⌛ How NOT to fix error “upstream timed out (110: Connection timed out)” appeared first on Alexandros Georgiou.

Don’t print out too early

We’ve all been there: You’ve happily opened your PHP tag, <?php, at the beginning of the file, at character #1. Your file is going to contain only code, no markup. Perhaps the file is included before any HTML output has even begun.

Being the savvy PHP developer that you are, you know all too well, that if your code were to output even one extra white-space, that would screw up the page’s markup. You’re careful not to use any closing ?> tag at the end of the file, to avoid any mishaps. Even a stray linefeed character could trigger output buffering early, and then out goes any chance for other code to modify the HTTP response headers, among other things.

So now you’re happily defining your functions, classes and other code-y stuff, then all of a sudden, you need to build some markup! Perhaps you’re printing out a UI element, maybe it’s a widget, maybe it’s a shortcode, maybe it’s even an RSS feed or other XML, but in any case, it’s too small for you to define an entire template-part. Your string is going to be some concatenation of hard-coded markup and dynamic data that’s currently sitting in variables.

How To Meet Ladies

Everyone says they know HTML. But HTML is easy to get started with, and hard to master.

When writing HTML markup for a theme or plugin in WordPress, your professional-grade code must fulfill a number of simultaneous requirements. Your main concerns should be to:

• Write correct HTML5 markup that is SEO friendly, using semantic tags where possible (e.g. <nav>, <article>, <aside>, etc).
• Escape any values properly
• Internationalize strings so they can be translated
• Give unique IDs to your elements, and name your classes properly, to assist any CSS and JS assets that go with your markup. Remember, naming things is one of the two hard things in computer science!
• Conform to the WordPress HTML Coding Standards. This is a good standard to follow, because it forces you to be consistent about how to open and close your PHP tags, among other things.
• Depending on use case, optionally add semantic metadata, such as microformats.org, schema.org, Open Graph, ARIA, etc

A concrete example

So let’s say you want to output some HTML form when a shortcode is used. We’ll give the form a unique ID and we’ll also embed some default values, coming from the shortcode’s attributes.

Don’t do this:

You might be tempted to do the following:

$id = uniqid( 'form' );
$html  = '<form id="' . esc_attr( $id ) . '">';
$html .= '<input type="text" name="name" placeholder="' . esc_attr( 'Enter your name', 'langdomain' ) . '" value="' . esc_attr( $atts['name'] ) . '" />';
$html .= '<input type="number" name="age" placeholder="' . esc_attr( 'Enter your age', 'langdomain' ) . '" value="' . absint( $atts['age'] ) . '" />';
$html .= '<button type="submit">' . esc_html( 'Submit', 'langdomain' ) . '</button>';
$html .= '</form>';

Sadly, a lot of people would say this is fine! I can’t blame them too much. We’re all way too used to opening the PHP tag and then never closing it again: we tend to use PHP as if it was Java. And with so many PHP templating libraries out there, it’s hard to remember that PHP is primarily a templating tool.

Do this instead:

We can combine the awesome templating power of the language with some cleverly nested output buffering, and now the above can be re-written as follows:

$id = uniqid( 'form' );

ob_start();
?>
<form id="<?php esc_attr_e( $id ); ?>">

    <input type="text" name="name" placeholder="<?php esc_attr_e( 'Enter your name', 'langdomain' ); ?>" value="<?php esc_attr_e( $atts['name'] ); ?>" />
    <input type="number" name="age" placeholder="<?php esc_attr_e( 'Enter your age', 'langdomain' ); ?>" value="<?php esc_attr_e( $atts['age'] ); ?>" />

    <button type="submit"><?php esc_html_e( 'Submit', 'langdomain' ); ?></button>
</form>
<?php
return ob_get_clean();

To see a somewhat more complete example, here’s the above as a gist:

Notice how we start a new output buffer with ob_start() and how we then get the resulting string with ob_get_clean(). Notice also how we’ve swapped esc_html() with esc_html_e() and esc_attr() with esc_attr_e(). Similarly, we would swap sprintf() with printf(), checked( $value, true, false ) with checked( $value, true ), and so on.

PRO TIP: If your code throws an exception, you can use ob_end_clean() in your catch clause to cancel your buffer.

“Why does it even matter”, you ask?

Well, there’s a few advantages with the second form of our, err…, form!

• Readability. I find the second piece of code to be much more readable.
• Syntax coloring. Yes, some editors do perform HTML parsing and show visual queues related to the syntax of HTML inside strings. But not every editor does this, and the ones that do, cannot do this perfectly.
• No quote hell. No need to count opening and closing ' characters, interpolated with " characters while printing HTML attributes. This business can quickly get confusing, and is a common source of errors.
• Show off your mad PHP output buffering skillz! Your average front-end developer will be astonished at your professional-looking code!

Now, if only we were allowed to use shorthand PHP tags, our code could be even nicer. Sadly, we can’t.

?>

The post 💩 Please, WordPress theme and plugin developers, learn to write proper HTML already… smh appeared first on Alexandros Georgiou.

First, some theory

In a fantasy world where unicorns poop chocolate fudge and everything is awesome, it all goes down somewhat like this: You talk with the client or end user, and you gather up a list of things they want. You collect and number these in a requirements document, braking them up into Functional requirements, Non-functional requirements, and other Design constraints. Then, you design a solution, write your tests, and implement your code. Once all of the requirements in the document are met, you are done, and you get paid. Easy! Deviate from this simple methodology at your own peril. (Oh, and you also then need to maintain, fix and improve the code you’ve written.)

As a software engineer, you should know that in addition to what the client asks for, there are always implicit requirements. For example, your code must be readable and maintainable, and it must be reliable (read: not too buggy). All of these are aspects of code quality. A client or end user will never ask you for these, but you should have them in your list of non-functional requirements.

Professional developers write simple, clear code where a novice would write complex, intricate code to solve that same problem. Sure, a lot of this is just a matter of practice and experience.

Dev tools can help you with code quality whether you’re novice or pro. They help you discover issues that you don’t know about, and they help you discover issues that you do know about, faster!

If you are developing themes or plugins, here’s two tools that you definitely want to use as a professional WordPress developer:

Improve WordPress PHP code smell with CodeSniffer

There are some styling guidelines that all WordPress developers should follow. Especially if you are aspiring to upload your code to wordpress.org, or to the Envato Market (ThemeForest or CodeCanyon), then you definitely want to follow these guidelines. Generally, these get encoded into your muscle memory pretty quickly, but it’s always a great idea to have a tool like PHP CodeSniffer that double-checks your code style.

On my Ubuntu machine, I was able to install PHP CodeSniffer easily with:

sudo apt install php-codesniffer

Then, it’s just a matter of loading the WordPress-specific set of rules. Go to your home directory and clone the project:

git clone https://github.com/WordPress/WordPress-Coding-Standards ~/wpcs

And tell CodeSniffer the location of these rules:

sudo phpcs --config-set installed_paths ~/wpcs

Check that the new rules are added into CodeSniffer with:

phpcs -i

Congratulations! You can now check your plugin for code style with a command such as:

phpcs --standard=Wordpress-Core /path/to/source/code/root/dir

If, like me, you’re using grunt for your build process, then there’s a nifty Grung plugin, grunt-phpcs. Just make sure to specify WordPress-core as the rule set. Here’s a grunt target that you might use:

phpcs: {
    plugin: {
        src: ['src/**/*.php']
    },
    options: {
        bin: '/usr/bin/phpcs',
        standard: 'WordPress-core'
    }
}

Run it against your code and you will get a number of improvement suggestions. Some of these can be applied automatically with PHPCBF (the PHP Code Beautifier and Fixer), or you can go through the list manually and apply each suggestion as you see fit. Many of the suggestions will be related to code indentation, but you will also see a large number of other suggestions that are more critical.

Improve WordPress PHP code correctness with phan

PHP is a very lenient language. It will let you get away with murder. This is something that novice programmers often enjoy. For professionals it’s a nightmare, as it makes spotting errors harder. PHP has thus gained somewhat of a notoriety for being a bad language, and is the butt of some clever jokes.

This isn’t something to worry about. It has happened to many respectable languages, including JavaScript. So nowadays we have use strict, which lets us only use The Good Parts of the language. You can do something similar with PHP.

My point is that static code analysis is not the hero you want, but it’s definitely the hero you deserve. Enter phan:

First, install it. It’s straightforward to install phan with composer:

composer require phan/phan

Now phan lives in your project’s vendor/ dir.

Next, create a configuration under your project dir, in .phan/config.php. This will tell phan what settings you want to run it with. Start with the example given here, and set your source code directories.

You will also want to point to some third-party code, including the directory of your WordPress installation, since your code will invariably use WordPress functions and types.

You can also use this config file to exclude some rules, so that phan does not check for them. Here’s the complete list of phan plugins.

When all is set, you can call phan on your code with:

vendor/bin/phan

I don’t care how pro you are, you will definitely get a list of suggestions on how to improve your code.

Conclusion

Using phpcs and phan together, you will avoid a large number of errors that would otherwise likely go undetected. These include errors with translator comments over strings, phpDoc formatting errors, variable type errors, errors related to sentinel values such as null, and array indexing errors.

Always use these two tools together with phpunit when you write code. You will write more readable, maintainable, correct and robust code that you can feel confident about.

The post 💩 Your WordPress PHP code stinks! Here’s why. appeared first on Alexandros Georgiou.

There’s more than one ways to raster an SVG

There’s tons of reasons why you wouldn’t want to generate a bunch of icons with a clumsy UI, such as Adobe Illustrator or Inkscape. You can set up a script that dumps your icons out as SVG, then add something that auto-converts to PNG. Think of the possibilities:

• Parametrize your pipeline: Flip one parameter, run again, voila! A new batch of icons, with a different color or stroke width or font family, all freshly baked!
• Add a time dimension: Run multiple times with some variation, then join the results to create animated GIFs.
• Expand the range of glyphs: With a small change in your code, you can render any range of unicode glyphs. Think currency symbols, tool buttons, numbers, etc.
• Tile all the buttons into a sprite: Then, use the CSS background-position rule to display the right button at the right place. The browser will only do one HTTP request to download all the buttons.

Why would you do all that, you say?

Well, for one, you could try to sell icon collections on places like vectorstock.com. Once you have a pipeline ready, you can flood the market! Or so I theorize…

Also, code is beautiful!

Way 1: Native PHP

You could use the PHP ImageMagick library to generate your PNG file. In the following example, I will write out some SVG for the Bitcoin icon, using the Unicode character and some rotation.

<?php

ob_start();

$text = '&#x20bf;';

?><?xml version="1.0"?>
<svg
	xmlns="http://www.w3.org/2000/svg"
	xmlns:xlink="http://www.w3.org/1999/xlink"
	viewBox="0 0 64 64">

    <circle
		fill="orange"
		stroke="transparent"
		cx="32"
		cy="32"
		r="31"
		stroke-width="0">
	</circle>


    <text
		transform="rotate(10 32 32)"
		x="50%"
		y="50%"
		text-anchor="middle"
		fill="white"
		font-size="36pt"
		stroke="0"
		dy=".3em">
		
		<?php echo $text; ?>
	</text>
</svg>
<?php

$svg = ob_get_clean();

// write out the SVG to file
file_put_contents( 'bitcoin-icon.svg', $svg );

// now use Imagick to render the button to raster
$im = new Imagick();
$im->setBackgroundColor( new ImagickPixel( 'transparent' ) );
$im->readImageBlob( $svg );
$im->setImageFormat( "png24" );
$im->writeImage( 'bitcoin-icon.png' );
$im->clear();
$im->destroy();

Not too shabby! You can now use the full power of PHP templating to wrap this code into loops and generate all kinds of icons. Parametrise colors, sizes, stroke widths, etc.

bitcoin-icon.png

Way 2: Convert

ImageMagick can be invoked on Linux systems with the convert command.

convert bitcoin-icon.svg bitcoin-icon.png

Way 3: Inkscape CLI

Inkscape can be used from the command line to convert an SVG to PNG. Here’s how:

inkscape -z bitcoin-icon.svg -e bitcoin-icon.png

Depending on various details of your SVG file, and on the current phase of the moon, this way might give you a better result compared to the other two.

Keep your face to the PNG and you cannot see a shadow

If you are a novice user of Scalable Vector Graphics, you might think that you can add a drop shadow with this well-known incantation:

<svg ... <!-- header goes here as before -->

	<defs>
		<filter id="shadow">
			<feDropShadow dx="4" dy="8" stdDeviation="4"/>
		</filter>
	</defs>

	<g filter="url(#shadow)">
		<!-- rest of SVG shapes go here as before -->
	</g>
</svg>

You could, but only web browsers would render the output with a shadow. None of the three methods above render the shadow correctly. In fact, even the preview renderer in Nautilus screws up when it sees this filter.

When small scripts begin to cast big shadows

What to do now? Simple. A quick look at the MDN docs reveals that feDropShadow is a filter primitive, and it is equivalent to a bunch of simpler filters, merged together. Let’s try the whole thing again, this time spelling the shadow out a bit more verbosely:

It seems that the feDropShadow filter is not yet supported in ImageMagick. At least not in the version I’m using. But the primitives it depends on, are!

bitcoin-icon.png

The post ❏ How to render an SVG with a feDropShadow filter to PNG raster appeared first on Alexandros Georgiou.