Contact forms are odd

On my site I have two forms. One is just a random one I created and the other is a contact form used for – you guessed it – contacting me. Over time I’ve gotten a few random ones that make me laugh only because of the content they contained.

The ones that really made me laugh were those which mentioned sleep deprivation. I don’t know why those really made me laugh but they did. I think a lot of that was because for a few years I was working two jobs that required me to be sleeping for a few hours at a time.

They were, of course, quickly disregarded. There was one who wanted to write a post on my site about it and that really took the cake. It really was like they don’t read my posts or the form in general because they used WordPress Support as the reason for contacting me.

Life related

On a bit of a side note and I guess very much WordPress related, I will be at WordCamp Sacramento this year as the Volunteer Organizer. Some already knew that and some didn’t. What I haven’t really said to others is that I’m looking to be the lead organizer for next year.

I’m a little nervous and very much scared to take that leap but I think this is something I need to do. Not so much for myself but for our local community.

The other, possibly, random thing is that I began working on a small quilt for my kiddo. I still have to cut up the fabrics and make sure I’ll have enough because I can’t for the life of me decide what pattern to make. I just know I will be using some fabrics he liked the patterns to.

Code related

This week I did a bit of an exercise for WP Rocket and it challenged me a little because I used Vim to edit everything. Yes, I really want to get more comfortable using that. I mainly use Sublime Text but when I can, I use Vim to make changes. A lot of that is because I like using the command line a lot more lately.

The fun part was looking at the code and getting familiar on how all the things worked. What I don’t understand is how I managed to get it all to work without having read any of the documentation. I looked at three files and began to look over the filters and hooks.

I know last week I mentioned reading things on JavaScript and using it to make a quick script. This week it wasn’t so much. I also need to be a little heads down since I want to finish the pull request I began for the Health Check plugin. It reads the .htaccess file and outputs some information for the user. It will only do it if the file is readable because it needs to get the contents and check for WordPress rules.

Core lessons

The last few days were comprised of making things. Random little things that I got a lot of pleasure out of. One of which was a small user script when I am on the support forums.

It’s a reply preview thing. It first was because I just wanted to experiment more with vanilla JavaScript. The more and more I tinkered with it, the more I realized that I actually know more than I thought I did. I spent some time perusing the Mozilla docs and it was fun. It was neat to see those things again.

The first attempt was just a simple live preview underneath the reply textarea.

The next step

It worked. That’s what mattered to me for the time being. Suddenly, I had to think about how it would triggered and what it could and should look like. I’m fine making CSS changes but I only wanted this to work with JavaScript.

A tab? But how to style it?

A button? This seemed a little better for the UI.

So, I went with the button method. I tried to see how other elements also worked and they fared well.

Now, the only other thing I may adjust is the behavior of the other buttons when the preview is enabled but for now I’m happy with it.

Another random thing

I did create one other thing but I think that was more of a last week thing. It’s something I’m using only on GitHub notifications pages but it works for me right now. Most of that can be found in the repo I made. I do have to update it a little because there are a few things I know I missed.

One thing I didn’t take into account was for when you are on the singular project notifications page there is one other type of notification. I originally began with the mindset of only two.

  • Issue notifications
  • Pull request notifications

Each one of those gets one and the third one I hadn’t noticed was the

  • Commit notifications

I adjusted things and it works. Though, now I have to update the repo to reflect that change. I’ll try and get it done over the weekend. I had fun breaking the console when I was making it too. Being able to use ES6 was a super welcome change too. 

const handleClick = ({target}) => {
  // query select all that match.
  const notificationList = 
  target.parentElement.parentElement.querySelectorAll(`.${target.selector}`);

  // toggle the display property for them all.
  notificationList.forEach(function(item) {
    item.style.display = item.style.display === 'none' ? '' : 'none';
  });
}

The snippet shows a few things. It doesn’t check for existence of the only because this is done beforehand. What’s currently in the repo is not the above. I had to modify it because I was repeating a little and it made more sense to do it programmatically. Previously I was using an if/else statement block checking for a string match. Not the greatest if more things were added. I don’t want to be adding another to the already big block:

if (target.id.includes('something')) {
  // run code
} else if (target.id.includes('something-else')) {
  // another block
} else {
  // finally!
}

The one thing that did keep me motivated was seeing it work. I do like to build and make these little things but I think I will always fallback to support though. I added a few more replies to my small list of replies over the week as well.

