My WordCamp Sacramento 2016 talk on WordPress.tv

WordCamp Sacramento Speaker

My WordCamp Sacramento 2016 talk Rediscover Theme Settings With The Customizer is now available on WordPress.tv! I had such a great time with my first talk, though I know  I’ll have a lot to improve on for the future. If you missed out on my talk here it is:

I’m still working on turning this talk into a larger blog post, but it’s getting a little big and I might break it up into a couple. I should have the first part up later this week.

WordPress Customizer Types

WordPress Customizer Types

Over the weekend I gave my first talk at WordCamp Sacramento 2016. My topic was on the WordPress Customizer and how to start leveraging it to add custom settings for your theme. From WordPress Customizer Types to all of the live previewing, sanitation, and validation. The talk went really well even if I went too fast and forgot to mention a few things. But I had some good questions during my q & a and had several attendees approach me and tell me they enjoyed the discussion. Here are my slides from the talk.

I even had one group that came up and said I had completely changed their mind on the Customizer. That alone made the talk a great success in my book!

I’m working on turning that talk into a full blog post but for now I had several people asking for examples of all of the controls you can add to the WordPress Customizer. I’ve started making gists for each type that includes the setting, control, sanitization. Validation is really specific to each setting and theme, so I’ll do a future blog post on examples of validation.

If you want to use any of these in your code the settings and controls need to be within a customize-register hook. The sanitization and validation functions could be outside the hook, or called in a separate file for better organization. Many of the sanitization functions I use are straight from the WordPress Theme Review Team.

Normal WordPress Customizer Types

I’ve included a sanitization function in each of these gists, but if you look closely some of them are the same function used for different Customizer types. For instance the select and radio controls both use the themeslug_sanitize_select function. These controls both add a choices argument and the sanitization is first grabbing all of the choices and then checking the input to see if the array key matches any of those in our choices.

If you add more than one to a project I recommend moving your sanitize functions to their own file or at least grouped together in one place of your customize.php file.

Text

Textarea

Date

This date field is outputting the date as a string with a format of 10-25-2016. The sanitize function is going to make sure this is the same format, so if you want something different you’ll need to update the function.

Time

Similar to the date field time has a format associated with it. This field is only looking for hours and minutes and in military time.

URL

Email

Checkbox

Radio Buttons

Select

Dropdown-Select

Number

Advanced WordPress Customizer Types

Color Control

Image Control

Using the WP_Customize_Media_Control is different than you would think, because the filename of the image you choose is not saved to the database, only the ID of the image is saved. So the sanitize_callback I use is absint, to make sure the ID is a valid positive integer.

To aid the user if they choose an incorrect file we’ll use a validate_callback to check the file extension of the file versus a list of approved types. In this example if they don’t choose a file, or if they choose something outside the approved list they’ll get an error notification.

More to Come

These are several common types that you’ll deal with when adding to your Customizer. In the future I’ll add more and include how to make your own control types.

One Week Till WordCamp Sacramento 2016 (and my first talk)

WordCamp Sacramento 2016

WordCamp Sacramento 2016 starts next Saturday, October 22nd, and my talk, “Rediscover Theme Settings with the Customizer” will be not only my first at a WordCamp, but also my first ever.

WordCamp Sacramento 2016

I decided I wanted to do more to give back to the WordPress community so I submitted my proposal not really sure what to expect. When it got accepted I was really excited, and scared, and happy, and nervous. As with any new public speaking foray I went through all of the emotions but now that I’ve prepared my talk and my slides are almost ready I’m fully prepared and expect a great time.

I decided to talk about the Customizer after working with it on a few theme projects. I started researching all of the capabilities of the Customizer and also saw a lot of great features that are in the works for future releases. It wasn’t too hard to get going with it and I wanted to share my experiences and also help get people who might be familiar but not aware of the newest features.

Last year’s inaugural Camp was my first and now with two days of learning it’s going to be a busy weekend fun and learning

Here is the interview WordCamp Sacramento did with me after my proposal was accepted.

WordCamp Sacramento Speaker Q&A: Anthony Skelton

 

D3.js Earthquake Visualizations

earthquake visualizations

I the last few months I’ve become very interested in data visualizations and I spent a lot of time working with d3.js. D3 is an amazing javascript library used to manipulate data and has tools to create almost every kind of chart or visualization imaginable. The ease of adding interactivity make it more powerful.

I went through all of the examples in the book, Interactive Data Visualization for the Webwritten by Scott Murphy. The book goes over a variety of bar and pie charts as well as different approaches for adding and manipulating your data. Check out this post I did that sums up the examples and some of the updates I had to make for d3.js version 4.

Learn By Doing

Getting excited for new datasets available goes hand and hand when learning all about data visualization, in my case anyways. I wanted to expand on some of the examples and tutorials I went through and find my own datasets to explore.

Living in California means I’ve dealt with Earthquakes for much of my life, even though we can go years between actually feeling them. I knew the USGS site had a lot of information about Earthquakes as they happen, especially the Did You Feel It site. When checking out their site I found that they had some great API’s available to work with their datasets. They make them available in GeoJSON which gives you the coordinates so I could map them out on a map.

