14. July 2019

Weeknotes #5

Last week was the 4th of July, we had family in town to celebrate and to see our baby. Due to that I missed last week as there was just too many things to do and a lot of time spent with family.

This week at work I was able to spend a good amount of time building new layouts and blocks for a site in Layout Builder. I also continued working on the date repeat update for a site and built out a First/Last date formatter. Hopefully it starts working good enough that I can share it back with people as it seems quite useful.

I crashed my Grom

It seems like I have bruised by ankle bone, maybe sprained my knee and shoulder. But WAY better than last time I crashed my bike a couple years ago and this time I was hit which was weird. Basically people shouldn't be aloud to drive. Someone was in the right turn lane of an intersection stopped, I was needing to drive through that intersection so I was in the non turning lane to the left of them. Then I guess they decided they wanted to go straight too and turned right into my lane right in front of me. I slammed on my brakes hit them and fell over. Then they drove away. I'm very lucky to walk away from that accident mostly unhurt. The next day I was walking around and mostly able to live my life except I have a slight limp and I'm sore.

[Try]

Lazydocker this is a TUI (terminal User Interface) for all your docker containers running or not. I opened this and found gigs of old containers and things unneeded that I was able to remove. I also am just a sucker for TUIs so if you know of any other good ones let me know.

Layout Builder Modal at CK we user Layout Builder now for all landing page things but one of the terrible things about it is you do everything in a 300px wide sidebar. This modal module lets you do the same things but in a modal. Normally I'm a modal hater but this is a pretty good use case for them.

[Read]

First letter pseudo element & Making responsive tables with minimal CSS this week I came across Bradley Taunt's website and he has some really good frontend tutorials these were just two of the ones that showed me new things I didn't know.

Intro Guide to Dockerfile Best Practices I use Docker all day everyday and this was a good refresher for what makes a good Dockerfile.

The death watch for the X Window System (aka X11) has probably started as a user of Wayland this is both good to read. I am looking forward to more things working properly under Wayland by default. Now if only we could get rid of Qt...

A better zip bomb cool to learn how zip bombs work and really just how unzip tool work. Be careful with that file though, I sent it as a joke in my company Slack and someone tried opening it.

30. June 2019

Weeknotes #4

This was a good week, got a lot done at work and even had enough time to mow my lawn. Summer has finally arrived in Kansas City just in time for the AC to die on my wife's van, so that made this week hotter than I would have liked. Next week is 4th of July so I have family coming into town and we're going to watch things blow up and eat grill food, it will be great!

Due to my wife being sick I worked form home on Monday to help take care of our baby while she slept. The weird thing is that may have been my most productive day of work, I got a solid 9 hours in all with minimal interruptions. I really like my office and going to work but it is really that strange that alone in a room I'm able to get more done because I can think for a least an hour at a time without interruptions. This is good news because at Code Koalas we're starting first Friday's of the month as work from home days.

I was able to get a Drupal 8 site mirroring over to Patheon with a custom pipeline. It took longer than I would have wanted but in the end it's not too complicated. Pantheon make you track all composer downloaded files if you're not using circleci, I refuse to track all my composer files because I'm not an animal. I created a pipeline that replaces the gitignore with a pantheon gitignore then composer installs and git adds and pushed up to Pantheon. We had to use an approach like that because we already have auto deploying docker containers for this site locally and on our staging, but the client ultimately wants to deploy on Pantheon. The goal was to keep our normal workflow while still using Pantheon and I believe I accomplished that.

I accidentally nuked my Desktop Arch Linux computer and had to reset everything. I recently moved from nvm to n to manage node on my laptop, and decided I wanted to move that setup to my desktop computer as well. For some reason node loves to save files in root system directories, and so does n. It wanted access to /usr/local/n I believe so I created that and chmod that but accidentally ran that just on /usr/local. Right away nothing was broken but I knew bad things had happened, then about a hour later I realized I could no longer sudo things. I tried just booting from a flash drive and changing back permissions but after a couple failed attempts I decided to just start over on this computer. A hour or two later it was up and running and good to go. I'm impressed with how quickly I got things back working, and now I know I don't have filler things I don't use anymore taking up space. This is why it's nice to have you dotfiles backed up and I've been creating a private wiki for my life which includes all the random things I run on my computer so I could easily grab those and install them.

