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

15. August 2017

Using Docker for Local Drupal Development

docker-drupal-hero-image

This is also posted on Code Koalas’s site.

Using Docker is great, it makes sure that every developer working on the project is using the same server and if it works on your machine it really should work on everyone’s. It’s also great because once you have it set up you can spin up aditional sites in a matter of seconds instead of trying to manage a local web server on your computer yourself. This blog should get you off the ground and get your first Drupal site spun up so you can get right into working on your site.

more

03. August 2017

Drunken JavaScript

This is also posted on Code Koalas’s site.

Here in The Crossroads of Kansas City on the first Friday of every month people open their offices and art galleries to show off new art and have a party. It’s called First Fridays. Not the most creative name, but at Code Koalas we wanted to do something a little more than just show off art and offer drinks and snacks. Since we’re a development company, we figured we should teach people to code. I was the one tasked with figuring out what that would look like and ultimately the one teaching this class every month.

I ended up deciding to teach people JavaScript, but specifically using Canvas to make a ball bounce around the screen. I’ve already written the blog on the JavaScript teaching I give every First Friday, and I’ve taught Canvas at Texas Camp. This blog isn’t a tutorial for how to write JavaScript, but more about what I’ve learned and experienced through teaching JavaScript to many people over the year, many of which were quite drunk.

more

11. July 2017

I Can't Even Canvas, But Now You Can!

This is also posted on Code Koalas’s site.

If you’re anything like me a couple years ago, you probably have avoided doing animations in Canvas because it’s crazy complicated and you’re just a person who can make websites, not a real programmer who can make games and things. But here’s the thing: you’re wrong. Making animations and games in Canvas is very easy and fun, I’d argue it’s easier than writing JavaScript for sites. If you can make a mobile menu, a carousel, or even just an alert() you can make a small animation in Canvas. I’ve taught this to children and very drunk people who know nothing about coding at Code Koalas First Friday events we host.

more

07. September 2016

100 Days of Code - Day 7

I just finished day 7! Where did the other days go you say… well I did them but only on github without blogs. I’ve been busy :) This in 7-10 hours is actually becoming a real thing. At this point here’s some key features I have done:

  • Fly around the screen with turning and when you hit the edge of the screen you go to the other side of the screen
  • You can shoot lasers by pressing the space key
  • Randomly generated asteroids appear and fly across the screen
  • You can shoot the asteroids and they disappear and you get a point
  • You can get hit by an asteroid and they disappear and you lose a point
  • I just today fixed my words which weren’t showing up. Turns out they were alwasy there… just black instead of white.

Most of the things in that list don’t work great but they work, I’m honestly impressed with how little I’ve worked on this.

more

03. September 2016

100 Days of Code - Day 3

Day 3 and I’ve hit my first big struggle! Turns out math is hard, or I’m just using it wrong. It’s probably me just using it wrong. I don’t know the equation to calculate your movement on a grid based on your current rotation, so I’m trying to make one up. I know all numbers I have to play with and what answer I’m looking for, it’s just trying to manuplulate those numbers to produce that answer is where I’m having the issue.

more

02. September 2016

100 Days of Code - Day 2

Great, it’s day two of 100 days of code. Guess what!? I sort of already failed… I got to work at 7:30am and left at 11:40pm. In that time I was able to get 45 minutes throughout the day where I worked on this code. I’m going to count it because I’ll make it up tomorrow and I coded the whole time and taught classes on how to code from 6pm-11pm so you cannot be too made at me.

more

01. September 2016

100 Days of Code - Day 1

Some people at work, Code Koalas, have decided to start doing the 100DaysOfCode. So I decided to do it too! I created a Trello Board where me and some people from work have posted their ideas on possible projects or things they want to learn. I don’t have a ton of time as I’m currently at work staying late on projects and took a hour break to do this. But here’s a link to my commit I got pretty far because I’ve previously created a Canvas template in CodePen which had probably 75% of that code you see.

I’m not 100% sure what I want to do with this project but right now the plan is for an Asteroids type of game. I’m trying to think of some cool multiplayer aspect to the game.

Well thanks for reading have a good night.

:wq

03. June 2016

Pocket Chip

I preordered a PocketCHIP and so should you! Seriously buy it now. Think GameBoy Color & Rasperry Pi put together and pre-built for $50 + s&h. The PocketCHIP runs linux, has a touchscreen and keyboard and runs PICO-8 which is a super cool retro fantasy console which you should just buy now and play with today. I also bought PICO-8 so I could play with it today (really last week) and start building a game. All the games are written in Lua (a language I don’t know but looks similar to Python and seems to just make sense) and it has sprite builders and music editors built into it. It’s a really cool thing and I’ll be playing with it when I get it in June.