One of the examples that I worked on in the book used GeoJSON to create a map of a State, Country, or the entire Globe depending on the dataset you use. D3 then draws out a path element for the borders. There are varying levels of detailed files that you can get and either draw out each country individually or as one object. For this project I opted to do the entire globe as one object since it would draw faster and I was more interested in the Earthquakes themselves.

g.insert('path', '.graticule')
	 .datum(topojson.feature(world, world.objects.land))
	 .attr('class', 'land')
	 .attr('d', path)
	 .style('fill', 'steelblue')

Earthquakes v1.0

Before I could get to the earthquake data I needed a way to represent them on the map. In this example I don’t really need each individual country drawn out so I use .datum(topojson.feature(world, world.objects.land)). This way the land is drawn out as one object and speeds up that part of the process. Next I needed to plot of the earthquakes from the USGS API.

Fortunetly this part is easy. Within the callback of the d3.json for the world map I used another d3.json call to the USGS API for all of the earthquakes in the last 24 hours. They have several variations including

  • Past Hour
  • Past Day
  • Past 7 Days
  • Past 30 Days

And each of these feeds have magnitude options

  • Significant Earthquakes
  • M 4.5+ Earthquakes
  • M 2.5+ Earthquakes
  • M 1.0+ Earthquakes
  • All Earthquakes

I had already decided on the all earthquakes over the last day feed. Their feed is a standard GeoJSON and you can see the details here.

Once you have the data you just need to append circles using the geometry data.

.attr('cx', function(d) {
    return projection([d.geometry.coordinates[0], d.geometry.coordinates[1]])[0];
})
.attr('cy', function(d) {
    return projection([d.geometry.coordinates[0], d.geometry.coordinates[1]])[1];
})

I’ve skipped some of the basic things but you can see my full code in my pen at the bottom.

See the Pen Earthquakes in the last day by Anthony Skelton (@ajskelton) on CodePen.

Adding Animation

I had all of the quakes displaying, but I wanted some way to have the circles show up in the order that they happened. If there were twenty quakes but one an hour in an area, that would be very different all twenty in just one hour.

Now I needed to first set the radius of all of the quakes to zero and have them expand to the correct size over time. But the problem was I needed to find a way figure out how long to set between each quakes reveal. Each quake has the a time object in their properties. I decided to start with a new date object that was 24 hours ago.

// Setup 24 hours ago object
var dateObj = new Date();
dateObj.setDate(dateObj.getDate() - 1);

Next, I loop through my array of quakes and find the difference between the time object of the current quake and my starting point of 24 hours ago.

// Function that calculates the difference between the earthquake and 24 hours ago and
// creates a delay property.
var setQuakeDelay = function() {
	for(var i = 0, max = quake.length; i < max; i++){
		var timeDiff = quake[i].properties.time - dateObj;
		var timeDiffObj = new Date(timeDiff);
		quake[i].delay = Date.parse(timeDiffObj) / 5000; // Speed up the animation, otherwise it would take 24 hours ><
	}
}
setQuakeDelay();

Now each quake has a new property of delay that is a number of seconds from the starting point that the earthquake happened. I divided the number by 5000 to speed up the process.

The next step is animating all of the quake circles with their new delay.

// Changes the radius of the earthquakes to their magnitue using a transition
// and the delay created from the setQuakeDelay function
var quakeCircles = svg.selectAll('.quake-circle')
		      .data(quake)
		      .transition()
		      .delay(function(d) {
		          return d.delay;
		      })
		      .duration(1000)
		      .attr('r', function(d) {
		          if(d.properties.mag < 0) {
			      return 0.1;
		          } else {
			      return d.properties.mag				 
		          }
		       });

Perfect! Now the circles are all animating from 0 to their magnitude. I wanted to draw the viewers attention to each quake as it appears but some of the circles are very small. I decided to add another circle that pulses out and dissolves. I append these similar to the original circles. I later realized I needed the actual quakes to be added second so they are on top of the pulse. This matters for the text title tooltip that I add on to each quake.

I animate the pulse circles similarly to the quake circles, except that the size of the circle is multipled by a factor of 8. I also remove the pulse circle afterwards to clean up the DOM.

// Changes the radius of the pulse circle to eight times the magnitude
// and fades out as it expands over two seconds
var pulseCircles = svg.selectAll('.pulse-circle')
			 .data(quake)
			 .transition()
			 .delay(function(d) {
				 return d.delay;
			 })
			 .duration(2000)
			 .attr('r', function(d) {
			   if(d.properties.mag < 0) {
					 return 0.1 * 8;
				 } else {
				 	 return d.properties.mag * 8;
				 }
			 })
			 .style('opacity', 0)
		   .remove()

Adding an Timeline Axis

It’s great that the quakes are happening at roughly the right time increments over the last 24 hours, but I wanted to have a clock or something so you could see the pace of the quakes as they are happening.

After I append the world map I add an x-axis along the top of the map. First I set my variable x to d3.scaleTime() using the 24 hour ago object as the domain. This way my ticks represent the hours starting at the correct time.