[Try]

I mentioned Gutenberg for Drupal last week, I tried it and so should you. I put it up on my blog (this right here) and was blown away with how great it is! We spend so much time trying to add plugins and change settings in ckeditor to make it work right for our users where with Gutenberg I clicked install and enabled it for the Blog content type and I was done. So seriously try it if you haven't, I'm writing this blog right now in Gutenberg.

[Read]

$499 AMD Ryzen 9 3900X Almost as Fast as $2000 Intel Core i9-9980XE this is really good news for anyone wanting a new computer some day, you don't need that crazy AMD Ryzen 9 3900X but because it's 1/4 the price that means Intel will need to do something to still be competitive. Hopefully bringing all prices down or making an even better processor. I personally am wanting to build a new computer using a Ryzen, but this computer I'm typing on is only two years old, runs perfect and all Intel based so too big of an upgrade.

The Toyota Way this was a fun read to see what Toyota does to stay so good. The best car I ever owned was my 2003 Toyota MR2 and I miss it everyday.

HTTP Cats and IP Kittens fun ways to put more cats on the internet.

Hey advertisers, track THIS a project from Firefox that spams all the tracking scripts watching you with tons of fake data to "confuse" them. Unsure if this actually works as they have years of data on you, how much does one day move the needle on this?

HTML is the Web good read about how HTML is fundamental to the web and a lot of people seem to not care to learn it. I learned HTML first back in 2004 (I think) and it's pretty simple and all made sense to me, so it's weird than newer people and just learning React or a framework and not the language that makes the internet. But then again do people say that about me writing websites in PHP instead of learning Assembly?

Raspberry Pi 4 is released! and What do you do with your Pi? A new Pi is released that goes up to 4GB of RAM, this is great but also what is there to even do with a Pi? I think with the 4GB and dual monitor capabilities of this newest one you could seriously make it your kids computer. I had already told my wife that when our kids are old enough I'm making them build a Pi if they want to have or use a computer. I want them to understand what computers are and not just be addicted to phones like so many young kids today.

Why you need to give Firefox a chance Chrome/Google have a monopoly on the internet, Firefox is really the only Browser fighting for us to keep the web standards open and not controlled by one company. I have used Firefox on and off since it's been out, I've currently been using to for I think the last two years when the rewrote the render engine making it much faster than it used to be.

23. June 2019

Weeknotes #3

This week at work was really good. I mostly got to work on building out new features on a new Drupal 8 site we're building using Layout Builder. It's always nice to be building out features trying new things instead of digging through piles of old code trying to fix little bugs. One of the things I need to start doing is rewrite an event calendar written in D8 to actually use repeating date fields to allow for the calendar search feature to work as intended, won't be fun.

Recently the Gutenberg editor for Drupal became stable, I don't think it will replace with Layout Builder does but I'm going to try it for this site for blogs and see how much better it makes it.

This week I finally got in my new tires for my Honda Express, I got those mounted on, filled with air and actually rode it for a couple minutes yesterday, currently the max speed is 24mph so either there's an issue with the carb or possibly a blockage in the exhaust that I'll have to start working on soon.

Honda Express Moped with fresh tires
New tires mounted on the Honda Express.

Yesterday I got to go my first Royal's game of the year, we really wanted to bring Phineas but because the temperature was over 90 and very humid we left him at home. It was a fun game even though like always the Royals did lose, we got to see a good game that was close until the 10th inning. They were really good seats and thanks to a very nice client of ours.

Kansas City Royals Game

