DEV Community: Adam Whitlock

Cliplo a modern clipboard manager and productivity tool.

Adam Whitlock — Sat, 15 Aug 2020 03:57:12 +0000

So I made a thing.

My clipboard needs love, and I would love more visibility for said clipboard throughout the day.

Cliplo is an app to manage your clipboard history.

https://github.com/adamwhitlock1/cliplo-quasar

An application that tells you where you clipped things from, and possibly what you were working on.

The 'clipboard manager' can do more, and it should do more.

Check out github for an open source repo of the application, and all contributions are welcome.

Cheers

Placeholder images of animals. A simple PHP service.

Adam Whitlock — Mon, 02 Sep 2019 05:33:56 +0000

I whipped up a fun little placeholder image service called Wildcard.fun.

https://wildcard.fun

The idea was to make a service that would generate any size image you wanted as a placeholder and size/crop the image to those dimensions.

For the basic structure of the application, I used vanilla PHP in combination with a fast router called "PHRoute - Fast request router for PHP".

https://github.com/mrjgreen/phroute

In order to resize, crop, and compress the images based on the request I used ImageMagick for that.

The images come from Unsplash.com as well.

Give it a shot!

Theme your app with Styled Components 💅 in Vue

Adam Whitlock — Tue, 28 May 2019 14:41:33 +0000

Styled components are popular in the React community, and they give your components the power of css in js.

Vue can also use styled components via the vue-styled-components module.

yarn add vue-styled-components
npm install vue-styled-components

Using styled components is one way that you can create some interesting components.

In the following example, we can create a button that accepts props for various styling, and can then be mapped to input elements to allow for real time styling updates of the button.

Now, anywhere in our application we can use this styled component, and even bind dynamic data to these props.

The above example shows us importing in the StyledButton.js, and then using this component in a vue single file component in a way that binds a few input elements to the data as well.

I usually like to use Tailwind CSS with my projects, so I will often add that into the mix as well. Here is another example of a similar idea with a styled component button.

This example, also utilizes some simple transitions, toggle method, an alert that shows the current styling data, and an example of a more "static" version of the button along with the dynamically styled button.

Once these values are saved to something like local storage, or a user's preferences in a database, you can then use them to style the application dynamically.

I'm honestly not even really all that sure how useful this type of implementation is, since using data bound inline styles would offer a similar thing, but a fellow dev that uses react and styled components wanted to know if they were doable in Vue, so I gave it a shot.

What other ways have you themed your vue applications dynamically?

Vue Game Development With Greensock

Adam Whitlock — Sat, 20 Apr 2019 05:05:01 +0000

Here is a quick mockup that I threw together as a way to run a simple animation based game using vue and greensock.

Greensock provides the collision detection, and we fire an intersection check for the 2 game elements, which are the line, and the circle.

The circle, her name is rebecca. Rebecca purple is in the house.

Next, we fire off the animation and stop the game if the event occurs outside the intersection elements.

Persistent state through LocalForage will store my current high score.

I'm not going to lie to you, I can't seem to get above 45.

Comment your changes/high scores.

https://codesandbox.io/s/zlxk5lwqkx

I am a full time Vue/Wordpress Dev working in a 500+ employee marketing agency, Ask Me Anything!

Adam Whitlock — Sun, 31 Mar 2019 18:50:40 +0000

Hey there! My name is Adam. I am a developer and designer, that for the past couple years, has been working at Madwire and Marketing360 full time.

https://madwire.com
https://marketing360.com

I started as a designer (I have a degree in graphic design specifically) but have a passion for design focused development. I live to code, and my primary focus at the moment is Vue, Node, Wordpress, PHP/MySQL and learning other languages whenever I can.

Currently I am a lead developer for the custom development team at Madwire, and that means that I build and maintain custom solutions for our clients. This type of work includes custom Wordpress plugins, applications, and themes.

I like to utilize Vue.js when needed to allow dynamic data binding, along with async ajax to interact with the PHP back end of wordpress sites.

The reason I started this AMA, is that I am trying to get more involved in the Dev community and I would love to help out my fellow developers.

Ask me anything!

I made a game in Vue. Animation/Mechanics with GreenSock, High Scores with LocalForage.

Adam Whitlock — Sun, 31 Mar 2019 18:23:23 +0000

I had a coworker ask if it would be possible to use Vue to make a simple game. Challenge accepted!

This "Bouncing Game" essentially is just a collision detection mechanic implemented through GreenSock.
https://greensock.com

More specifically, I used the TimelineLite to do most of the animation, and then used the Draggable utility to implement the collision detection used to trigger scoring throughout the game.

The high scores are saved via LocalForage, which is a great library for using web technologies to save data in a 'semi-persistent' manner.
https://localforage.github.io/localForage/

Admittedly, the game resides within a single component, and I probably could refactor it a bit to make it more performant and modular, but I just thought I would share this little 'weekend project' with you all :)

Give it a shot and let me know what your high score is!

Take a look at the codesandbox:

Or fork the github repo:

adamwhitlock1 / bounce-game-vue

a simple vue game. Chris wanted to make a game in jquery like this, so I made one in vue. Uses Vue, LocalForage, and GreenSock

bounce-game

Project setup

yarn install

Compiles and hot-reloads for development

yarn run serve

