The words Under construction in black text on a yellow background with diagonal black stipes surrounding it
I'm in the process of moving my site. It's still a work in progress. Please excuse the mess and broken links.

Building a local version of Giphy - Part 2 LiveCoding

TODO: Pull subtitle into page object

*NOTE: TODO: This pages needs updates to work with MDX*

Things done:

code_start_default_section code_end_default_section

Debugging Stuff

I'm moving stuff around right now. All this below is helping me figure out where to put stuff

        -- title

Building a local version of Giphy - Part 2 LiveCoding

-- p

*NOTE: TODO: This pages needs updates to work with MDX*

-- p

Things done:

-- code/
-- html

<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>

-- /code

-- p

Other possiblites for the future,

-- code/
-- html

<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>

-- /code

-- p

- https://www.mamp.info/en/mamp/mac/
- https://www.mamp.info/en/windows/

-- p

https://stackify.com/how-to-log-to-console-in-php/

-- p

get a little debugger going. you bugger

-- code/
-- php

<?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;
}

-- /code

-- p

-- hr

-- p

https://www.php.net/manual/en/function.file-exists.php

-- p

https://www.php.net/manual/en/function.sprintf.php

-- p

https://stackoverflow.com/a/10128978/102401

-- p

https://stackoverflow.com/a/34577896/102401

-- p

convert source.png -resize 500x dest.png

-- p

https://stackoverflow.com/a/718500/102401

-- code/
-- php

$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/

-- /code


-- categories
-- Live Coding

-- metadata
-- date: 2020-09-23 00:00:00
-- id: 20eneblg
-- status: draft
-- type: post
-- SCRUBBED_NEO: false
-- site: aws