[Games]

For my weekly game night we got together and played Scythe again. I've owned the game since the Kickstarter a couple years ago, but I've only played it a handful of times. I'd rate the game probably 9/10, not sure what I'd improve my main complaint is there are so many moving parts it takes awhile to get new people into the game. That's the main reason I've only played it a couple times. My favorite part of the game is there isn't dice rolling and you cannot make the same move twice in a row so it's all strategy. Nathan beat me, which is unfortunate but fun nonetheless.

Scythe Board Game

Next week at Code Koalas we're hosting an external Mandatory Fun game night on Thursday. If you live in the KC area you should come by there will be games and good company. It's our first formal external mandatory fun game nights so hopefully it's good.

This week I also picked up Hollow Knight for Nintendo Switch this week, so far my impressions are it's a very fun game and hard. I'm currently lost off the left side of the map and I'm not sure how to get back onto the map. I'm also picking back up Golf Story to see if I can complete that game, it's one of the more fun "sports" games I've played in awhile.

[Read]

Google Calendar went down this week. That's the second service to go down in two weeks I think, not that it means that Google is going down or anything like that but it's always a good time to reevaluate whether or not you need to use a service like Google for your calendar or if a self hosted option would be better. Disclaimer I use Google Calendar for personal and work.

The worst morale-boosting gesture I've experienced. This is just a great read about how out of touch the higher-ups were while trying to cheer up their team.

The CIA Spied on People Through Their Smart TVs, Leaked Documents Reveal. and Samsung TVs should be regularly virus-checked, the company says. I've never been a huge fan of smart TVs. I'm a fan of a dumb TV with a box plugged into it, as I've never used a smart TV that didn't completely suck. I do currently own a TCL TV with a Roku built in, and I think the TVs with Android TV built in are a good idea, not sure if they will end up having the same security issues or not as they're separate systems.

15. June 2019

Weeknotes #2

This week really blew by, so did last week which would be why I missed that update, oh well. The coolest thing I did was over the weekend picked up a 1980 Honda Express II which is a little moped.

Honda Express 2

Bought it as a non running scooter that has sat for a couple years. I drained the fuel, cleaned the carburetor, replaced the battery and spark plug and got it running. Now I'm just trying to find tires that fit which seems to be a harder task then it should be.

At work I interviewed a couple developers and held reviews and one of ones for a couple of our existing developers. During interviews I've started asking critical thinking questions instead of asking questions of like "how do you do X in PHP". It will take me hiring people to find out if this really works or not.

[Try]

Aerc - terminal email client. For awhile I've been trying to use Mutt as my email client when teaming that up with offlineimap. It mostly worked and was nicer than other email clients. I most recently switch to using Claws Mail because it works. In steps Aerc

[Read]

Crucial Conversations Read this book for work, 8/10. Good book with good information but couple be cut easily in half or more and still be as useful. Talks about how to keep your cool and have meaningful crucial conversations when your brain wants to shut down and lash out at the person who just called you out in a meeting or wherever.

Matrix 1.0 released. I tried getting a Matrix server setup a couple months ago as a chat server but had issues getting it connecting to the federation. With the 1.0 release I'm willing to try it again. The main thing I want to try is the 3rd party bridges to connect multiple services. I would be running Matrix server and one app to connect Slack, Rocket.Chat, text messages and others which would be really cool.

Always own your platform. Been big on this for awhile, as Facebook and YouTube start removing people because they don't like them the fear is always what if one day you find that they've moved what was acceptable and now you're outside of that? Now you're out and you've lost all of the reach you had.

Open source seed initiative. Never realized seeds weren't open sourced, which once I thought about it of course companies own the seeds, this is cool because dooms day type of thinking we could run out of seeds and all die without something like this.

Nintendo killed it at E3 this year. Really existed to play Super Mario Maker 2, never played the first one but when I got a Switch and realized the first version existed I've been wanting that game on Switch which I now get.

 

