It’s OK to suck

I’m going to hazard a guess here and say: most people know that learning a musical instrument is hard.

There are exceptions to every rule, and like Usain Bolt didn’t need to learn to run super fast, I’m sure a percentage of the human race is born with a musical acuity that for the vast majority of us, it would take years of constant practice to come close to matching.

But these are the exceptions. The rare, rare… rare exceptions. That’s why we know these people by name. Mozart. Beethoven. Williams (as in John, Star Wars / Jurassic Park / Harry Potter / many others).

However, no matter how great your raw talent, you can always improve.

And more importantly, most of us started off by sucking. Like, seriously, the massive, massive majority of programmers out there in regular day jobs started off as total hackers.

This. Is. Hard.

The first time I put on ice skates, I sucked. I fell, I hurt myself, things were embarrassing.

The first time I went snowboarding, I sucked. I fell, I hurt myself, things were so embarrassing that at one point I slid sideways straight into the wall (Chill Factore – Manchester, btw) at such speed that I had to receive medical attention. Top lols for everyone other than me.

The first time I wrote code, I sucked. The earliest memory I have of programming was writing a game – which was really a set of conditionals – with terrible dialog, and no plot.

There’s only ever one way to improve. You soldier on.

The only difference between you right now, and the vast majority of those around you is persistent effort.

What you need is small, crystal clear, and very importantly: achievable goals.

A goal of “learning Symfony” is not a goal. It is very fluffy. How do you know when you’ve learned Symfony? I mean, it changes all the time. Seriously, check out the blog – http://symfony.com/blog/ – and lookout for articles starting “New in Symfony”.

When I put on ice skates for the first time, a clearly defined goal was to complete one circuit of the rink.

When I strapped into a snowboard for the first time, I wanted to get from the top to bottom, without falling over – and it took me long enough to do this just standing sideways the whole time.

Programming?

It’s just so broad.

Assuming your goal is currently “to learn Symfony!”, but when you sit down at your computer to learn, you draw a blank, then I want to suggest something to you. Try this course:

https://codereviewvideos.com/course/beginner-friendly-hands-on-symfony-3-tutorial

Now. Much like my hilarious snowboarding adventures, there is an important take away here:

When you get to the bottom of the hill for the first time, you are not done. You are just done getting started.

At the end of this course you won’t be an expert on Symfony. But you will have an idea of what it’s like to work with Symfony.

I actually encourage you to try Laravel at this point. And maybe even something totally different, like Ruby on Rails, or Django Web Framework.

This is what I did. Add in Yii, Cake, and ZF2.

I sucked at each one.

The one I settled on sucking less at was Symfony 🙂

To make my life easier, I stuck to a very simple example. A blog.

It’s essentially CRUD, but with the added advantage that most frameworks use something similar as their example in their official tutorials (if they have them), or the various beginner friendly community sites (if they don’t).

Along the way, I learned a ton. And with a known outcome, I finished every project – often with code just as embarrassing as any snow-based face plant.

But that’s fine. It’s ok to suck.

Would you watch a series on building a blog? I’d love to hear back from you on this.

Video Update

This week saw three new videos added to the site:

https://codereviewvideos.com/course/react-redux-and-redux-saga-with-symfony-3/video/user-profile-page-part-3

Firstly we finished up our User Profile journey. In this video we implemented the Redux Reducer to correctly update the state of our application, ensuring our user’s id, username, and email are all stored and readily available.

In doing this we can now dynamically update our Profile Page, displaying real data as opposed to the hardcoded / faked data we had been using.

By now we have covered the standard ‘template’ we need to add in any further pages to our application. Firstly we define our component. This component accepts data as props. These props need to come from somewhere – often as a result of some API call.

To manage this API call we use a ‘container’. This container is connected to our Redux Store – in other words, our application’s state. This container is still a component. Aside from rendering our component, it handles initiating the request for our data.

This is done by dispatching an action describing the process we want to take place, such as requesting our user’s profile.

This action is ‘watched’ for by a Saga. This saga manages the process of actually calling the API, and handling the outcome – successful or not.

If successful, we can then send the returned data to our Reducer. The reducers job is to update our application’s state.

When our application’s state is updated, our connected container is able to update the component it renders with the new props, taken from our application’s state.

Pretty much any page we add to our application will follow this process. You can repeat this for the specifics of your own application as needed.

https://codereviewvideos.com/course/react-redux-and-redux-saga-with-symfony-3/video/change-password-part-1

One such example of the above process is in enabling our logged in user to change his / her password.

There’s a bunch of hidden gotchas in this process though.

