2018.05.21 Training

Reverse Lunges

  • 10/10 x 20
  • 10/10 x 50
  • 10/10 x 50
  • 10/10 x 60
  • 10/10 x 70

Really tough. These are definitely a weakness.

Bulgarian Split Squat

  • 10/10 x BW
  • 10/10 x 20
  • 10/10 x 20
  • 10/10 x 20
  • 10/10 x 20

Pull-ups

  • 5 x 5

2018.05.04 Training

Goblet Squat

  • 50lb x 10 reps for 5 sets

Lat Pull-downs

  • 80lb x 10 reps for 5 sets

Elevated Push-ups

  • 5 sets of 15

Curls

  • 20lb x 10 reps for 5 sets

Walked about a mile afterwards for cool down.

2018.05.02 Training

In Puerto Vallarta for vacation, so I am limited to what’s available in the hotel gym.  I’m pushing to get to 5 sets of 15 next time for push-ups.

Goblet Squat

  • 50lb x 10
  • 50lb x 10
  • 50lb x 10

Lat Pull-down

  • 80lb x 10
  • 80lb x 10
  • 80lb x 10

Elevated Push-up

  • 15
  • 15
  • 12

Curls

  • 20lb x 10
  • 20lb x 10
  • 20lb x 10

WordCamp Detroit 2018 Recap

2018.05.11 EDIT:  Here are the speaker slides provided by the group

This weekend, I attended the WordCamp Detroit conference, which was revived after around 6 years of being quiet.  Held at Grand Circus, it was a good way to learn a few things related to WordPress, especially on some of the things that are available from a technical perspective.

I mostly stuck to the developer track through the sessions, and took some of the things I took back from each of those sessions.

In particular, my most recent interest is understanding WP-API to be able to integrate it into an Angular SPA, to be able to build a web app with CMS capabilities to allow for customization of data for end customers.

WordPress + React

Amit Rathi

Adding React to a WordPress project using the following options:

The option of adding React to a WordPress website comes in two forms:

  • Brainless CMS
    • Using WordPress to serve the front-end and React libraries, and specifically using wp_enqueue_scripts to serve resources.
    • Allows for adding smaller functionality to an existing application.
  • Headless CMS
    • Removing the WordPress front-end, and serving data in WordPress through the WP-API.
    • Useful for the SPA design, and can be easily tailored to use any other front-end application.

This talk makes me think about the popularity of React, and how on perspective it seems to be ahead of the other major frameworks, Angular and Vue.js.  I’m curious as to how that’s the case, and what it is about React that makes it stand above the others.

How to Build Themes using the WordPress Rest API

Anthony Montalbano

For this talk, we went through what the WordPress API is what it’s capabilites are.  Like Amit’s talk above, it talks about using a headless WordPress setup, which is becoming a best practice to be able to use the decoupled architecture.

We specifically went through building a mini-theme using the WordPress API, and then related this to moving to a headless WordPress design, allowing for customization to the API to allow for adding fields to different data types.

Rebrand Cities: Crushing the Digital Divide One Website at a Time

Hajj Flemings

Hajj’s talk had to do with the goal of providing websites for small businesses that do not have a website.  Statistics show that 46% of small businesses don’t have a website.

Ultimately, this talks was geared towards entrepreneurs, specifically in bringing cost-effective websites to businesses with limited funds.  For $300, Rebrand Cities provides a full end-to-end product including photography, branding, web design, and so on.

One of the mentions was in terms of securing brands throughout a business’s tenure – the key was to focus on the social media outlets that they will use, alongside reserving the handles for social media that they will use.

Site Configuration In Code: Configuration Management

Tessa Krissel

Tessa talked about the scenario where a group of developers are working on their own features, which will effect database changes inside of WordPress.  Talking about site configuration specifically, the concept of configuration management, or managing your site configuration in code through version control, comes into play.