01. June 2019

01. June 2019

Weeknotes #1

Wanted to start writing weekly recaps of the week, I heard about Dave Rupert doing that on an episode of Shop Talk Show. The thought is to get small news items and links to cool things out that don't need a full long write up. Hopefully this gets me updating content more frequently and makes me better at writing.

This week was a rough week with the holiday on Monday then Flyover Camp on Friday and Saturday so easy to realize not much work got done around the office in the three days of work we had. That's unfortunate because we are now quickly approaching a couple different deadlines at work.

Flyover Camp which was a Drupal specific camp in Kansas City was a lot of fun. At Code Koalas we sponsored the event and sent all our devs to it. It was a lot of fun and we learned a lot, you can view all of the sessions now on YouTube. To me camps are better than conference because they're smaller and you get to actually people in the Drupal community, also they're shorter so your brain gets less fried. One thing that happens at every camp and conference is after parties, and this after party was probably the best one I ever went to! We went to Pawn & Pint which is a local bar that has walls of board / party games so you go there and play games with friends over a drink and some food.

D&D Oneshot

At the after party we playing a D&D one shot with a couple people from work and some from the conference. It was my first one shot and it was a log of fun. We defeated and bag guys with no deaths of our own which is good.

09. April 2019

Bringing Sanity To Your Git Flow

Git is a great tool which enables teams to work together and deploy code, but it's not all happiness and ponies. What if you need to deploy a single hotfix into your prod build, without pushing in any more of the code that has been written since your last depoy? How can you roll back to an older version of your code? What if you want to deploy all the changes that exist in staging to production but the environments are so far apart at this point merging code is scary. With the right git flow this is a breeze, but with the wrong git flow this can be a nightmare, or my life for the past couple years.

In this post I will assume that you at least have a basic understanding of how git works, if not you can get a quick git tutorial.

A very slimmed down and common issue we used to run into is, we have our main development branch and a staging branch that updates the site our client can see. We are doing all our work in master and then every so often make merges into staging with all the changes so the client can see the updates. Then inevitably someone makes a minor hotfix change into staging so now master and staging have different code in them. Now we're ready to deploy all staging code to live, so now we need to pull our staging code into our production branch. But now what happens to that staging hotfix that happened, that's now gone in master and you're going to lose it your next deploy unless you cherry pick that back in. A visual representation of what you've made is this.

git tree
Because all the merges as this scales your git tree just continually gets messier.

A simple tool you can use to follow along or learn more of how git works, and what I've used to generate these git screenshots is here https://git-school.github.io/visualizing-git

We don't need to get too into the weeds about all the weird things and issues you can run into with git, I'm sure you've encountered them before. We at Code Koalas have moved all of our ongoing projects to follow the flow of, master branch, feature branches off a master, rebase your branch before merging and releases for staging and production are tags on master. It's as simple as that!

Here is the step by step process of the normal git flow you'd follow for everyday use.

  1. Pull down latest code on master
  2. Check out your new branch
    1. We follow a format where branch names should include the ticket number in them. CK-204
  3. Do all your work.
  4. Git add your code with a good commit message also including the ticket number
    1. CK-204: added new feature
  5. Check out master branch and pull latest code
  6. Go back to your branch and rebase it off latest master
    1. git rebase -i master
  7. Push up your code
  8. Make a merge request into master squashing commits if it is really just one feature change and closing out your branch on merge acceptance

Another git tree
You will notice here it’s mostly just one line with a lot less back and forth.

This flow helps your merge request from having phantom line adds or extra code you don't need. Also rebasing it means you will resolve all the conflicts locally before you push it up.

Great now you're ready to deploy this code to your staging environment, all you do is either create a tag based off master locally or in your remove git software (gitlab, github or whatever) and call it RC-v1.0.0 or whatever your version number is. We then have pipelines that build based off tags and if rc-* it will build and deploy to staging.