// Create the x scale based on the domain of the 24 hour ago object and now
	var x = d3.scaleTime()
		  .domain([dateObj, new Date()])
		  .range([0, width - margin.right - margin.left]);

	// Append the xAxis on top
	var xAxis = svg.append('g')
		       .attr('id', 'xAxis')
		       .attr('transform', 'translate(20, 20)')
		       .call(d3.axisTop(x));

I create a red dot similar to my earthquakes as a progress marker along the timeline, but I need to set the length of time it should take to traverse the axis. For this I grab the longest delay property of an earthquake by accessing the last quake in my array.

var longestDelay = quake[quake.length - 1].delay;

This is the longest delay an animation should take, so that’s a great place to start. I could have tried to make this more accurate but I opted to just add 1000 ms and wrapped up the project. I would like to next build in the option to repeat the animation, and also zoom in on certain areas, but for now I have version 2 complete.

Click Run Pen to watch all of the earthquakes in the last 24 hours. It’s not responsive, so watch on a larger screen for optimal results.

Earthquakes v2.0

See the Pen Earthquakes in the last 24 hours by Anthony Skelton (@ajskelton) on CodePen.

I changed up the colors some from v1.0 as a suggestion from my wife. With the darker gray colors for the oceans and land mass it lets the red and white earthquake circles really pop.

D3.js version 4

d3.js version 4

Interactive Data Visualization for the Webwritten by Scott Murphy is a great introduction to using D3.js and begin to visualize your data. However, it was written for version 3, and version 4 came out earlier this year. I started working through the examples in CodePen and added d3 with their quick and easy framework dropdown. This adds the newest version which I hadn’t realized was so different than the one used in the book. I decided to stick with it and work out the examples using the new version. This post will help you translate the examples into d3.js version 4.

Bar Charts using d3.js version 4

See the Pen d3.js | Hover, Highlight, and Tooltips for Bar Chart by Anthony Skelton (@ajskelton) on CodePen.

In this bar chart example you first setup the xScale with an scale ordinal. Here’s the version 3 code, followed by the version 4.

/* VERSION 3 */
var xScale = d3.scale.ordinal()
                .domain(d3.range(dataset.length))
                .rangeRoundBands([0, w], 0.05);

/* VERSION 4 */
var xScale = d3.scaleBand()
	       .domain(d3.range(dataset.length))
	       .rangeRound([0, w])
               .paddingInner(0.05);

One of the most consistant changes is dropping the first scale method and combining it with the call to the specific method. For example d3.scale.linear is now d3.scaleLinear. In the above example the scale is still an ordinal scale in version 4, it’s now a specific ordinal scale for bands. You also have d3.scalePoint and the standard d3.scaleOrdinal at your disposal.

Similarly we don’t need to specify the .rangeRoundBands, because we’re already talking about bands. This changes to just .rangeRound. However you can no longer define a padding in the rangeRound, so there is another method for doing just that, .paddingInner.

Another change for our bar chart is determining the width of each individual bar. Our scaleBand scale has a method called band.bandwidth() that returns with width of each band so that they evenly take up the allotted space. In version 3 you used rangeBands() which took a log and a high value, often [ 0 , width ], and also a second parameter that added spacing between the bands.

/* VERSION 3 */
.attr("width", xScale.rangeBand())

/* VERSION 4 */
.attr("width", xScale.bandwidth())

The new version makes it much easier because it knows on a scaleBand you’re going to want to know how wide to make each band so they evenly distribute on the range that we declare with band.rangeRound() (or just band.range() ).

Time for Pie Charts

See the Pen d3.js | Simple Ring Chart by Anthony Skelton (@ajskelton) on CodePen.

With version 4 you can use svg or canvas to draw your shapes. Because of this only a couple of changes are needed to follow the Pie Chart tutorial.

Here’s how the two versions compare:

/* VERSION 3 */
var pie = d3.layout.pie();

var w = 300;
var h = 300;

var outerRadius = w / 2;
var innerRadius = 0;
var arc = d3.svg.arc()
                .innerRadius(innerRadius)
                .outerRadius(outerRadius);

var arcs = svg.selectAll("g.arc")
        .data(pie(dataset))
        .enter()
        .append("g")
        .attr("class", "arc")
        .attr("transform", "translate(" + outerRadius + ", " + outerRadius + ")");

/* VERSION 4 */
var pie = d3.pie();

var w = 300,
    h = 300;

var outerRadius = w / 2;
var innerRadius = w / 3;

var arc = d3.arc()
            .innerRadius(innerRadius)
            .outerRadius(outerRadius);

var arcs = svg.selectAll('g.arc')
              .data(pie(dataset))
	      .enter()
              .append('g')
              .attr('class', 'arc')
              .attr('transform', 'translate(' + outerRadius + ', ' + outerRadius + ')');

You’ll see the only difference is the initialization change from d3.layout.pie() to d3.pie() and the call for the arc generator from d3.svg.arc() to d3.arc().

This example also uses a set of colors that D3.js comes with that we can use to speed up development and not set specific colors. Here’s the comparison between versions:

