Almost a year of experience working remotely

It has been almost a year since I joined 10up as a web engineer.

I think I have a better understanding of what is like to work for an employer and what it takes to succeed working remotely for one of the best companies in the WordPress industry.

Previously, I only worked for myself and it was all fun as I was only in charge of myself and no one else, so this was a big shift for me. However, 10up has been a very comprehensive company, taking into account I had 0 experience prior to being hired, I really appreciate the work they made to finding a place where I could fit and still provide value to the company.

Since then, I think my perspective and habits have changed as well.

What I enjoy the most about working for 10up is the sense of being a team as a whole, and not just an individual anymore. When I was by myself, it was all on me and finding solutions was my duty if i wanted to survive. However, on 10up now I care that everyone are up to date with their tasks, and they are also very concerned about me having everything I need to complete them.

Many many times, coworkers have stopped what they are doing to answer a question that may be obvious or to sync on a zoom call and I really appreciate that, as such, I feel like I’m in debt with the team as a whole and try to provide the most value I can whenever possible

So that has been my experience with remote work, I hope this inspires people to make the leap and find good team members, as in my experience, working remotely has been a great way to find likeminded people who you can grow with.

 

 

 

Losing to learn: Getting your code reviewed to lvl up

One of the things that had made me advance when learning WordPress development so fast, is that I have been able to take the feedback and the lessons other have made to me.

I bumped into a friend on the bus the other day, and it’s funny how both of us identified a tendency a lot of people have to hide from being critiqued. He was telling me how his colleges often times will try to hide their code to prevent getting feedback. I think this tendency about hiding and not presenting yourself as who you truly are hinders your potential and your performance, and it is very common amongst people.

In the past months, I’ve been submitting a lot of PR’s to different GitHub projects, and I’ve been learning a lot from doing that! Solving a problem feels really cool and you learn a lot by diving into new problems and figuring out! But the greatest benefit so far is getting your code reviewed by other people.

Because it’s not only about writing a solution for a problem, it’s about writing the best solution that you can. And how can you have greater chances of getting it right? … well, by getting your ideas challenged and polished through the back and forth between you and your more experienced reviewer.

I’ve found code reviewing the greatest and easiest way to lvl up fast when learning how to code. It’s so powerful if you just can leave out the ego and recognize your faults.

For some, getting their ideas challenged and recognizing they might not be the most optimal equals losing a battle. For me, it is the opportunity to acquire knowledge fast, from the best, and ready to be reformulated into new cool ideas.

As Newton said: I stand in the shoulders of giants.

How to use D3 in your WordPress Plugins (without a plugin)

Hey guys it’s Oscar,

Recently, I’ve been obsessively interested in D3. It is a super COOL JavaScript library and it gave me a whole bunch of ideas of how could I implement it on my WordPress Plugins.

The difference of watching at a lively representation of visual data vs  looking at a bunch of dry numbers is HUGE, especially when it comes to taking quick decisions and, for me, one of the most important aspects commonly underestimated: the impact it creates in a person emotionally.

The impact visuals create into people’s minds is one of the things why i really liked D3.  Imagine how different you feel when you watch, say for example at some numerical data that tracks how many posts have you been writing each month. It is cool right? looking at data is always insightful.

Now imagine how awesome it would be when the data is represented into graphs, and those graphs move with transitions and other cool stuff, and instead of saying: 12 post last month vs 20 this one, cool … you just look at 2 bars and one is way BIGGER than the other.

The intensities the same data creates with different representations are different.

The BUY IN, the motivation and the emotions it creates visualizing data like that, is what made me fall in love with D3 capabilities.

So enough of telling you how awesome is D3. Let’s go to what you are probably here in:

How do you use D3 in your own WordPress Plugins?

Unfortunately, not many information is out there with regards of using D3 in Plugins, so i dived in and tried to create a simple chart to get me started with my D3 journey.

And I’m going to tell you how you do it today.

Some assumptions i’ve made about you:

  • I’m assuming you already know how to use D3 at a basic level.
  • I’m assuming you already know how to build WordPress Plugins.
  • I’m assuming you already know how to use OOP to build WordPress Plugins.

With that in mind, let’s get started.

For this example, i’ll add some new functionality to an already existing plugin i previously made: wp-dexter. You can find the source here: https://github.com/oscarssanchez/wp-dexter