another git tree
Here you see the tag RC-v1.0.0 which is “live” on staging while the code keeps moving.

Deploying to production is the same as for staging. If everything in master needs to go live great, create a tag but this time call it release-v1.0.0 and same as before it auto deploys. If you only need a couple changes based off the last release or rc you will follow our hot fix flow which takes a previous tag and add just the commits you actually want.

  1. Create a branch off the tag you want to base this new tag off of.
    1. If it's a hot fix grab the last full release then we will just add the few extra lines needed. 
  2. You then pull in the code you need into that branch
    1. You could make a hotfix based off that branch and merge it in, then rebase it off master and merge it to master.
    2. You could cherry pick in just all the new commits that have happened into master and add those in. That's the good part about putting ticket numbers in your commit messages.
  3. Then create your new tag based off this branch.
    1. If it's a hotfix we do the same release tag we based it off of but add -hotfix-1
  4. That code will deploy based off the pipeline and tags.

another git tree
Here we have taken in the RC tag, added a hotfix then deployed that live.

That's really it, it's really simple but has made deploying code to prod no longer scary. It's cleaned up the difference between environments so getting your code into staging then into production isn't painful. Most importantly for us it's allowed us to have multiple features being built at the same time and putting one on pause and being able to deploy one of those features and not the other.

05. March 2019

Integrating The Color Module Into Your Drupal 8 Theme

Letting your user change the color of the theme can be a hassle, or downright scary. The color module built into Drupal 8 core allows administrators to change the color scheme of compatible themes. We are going to walk through the few steps that are required to get your custom theme up and running with the color module.

Possible Use Cases

  • Creating a theme that needs to work for multiple sites with different color schemes.
  • Creating a theme to contribute or resell.

What You Need

  • A Custom Theme
  • Install the Color Module (included in core)

Setting up your Theme

Once you have created your theme you will need to create the directory color and create at least one file named color.inc. There are more files that can be put here to make the preview for the admins better but they are not essential for this tutorial.

You will also need a CSS file with all of your color things that you are letting the admins control with Drupal.

Your directory structure should look like the following example. Where your CSS file is and what it is named isn’t a requirement of the Color Module, but you do need to properly link to them.

custom_theme
| -- custom_theme.info.yml
| -- custom_theme.libraries.yml
| -- color
|    |-- color.inc
| -- dist
|    |-- css
|        |-- color.css

The custom_theme.info.yml is a requirement of every theme, and the only thing worth mentioning here is that it must have a library that it is using so you can pull in your CSS changes. It should look like the following. I am sub-theming Bartik just for this sample, as it looks decent as a base to not have to write any extra HTML or CSS for this tutorial, and is not required.

name: Custom Theme
type: theme
description: Custom Theme to show color module
package: Other
core: 8.x
base theme: bartik
libraries:
- custom_theme/color

The custom_theme.libraries.yml is needed to give the path to your CSS that the Color Module will be using. It should look like the following:

color:
  css:
    theme:
      dist/css/color.css: {}

The color.inc is the file that is doing all of the work, a minimum file would be like the following:

$info = [
  // Available colors and color labels used in theme.
  'fields' =--> [
    'primary' => t('Primary Color'),
    'secondary' => t('Secondary Color'),
    'text' => t('Text Color'),
    'background' => t('Background Color')
  ],
  // Pre-defined color schemes.
  'schemes' => [
    'default' => [
      'title' => t('Default'),
      'colors' => [
        'primary' => '#3f51b5',
        'secondary' => '#536dfe',
        'text' => '#3b3b3b',
        'background' => '#ffffff'
      ],
    ],
    'red' => [
      'title' => t('Red'),
      'colors' => [
        'primary' => '#f44336',
        'secondary' => '#ffcdd2',
        'text' => '#600000',
        'background' => '#ffffff'
      ]
    ]
  ]
];

// CSS files (excluding @import) to rewrite with new color scheme.
$info['css'] = ['dist/css/color.css'];