The wp-cfm plugin is mentioned, which allows for pushing and pulling data between databases.  Some of the perks include:

  • Less need to copy the full database.
  • No need to manually apply database setting changes.
  • Track and migrate configuration files using version control.

It tracks everything inside the wp_options table, which covered most of the configuration for the WordPress application.

Some of the terminology that wp-cfm includes:

  • Bundle – A group of settings to track.
  • Push – Export configuration from your database to the filesystem.
  • Pull – Import configuration from the filesystem to your database.

While going through this talk, the tool Pantheon was brought up.  This basically serves as a hub for hosting and automated workflow for a WordPress website.  Another tool brought up was MergeBot, which allows for syncing of content between environments.

And finally, a security concern – make sure to change file permissions on the /config folder, as the configuration info will be stored in this directory.  This will be especially useful when storing API keys.

From Discovery to Design: A Collaborative Approach to a User-Centered Website

Katy Hinz

This talk stressed about the concept of using collaboration to delier a project that will provide the most value to the user.  User-centric

The user-centric design process goes as follows:

  • Discovery
    • Creating a common understanding of what the goal is.
    • Surveying interested parties (user, stakeholders, client design).
    • Analytics review.
    • Determining pain points and goals.
    • Creating a written website plan, potentially with sign-off.
  • User Mapping
    • Who are we designing for, and what do they need?
    • Empathy maps
    • Journey maps (Discover, Engage, Convert, Retain, Advocate)
    • Suggestions:
      • Advocate for the user’s needs.
      • Put user preference over personal preference.
      • Document findings and get sign off.
  • Information Architecture
    • Creating a sitemap for web site flow.
    • Suggestions:
      • Leave room for iteration.
      • Create page templates (not specific pages).
  • UX (wire-framing)
    • Work out major content, feature and functionality issues with wires to make design phase more seamless.
  • Design
    • Consistency in design patterns
    • Patterns
    • Interactions & animations
    • Usability & accessibility

After handing off the design to the development team, this design should communicate the user needs, A potential option is to use InVision and provide annotations for what should happen.  This helps keep the intent of the design more explicit.

Don’t Shard Your Pants!  A WordPress / Amazon Domain Sharding Solution for Images

Kim Kaiser (more information on talk)

The site used in all demos is http://www.enchantedcelebrations.com/

Domain Sharding is a technique where resources for one website are served from multiple domains, improving performance (browsers limit 6 simultaneous connection to one domain).

Pros:

  • Significant increase in page loading speed.
  • Ideal for 1000s of small images.

Cons:

  • Time required for extra DNS looking.
  • HTTP/2 protocol performs parallelized transfers.
  • Website modifications.

WordPress provides a plugin to allow for offloading all media into Amazon S3 and Azure.

Converting Images with Amazon Lambda and S3

How to Be an A11y

Aisha Blake

This talk defines accessibility as making it easy for everyone to access web content, regardless of how they approach the web.

Approximately 1/5 of people on the web have some form of disability.

How to meet WCAG 2.0 Guidelines

A couple general guidelines:

  • Do your images have an ‘alt’ tag?
  • Is your markup organized semantically?
  • Is your color contrast acceptable?
  • Are your headers and buttons descriptive?
  • Is there padding around clickables?
  • Can a user navigate through all content using only a keyboard?
  • Does focus shift to your dynamic elements appropriately?
  • Do videos have captions, or transcripts for audio?

There are a few automated tools for determining accessibility:

2018.04.23 Training

Squat

  • 70 x 3
  • 90 x 3
  • 110 x 3
  • 130 x 3
  • 150 x 3
  • 161 x 3

RDL

  • 70 x 5
  • 90 x 5
  • 100 x 5
  • 110 x 5
  • 120 x 5

push-ups

  • 15 (elevated feet and hands)
  • 10 (elevated feet and hands)
  • 15 (elevated hands)
  • 10 (elevated hands)
  • 10 (elevated hands)

Doing A Search & Replace Using SQL Server