I highly recommend you try it out with something you’ve already built or something you are already building and it’s in an advanced state. You want to focus as much as you can learning D3, not worrying about how to do a bunch of other things.

First step: Enqueuing the script files.

  • Create 1 new Js file (the one that will contain your scripts)
  • Get D3 CDN
  • Make a method that will enqueue both files

Mine Looks like this:

 

/**Enqueues our scripts **/
public function add_scripts() { 
wp_enqueue_script( 'd3-scripts', 'https://d3js.org/d3.v5.min.js');
wp_enqueue_script( 'dexter-scripts', plugins_url( '../js/dexter-scripts.js', __FILE__ ), array( 'jquery'), '', true ); 
} 

After that, you want to use an action to hook your files in the output HTML:


/** Constructor**/
public function __construct() {
   add_action( 'admin_menu', array( $this, 'admin_menus' ) );
   add_action( 'admin_head', array( $this, 'add_styles' ) );
   add_action( 'admin_enqueue_scripts', array( $this, 'add_scripts' ) );
}

Second Step: Send some data from WordPress to be available as a JavaScript variable

Ok, so after enqueuing our sript files, we will have to add something else to our add_scripts method, and that is the addition of wp_localize script(); which you can check out here: https://codex.wordpress.org/Function_Reference/wp_localize_script

For our purposes, we will use the parameters of this function in this manner:

wp_localize script( 'name_of_your_js_file', 'name_of_the_variable_t_obe_used', 'the_variable_data_in_php')

For this, i’ve  already created a  method called get_pokemon_json_data();


public static function get_pokemon_json_data() {
 $pokemon_data = json_encode( self::get_pokemon_data() );
 return $pokemon_data;
}

Since D3 works well with JavaScript objects, sending JSON data makes sense here.

So our add_scripts method would look like this:

/**
 * Enqueues JavaScript files
 */
public function add_scripts() {
 wp_enqueue_script( 'd3-scripts', 'https://d3js.org/d3.v5.min.js');
 wp_enqueue_script( 'dexter-scripts', plugins_url( '../js/dexter-scripts.js', __FILE__ ), array( 'jquery'), '', true );
 wp_localize_script( 'dexter-scripts', 'pokemon_stats', Dexter_api::get_pokemon_json_data() );
 }

Third Step: Access the data in your JavaScript file

Reload your plugin page and check out the browser’s console. You should be able to see your variable displaying.

Since the data is in JSON string format, we have to convert the data to a JavaScript object. We will have to use

var pokestats = JSON.parse(pokemon_stats);

to convert it to a Js Object.

Once we have that, we are good to go to start some hacking with D3!

Fourth Step: Use your data with D3

Since again, i’m not asumming you have some basic knowledge about D3, I will not cover step by step the code itself,  but we will explain it a little bit:

jQuery(document).ready( function() {
 var pokestats = JSON.parse(pokemon_stats);

 var width = 500;
 var barHeight = 20;

 var xScale = d3.scaleLinear()
 .domain([0, 255])
 .range([0, width]);

 var pokechart = d3.select(".pokestats")
 .attr("width", width)
 .attr("height", barHeight * pokestats.stats.length);

 var pokebar = pokechart.selectAll("g")
 .data(pokestats.stats)
 .enter()
 .append("g")
 .attr("transform", function(d, i) { return "translate(0," + i * barHeight + ")"; });

 pokebar.append("rect")
 .attr("width", function(d) { return xScale(d.base_stat) })
 .attr("height", barHeight - 4);

 pokebar.append("text")
 .attr("x", 3 )
 .attr("y", barHeight / 2)
 .attr("dy", ".35em")
 .text(function(d) { return d.stat.name + ": " + d.base_stat; });
});

So what we did here was first:

1.- Wrap everything inside an event listener.

2.- Set our dimensions

3.- Set our scale with d3.scaleLinear (in this case, the max base stat a pokemon can have is 255)

4.- Assign our dimensions to our chart class.

5.- Append some “g” elements and transform each of them to match our rect elements.

6.- Append our “rect” elements. In this case, i will be using the “stats” data from my variable to determine the width of each bar. Thanks to d3, we can access every element that is meaningful to us automatically. In this base, i want to know the number of the base stat, so i can access it inside a function with d.base_stat.

7.- Finally I want to append some text that says how much of each stat a pokemon has (and what stat it is). We can access that data with d.base_stat and d.stat.name inside a function.