/* VERSION 3 */
var color = d3.scale.category10();

/* VERSION 4 */
var color = d3.scaleOrdinal(d3.schemeCategory10);

Again a small difference but you’re code wont work if you don’t use the new syntax. Also in version 4 you get three versions of a 20 color scheme category you can access with

  • d3.schemeCategory20
  • d3.schemeCategory20b
  • d3.schemeCategory20c

Also in version 4 we get a new module called d3-scale-chromatic. This offers a more powerful color scheme. You will have to make sure to include the module when you need to use it. Read more and check out all of the schemes on the modules github.

Use the force

See the Pen d3.js | Force Simulation by Anthony Skelton (@ajskelton) on CodePen.

Using data visulizations in d3.js version 4 is a little different and splits everything out into batches of methods for each part of the visualization. You create a new force similar to other shapes and layouts by using the updated d3.forceSimulation. This is your simulation and there a several methods for

/* VERSION 3 */
var simulation = d3.layout.force()
                   .nodes(dataset.nodes)
                   .links(dataset.edges)
                   .size([w, h])
                   .linkDistance([50])
                   .charge([-100])
                   .start();

/* VERSION 4 */
var simulation = d3.forceSimulation(dataset.nodes)
                   .force('charge', d3.forceManyBody())
                   .force('link', d3.forceLink(dataset.links))
                   .force('center', d3.forceCenter(width / 2, height / 2));


simulation.nodes(dataset.nodes)
          .on('tick', ticked);

simulation.force('link')
          .links(dataset.links);

We start the same by dropping the extra layout method and just use d3.forceSimulation(), but the next step is accessing the .force methods of the simulation. Each of these return the force of the specified name to create a new simulation to layout.

Mapping with GeoJSON

See the Pen d3.js | GeoJSON by Anthony Skelton (@ajskelton) on CodePen.

The examples for GeoJSON in d3.js version 4 are very similar to version 3, with just a couple changes that we’ve seen in all of the past examples.

/* VERSION 3 */
var projection = d3.geo.albersUsa()
                       .translate([w/2, h/2]);

var path = d3.geo.path()
                 .projection(projection);

