Here is my first Tip to coding with copilot:
Generate reusable classes and build your own library that you can use across multiple projects.
Be sure to Subscribe to the blog I will be sharing more tips!
Whenever you are coding for a client or project usually you just focus on the task and make sure you get the task done on time and on budget. However with AI turning code into reusable DRY (don’t repeat yourself) classes takes minutes. Might as well spend a few minutes and generate code for yourself that you can reuse in thee next project.
The best part of this is that once copilot start learning these classes it will start using them in your project and will make your code much easier to troubleshoot.
Coding with GitHub copilot Tip: Generate Reusable class – Example
You don’t have to get fancy or come up with new programming patterns, just start creating your own set of Utility classes that you can take with you to the next project.
Quick example is a Php class that you can use in your templates to generate retrieve the right icons for you. I have a bunch of SVG’s that I I can use as social media Icons in footers etc.
Instead of having those saved in a file somewhere I created a Social_Icons class that can return the correct svg.
Create a social media svg utility class
- Get copilot started with the class
I selected all the SVG’s and used this prompt:
Make a php class Urbi_Social_Icons that has a static method get_icon that takes a variable $icon, let the methos have a switch case that will take the variable and based on it it will return the correct SVG - Saved the class in it’s own file
From the prompt result I created a file and stored it in my fast growing library of utility classes
- Refine the class further
Once in its own file I selected all the code and used this prompt
Make the static method take a second variable for color, make this optional but when present use the hex value be the fill color for the svgs. be sure to validate that this second variable is valid colorhex code
I ended up with this class, which I am pretty happy with for now.
<?php
class Urbi_Social_Icons {
public static function get_icon($icon, $color = '#000000', $width = '20') {
// Validate color hex code
if (!empty($color) && !preg_match('/^#[a-fA-F0-9]{6}$/', $color)) {
return '';
}
$svg = '';
switch ($icon) {
case 'facebook':
$svg = '<svg height="20px" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;" version="1.1" viewBox="0 0 512 512" width="20px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:serif="http://www.serif.com/" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M512,257.555c0,-141.385 -114.615,-256 -256,-256c-141.385,0 -256,114.615 -256,256c0,127.777 93.616,233.685 216,252.89l0,-178.89l-65,0l0,-74l65,0l0,-56.4c0,-64.16 38.219,-99.6 96.695,-99.6c28.009,0 57.305,5 57.305,5l0,63l-32.281,0c-31.801,0 -41.719,19.733 -41.719,39.978l0,48.022l71,0l-11.35,74l-59.65,0l0,178.89c122.385,-19.205 216,-125.113 216,-252.89Z" style="fill-rule:nonzero;' . ($color ? 'fill:' . $color . ';' : '') . '" />';
break;
case "instagram":
$svg = '<?xml version="1.0" ?><svg data-name="Layer 1" id="Layer_1" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg"><defs><style>.cls-1{fill:#062b31;}</style></defs><title/><path class="cls-1" d="M83,23a22,22,0,0,1,22,22V83a22,22,0,0,1-22,22H45A22,22,0,0,1,23,83V45A22,22,0,0,1,45,23H83m0-8H45A30.09,30.09,0,0,0,15,45V83a30.09,30.09,0,0,0,30,30H83a30.09,30.09,0,0,0,30-30V45A30.09,30.09,0,0,0,83,15Z"/><path class="cls-1" d="M90.14,32a5.73,5.73,0,1,0,5.73,5.73A5.73,5.73,0,0,0,90.14,32Z"/><path class="cls-1" d="M64.27,46.47A17.68,17.68,0,1,1,46.6,64.14,17.7,17.7,0,0,1,64.27,46.47m0-8A25.68,25.68,0,1,0,90,64.14,25.68,25.68,0,0,0,64.27,38.47Z"/></svg>';
break;
case 'tiktok':
$svg = '<svg id="icons" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
<path d="M412.19,118.66a109.27,109.27,0,0,1-9.45-5.5,132.87,132.87,0,0,1-24.27-20.62c-18.1-20.71-24.86-41.72-27.35-56.43h.1C349.14,23.9,350,16,350.13,16H267.69V334.78c0,4.28,0,8.51-.18,12.69,0,.52-.05,1-.08,1.56,0,.23,0,.47-.05.71,0,.06,0,.12,0,.18a70,70,0,0,1-35.22,55.56,68.8,68.8,0,0,1-34.11,9c-38.41,0-69.54-31.32-69.54-70s31.13-70,69.54-70a68.9,68.9,0,0,1,21.41,3.39l.1-83.94a153.14,153.14,0,0,0-118,34.52,161.79,161.79,0,0,0-35.3,43.53c-3.48,6-16.61,30.11-18.2,69.24-1,22.21,5.67,45.22,8.85,54.73v.2c2,5.6,9.75,24.71,22.38,40.82A167.53,167.53,0,0,0,115,470.66v-.2l.2.2C155.11,497.78,199.36,496,199.36,496c7.66-.31,33.32,0,62.46-13.81,32.32-15.31,50.72-38.12,50.72-38.12a158.46,158.46,0,0,0,27.64-45.93c7.46-19.61,9.95-43.13,9.95-52.53V176.49c1,.6,14.32,9.41,14.32,9.41s19.19,12.3,49.13,20.31c21.48,5.7,50.42,6.9,50.42,6.9V131.27C453.86,132.37,433.27,129.17,412.19,118.66Z" style="fill-rule:nonzero;' . ($color ? 'fill:' . $color . ';' : '') . '" />';
break;
case 'linkedin':
$svg = '<svg height="100%" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;" version="1.1" viewBox="0 0 512 512" width="100%" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:serif="http://www.serif.com/" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M473.305,-1.353c20.88,0 37.885,16.533 37.885,36.926l0,438.251c0,20.393 -17.005,36.954 -37.885,36.954l-436.459,0c-20.839,0 -37.773,-16.561 -37.773,-36.954l0,-438.251c0,-20.393 16.934,-36.926 37.773,-36.926l436.459,0Zm-37.829,436.389l0,-134.034c0,-65.822 -14.212,-116.427 -91.12,-116.427c-36.955,0 -61.739,20.263 -71.867,39.476l-1.04,0l0,-33.411l-72.811,0l0,244.396l75.866,0l0,-120.878c0,-31.883 6.031,-62.773 45.554,-62.773c38.981,0 39.468,36.461 39.468,64.802l0,118.849l75.95,0Zm-284.489,-244.396l-76.034,0l0,244.396l76.034,0l0,-244.396Zm-37.997,-121.489c-24.395,0 -44.066,19.735 -44.066,44.047c0,24.318 19.671,44.052 44.066,44.052c24.299,0 44.026,-19.734 44.026,-44.052c0,-24.312 -19.727,-44.047 -44.026,-44.047Z" style="fill-rule:nonzero;' . ($color ? 'fill:' . $color . ';' : '') . '" />';
break;
case 'twitter':
case 'x':
$svg = '<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="1227" viewBox="0 0 1200 1227" fill="none">
<g clip-path="url(#clip0_1_2)">
<path d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z" fill="black" />
</g>
<defs>
<clipPath id="clip0_1_2">
<rect width="1200" height="1227" fill="white" />
</clipPath>
</defs>
</svg>';
$width = $width - 4;
break;
default:
$svg = '';
}
return "<i class='urbi-social-icon' style='display:inline-block; width:" . $width . "px;'>" . $svg . "</i>";
}
}
Here is how to use it:
<?php echo Urbi_Social_Icons::get_icon('facebook'); ?>
<?php echo Urbi_Social_Icons::get_icon('instagram'); ?>
<?php echo Urbi_Social_Icons::get_icon('tiktok'); ?>
<?php echo Urbi_Social_Icons::get_icon('linkedin'); ?>
<?php echo Urbi_Social_Icons::get_icon('twitter'); ?>
<?php echo Urbi_Social_Icons::get_icon('x'); ?>I’m sure you will find ways how to improve upon it, let me know in the comment section!