The end result would be something like this: 

Cool isn’t it?

Conclusion.

Using D3 in conjunct with WordPress is not that hard. It is a fairly easy and straight thing to do. However, what i’ve been thinking lately is that the hard work you will have to put with D3 and WordPress will come when you want to access specific data or construct specific sets of data to use with D3. In this example we had a good source of data available to us. We didn’t have to build the data itself. That’s why this was easy.

However, if you want to build things with D3 with some custom that, well, that’s where you will have to put some neurons in.

Until next time 😉

How to contribute to Open Source NOW – Coding a solution.

In the previous post ( see: How to contribute to Open Source NOW – Finding a good issue to Fix ) we went through the process of finding our first issue to start contributing to open source.

In this article, we will continue the process and write the solution.

More than coding the solution to the problem we chose, we will outline a general approach to solve an issue once you’ve find it. I find more valuable to show the process that goes through my mind when dealing with issues, rather than the technical stuff of coding the solution.

So let’s start!

As you may remember, we are going to solve this issue:


 

So … how are we actually going to approach it?

The first thing we have to know whenever facing a new issue is to get what the issue is about.

We see that this particular problem has some relevant words, the first one being “admin notice” and the second one “persistent object caching is not present”.

To be fair, the problem is pretty self explanatory, but we have to always have a general understanding of what the problem is about, so we can come up with a good solution to it.

In our case, our solution would be to display an admin notice in the WordPress Admin Area of the AMP plugin if “persistent object caching” is not present.

This particular problem has an easy part and an “unknown” or hard one .

The easy part of this problem is that the logic behind the solution has been given to us already ( Display an admin notice, if “something else” ).

The hard problem (for most of us at least) is: what the hell is “persistent object caching” and how does it work within WordPress?

This is something you will have to deal constantly when solving github tickets: you will know something about the issue, but you will not know anything about some other things.

The obvious answer to this challenge would be to google what you do not know and become an expert at the current topic you are fixing.

That, however, would be a major issue.

Why? you may ask.

Because, let’s say you spend 3 weeks learning about persistent object caching. You have become the dungeon persistent master and an authority there. And, that’s cool, but that expertise is not really needed to solve this (and most problems).

The urge to go out and learn about everything could be hard to stop, but i highly recommend you to take a breath and analyze your problems better, mainly ask yourself this question:

How can i solve this problem in the least time possible?

Fortunately, our real life example is great to show this.

Yes, we could study about persistent object caching for weeks, but what do we really need to know? if persistent object caching is present. 

So, with that in mind, we know that we don’t have to become proficient at the whole topic of caching in WordPress, but rather, we have to become proficient at knowing how does persistent object caching works in WordPress and mainly: how can we check if it is turned on? 

We have a pretty good question to start googling to, so let’s go and search a little:

We have a pretty good result in stack, so let’s go and see if it answers our question:

Bingo! We now know what triggers persistent object caching on and off. With that in mind, we will start coding our solution in the next post.

Summary

The key distinctions from this article are:

1.- Get a general understanding about what the problem is about

2.- Define what you do know as well as what you do not know about the problem.

3.- Define the minimum knowledge required for you to solve the problem by asking the question: how can i solve this problem in the least time possible?

4.– Google those minimum requirements and start building a solution from there.

5.- Try to minimize as learning stuff you do not need to know as much as you can.

On our next post, we will continue solving this problem.

Until next time and happy coding  😉

 

How to contribute to Open Source NOW – Finding a good issue to Fix

You may want it.

You may dream about it.

You have been reading everywhere that open source is the best, that contributing makes software better, that google does open source and Tux rocks when it is shared.

Somehow … you have been always wondering: How the hell do i contribute to open source?

How could i get my name on that v0.7 alpha release?

How could i be a programmer?

This was something i was having trouble with myself.

Since i was 12 i always heard wonders about open source. Now with 25, i found myself with 0 contributions to open source.

But that changed.

And when you finish this post, it will likely change for you too.

Let’s go straight to the point. You want to do this, you crave to do this. So, how do you start doing it?

Unfortunately, there are not many resources that describe in detail the whole process of contributing to open source, so let’s start by defining them in these steps:

1.- Find a good issue to fix

2.- Code solution

3.- Make a Pull Request and socialize with the repo’s people. 

And let’s go