Once that file is there you can clear your site’s cache and go to the theme settings for your site /admin/appearance/settings/custom_theme and you will see the color form. The form should have all of the fields you defined and show a color wheel allowing people to pick whatever color they’d like for the form.

Admin form in D8
The admin settings form for our custom theme

Now admins can choose whatever colors they want, or from one of your pre-created schemes. If you change those and view the site, you will see that has happened yet. The next step needed is to create the CSS that Drupal will actually be using to color the site with the values entered in the admin form.

Setting Up Your CSS

There are, in my opinion, two approaches to how you could setup your CSS file to color your site.

  1. Create color classes that you apply to your HTML as needed that color things
    .primary_color {
      color: #3f51b5;
    }
    
    .primary_color_bg {
      background-color: #3f51b5
    }
    
    
  2. Take all of the selectors that need colors and move those into your CSS file.
    #header {
      background-color: #3ft1b5;
    }
    

I personally think the first approach is much cleaner and will save you time and headaches, but in this example I’m doing the second approach for simplicity. Below is what our dist/css/color.css file looks like.

#header {
  background-image: none;
  background-color: #3f51b5;
}

h1 {
  color: #536dfe;
}

body {
  color: #3b3b3b;
  background-color: #ffffff;
}

#page {
  background-color: #ffffff;
}

Something very important that you should take note of is how colors in your CSS map to the colors in the admin form. In Drupal 8 we are grabbing the HEX defined as the default in your color.inc and replacing that with the new value saved in the config form. In our default scheme, primary color is set to #3f51b5 so in our color.css file anywhere that hex exists, it will get overridden to be the new primary color set in the admin interface.

Results

Now that everything is setup, we are good to go to the admin interface again and change the color scheme. Once changed to the red scheme, if we reload the home page this is what it looks like:

website with red theme
Our Bartik based site with the Red color scheme

We can also head back into the theme settings and choose completely custom colors, disregarding predefined color schemes.

Admin settings with color wheel
The color settings as set using the color wheel

Once we save that and head back to the homepage, we’re greeted by this very ugly site.

our website but green

This obviously isn’t the ideal situation, and you should be able to create much better looking sites if you contact a designer to create your color schemes and consider what elements should allow color changes.

Quirks you might run into

  • If you added keys in the color.inc but you don’t see them in the theme settings form even after a cache clear you must clear out the color.theme.custom_theme config. You can do that with a drush command drush cdel color.theme.custom_theme
  • This seems weird, but for me I had to make my HEX values in both my color.inc and my color.css lowercase or they didn’t get overridden.

Conclusion

The Color Module just works, is simple to set up, and is a great tool to know how to use. At Code Koalas we have used it on a multiple sites for clients and will continue to use it when it is appropriate for the project.

02. June 2018

31. May 2018

Setting Up XDebug

Using Xdebug makes it feel like anything else is coding while blind pressing keys with a long stick. It's absolutely needed to build out things in PHP when you don't know exactly how everything is working. So getting it working in our setup is very important. Currently this guide will only explain how to get Xdebug working in PHPStorm with our docker setup. Hopefully from there you can figure out how to get it to work in other editors or other projects and when you do, please add it.

Turning on Xdebug in your docker container

To get it turned on in your docker container you just need to modify your docker-compose yaml file. In our Drupal projects the lines you need are already there, you just need to comment them back in. Your compose.yaml should look like the one we have in GitHub. In the file you'll see the following lines:

...
#LOCAL: "true"
...
...
extra_hosts:
# - "xdebug:192.168.237.237"

Those both need to be commented back in. The local true means xdebug gets enabled and configured when the container is booted up. The extra hosts lets the container and your computer talk to eachother over that IP as that's what xdebug needs to work.

Once you have done that you're good to boot up your container, once it's booted you have step 1 of getting xdebug done.

Adding Loopback