Current count is around four thousand. I think in the next month I want to increase that. Maybe shoot for five. We’ll see, I guess.

Either that or just post a small series on how to better my JavaScript skills

A learning path

Over the last three weeks I shared a few things I read and sort of learned along the way. This week I, again, focused a little more on support but did dive back into learning things again. What was really awesome was a tweet I saw and it felt like I really was meant to see that.

The tweet was by Chris Coyier:


For me, that is fairly true. I picked up CSS first, then HTML before wanting to learn JavaScript. Some of the things clicked instantly and some took longer than others. JavaScript being the one I’m still sort of learning. I say that because I’m finally comfortable enough to really break things on purpose to see what happens.

Now, I did mention I was debating on updating my laptop to Ubuntu 18.04 last time and I did. It’s been good. There are a few things I’m still learning about Ubuntu but overall it has been good that I only had to restart it once after an update. If it was my desktop ( running Windows ) I would most likely still be updating random things.It’s been really irking me that I can’t remove some apps without resorting to the command line. This was after a reset.

I guess enough griping really, I’m lucky I have that desktop. I built it a long time ago and it is still running. I just need to find the time and dust it out. It has been quite some time since I last did that anyway.

Okay, back on track.

The cool part is that things really are starting to make sense to me when it comes to working with ReactJS, Redux, and React Router. I had encountered an issue where the page would not render the content properly and would show the error message instead. I was using a try...catchstatement in order to display things. It looked a little like:

try {
  render(
    <Provider store={store}>
      <SitePage/>
    </Provider>,
    elem
  );
} catch(error) {
  elem.innerHTML = "Welp, something went wrong...";
}

I kept only seeing the “Welp” message. This morning I found out it was because I was loading the Provider from the incorrect module. It was only react that I had typed instead of react-redux. I felt a little silly but I laughed at it.

I’ve been trying to laugh more about the little things like that instead of worrying or getting mad.

I’ve tried watching a few videos as well and they have helped some but I think that writing out the code helped more because it has helped with the muscle memory. My biggest issue right now is that I feel very everywhere. I can’t seem to focus on one window at a time. It’s only when I am reading that I can truly sit down and keep that focus going for more than five minutes.

As for the things I read, I did compile a small list of just a few things that did help me a bit more. I tried to start it at the beginning of the week and updated when I actually remembered to do it.

Things I read:

Slow week

This week I focused more on the free support forums. This was in part because I took a small break from reading about Docker Compose and setting up my local environment on Ubuntu. It was cool to see the environment get built with a simple command. I think the biggest hurdle I encountered was I couldn’t find an article that goes into detail how the docker-compose file sort of works.

Many just gave a sample that works, that’s great, but I would like to know what it actually does. For example, what the markup actually means and their subtle differences. The volumes is a good example of that. Now, I don’t know why wordpress:/var/www/html would not work but "wordpress:/var/www/html" would is beyond me.

So it was nice to get away from troubleshooting my own issues. It’s been too long since I last did that.

It felt good. It felt really good.

There is one topic that is still on my mind because it dealt with editing JavaScript code. It was for one of those quote of the day widgets. The difference was where those quotes were stored. It was inside of a text file uploaded to the site. I guess I could see some potential good but personally I would opt for storing those in the database.

What was cool was that it was vanilla JavaScript and not jQuery. I was able to use:

var elems = document.getElementsByClassName('usr-quote');
for (var i=0; i < elems.length; i++) {
elems[i].appendChild(document.createTextNode(txt[(var2-var1)%txt.length])); };

Decent. Some of that was already there but I adjusted it a little. The big issue is that inside of that script they add a call when the DOM is loaded. This would be fine but it is the same code with no checks to make sure those functions or variables do not already exist. Essentially using the global scope for it all.

[Enter silent scream here]

As for my developer brain, I have not made much progress. I need to gather up some more links so I can read more. I see some on my Twitter timeline from time to time but I forget to either bookmark them or read them. I need to get better at that.

All I know is that I’m going to be debating on updating my laptop to use Bionic Beaver for the next week or two.

Baby steps

For the last year, I’ve learned some JavaScript and a few more things about PHP. That’s great. The only thing is that I don’t feel like I have expanded that skill set just yet. I think a lot of that is because I never really had a personal project to test things out.

