Categories
Art Code Four Short Things WordPress

Four Short Things – 23 February 2019

Inspired by O’reilly’s Four Short Links, here are some of the things I’ve seen, read, or watched recently.

Leukemia has won

WordPress has allowed me the opportunity to meet hundreds of people first online and then offline, but Alex “Viper007Bond” was the first. When I first started getting involved in WordPress, I spent many late nights in the IRC #wordpress channel on freenode, at first seeking help but then providing it. Viper was commonly there helping others and likely answered more than a few questions of mine as well. He’s been publicly battling leukemia for 2.5 years. His blog is a great tale of the ups and downs of cancer. Alex and those that care about him are in my thoughts right now.

Kevin Beasley: A view of a Landscape

On view at the Whitney until 10 March, this exhibit on the top floor is one encompassing sound and visuals. Featuring the motor from a cotton gin and giant sculptures with Cotton, it explores race, history and the evolution of America.

Writing CSS Algorithms

Lara has done more to change my opinions on CSS than anyone else. This post is a companion piece to a talk she gave at WordCamp US and one that everyone web developer should read.

Pento hits 1000 Commits

13 people have made over 1000 commits to WordPress core over the past nearly 16 years. Gary Pendergast joined the club during the 5.1 release. Overall, there have been 44767 commits so Gary’s count only represents 2.2% of the total activity.

Four Short Things is a series where I post a small collection of links to art, news, articles, videos and other things that are me. Follow my RSS feed to see Four Short Things whenver it comes out.

Categories
Programming Uncategorized

Automating your front end development workflow

We all have a workflow. In fact, we all have many of them. Human beings are creatures of habit. In Thinking, Fast and Slow, Nobel laureate Daniel Kahneman describes our use of intuition to remember the steps in our workflows and the order of our workflows. When we wake up, we get out of bed, make our way to the bathroom, brush our teeth, perhaps shower and then make a bowl of oatmeal.

All of this comes naturally and we do it by thinking fast, by retracing the steps we’ve done hundreds of times before. We don’t slow down to think “Should I use the toilet or the sink”. We’ve trained our body to follow a workflow. We can do the same thing with our development workflows by taking some steps to understand how we work. We can then use tools to automate the repetitive tasks.

Continue reading “Automating your front end development workflow”

Categories
Programming Uncategorized WordPress

You Better Know the Basics

When you first start working with WordPress, you need to know that there are five languages you could be interacting with. You don’t need to be an expert at any of them (and in fact can want make amazing sites knowing none of them), but when you want to make a change to your theme or add a feature that no plugin exists for, it’s important to understand what each language is and how it fits in.

To start let’s take one step back and understand that WordPress is software that runs on a server and that allows users to manage content, and the content to be sent to a visitors browser.

Just had to get that little definition out there.  Now that we know that, let’s actually look at the four languages.

HTML – Hypertext Markup Language

This is the main form that the WordPress outputs the content (if we want to get specific, WordPress uses XHTML 1.0 for all it’s internal functions, but explaining that is beyond the purview of this document). HTML is a structured language that browsers can read to display a web page. Content is enclosed in tags that each have a specific meaning. Tags can (sometimes optionally and sometimes mandatory) contain a variety of attributes. An example of a tag is
[html]<a href="http://aaron.jorbin">Aaron Jorbin is cool</a>[/html]
Learning at least basic HTML is important if you want to be able to display content in a web browser. To learn more, I recommend:

CSS – Cascading Style Sheets

As the name hints, CSS is for styling a page. CSS allows you to style html elements. In WordPress, a theme’s style.css file is also the theme’s way of telling WordPress about the theme. If you open any theme’s style.css you notice that the comments at the top are structured in a key: value manner. CSS utilizes the ID’s, Classes and tags from your HTML. An example of some css is:
[css]#header ul{
width: 400px;
color: #990099;
border: 1px solid #009900;

}[/css]
This block will style all unordered lists that are inside an element with the header ID and give it a width of 400 pixels, color all the text with hex color 990099 and apply a 1 pixel solid border of the color 009900.

JS – JavaScript

Once the page is sent to a browser, if you want to make changes to how the page looks, you’re going to need to have the browser execute it. That’s where JavaScript comes in. JavaScript is primarily a client side scripting langauge. This allows it to change the way the page looks, such as by having a set of tabs that change the content of a panel or having an accordion that grows and collapses to show or hide some options. Am example of JavaScript is:
[javascript] $(document).ready(function(){
$(‘#contentheader’).click(function () {
$(‘#contentheader > h2’).toggleClass("hidden");
$(‘#contentheader &gt; h3’).toggleClass("hidden");
} );
});[/javascript]
.

PHP –PHP: Hypertext Preprocessor

This is where the bulk of WordPress is written and the bulk of where the magic happens. WordPress includes a large amount of functions that plugins and themes can use from tasks as simple as echoing a posts title to creating a custom taxonomy for posts. If you’ve ever opened up your theme’s index.php file, you’ve seen text that looks like:

[php]
<img src="<?php header_image(); ?&gt;" width="<?php echo HEADER_IMAGE_WIDTH; ?&gt;" height="<?php echo HEADER_IMAGE_HEIGHT; ?&gt;" alt="">
[/php]

The is from the header.php file from Twenty Ten and controls the display of the header images.

To learn more about PHP, I recommend the following resources:

SQL – Structured Query Language

This is the language used to speak with Relational Databases.   In WordPress, this is used to add, retrieve, update or delete a post or option.  As the name would suggest, it’s a very structured language.  You say what you want to do, to which table you want to do it and how you want it to go down.  An example of sql is:
[sql]SELECT `option_value` FROM&nbsp;`wp_options` WHERE `option_name` = ‘siteurl’ LIMIT 0,1;[/sql]
Running this query will tell you what WordPress thinks your site’s url is (if you didn’t change your table prefix).    Some more resources for understanding SQL are:

I hope these resources give you a better idea of the languages used inside WordPress.