Category: web development

as mentioned in my previous post, i used lighthouse to create reports to show the status of four important stats: performance, accessibility, best practices, and seo

Initial report

here was the initial report created on launch day

Lighthouse report
initial launch day lighthouse report

“all green” (90-100 scores) was the initial goal

Read more »

or: quarantine life is very boring

that said, i’ve learned a lot from my time at rdi, development-wise — i wanted to apply those learnings to my personal site. this is how i get better at things — by doing

…also, i haven’t updated this code since 2017 — it’s been way too long

Read more »

a running, hopefully constantly updated, list of the tools i use when making the websites

  • Owl Carouselif you MUST use carousels, this one should do the trick. it’s responsive and has a BOATLOAD of options
  • CMB2 – making custom metaboxes is time consuming and tough to maintain, use CMB2 to make them quicker and cleaner/prettier
  • Prepros – FREE (nagging message every 5 minutes), but only $29 for a lifetime license. awesome tool that works on windows/mac/linux that can compile LESS, Sass, minify js/css, make bacon, etc.
  • Fontello – don’t use images for your social media icons (or any icons for that matter) — you’ll most likely find what you’re looking for on the site. if you need to add more in the future, you can simply drag and drop the original svg you have and then add to it
  • Compressor.io – it’s like pied piper, but just for images. this needs to be a plugin and soon because it does an amazing job at compressing images
  • Slidebars – if you need to create an off-canvas menu/sidebar on your site, this is pretty clean and lightweight

Read more »

there are a few assumptions:

  1. you already have your tumblr consumer key, secret, oauth token, and oauth token secret
  2. i used this tutorial as a starting point: http://techslides.com/tumblr-api-example-using-oauth-and-php
    • i didn’t use the callback.php nor the connect.php files in the zip
  3. create a private (password-protected) tumblr blog and set up each editor as a contributor to it
    • private because you don’t want viewers to happen upon the tumblr site (you’ll lose hits on your own site!)

Read more »

the best method i’ve found to use a lean svg on your site — from eps to svg

reference:

some browsers can’t handle svg’s quite yet, so i’ve found this nice little lightweight javascript plugin that’ll switch out svg’s with their png counterparts (you’d have to have both files on your server)

This is one of the worst bugs I’ve encountered in a while. The worst because you really don’t know exactly where the issue can be fixed…

If you go to your site’s RSS feed (http://YOUR_SITE_URL/feed), you might see this message:

XML Parsing Error: XML or text declaration not at start of entity
Location: http://YOUR_SITE_URL/feed
Line Number 3, Column 1:
<?xml version=”1.0″ encoding=”UTF-8″?><rss version=”2.0″
^

Vague… i know Read more »

say you have 10 group names, labeled ‘$group_1’, ‘$group_2’, etc. and you want to display each of them. a quick way to do that is to use dynamic variables (aka variable variables)

for ($i = 1; $i < 11; $i++) {
echo ${'group_' . $i};
}

Read more »

I Google’d and checked the WordPress codex, but could not find a function that would give me the ID of an image I uploaded into a custom meta field.

The Problem

I have uploaded an image, but that image is huge. I want to be able to display the image at my predefined size. There are functions to display the post thumbnail (featured image) in any which way you want, but this is different.

This is the cleanest method I’ve found to get the attachment’s ID. With the ID, you’ll be able to use a function to display that image.
Read more »

The Problem

Build a two-column responsive page that had a fixed-width right column. It actually sounds easier than you think. That fixed-width right column throws a wrench into everything.

For this example, let’s go with a fluid left column and a 320px wide right column.

HTML

<div class="main">
<div class="leftwrapper">
<div class="left">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent elit dolor, congue vitae turpis in, blandit dictum magna. Praesent sollicitudin dictum libero. Aliquam tempor elit quis metus egestas, vel adipiscing nibh pulvinar. Aenean quis venenatis massa, at interdum est. Praesent iaculis mi lacus, quis auctor purus placerat vel. Cras sed commodo velit. Aenean ac aliquam purus, vitae rhoncus justo. Proin mollis facilisis sapien, id consequat purus imperdiet eu. Donec posuere, arcu a facilisis ultrices, nibh nisi convallis ante, et sollicitudin metus ante vel felis. Curabitur sagittis, dolor malesuada adipiscing pulvinar, velit risus elementum augue, non tempor lectus mi sit amet ipsum. Aliquam mollis semper ultrices. Sed eleifend tempus dui nec venenatis. Maecenas faucibus turpis leo, nec facilisis sapien mattis non. Donec in elit vitae enim interdum auctor nec id dui. Vivamus sed odio diam. Cras pretium dolor ac neque iaculis eleifend.

</div>
</div>
<div class="right">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent elit dolor, congue vitae turpis in, blandit dictum magna. Praesent sollicitudin dictum libero. Aliquam tempor elit quis metus egestas, vel adipiscing nibh pulvinar. Aenean quis venenatis massa, at interdum est. Praesent iaculis mi lacus, quis auctor purus placerat vel. Cras sed commodo velit. Aenean ac aliquam purus, vitae rhoncus justo.

</div>
</div>

Read more »