Building a local version of Giphy - Part 2 LiveCoding
September - 2020
NOTE: TODO: This pages needs updates to work with MDX
Things done:
<ul>
<li><strike>Don't rebuild resized images each time the page is loaded</strike></li>
<li><strike>Display the file names to get a quick search going</strike></li>
<li><strike>Get the resized gifs to animate</strike></li>
<li><strike>Size both width and height of preview images to drop into a square area</strike></li>
<li><strike>Get some CSS going to make the display nicer</strike></li>
</ul>
Other possiblites for the future,
<ul>
<li>Present some random images at the top of the page each time it loads</li>
<li>See if you can use EXIF metadata to store tags and search terms</li>
<li>Log which images get used</li>
<li>If exif data works, build a tool to edit it on the gifs</li>
<li>If performance becomes an issue, do some pagination, but so far that isn't a problem</li>
<li>Make a tags filter that loads images with a specific tag</li>
<li>Try to make it so the main page doesn't jump to the top when you select a gif</li>
</ul>
- https://www.mamp.info/en/mamp/mac/
- https://www.mamp.info/en/windows/
https://stackify.com/how-to-log-to-console-in-php/
get a little debugger going. you bugger
<?php
function console_log($output, $with_script_tags = true) {
$js_code = 'console.log(' . json_encode($output, JSON_HEX_TAG) .
');';
if ($with_script_tags) {
$js_code = '<script>' . $js_code . '</script>';
}
echo $js_code;
}
https://www.php.net/manual/en/function.file-exists.php
https://www.php.net/manual/en/function.sprintf.php
https://stackoverflow.com/a/10128978/102401
https://stackoverflow.com/a/34577896/102401
convert source.png -resize 500x dest.png
https://stackoverflow.com/a/718500/102401
$resize_command =
sprintf(
'/usr/local/bin/convert %s -resize 200x200 %s',
$gif_file,
$resized_file_path
);
---
General page I like:
https://www.w3.org/Style/Examples/007/figures.en.html
---
CSS for centering
https://jsfiddle.net/dnk7oc6u/1/