I began building my random theme – I think – last week. Getting things to build was pretty cool and a little frustrating only because I didn’t really think about what I was needing. And by that I mean, I didn’t think about what tools are required.

The simplest was knowing about the command line. Yes, it sounds strange but that is a great thing to know even if it means just basic things like getting the current folder you are in or even knowing what files are in the folder helps a ton.

Things needed

The things I knew that I needed or at least I thought I would need were:

  • React
  • ReactDOM
  • Babel
  • Webpack
  • NodeJS

Super simple, right?

I thought so. What makes this a little different is that I have three operating systems now. Windows 10, OSX, and Ubuntu. A desktop and two laptops, respectively. On my desktop and OSX I use VVV, but on Ubuntu, I chose to scrap that and use Docker. A bit more to the point Docker Compose.

I began reading about how it works and what is used so I can setup a local environment for developing WordPress things. In my case a theme. What’s cool is that they have a quick guide for WordPress and there are a few others who have their own setup process as well.

Yes, I did spend quite a bit of time looking at many docker-compose files to get a better idea of how it all works. I’ll have to share my experience next week as I experiment a little more and get a better understanding of it. The reason is because I know on Twitter I came across this:

Quite some time ago but this was something I still wanted to look at much closer so that others could benefit as well. In particular those who want to contribute to the project and could already be using Docker.

Tying things together

It does seem like I went on a bit of a tangent but bare with me there is a reason for that. You see, on my Ubuntu laptop, I don’t currently have a local environment setup so that means I can’t exactly work on my theme if I even tried.

Yet.

This is the reason I said, the things I thought I would need because I obviously forgot to include my local environment. I know some of you are saying just do it on a live site! I wish I could but I really don’t want to deal with maintaining things or dealing with configurations and whatnots.

Yet, I sort of am dealing with configuration because Docker Compose is a neat little tool to get up and running. I think my favorite part is just learning why things break.

Minor weekly highlights

With that being said, there are a few things that helped me out this week when it came to reading. A few articles and a few repos that helped shed some light on how things work when using Docker Compose. The last one is actually a repo by Justin Tadlock and it’s a modified version from a tutorial I wrote a long time ago:

Hopefully this coming week I learn more and can share this experience along the way.

Weekly updates again

Okay, I haven’t done weekly updates in quite some time. I was somewhat consistent for a while but then it just kind of stopped for some time. Things happen, right?

This time around, I am thinking of doing my updates on Friday nights. This way I can at least be somewhat consistent and plan ahead for the end of the week.

I think the biggest reason I want to do this is to see my progress but also record it. Having it on this site makes perfect sense because there are a few things I want to do.

  • Understand ReactJS better
  • Build a ReactJS theme, plugin, and or admin page
  • Draw more
  • Use Illustrator more
  • Read more
  • Blog more

Almost sounds like a lot but I know I’m capable of doing those things.

Today I began working on a random theme that will use ReactJS and ran into a few hurdles getting the JavaScript to compile properly. I was lucky to read this article to get a better understanding on how to get things working.

It was cool to see the Component I had created get rendered on the browser, granted it was a super simple thing but still cool nonetheless. I think the one thing I would like to focus on is getting a decent navigation going or even getting archives to show right. I know I saw an issue with both not being able to fully play nice with WordPress.

All I know is that I’m looking forward to breaking my site along the way.

Yes, I’ll be trying to use the theme on this site once it gets more fine-tuned.

Learning Git

How do I start start this off? I’ve been using Git for several years. I actually had to look to see when I opened my GitHub account. I opened the account in 2012 just a few months after I began contributing to the WordPress forums.

When I first began using WordPress I had no prior experience with any version control system. I honestly don’t remember who it was that got me to think about using one. I just remember it was a WordCamp talk I saw about theme development. If I ever recall, I’ll update this to reflect that.

There are still things I’m not familiar with but I did realize the other day that I do know quite a bit. It does amaze me when I do see how much I have learned over the years.

The reason I say this is because for the last several days I’ve been sort of contemplating on making a few slides, My local WordPress meetup is filled with people who are of varying degrees of knowledge when it comes to not only WordPress but also development. I know there are some who would love to learn a bit more and expand their skill set. It’s also because I know that if I do a talk it will force me to read more about how to use Git and other tools as well.

