Christopher John

Blockchain
CSS
Figma
Front-end
HTML
JavaScript
Mobile
PHP
Technical Writing
Three.js
UX Engineer
Web 3
WordPress
Designer + Developer. Created tw-rl.com + Building WebDeveloper.com
Bothell, WA
Owned & Operated

Timeline

Started
01.2022
Released
07.2021
When hovering over blocks in the WordPress editor, Wayfinder displays the block type and class names, making it 100x easier to identify and select the blocks you're trying to edit.
Released
05.2021
Curating just got easier. tw-rl officially has a browser extension for Google Chrome available for install! Now you can preview and edit your cards w/o having to visit your profile page.
Launched
03.2021
Created tw-rl.com, a bookmarking and curation tool for tweets, threads and other links around the web. Responsible for (1) API integrations, (2) branding/logo design, (3) and site design/development.
Started
07.2020
Fun little side project I started as a way to easily get notified when a particular campsite was available. Powered by recreation.gov
Launched
03.2020
That Book™ aims at taking the traditional e-book experience to the next level by including video and audio as alternate methods for consuming the book content. As a co-founder, I was responsible for (1) full site development, (2) custom payment system with stripe/PayPal/Apple Pay support, and (3) audio/video integration that includes an innovative audio playback solution I came up with called “Audio Content Highlighting”.
Launched
05.2019
Co-founded epicjobs.co, a twitter-powered job board. Responsible for (1) site development, (2) Twitter API integration,(3) stripe payment integration and (4)user account management system.
Launched
07.2017
RIVYT [riv·et] is an instant landing page generator for video creators. RIVYT can take your Twitch or YouTube channel and automatically create a branded site — in seconds. As a co-founder, I was responsible for (1) the branding/logo design, (2) the “RIVYT panel” sidebar design/development as well as (3) designing/developing 16 layout options for users to select.
Launched
07.2016
fullride.me is a crowdfunding platform where students can list all their education expenses with individual donation goals. As the founder of this project, I was responsible for (1) all branding/logo design, (2) site design/development, and (3) marketing fullride.me at student-based events.
Contributed to
07.2009
With over 30,000+ customers worldwide, achieved “Power Elite” status on ThemeForest.net after generating over $1.25M in WordPress theme sales as “THE MOLITOR”.
Started
04.2007
How to: LIVE Stream on WebDeveloper.com with Twitch

Level up your WebDeveloper.com profile page (+unlock a new badge) by displaying your Twitch live stream with full chat and the ability to let WD viewers send you tips with SATS. Connect Twitch Channel Visit your WD profile settings to access the Connect Twitch Channel button at the bottom of the page… Authorize Access Clicking […]

Tweet This Post This Share This
How to: Post a Bounty on WebDeveloper.com

Bounties are questions posted by the WD community with a SATS reward given to the author of the selected answer. This is an incentivized way to resolve technical challenges faced in a particular project, such as unresolved bugs, uncertainty of how to implement a new feature, or other general requests that only a web developer […]

Tweet This Post This Share This
Bitcoin Wallets that use the Lightning Network

For those familiar with making payments on the blockchain, the biggest challenge these days is how long it can take for transactions to complete. The current average is around 2 minutes, but in some cases—during peak network traffic times—it can take up to SIX HOURS! 😬 To reduce the processing time—and fees—of transactions, the Bitcoin […]

Tweet This Post This Share This
How to: Create a custom ‘Forgot Password’ page in WordPress with Magic Links and wp_mail()

Forgetting your password is inevitable. The more profiles we create online, the more chances we have of getting our logins confused. Having an easy-to-use method for users to regain access to their account is an important part of running a successful web-based service. In this how-to we’re going to implement a system that (1) requests […]

Tweet This Post This Share This
How to: Write an article with WebDeveloper.com

Start with an intro paragraph… This is where you introduce the reader to the overall goal of the article with a brief summary. Not too much detail here. Keep it simple. After another sentence or two, lead the reader into the first section with an <h2> tag like this… H2 headers begin a section Think […]

Tweet This Post This Share This
Global styles and the future of CSS in WordPress

While browsing Twitter recently, I stumbled upon an interesting conversation happening between Damon Cook and Joseph Farruggio, who were discussing the pros and cons of theme.json, a new settings and style engine for WordPress themes. As seen in the tweet below, Joseph asks “Can you think of an example where writing the CSS in JSONJSON […]

Tweet This Post This Share This
SEO for Non-Scumbags: How to Earn Site Visitors without Selling Your Soul

Editorial note: hi folks!  Thanks for your patience as I’ve been getting my life settled enough to start creating content again.  We’ve done some hiring for a few roles, backfilling me, so I’m actually seeing a light at the end of the tunnel for creating DaedTech content. Today I’m going to start a blog post […]

Tweet This Post This Share This
clamp()

The clamp() CSS function let’s you define a range of values for the property of an element. It’s especially useful in responsive layouts when used in conjunction with relative units like vw and vh. Syntax clamp() uses 3 parameters: a minimum, preferred, and maximum value. /* propery: clamp(min, pref, max); */ width: clamp(100px, 6vw, 200px); […]

Tweet This Post This Share This
Write a WD article on getting started with Github for beginners

Github is a popular platform for sharing code and enabling the web developer community the ability to contribute and collaborate on projects. We’re looking for a “how to” style of article that explains Github for beginners and how to best leverage the tools they provide. To claim this bounty, the article must be published on […]

Tweet This Post This Share This
Image To Grid Transition

Today I have yet another image transition for you. This time, we’ll do something super simple: animate a large image to its place in a grid. This is certainly the first step of something more creative… think of two images, or three! Or maybe changing the size more dramatically! I hope this little experiment gives […]

Tweet This Post This Share This
How To Get Started Creating Your First Custom WordPress Block

There is a lot of great documentation out there for creating custom WordPress blocks, and I admit I’m a bit late to the party, but when I finally started learning how to do this it was a little difficult to find a single tutorial that gave me all the steps I needed. In this article […]

Tweet This Post This Share This
How I built avatars in Lemon Squeezy using Vue

It might not seem very difficult or complicated but getting avatars right can be harder than it first appears. This is usually because there are multiple different locations avatars can come from. In Lemon Squeezy, we try and show a user avatar based on multiple locations in the following order: A custom avatar that has […]

Tweet This Post This Share This
Unique Ways To Style Text Links with CSS

Is anyone else a little bored with the standard bolded & underlined text links? I know I am. Below are 5 unique ways to style text links with CSS that catch a reader’s attention and create a little more intrigue within a paragraph. Offset Underline This style is similar to an underline but with a […]

Tweet This Post This Share This
Sign in
Forgot password?
Sign in with TwitchSign in with Github
about: ({
version: 0.1.6 BETA 11.29,
whats_new: article editor v2,
up_next: tip code demos,
coming_soon: embeddable tipping,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.6,
notes: article editor refresh

version: 0.1.5,
notes: added pins + new badge

version: 0.1.4,
notes: home refresh + tools

version: 0.1.3,
notes: added reference + demos
)...
recent_tips: (
tipper: @dert,
amount: 1000 SATS,
source: article

tipper: Anonymous,
amount: 1000 SATS,
source: article

tipper: @Loverboylove,
amount: 500 SATS,
source: article
)...