Compiles and minifies for production

yarn run build

Run your tests

yarn run test

Lints and fixes files

yarn run lint

View on GitHub

https://github.com/adamwhitlock1/bounce-game-vue

Thanks for checking it out.

Codestuff Dev Journey - Wordpress WP-Cron, Server Based Cron Jobs, and tools for these tricky systems.

Adam Whitlock — Tue, 26 Mar 2019 02:43:30 +0000

Welcome to the first installment on what I hope to be a semi-regular chronicling of my journey as a full time developer and front-end engineer.

Hi, my name is Adam, and I work at a digital marketing company in northern Colorado. My main job responsibility is to work on client requested custom work. This usually falls within building wordpress plugins, applications, API integrations, and the occasional graphic design task.

I have also been known to take photos, do some woodworking, and hang out in the mountains with my fam.

You can find some of my work on Github,
Unsplash, Dribbble, and elsewhere.

GitHub - adamwhitlock1

Twitter - @codestuff2

Unsplash - Photography

Dribbble - Design

Enough about me, let's get this party started.

The purpose of this series is just to get me into the habit of journaling my process of learning code. Hopefully my writing will help someone learn something new and useful as well!

Off to the races now. One somewhat interesting thing I did today was look at some issues with a website that is supposed to automatically pull in automotive inventory data on a regular basis. It was failing to do this. Enter the wp-cron for Wordpress.

WP-Cron, and how it can cause you to pull out your hair.

Wordpress describes the WP-Cron feature as:

"Cron is the time-based task scheduling system that is available on UNIX systems. WP-Cron is how WordPress handles scheduling time-based tasks in WordPress. Several WordPress core features, such as checking for updates and publishing scheduled post, utilize WP-Cron."

For more info visit:
https://developer.wordpress.org/plugins/cron/

A lot of theme developers and plugin creators have created features that hook into the wordpress cron system including automated social media posting of content, email scheduling, and more. Recently I built a feature so that once a specific estate sale company had finished their estate sale event, the estate sale was automatically deleted from the site 24 hours after it ended.

This wp-cron system can be tough to diagnose when you are trying to hook into it and build something cool with it.

Typically a wp-cron is set up as:

Super Simple One Liner (PHP)

<?php
wp_schedule_event( $timestamp, 'daily', 'hook_for_cron_event', $args_for_hook );
?>

// $timestamp (integer)
// When you want the event to start.
// Basically you could set up an event to have it's first execution
// happen in the future by setting this to a UNIX timestamp value in the future.
// I usually just set this value to time() which produces an immediate timestamp
// that way my event starts immediately and conitinues on the inteval of my choosing

// $recurrence ie 'daily' (string)
// How often the event should reoccur.
// The default values are:
// hourly, twicedaily, or daily
// If you need a different recurrence you can create your own
// custom reocurrence schedule.
// (look up the filer cron_schedules for more info on custom schedules)

// $hook_for_cron_event (string)
// This is the name of the action hook that you
// want to execute when the event occurs.
// This is where your write all the stuff you need to do

// $args_for_hook (array) (optional)
// Put any arguments that you need to pass into the $hook_for_cron_event
// into this array. Being optional, it will default to none if you don't provide any args.

Anywho, if you have to work with wordpress crons or debug their potential issues that they could cause, I have a few resources for you.

WP Crontrol

https://wordpress.org/plugins/wp-crontrol/

WP Crontrol is a plugin that can show you all your currently running wp crons, and also enables you to run these job manually at any time, so that you can debug them easily.

Disabling the wp-cron functionality

There are a couple reasons that you may want to totally disable the wp-cron funcotinality on a site. The first reason is that sometimes, especially when you are running several sites on the same server, your sites can cause high cpu/memory load because of the tasks that are running during this wp-cron script.

You could have tons of different tasks that are registered to this wp-cron functionality, and they all may not, in reality, need to run as ofter as they are scheduled. If you have tons of sites running on the same server this load can compound and slow down the whole server, or even crash the server completely.

An alternative to this "pseudo" cron is to actually set up traditional, server based, real cron jobs that activate the wp-cron functionality. That way you can control when the wp-cron script runs and set it for a concrete schedule. Your site may only need to really execute a specific wp-cron task every 6 hours, so setting up a regular server cron for this can help a ton.

To learn more about how the wp-cron is different that traditional crons, and also how to disable the wp-cron, you can check out this helpful article from Kinsta.

https://kinsta.com/knowledgebase/disable-wp-cron/

Server Cron Resources

Traditional server based crontab jobs do admitidly have tough syntax.

Crontab Guru makes writing traditional cron job syntax a bit easier

https://crontab.guru/

If you do implement traditional cron jobs, the debugging and monitoring of these jobs can be just as tricky as wp-crons.

Cronitor provides cron monitoring for your servers, and its pretty painless.

https://cronitor.io

Want a quick guide to show you the ins and outs of cron jobs. I refer to this resource from WhoIsHostingThis? all the time.

https://www.whoishostingthis.com/resources/cron/

What did I miss?

Do you have tricks or tips to working with wp-cron or regular cron jobs?
A repo of code for common crons you use, or anything else your would like to share?

What else would you like to to ramble about within the subject of code :)

Please let me know your thoughts, and thanks for reading!