For me, learning Git is an ongoing thing. Every other day I tend to look up new things. The most recent one was how to create a diff file from a stash. Yeah, I know I just lost a few people with that one but it is something that was pretty cool to do, There was a reason for it. Now I can’t fully recall what that reason was.

I am still debating on whether or not I’ll make a few slides and a video to go along with it or just make a random post. Or both.

I guess I’ll just have to wait and see how I really feel about it.

Random issues

The other day I encountered something that was fun to solve. It was also a little frustrating because I couldn’t completely replicate on my local install. It had to do with using a mobile device and using a WebView. I am not an app developer but I do want to learn about that process. Maybe one day I’ll explore a little more on how to build an app.

It dealt with JavaScript a little bit. It was great because I was able to apply things I had learned on troubleshooting some Facebook related issues. The harder part was actually getting it to work on other apps as well. The issue was a browser check. It may sound simple for some and a pain for others. This was because in-app browsers can be a little different based on device. Android is not exactly the same as iOS, and they are not the same as Windows. Yes, there are people who actually use those type of phones.

The issue was only on iOS devices. I naturally searched for something that would help me find my answer. In our company repo, I saw a few commits that somewhat helped me figure out where things were going wrong. There was a comment that also helped me solve this. It was fixed and things worked again.

Or so I thought.

You see the fix worked but then I had introduced a small issue. It was adding a class to the body that should not have been. So, I dug a little deeper and realized what I had done wrong.

What’s cool is that I already knew about this but had forgotten to actually do this. I wasn’t checking if a property existed. You see, when I had submitted my fix I was simply using something like:

 if (!window.object.property) { // do things here } 

While that is great, it did not take into account if that property didn’t exist. What I really should have done was:

 if ("property" in window.object.property === false) { // do things here } 

Such a simple mistake to make. It happens.

I learned from it.

The object I was using was the navigator object. The property I was trying to check for was the standalone property. This is a property that only iOS devices have so when it was running the first snippet it was giving an undefined but because it was using the ! it was really saying it was trueso it was actually executing the code inside of that when it should not have.

My Vim experiment

For the last couple of weeks – I lost track honestly – I have been using Vim as my editor. I do this when I’m not working. I don’t want it get in the way. So, I’ve spent quite a bit of time reading the docs. Like reading as much of the docs as I possibly can without going insane.

It’s been really neat to see and learn about how much can actually be done within Vim. There are, of course, some limits to what can be done – then again that’s pretty true for just about any text editor.

The thing to keep in mind is that I really don’t have a lot of experience with many text editors. Over the years I have looked at, and used, NotePad++, Atom, Sublime Text, Coda, Brackets, and dare I say DreamWeaver. For a long time I did consider trying to use GoLive but never got a chance to really see how that all worked. I did try PHPStorm but never did fully get behind using it since I had to really think about having to learn new keyboard shortcuts

Yeah, I am not a fan of that.

That is only because I am a bit of a creature of habit when it comes to my development experience. It sounds strange to say that. Okay, writing it out but you get the idea.

I’ve come to like editing files on Vim because it makes me think a little different when it comes to editing and typing. It’s not always standard, control and z, control this or that, or any random combination of clacking that some of us are used to.One thing that did get my attention was actually repeating things. For example, if I add seven spaces to a line, typically I would select, copy then paste and keep pasting until I wanted. In vim I can type out far less because using the.makes it so much faster to repeat the last action.

I’m sure there are a lot of other things I still haven’t learned but I’m looking forward to reading and doing many of them. I mean I did manage to get NerdTree working on my first try so that has to say something right?

Weekend updates

I know it has been quite some time since I posted anything on here and I'm hoping to change that. The last time I posted anything was back in June and that was rather short lived as well. With Gutenberg getting frequent updates this could be a fun little thing and experiment for my weekends.

I say that only because the editor itself does have a lot of potential behind it but needs to get a little more steam from others. What I will be doing is posting an update every Sunday on how not only my week went but what I hope to accomplish for the week.

There have been several changes to my life and the biggest one is I am now working at Elegant Themes as a Junior Developer. The even more amazing thing is I'll be working, tinkering, and learning more about ReactJS since that is what the visual builder uses.

The biggest thing I am looking forward to is setting mini-goals for myself and hopefully helping in making the Gutenberg experience much better.

The biggest challenge could actually be keeping the posts to development related things.