Had a long weekend of work this week so this post is going to be short (since I didn’t have enough time to flesh something out. I’ll be better next week!).

I was working with a client and found I needed a way to do a search and replace on a SQL database. In particular I was changing a URL over from an old domain to a new domain.

Check the link below to see in easy way to apply it to your own database.

https://stackoverflow.com/questions/59044/how-do-i-do-a-simple-find-and-replace-in-mssql

Setting up Continuous Integration and Deployment with WordPress using DeployHQ

To get this blog started, I wanted to set it up correctly and use a good Continuous Integration and Delivery workflow.  To do this, I’ve found that DeployHQ does a good job of simplifying the process.  Simply put, DeployHQ monitors a source control repository and deploys changes to servers that you signify.

By automating this process, you’ll no longer need to worry about issues that can come from deployment, and simplify the steps for getting your code into a production environment.  In addition, you can implement build steps, allowing you to do things such as compile code, run unit tests, add configuration files, and more.

This process is going to specifically focus on migrating a series of files, so this would work with WordPress.  In a later section of these blog post series, we will learn how to use build steps for any applications that require a build beforehand, such as a React or an Angular application.

If you’re developing using a local WordPress environment (and you should!), this will allow for the changes being made in your repository to automatically be transferred to the server.  No more needing to connect to the server and make sure your files are in sync!

Before you get started, you’ll need the following:

  • You’ll need to have your WordPress source code checked into a repository – the easiest to get started with is Github, but you can also use Bitbucket, Gitlab, or use a private Git/Subversion/Mercurial server.
  • You’ll need somewhere to host your website.  I personally use NearlyFreeSpeech.NET.  You can use any type of hosting that allows for an FTP connection,
  • You’ll need a DeployHQ account (you can get a 10 day free trial, and then you can use the free account indefinitely for a single project.  For about $8 a month, you get 10 projects you can deploy).

Creating a New Project

After creating a DeployHQ account, the first thing to do is log in to the DeployHQ website and get to the dashboard:

From here, you can add your first project, connect to your repository, and specify the servers to deploy the code to.  First, you’ll set up a name for the project and specify where the source code is located (I’m using Github here, but you can choose from a few others such as Gitlab, Bitbucket, or your own Git/Subversion/Mercurial server):

If you are using a service such as Github, you will need to log in and approve DeployHQ to access the available repositories.  Once that is done, you should see a list of repositories you can select from:

Step 2: Creating A Server

The next step is to create a server for the project to deploy your code base to.  You will need at least one server (for your Production environment), but may want to create multiples based on the different environments that your project uses.

You’ll also be able to select the default branch that the project will deploy from, alongside setting up notification settings.  Personally, I suggest changing to allow for receiving a notification after all deployments, whether they are successful or not.

If you are using Github to host your repository, you can add the webhook created to the repository afterwards to be able to kick off automatic deployments, fulfilling the continuous delivery capability.

Part 3:  Creating Configuration Files

Next, you’ll want to create multiple config files with the deployment to allow for setting the configuration for the application correctly:

  1. Set permalinks to work with an .htaccess file.
  2. Create a wp-config.php file for WordPress configuration (one for each environment).

If you are planning to use post names for permalinks, you can use the following for .htaccess:

RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]

and you can use the generate wp-config tool to create your wp-config.php file.

Part 4: Deployment

Once all of the steps above are complete, you are ready to deploy your web site!  Just click on the ‘New Deployment’ button on the top right, and you’ll be brought to this screen:

You’ll be able to change a few things on this screen if desired, such as selecting which server to deploy to or scheduling the deployment for a later time (useful if you don’t want these changes to take effect until off-peak traffic hours).

You can click on ‘Preview’ to check which files are going to be transferred over (good to make sure you’ve set which revisions to deploy correctly), and you can click ‘Deploy’ to actually start the deployment.  Once you start a deployment, you’ll be brought to this screen:

This shows the actual process of the deployment – once this screen shows that it’s finished, you’ve completed your first deployment!