1.- Find a good issue to fix

This is by far the greatest problem i think everyone has.

You think: Ok, i would like to contrbute … but, is there anything i could help out with?

There is, bro (or sis!).

There is.

It took me a while to figure out a good process to look out for thing i could get my hands on and start helping out with, so i’m going to share it in clear detail now.

The process goes like this:

a) Find a niche you would like to contribute.

As aspiring contributers, we would LOVE and idealize contributing to every repo out there. What about the dolphin emulator? Oh! Look! That is the brand new google project everyone has been talking about, i would love to contribute there! …wai … wait! is that the WordPress Core ? oh man i would love to hack it!

This is indeed, a terrible mistake. A huge one actually.

What you should do instead is: find a subject you really like to and go from there. So for example, if you love jQuery, you should stick to solving jQuery related issues, or maybe you like security, then you should go see what’s up with s WordPress security plugins.

It is tempting to let the idea of contrbuting to everywhere run into your head, but soon you will realize, that you are doing anything but contributing.

b) Find reputable companies/people that have open repos.

It is better to contribute to a plugin that is used by 100,000 people, than one that is used by 100.

Also, by looking at professional companies, you almost guarantee that your contribution and code legacy will last long enough, as plugins developed by huge companies are constantly getting updates.

c) Look through the issue tab on github and grab something that is fine for current your level.

We would like to fix that 5 year bug on our first contributions, but let’s be honest: it’s probably not happening.

Being honest with yourself is very hard when it comes to finding a good issue, but the more you stick to your self-knowing, the more you will self-develop. Don’t feel bad if the only thing you can do at the moment is add some PHP Doc blocks at the time. This will fire up your motivation to start learning new things and you will catch to other people’s level in no time.

In general, look briefly at an issue and if you don’t understand a heck of what’s the issue about, you should probably look out something else.

Real life Example:

Let’s go and follow the process described above. I highly suggest you go and do the same so you really learn how contributing is done.

a) Defining our niche.

Since i’ve been coding mostly with PHP and WordPress, it makes sense that i choose WordPress as my coding niche.

b) Finding good companies.

Ok, so how do you find companies that make good things for everybody?

Easy task!

For example: you could try digging the plugin section of WordPress.

So let’s see popular companies that make cool plugins:

Right off the bat, a name poped in.

And it’s no other than the company who develops most of WordPress : Automattic.

Would be pretty cool to contribute to one of their repos, wouldn’t it?

So now that we have a cool company we would like to contribute, let’s dive in into Automattics github to see what are they up to lately:

It seems amp-wp and wp-calypso have been getting a lot of love lately!

c) Looking through repos for the best match for us to contribute

After checking for a while the issues both repos have, i’ve found something i  decided i’ts withing my scope of fixing and that i would actually like:

 

We have our perfect match here: something i can fix and that also will teach me through.

So far, we have covered the first part of the process. We went through the process of finding where our help could be used and we selected an issue to work on. In the upcoming articles, we are going to talk about the actual coding and doing your first Pull Request so you can fully wear the contributor badge on your belt.

Until next time 😉

Setting up your wp-web development environment on Ubuntu – PART 1

 

Hey guys,

When i switched from Windows to Ubuntu, it took me a while at first to setup my WordPress development environment.

It is common that most people are using MACs out there, specially when it comes to developing with WordPress VIP standards.

However, for us who can’t afford a MAC right now, but want to develop with the best of the best tools out there, there are not many tutorials out there that cover top to bottom everything you will need to start developing with WordPress VIP standards on Linux.

So this video series will help you do that, we will cover e-v-e-r-y-t-h-i-n-g 

That’s right, everything you need to install to start coding.

For the first installment, we will start installing git, as we are going to use it extensively.

In the next video, we are going to install Vagrant, VirtualBox and other stuff required.

Don’t forget to subscribe to keep up with the updates!

Enjoy the video

Do you have feedback or have specific questions? Leave a comment below!

wp-dexter Released!

Hello World!

I’m proudly to announce that wp-dexter my first working wordpress plugin has been released. This is my first ever release plugin … and it has been a lot of work to code it!

So, what’s in for you?

With wp-dexter, you should be able to display your favorite pokemon from any of the current generations in your WordPress Website!

Incredible if you are a pokeFan!

You can download the source here:

https://github.com/oscarssanchez/wp-dexter