/* VERSION 4 /*
var projection = d3.geoAlbersUsa()
                   .translate([width/2, height/2]);

var path = d3.geoPath()
    .projection(projection);

Wrapping up

With these updates you should be able to make it through all of the examples in Interactive Data Visualization for the Web and get you started on your journey with d3.js version 4 data visualizations.

Sharks Playoffs Coding Adventures

This is Sharks Territory

Pictured above is my wife on our Honeymoon in Cabo san Lucus during the Sharks playoff run in 2014. We brought along our Sharks Territory sign, but it didn’t help much with the crushing loss of that year. But now they’re back in the heat for the cup and I’ve taken my fandom and combined it with some front-end projects to create some Sharks Playoffs coding adventures.

Sharks Logo in CSS

See the Pen San Jose Sharks Logo by Anthony Skelton (@ajskelton) on CodePen.


The first project was to make the San Jose Sharks Logo in HTML and CSS. This was the first time I did a CSS art project and it took a different way of thinking to accomplish. I started with the triangle and then began to create layers of shapes to create the shark. The teeth gave me the hardest time. Using a lot of linear-gradients I was able to create the jagged look and then reverse it for the other side.

I’m really happy with how the logo turned out, but I don’t think I’ll do another project like this for awhile. The pen was very well recieved, and was featured on the front page of Codepen.

Player Cards

See the Pen San Jose Sharks Material Cards by Anthony Skelton (@ajskelton) on CodePen.

I started working with the Material Design elements and wanted to make cards for each of the 2016 roster with their stats. I started by building one card using images and stats from the Sharks website. After I had one built I didn’t want to code out the HTML for each and every card so I built a JSON file with all of the players name, numbers, images and stats. Normally I would use an API to grab this info but I couldn’t find one that had public access. Then I looped through the JSON file creating each card. Now that they’re onto the finals I hope to update this with the playoff stats and perhaps add some animation to reveal the stats.

Power Play Chomp

See the Pen Sharks Chomp by Anthony Skelton (@ajskelton) on CodePen.

When the Sharks go on a Power Play the fans with do a “Chomp” with their arms. With a 27% Power Play in the playoffs they’ve been doing a whole lot of chomping so far. I built this pen at the beginning of the Conference Finals when they took on the St. Louis Blues. The hashtage the team came up with was #SilenceTheBlues so I used this in the text that the teeth are chomping on. I built the text with variables so you can easily update the two sets of text.

For the animation I have the text moving at the opposite direction and speed of the teeth so that they remain stationary in the center. I also use a step-start timing so the text changes instantly when the teeth are fully closed.

More to come

With the Stanly Cup Finals starting on Monday I’ve got some more time to update and work on more pens. Go Sharks!

iOS Javascript Calculator

Close up of Calculator

In my spare time I’ve been plugging away at the Front-end projects for FreeCodeCamp. The first Advanced Front-end Developer project was to build a Javascript calculator. I chose to make mine look like the iPhone calculator since I had it with me and could use it for the design and functionality. When I needed to test how the calculator should work I was able to try it out and see what happened first.

An example would be after you have completed an equation and use the = button. If you click another operator you continue the equation starting with the answer from the previous one. If instead you click a number than you are starting a new calculation. To account for this I had to add some extra tests in the addValue function.

The Javascript Calculator

See the Pen iOS Calculator by Anthony Skelton (@ajskelton) on CodePen.

It was a great exercise and I’m really happy with how my javascript calculator turned out. Next up is creating a Pomodoro clock.

Free Code Camp Intermediate Front End Development Projects

Laptop Coding

I’m going through Free Code Camps developer program and I just finished the Intermediate Front End Development Projects. I enjoy the teaching style of FCC compared to other online learning resources. It focuses more on you finding solutions and not just changing things from the examples to find an answer. Here are the four projects that I made for the Front End Development Projects.

Build a Random Quote Machine

See the Pen Random Quotes by Anthony Skelton (@ajskelton) on CodePen.

This was a fun project to get started using Ajax. After registering for the API key and getting configured I had my quotes coming in. I probably spent more time working on the design than the functionality and went through a couple different looks. I decided to go with the fade out fade in look, and got some practice chaining events by using the complete function of jQuery’s fadeOut to make sure the data didn’t change before the text had been removed.

Show the Local Weather

See the Pen Local Weather Application by Anthony Skelton (@ajskelton) on CodePen.

EDIT: This pen broke at some point, it’s on my list to fix.

My main struggle with this project was choosing what icons to display for the current weather. I looked at a bunch of options, and probably would have gone with svg icons from icomoon, but I hadn’t signed up for Codepen Pro yet so I didn’t have the ability to host any files. I could have previewed the icon font, but since that only worked for 24 hours I figured it was best to use something else.

I found a great pen from Josh Bader  with six animated weather icons in pure css. I used the codes returned from the weather api to determine which icon would be displayed.

Build a Wikipedia Viewer

See the Pen Custom Wikipedia Viewer by Anthony Skelton (@ajskelton) on CodePen.

The main problem I encountered with this project was in my Ajax call. I kept getting the “No ‘Access-Control-Allow-Origin’ header is present on the requested resource” error. After a while of hitting my head on the wall I found I need to add more header information, and declaring dataType: “jsonp” did the trick.

For the design I used the Bourbon framework and added the search results as links from the Bourbon Refills Pattern Library. I liked the way I could include a thumbnail image as well as a variable chuck of text for the results.

Use the Twitch.tv JSON API

See the Pen TwitchTV Channel Status by Anthony Skelton (@ajskelton) on CodePen.

The tricky part of this pen was dealing with a nested Ajax call. The streams api returns limited information when a channel is offline. Not even the logo is available. In my success function I first check if the stream is online. If it’s not that’s when I do a second Ajax request using the same channel name but to the channel endpoint. This gives me the logo that I need to display. Since I’m separating the online from offline channels this gives me the opportunity to append them to different container divs.

Wrapping up the Front End Development Projects

I’m now over halfway through the Intermediate algorithms in the next section of Free Code Camp. I’m learning a lot of new techniques as well as good problem solving to get through some of the complicated questions. I’ll write up more about my progress as my time with the program continues.

Books read in 2015

Bookshelf

The past few years I’ve tried to increase the number of books read. I keep track of books read as well as suggestions and recommendations on a couple pinterest boards. I haven’t reviewed or rated any, but I did enjoy everything that I read this last year. Here are the titles and synopsies, I would recommend them all.

Anathem – Neal Stephenson

Since childhood, Raz has lived behind the walls of a 3,400-year-old monastery, a sanctuary for scientists, philosophers, and mathematicians. There, he and his cohorts are sealed off from the illiterate, irrational, unpredictable “saecular” world, an endless landscape of casinos and megastores that is plagued by recurring cycles of booms and busts, dark ages and renaissances, world wars and climate change. Until the day that a higher power, driven by fear, decides it is only these cloistered scholars who have the abilities to avert an impending catastrophe. And, one by one, Raz and his friends, mentors, and teachers are summoned forth without warning into the unknown.

Ready Player One – Ernest Cline

In the year 2044, reality is an ugly place. The only time teenage Wade Watts really feels alive is when he’s jacked into the virtual utopia known as the OASIS. Wade’s devoted his life to studying the puzzles hidden within this world’s digital confines—puzzles that are based on their creator’s obsession with the pop culture of decades past and that promise massive power and fortune to whoever can unlock them. But when Wade stumbles upon the first clue, he finds himself beset by players willing to kill to take this ultimate prize. The race is on, and if Wade’s going to survive, he’ll have to win—and confront the real world he’s always been so desperate to escape.

Red Seas Under Red Skies – Scott Lynch

After a brutal battle with the underworld that nearly destroyed him, Locke and his trusted sidekick, Jean, fled the island city of their birth and landed on the exotic shores of Tal Verrar to nurse their wounds. But even at this westernmost edge of civilization, they can’t rest for long—and are soon back to what they do best: stealing from the undeserving rich and pocketing the proceeds for themselves.

The Republic of Thieves – Scott Lynch

With what should have been the greatest heist of their career gone spectacularly sour, Locke and his trusted partner, Jean, have barely escaped with their lives. Or at least Jean has. But Locke is slowly succumbing to a deadly poison that no alchemist or physiker can cure. Yet just as the end is near, a mysterious Bondsmage offers Locke an opportunity that will either save him or finish him off once and for all.

 

Divided – Elsie Chapman

West Grayer is done killing. She defeated her Alternate, a twin raised by another family, and proved she’s worthy of a future. She’s ready to move on with her life.

The Board has other plans. They want her to kill one last time, and offer her a deal worth killing for. But when West recognizes her target as a ghost from her past, she realizes she’s in over her head. The Board is lying, and West will have to uncover the truth of the past to secure her future.

How far will the Board go to keep their secrets safe? And how far will West go to save those she loves? With nonstop action and surprising twists, Elsie Chapman’s intoxicating sequel to Dualed reveals everything.

The Martian – Andy Weir

Six days ago, astronaut Mark Watney became one of the first people to walk on Mars.

Now, he’s sure he’ll be the first person to die there.

After a dust storm nearly kills him and forces his crew to evacuate while thinking him dead, Mark finds himself stranded and completely alone with no way to even signal Earth that he’s alive—and even if he could get word out, his supplies would be gone long before a rescue could arrive.

World of Trouble – Ben H. Winters

Critically acclaimed author Ben H. Winters delivers this explosive final installment in the Edgar Award winning Last Policeman series. With the doomsday asteroid looming, Detective Hank Palace has found sanctuary in the woods of New England, secure in a well-stocked safe house with other onetime members of the Concord police force. But with time ticking away before the asteroid makes landfall, Hank’s safety is only relative, and his only relative—his sister Nico—isn’t safe. Soon, it’s clear that there’s more than one earth-shattering revelation on the horizon, and it’s up to Hank to solve the puzzle before time runs out . . . for everyone.

Annihilation – Jeff Vandermeer

Area X has been cut off from the rest of the continent for decades. Nature has reclaimed the last vestiges of human civilization. The first expedition returned with reports of a pristine, Edenic landscape; the second expedition ended in mass suicide, the third expedition in a hail of gunfire as its members turned on one another. The members of the eleventh expedition returned as shadows of their former selves, and within weeks, all had died of cancer. InAnnihilation, the first volume of Jeff VanderMeer’s Southern Reach trilogy, we join the twelfth expedition.

Lock In – John Scalzi

Not too long from today, a new, highly contagious virus makes its way across the globe. Most who get sick experience nothing worse than flu, fever and headaches. But for the unlucky one percent – and nearly five million souls in the United States alone – the disease causes “Lock In”: Victims fully awake and aware, but unable to move or respond to stimulus. The disease affects young, old, rich, poor, people of every color and creed. The world changes to meet the challenge.

Never Let Me Go – Kazuo Ishiguro

From the Booker Prize-winning author of The Remains of the Day comes a devastating new novel of innocence, knowledge, and loss. As children Kathy, Ruth, and Tommy were students at Hailsham, an exclusive boarding school secluded in the English countryside. It was a place of mercurial cliques and mysterious rules where teachers were constantly reminding their charges of how special they were.

Now, years later, Kathy is a young woman. Ruth and Tommy have reentered her life. And for the first time she is beginning to look back at their shared past and understand just what it is that makes them special–and how that gift will shape the rest of their time together.

11/22/63 – Stephen King

On November 22, 1963, three shots rang out in Dallas, President Kennedy died, and the world changed. What if you could change it back? Stephen King’s heart-stoppingly dramatic new novel is about a man who travels back in time to prevent the JFK assassination—a thousand page tour de force.

Wool – Hugh Howey

Thousands of them have lived underground. They’ve lived there so long, there are only legends about people living anywhere else. Such a life requires rules. Strict rules. There are things that must not be discussed. Like going outside. Never mention you might like going outside.

Or you’ll get what you wish for.

WordCamp Sacramento 2015

WordCamp Sacramento

This was the inaugural year of Wordcamp Sacramento.  This seemed fitting as it was also my first Wordcamp to attend. The program lineup had many interesting talks scheduled and I knew I wouldn’t have a dull moment.

I even volunteered to help out in the Happieness Bar for an hour during the day. My WordPress development has come a long way over the past couple of years. Volunteering allowed me to help others and be a part of the Sacramento community.

After picking up some new swag and attending the opening remarks it was off to the advanced track room.

0900 – Local Development with Vagrant & VVV

John Trujillo of Tytanium Ideas began the day talking about local development. He walked us trough the process of setting up a virtual machine using Vagrant. The big advantage than Jon stressed is the ability to match your local development to your server. Then you can use the version of software that your production environment is running. You can also share the setup so others in your team can quickly spin up the same local environment.

The magic of VVV

Varrying-Vagrant-Vagrants is a Vagrant environment that has been configured for WordPress Development. While Vagrant is for setting up any virtual server, VVV is built specifically to build WordPress Plugins/Themes/Apps. It includes a lot of tools out of the box

  • Ubuntu
  • nginx (apache version available)
  • 4 Standard WordPress Instals
  • WP-CLI
  • lots more!

John walked us through the process of getting all this setup on our own computer. Vagrant uses shared folders so you can create your WordPress files in your own directories and they work within the VM. You can either use phpMyAdmin, Sequl Pro (or eqv), or even SSH into your server with Vagrant  to access your VM’s database.

I’ve been using VVV for a few months so I had already gone through the process of installing and setting it up. Though most of this was review it was great to see another developer go through a similar process to setup a local development environment. John also touched on some other Vagrant projects focused on WordPress Development. The Mercury Vagrant (HGV) is built by WPEngine to match their environment. There is also Trellis which uses Ansible for provisioning a LEMP stack for WordPress.

1000 – Content Design – Getting the Most from your Content and Images

For the second talk I decided to slide over to the beginner track to see Dawn Pedersen’s talk on Content. I misread the schedule and didn’t realize that I would miss out on Vasken Hauri from 10up talk about everything Cache.

The talk began where most content begins, with the text. Writing and formatting text is important to deliver your message to the reader. Unlike a book or magazine, people rarely read a webpage word for word. We jump around and scan the page looking for things that are meaningful.

This means you should write your copy so it is scannable, and above all else, avoid the Wall of Text! Some other tips were:

  • Use the Inverted pyramid
  • Write Simply
  • Limit yourself to one idea per paragraph
  • Break texts into lists ( like this 😛 )
  • Use Headings and Subheadings
  • Highlight Keywords

The Inverted Pyramid

People will decide if they will keep reading based on the first sentence or two. So you need to get to the point first. It means they could read the first paragraph and have the broad understanding of your subject.

From here use broad strokes and then the important details. Try to flesh out your ideas in the later paragraphs. You also want to use good transitions to get from one idea to the next.

Write Simply

Just because you write your subject simply doesn’t make the topic simple. The key is to understand a complicated idea and express it simply. Dawn gave some great tips to incorporate into your writing.

  • Use vocabulary that is easy to follow
  • Avoid jargon and cleaver wordplay
  • Get to the point quickly
  • Sort words and phrases. Consise 2 to 3 sentence paragraphs
  • Use half of the word count as for printed text
  • Replace passive phrases with active phrases
  • Don’t center text! Ragged left edge is difficult to read
  • Re-read and make sure it makes sense
  • One idea per paragraph
  • Keywords and the beginning and end of paragraphs

Many of the other text formatting tips are pretty straight forward and make it easier for the reader to consume your writing.

More Content Tips

Writing on the web, especially a blog, we have a few more tricks for styling and presenting our text content. These range from changing line breaks to prevent widows, controlling excerpt content, and moving users through your site.

When you have a post title or a subheading you might end up with one word on a second line if the title is long. The lone word is called a widow and is not desirable from a design standpoint. A way around this is adding in &nbsp; to your title. This is a non-breaking-space and you can add a couple to push another word onto the next line. This is a workaround and isn’t the best coding wise, but helps the presentation.

On the main blog index you can show your entire posts, or you can define an excerpt. In your post you can either add a read more tag, or use a custom field to write your own excerpt.

Once you have people on your site, you want to keep them there. Linking within your article to other relevant content makes it easy for them to keep reading. You also get the benefit of Google rewarding you for self linking.

Images

With faster internet connection speeds there are more and more images on web sites. WordPress makes it easy to work with and align images in your articles and featured images are great to start your post off with a bang. Here are some good tips for working with images.

  • Use Large images. Especially your featured image as Facebook will grab this for the shared link.
  • Begin with the best quality image you can manage
  • Optimize images before you upload to WordPress
  • Reduce it to the appropriate size that you will use.
  • Be careful with image floats and alignment
  • Interesting images should get their own line
  • Make sure to rename your image file names
  • Try using captions to further explain the image. It’s another way for eyes to scan the page
  • Use images that are relevant, interesting, and appealing

1300 – Coding Together: A Dev Workflow

Peter Chester from Modern Tribe spoke about his journey from solo developer to working with a large team. There are benefits to working by yourself.

  • Control over the project
  • Low Overhead
  • Stay Competitive
  • Be Efficient

But with all these benefits come the mighty negatives. The stress, multitasking, many hat wearing and lonely times. Working with a team can lead to many more benefits that not only help you, but your customers.

One of the big things that Peter talked about was the development workflow. He shared his solo workflow, and how it evolved as more people began to work on the project.

At Modern Tribe they use the git-flow branching model. The above workflow begins by creating a new feature. It has many steps in quality control and testing before finally being merged into the project.

Another topic that Peter discussed was what he called Conscious Coding. In this he means we all need to code for not only ourselves, but for the coders and designers who will work with the code in the future. You need to use clearly named Classes, variables, function titles. These along with succinct documentation bring everything together.

1400 – Way of the Future

During Jon Trujilio’s opening talk about VVV he mentioned other projects were also using Vagrant for local development. Jason Cosper from WP Engine gave his talk on an exciting competetor to VVV, Mercury Vagrant (HGV). It was built by WP Engine to maximise your production environments to their hosting, but you can use HGV no matter where you end up hosting. And HGV is all about the future.

So many of todays sites run on old versions of PHP. HHVM from Facebook looked to be the future for WordPress, but then came PHP7. As Jason says, PHP7 is PHP on steroids, and he gave some impressive benchmarks.

Developers need to use these new tools to build sites for the future. VVV is great, and an industry standard. But it still ships with PHP 5.5. The beauty of HGV is the ability to not only test your site with PHP5.5, but also PHP7 and HHVM at the same time. You drop your files in one folder and then use subdomains to test the same site with different processors. There are even links in your WordPress Admin bar to switch between 5.5, 7, and HHVM.

Everthing about the future of coding relies on speed, and HGV is a great tool to test your site and prepare it for the future.

1530 – Ad Revenue 101

After several advanced course classes I switched back to the beginner room to hear Ben Ilfeld’s talk on WordPress Ad Revenue. I’ve never dealt with ads in a website so there was a lot to learn.

Ben began with a lot of information about the history of ad technology and the modern Ad Ecosystem. Ad Networks make it easy to aggregate media sites for advertising. New technologies changed the landscape with Real Time Bidding and Ad Exchanges. The Ad Networks transformed into these Exchanges where bidding and auctions were happening on a massive scale.

With the Ad Exchange you can sell space yourself with no need for a sales person. There is a lot of data and some sophisticated algorithms about each potential ad shown. Because of these large scales the prices are unbelievably low.

What are the other options?

You can choose to sell space yourself. Having a website with a good niche market would allow you to own the direct relationship with the advertisers. Another option is joining the global market and focus on growing your traffic.

You could also do both! But this is likely only for bigger sites.

How to get started

DoubleClick for Publishers by Google. It’s free but can be complex. Also good for managing direct sold, ad networks and exchanges. It’s owned by Google, so you know it’s not going anywhere.

There are other plugins for WordPress that let you manage your ads. Ad Code Manager is easy for non-developers to configure a complex set of ad codes. The plugin still works, but isn’t in active development.

Broadstreet is another service that is independent and affordable. It’s great for managing direct sold with smaller advertisers and it has an up to date WordPress plugin.

Another option for integrating ads is with a related posts plugin. YARPP or Yet Another Related Posts Plugin lets you integrate sponsored links next to your related posts.

No easy beginning

Something I got from the talk was there is no silver bullet to sucuessful advertising. You’re going to start small and have to work your way up. As you increase the demand for your audience you can add more ad networks and extensions to grow your revenue.

1645 – Lightning Talks

The day ended with three lightning talks, about 15 mintues each, and were jam packed with information.

iThemes Security

There was a lot to talk about so John Locke jumped into it and never slowed down. Here are some of the key points and benefits to using iThemes security

  • Update WordPress Salts, makes everyone re-login to Wordress. Great way to get the bad guys out quick.
  • Change database prefix
  • Change the wp-content folder name
  • Schedule backups of your database. Have these backups emailed to you.
  • XML-RPC request – Allow, Block, or just block Pinkbacks
  • 404 Detection – blocks out after a lot of 404 hits when someone is trying to find a backdoor
  • Change admin username and the database row. Not row number 1.
  • Away Mode – Set when your Dashboard is available. The login screen will be unavailable.
  • Brute Force Protection – join the network of blocking IP’s who are guilty of Brute Force
  • File change protection
  • Hide the login Area
  • Disable the file editor

I’ve been using a different security plugin for awhile but after all the great tools that John described I’ll be switching to iThemes soon.

ECommerce

Alex Christensen gave an introductory talk about selling through your WordPress site. He covered a ton of basic questions that you need to answer before you sell your first item. I didn’t take many additional notes but his slides are avaiable here.

Near the end of the slides is a big table detailing the abilities of six of the major ecommerce options. It’s a great tool for making sure the plugin you pick is the best choice for what you need

Forms

Russell Aaron ended the WordCamp with a talk all about forms. One of the first big pieces of knowledge he dropped was that WordPress is full of contact forms. You use forms to fill out information and send it to another place. Sometimes this is to fill out a new blog post and send it to the database, or saving settings to a different table in the database.

Another idea he discussed was about filters. WordPress keeps developing filters to keep your site safe. They also progress WordPress to become more. You use filters to help keep your front side forms safe from the public and their malicious content.

After telling a story of some ridiculous problems he’s caused with bad plugin updates he reminded us this fact of widsom: Plugins are not bad because they’re called plugins, they’re bad when a drunk coder pushes bad code.

Wrapping Up

I had a great time at the Sacramento Wordcamp and I wish I had starting going to Wordcamps years ago. There is so much to learn about Wordpress from some very talented speakers. I also made a few connections that I hope to keep in touch with and see again at the local Sacramento WordPress Meetup. If you haven’t been to a Wordcamp yet, what are you waiting for?