Now we need to add the loopback, so your computer and your container can talk to eachother. If you ran Kerry's setupdev.sh you should already have this but I'll outline what to do again so you have it.

Mac

Get the docker-compose repo downloaded locally if you don't have it already.

Once you have that go to that directory in terminal and type ./addloopback.sh that will output some things into your terminal so you know it works.

That's it.

Linux

On Linux we currently don't have an awesome bash script, and this you have to run everytime your network changes, but hopefully I can make this awesome and stay forever like the Mac one but for now you can run

sudo ip addr add 192.168.237.237/24 brd + dev wlp4s0 label wlp4s0:1

You will have to change wlp4s0 to be your network devices name, and you can change the IP address to be anything, but it just needs to match the IP in your compose.yaml file.

Configuring PHPStorm

As of PHPStorm 2017.x getting PHPStorm working with xdebug & docker is a lot easier. If you are on an old version you should update first before continuing.

Configuring Docker

Here is jetbrains info on how to do this but it's actually long and has a lot of old things you might not want or need. As of September 2017 what is below does work but if you run into issues please refer to jetbrains docs and update these to reflect the changes.

  1. Open the settings pane in PHPStorm (Control+Alt+S) or (Command+Alt+S) or File > Settings.
  2. Search for Docker (or find docker under the "Build, Execution, Deployment" section)
  3. Click the green plus to add a docker setup
    • If you get to this step and you already have a docker there continue to the 6th step
  4. You can name this configuration "Docker" or whatever, and tell it to connect with the Unix Socker or Docker for Mac depending on your system
  5. Click apply and ok.
  6. You should now have a Docker icon somewhere in the bottom left of your screen, maybe hidden behind a menu icon. Click that.
  7. That will have opened a pane just saying Docker, double click that docker icon.
  8. If after clicking it it says connected and shows that docker containers are currently running you have succeeded. If not please scream and run around and ask for help.
Configuring this project
  1. Now we need to configure Xdebug for this current project you have open in PHPStorm. To do this you will click a dropdown arrow on the top right of the window to the left of a green bug and play button.
  2. Form there you click the "edit configurations" option
  3. You will then click the green + on this pane and click the option "PHP Web Application" (for me I have to scroll to see that)
  4. This should get you a screen that looks like this:
  5. Click the ... next to the Server select list
  6. This will bring up a new pan to configure the server (docker container)
  7. From here you will name the server whatever (the name of the project)
  8. Your host will be whatever url you go to to access the site (mycoolsite.dev)
  9. Next you will want to use path mappings, so click that checkbox which will reveal new things on the pane.
  10. Next you will configure your path mappings.
    • On the left side of the pane will show your local file system of this project. The right column is your server's file system.
    • You will just take whatever is on the right and prepend /var/www/site to it.
    • The general rule is to map docroot and every directory you will be working out of.
  11. Click apply & ok.
  12. Go ahead and name you confiuration the name of your project as well.
  13. Click apply & ok.

Triggering it with PHPStorm

Now to actually use xdebug you will go any php file and to the left of the line and to the right of the number click and you will see a red circle appear, that's a breakpoint. A breakpoint is a spot that then the code is executing will stop at that point and show you everything that's happening. One trick is you can only place breakpoints in lines of actual code that will be executed, not just randomly at a spot in a file.

Once you have your breakpoints you want to see what is happening at, go ahead and click the green bug in the top right bar of the program. Clicking that will open a new page on PHPStorm and open your app in a browser window.

On that page it opens in the console, but that's probably not what you want, you'll want to go and click on the Debugger tab. If you're super lucky and your code executed already it's possible when you go to that tab you already see xdebug things!

If you didn't it's likely that your code doesn't run on the home page, that's fine just go to that page, but leave the ?XDEBUG_SESSION_START=XXXXXXX in the URL. If that still doesn't work then you most likely have to clear the cache.

If after that, it still doesn't work ask Josh.

:wq