Firstly, we are going to be working with forms. In our project, that means working with Redux Form. We’ve already covered Redux Form in some detail during the implementation of the Login process.

When changing our password, however, we now want to get a little more user friendly.

Sure, if everything goes to plan, we have a fairly easy journey. We might want to show our user an indication that they clicked the button (which in itself, holds a gotcha), and aside from that, if they successfully change their password, we might want to show a Toast / pop up notification.

When things go wrong though, life isn’t quite so easy.

Firstly, we need to figure out how to tell Redux Form that one, or multiple fields have errors.

Secondly, we need to translate the JSON that our Symfony 3 API returns into a format that doesn’t cause us headaches.

It would also be swell if this all looked quite stylish.

By the end of this video we will have laid the foundations for this process.

https://codereviewvideos.com/course/react-redux-and-redux-saga-with-symfony-3/video/change-password-part-2

I just mentioned that changing the password button text to indicate that a ‘change password’ request was in progress contained a ‘gotcha’. In this video we will immediately address this issue.

To give the game away somewhat, this problem is around using part of the state we created when we made Request Tracking more robust (https://codereviewvideos.com/course/react-redux-and-redux-saga-with-symfony-3/video/more-robust-request-tracking).

The issue here is that we have a field inside our state that indicates – generically – if there is a request in progress.

This is fine, depending on the complexity of our page. For example, when used on the login screen, we only ever have one request – the user clicked login.

However, on our profile page, we ask our API for the user’s profile when we load the profile page.

If we naively rely on this generic ‘is a request in progress’ field then our ‘change password’ button is going to think it’s submitting whenever we load the page. Queue user confusion.

Aside from fixing this bug, we also cover how we might display toast notifications to our users on both success and failure. If this is something you might be interested in adding to your React application, I have covered this in a previous blog post (https://codereviewvideos.com/blog/notifications-react-and-redux/).

There’s still a number of videos to go in this series, but next week we will take a break and switch over to the workflow component series (https://codereviewvideos.com/course/symfony-workflow-component-tutorial). There’s a ton of stuff to cover in this series, some of which is currently undocumented over at Symfony.com. This is one of my favourite features to be added to Symfony, and is so broadly useful that once you’ve seen it in action, you’re sure to immediately have a bunch of ways in mind to start using it.

Until next week, take care and happy coding,

Chris

What’s In Your Stack?

I’m always curious as to what developers are using in their stacks.

Right now my preferred stack consists of Symfony 3 as a back end / API with a composer.json somewhat similar to:

https://github.com/codereviewvideos/fos-rest-and-user-bundle-integration/blob/master/composer.json#L20

I’ve largely bumped to Symfony 3.2, but the combination of bundles I use seems to remain fairly consistent. Actually I just noticed that the Faker Bundle should be a dev dependency there – my mistake.

I occasionally flirt with other languages / frameworks, but when I need to get things done, I default to Symfony 3 & PHP 7.

Things are somewhat different on the front end.

For the longest time I found JavaScript incredibly confusing and scary. It felt very raw, and easy to make a mess. I’m sure I’m not alone in experiencing the joys of 5000 line procedural JQuery scripts – the kind that crash WebStorm’s code inspection on opening (true story).

Then Angular 1 came along. I’m likely viewing the past through a transcluded lense provider (ho ho, that’s an attempt at a joke btw), but Angular 1 seemed to explode across enterprises almost overnight. The terminology put me off (as previously indicated – transclusion etc), but with so many companies using it, it was hard to ignore.

Angular 1 now seems to be in the process of being replaced. By what? Well, it depends on who you ask.

I’m favouring React, as you might have guessed from the recent video content. It works for me.

In between me settling on React, and actually feeling like I could be productive with it, Vue emerged.

Likely there’s 100+ others I haven’t even heard of, let alone intentionally ignored.

But React is just a view library. Around this you have to build your own stack. And a quick look at the jobs boards will tell you, almost every stack is different. React, and / or React Native? Redux or Mobx? Jest, Ava, Tape, Jasmine, or Mocha? Decided on Redux – then Sagas or Thunks?

Ultimately I’m relatively happy with my current choices (React, Redux, Redux Saga, Jest, btw) but having just tried a small side project with MobX, I’m eager to try it some more.

So I’m curious: what are you using in your current stack, and more interestingly, which parts of your stack do you enjoy, and which do you find painful? Please hit reply and let me know.

This week saw three new videos added to the site:

https://codereviewvideos.com/course/beginners-guide-to-git/video/beginners-guide-to-git-branching

Firstly we covered branching in Git from the perspective of a developer who has never used Git before.

In this video we cover all of my most commonly used commands when working with branches, and then move on to a more real world scenario – handling merge conflicts.

Merge conflicts occur when two (or more) branches contain changes to the same line(s) in the same file(s). There are ways to reduce the chances of a merge request, but at some point you will have to deal with one. It needn’t be scary, and after this video you will have learned how merge conflicts occur, and how to resolve them.

In the past I have recorded some more specific videos for Git (https://codereviewvideos.com/course/git-goodness). If you have a specific topic in mind, I’d be happy to record a video on that subject.

https://codereviewvideos.com/course/react-redux-and-redux-saga-with-symfony-3/video/user-profile-page-part-1

Next up we continue on with our React / Redux / Redux Saga front end to our Symfony 3 API backend.

Throughout this – and the following – video you will see that the process we have already learned whilst implementing login is largely the same for Profiles. It’s also largely the same for pretty much any other screen you need to add. This sounds a little long winded, but hear me out:

The modern front end is just as big a beast as the back end. We’ve got build systems, automated test suites, complex state, authentication, routers, and a whole bunch more.

If you’re anything like me, you end up working on a bunch of projects concurrently. Therefore, you need to be able to switch your focus between multiple different environments with the least amount of friction.

Having a standard workflow – such as component > saga > reducer > repeat – really helps to maintain your sanity.

In this video we cover the component setup, along with adding in some security to ensure only logged in users can visit the profile page.

https://codereviewvideos.com/course/react-redux-and-redux-saga-with-symfony-3/video/user-profile-page-part-2

With our profile page restricted down to only users who are properly logged in, we can make certain assumptions about the application’s state when the user hits the profile page. Namely that they will have a user ID.

Using the user’s ID we can initiate a request for their profile stored in our Symfony 3 API.

However, as we are using Redux Saga, we won’t directly call the API from the component.

Instead, our component will dispatch an action to start the profile request.

We will then create a Saga to watch for these actions. When an action is ‘seen’, we can manage the flow more effectively from a dedicated function. This function will ensure our state is updated to indicate a Request is in progress, then await the outcome of that request, process the successful or failed outcomes, and finally ensure the request is stopped.

It does sound like a lot of work. I can understand why there are those with the opinion that this process is needless verbose. My personal opinion is that this process brings order to larger applications.

Until next week, take care, and happy coding.

Chris

Have You Used Symfony’s Workflow Component?

This week we’ve started two new series – one taking a beginners look at Git, and another covering the awesome Symfony Workflow Component.

The Git series is a member request. I’m always open to doing member requests, so do get in touch if you have a topic in mind.

I’ve wanted to record a series on the Workflow Component since – as best I can remember – at least a couple of months before Christmas. But there were two things stopping me:

  1. Lack of actually having used it 🙂
  2. Lack of understanding where I might use it

It took a determined effort on my part to finally find time to sit down, new up a Symfony project, and get started playing around with it.

In doing this, I took at look at the demo code (more on that below), and tried to work my way backwards, but came unstuck.

Don’t get me wrong, there’s a bunch of interesting and useful things to be learned from doing this, for example the snippet of JavaScript to mark the current ‘place’ on the diagram https://github.com/lyrixx/SFLive-Paris2016-Workflow/blob/89c5a671a765896615af6173ca85cabbf9404a60/app/Resources/views/article/show.html.twig#L51. But this is the overly complex approach.

By starting with a new project and building up my knowledge incrementally, I was able to gather a momentum in learning much faster than I had initially anticipated. Isn’t this so often the case? New things seem scary and difficult when viewed as a whole, but when broken down into chunks and tackled piece by piece, suddenly things don’t seem quite so daunting.

Anyway in doing this I realised I was sitting on the solution to a problem in an app I’ve been working on for over a year now. I had this rather annoying situation whereby my app would run a cron job every minute to figure out if there was anything new to post out to social media. If there was, this would be added to RabbitMQ, which has an army of waiting workers, each designed to do one small task, and then pass on the responsibility downstream.

As part of this, the post could be in various stages – pending, posting, posted, failed, retrying – and I had managed, even in my small scale testing, to have found posts jumping about all over the shop – from pending to posted without ever posting, from pending to retrying without failing… the possibilities were annoying, and the outcome was one of frustration. I shelved my work on the app around August and vowed to return once I found a suitable solution.

In learning about the Workflow Component I was fairly sure I’d found a potential solution. I’m not saying simply adding a workflow definition solved my problems, but in doing so it did stop my entities from transitioning to invalid states. And when these transitions failed, I was able to more easily log out important information, and isolate the root cause of the problem. Actually the root cause turned out to be my lack of understanding of Rabbit MQ, but that’s a different story 🙂

Video Update

This week saw three new videos added to the site:

https://codereviewvideos.com/course/beginners-guide-to-git/video/getting-started-with-git

First up we have an introduction to Git. In this series we cover all my most frequently used commands when working with Git on a day-to-day basis.

I use Git now for every project I do, and have done for at least the last three years. I still have a client who insists on SVN, and by comparison it is nothing but pain, fear, and frustration.

Anyway, I fully appreciate that when initially beginning with Git, it is akin to learning a whole new programming language. The good news is, much like in pretty much any programming language I have ever used, even though there are often 100s (if not 1000s) of commands / functions available, for most tasks you only ever need the same few.

Git is no different.

Sure, there are a bunch of advanced ways to use Git (submodules, anybody?) but mostly it’s just about adding, removing, committing, and pushing.

In this video we cover the most commonly used basics whether working alone, or in a team. In the next video we will cover branches, which whilst incredibly helpful if you’re working alone, become even more powerful – and potentially problematic – when working in a team.

https://codereviewvideos.com/course/symfony-workflow-component-tutorial/video/workflow-component-introduction-demo

Next up is the start of a new series covering Symfony’s Workflow Component.

This is a new component available either:

  • standalone;
  • ready-to-go in Symfony 3.2 onwards;
  • or available as a third party bundle (fduch/workflow-bundle – https://github.com/fduch/workflow-bundle) if you’re still on Symfony 2.

As hinted at earlier, the Workflow Component is all about helping you manage the lifecycle / processes that your objects / entities go through as they pass through your system. Whilst that might sound a little dry / technical, the chances are you have some small, or large part of your existing and future projects that could readily benefit from using this tool.

To begin with we take a look at the rather brilliant Workflow Demo App that was created by Grégoire Pineau for his reveal of the Workflow Component at Symfony Live Paris 2016. In this video we will cover the two examples available – workflows, and state machines – and when and why you may wish to use each.

The Workflow Component brings with it a fantastic visual tool in the form of the Dumper, allowing you to output diagrams which represent the processes you’ve created via your Workflow definitions.

https://codereviewvideos.com/course/symfony-workflow-component-tutorial/video/a-simple-state-machine-example

In the previous video you got to see both workflows and state machines in action.

However, whilst seeing the power of this component is useful, to get your head around how it all fits together is somewhat easier with a more basic example.

There’s loads of interesting things covered in this video – and starting with a new Symfony application you can code along and learn as you. It really is the very best way to inwardly digest this material.

By the end of this video you will have a good understanding of:

  • how and why workflows and state machines differ
  • how workflow definitions are created
  • how to create both places and transitions, and what these terms mean
  • how to customise your marking store, and why you might want too
  • how to create your own workflow diagrams, and a potential bug you might encounter

Honestly I love the Workflow Component, and if you don’t already, hopefully after this series you will too.

Until next week, take care, and happy coding.

Chris

The Lazy Man’s Guide To Symfony Services

Late last year I created an API using Symfony 3 for a personal project, and had the intention of talking to this API via WordPress. Or more specifically, from a custom WordPress plugin. I thoroughly enjoyed building that API. It followed my usual practices of testing with Behat and PHPSpec, and I must have built about 20 or more API implementations now using Symfony 3, so development flew by at a jolly old clip.

Then, this week I had a bit of spare time. Why not, I thought, create the WordPress plugin?

You’re probably expecting a horror story. And if I’d been writing this email at any time before 11am yesterday then you wouldn’t have had one.

Everything was going smoothly. A little too smoothly, considering I have next to no recent experience with WordPress.

All I needed to do was add in a button to the visual editor which, when clicked, would show the user some info in the form of three drop down boxes.

It’s the classic wizard-y type thing: what you select in drop down #1 should filter the available options in drop down #2, and so on. Sounds like something that shouldn’t take 9 hours, right?

At this point I am sure you are thinking: “Lol, that’s WordPress for you, you newb!”

But that’s not fair on WordPress. At least, not directly. The issue I had was with tinymce, an included third party dependency of WordPress.

I won’t rant too much here but why, oh why, would re-inventing the extremely standard select box with a wide range of nested divs and buttons ever seem like a good idea? It frightens me that this code is distributed to the several tens of million (est. 74m+ with a quick Google) WordPress websites out there.

Anyway, as I say I don’t want to rant – I already lost a days worth of productivity to this, but to bring it home I cannot stress enough how lucky we are as Symfony developers to have access to such amazing documentation.

And when the docs can’t get you where you need to be, a dive into the code won’t lead to some minified, and uglified JavaScript.

And if that still doesn’t get you the answer you need, a really nice tip is to use github as a Google for code. Try and find someone else’s project who has done something identical – or very similar – which you can *ahem* borrow. Try doing that with a search like “tinymce plugin”, and behold the madness.

Video Update

This week there have been three new videos added to the site:

https://codereviewvideos.com/course/react-redux-and-redux-saga-with-symfony-3/video/getting-started-with-jest-mocks

First up this week we started mocking things in Jest. Specifically we didn’t want to make real API calls during our tests – for many reasons – instead choosing to mock the real function that would make the calls, essentially tricking our code into thinking that nothing was out of the ordinary.

Mocking in Jest does differ slightly to how you may have mocked before, but is quite intuitive once you see it in action. Just be careful to clean up after yourself (covered in the video) unless you enjoy the unexpected 🙂

https://codereviewvideos.com/course/react-redux-and-redux-saga-with-symfony-3/video/using-webpack-environment-variables-in-jest-tests

One thing that drives me nuts is when I read through the documentation – which if done right, usually makes things look very easy (and therefore encouraging to adopt) – only to be met by real world issues that either are completely ignored in the docs, or found only after a dive through the project’s GitHub issues register.

Now, if your project is anything other than a learning exercise, sooner or later you need to go into production. This brings one particular problem in the front-end > back-end paradigm: we likely don’t want to use the same URL for our API in production that we use in our development environment.

Of course, Webpack has us covered here, though the specific approach is not that intuitive.

But Jest doesn’t use our Webpack config. And is therefore completely unaware of our constants. Arghhhhhhh!!!!

Ok, so in this video we address this – and another problem. This should save you a ton of time if you’re following along, or building a similar project.

https://codereviewvideos.com/course/how-to-autowire-symfony-services/video/how-to-symfony-autowire

Lastly this week we look at Symfony Service autowiring.

This is perhaps the nicest feature of Symfony that I never use.

That said, it is nice to know this feature is available, and not difficult to use at all. In this video I will show you how to use autowiring, and leave you to form your own opinions as to whether you might find this useful.

10 Tips For Better Symfony Debug Logs with Monolog 

I can’t quite believe it’s over a month already since Christmas day. Although I only need to step outside for a few moments to wish it was Summer already. I’m much happier coding in my shorts and t-shirt.

A number of people have asked for a suggested watching order / learning track, and with 50 courses to choose from, I can totally understand it can be hard knowing where to start. With this in mind, I’ve added a Learning Tracks page to the site.

This week saw three new videos added to the site.

https://codereviewvideos.com/course/react-redux-and-redux-saga-with-symfony-3/video/testing-javascript-s-fetch-with-jest-happy-path

Firstly we cover testing JavaScript’s Fetch, the nicer replacement to XMLHttpRequest. It baffles me why XML is uppercase, but Http is title cased. Anyway, fetch is nice to use, but testing can still be a little tricky.

To begin with, we cover the happy path, which gets our setup code out of the way. Seeing how things work when the everything is right in the world is a great way to start. But of course, once real users start tinkering with our systems, inevitably they will find new and baffling ways to destroy our good intentions. Which is why…

https://codereviewvideos.com/course/react-redux-and-redux-saga-with-symfony-3/video/testing-javascript-s-fetch-with-jest-unhappy-paths

We also need to cover the “unhappy paths”. And in this case, testing that our code throws the expected exceptions is a little trickier than you might expect. It’s one of those problems that you might estimate at taking you a morning, but end up losing two days too – never fun explaining that in the daily stand up.

Fortunately help is at hand, and we will use a small snippet of code to ensure testing when things go wrong is that much easier.

When it comes to tracking down errors, of course it’s not just the client side that can go wrong. If you’ve worked with Symfony beyond the most basic of applications then more than likely you will have needed to log out additional information to help you debug. Monolog is the fantastic out-of-the-box logging solution in Symfony, and so…

https://codereviewvideos.com/course/log-log-it-s-better-than-bad-it-s-good/video/10-tips-for-a-better-symfony-debug-log 

In this video we look at 10 ways to improve your Symfony debug log output by making use of a variety of options and techniques that Monolog gives to us.

We start off with the basics here, but quickly cover the handler stack – including the rather brilliantly named fingers_crossed  handler, which you will have seen in config_prod.yml  – then onto channels, logging from console commands, and also how to log out to Graylog.

This video will be free to watch until next Friday, so be sure to set aside 10 minutes for this one.

Lastly, did you know you can keep track of the latest videos via an RSS reader? I have a full feed available to ensure you never miss a video.

Until next week, take care, and happy coding.

Chris