Category: Freelancing

Articles about the world of Freelance development and being self employed

Categories
Development Freelancing WordPress

Setting up Trusted SSL Certificates for Local Development, Using mkcert on Ubuntu 18.04 with Apache.

Computer Surgery
Computer Surgery

One of the many little annoyances that I encounter while working on client sites, is when the client has a valid SSL certificate installed on their server, but the HTTPS redirection happens in code instead of at the server level.

This means that even if I export the database with the site urls replaced to match my local environment, or run a search or replace on the local database, the code execution will still try to redirect to the secure version of the domain, meaning I have to first find out where that redirection is taking place, and remove it.

Often it’s done inside the site config, which is pretty quick to comment out, but other times it’s done via a plugin which is harder to find. In the long run it would be infinitely quicker and easier to just have a trusted SSL certifcate installed for the local site. My previous attempts at this meant installing a self signed certificate, but this means it’s not ‘trusted’ by the browser, and you either have to configure your browser to trust the certificate, or get an annoying warning about the site’s certificate not being trusted or secure enough every time you browse to the local site.

Thankfully, after asking around, I was pointed to mkcert “a simple zero-config tool to make locally trusted development certificates with any names you’d like.” It creates a local certificate authority, installs the authority into your local and browser trust stores. It also includes a tool to make local, trusted certificates for any local domain name. All that I have to do is set those certificates up for each local domain.

Installing mkcert is pretty straightforward and the project readme contains instructions for the various operating systems.

Regular Apache Virtual Hosts for local development

Because I use Ubuntu as my OS and Apache as my local webserver, whenever I add a new client site, it’s usually a 4 step process:

I start by creating a new Apache VirtualHost config file, copied from an existing one, and change some site related values

cd /etc/apache2/sites-available/
sudo cp 000-default.conf localsite.conf
sudo nano localsite.conf

The values I change are ServerName, ServerAdmin, DocumentRoot and Directory values. I usually also set site specific log files

<VirtualHost *:80>
        ServerName localsite.test
        ServerAdmin webmaster@localsite.test
        DocumentRoot /home/jonathan/development/websites/localsite
        <Directory "/home/jonathan/development/websites/localsite">
            #Require local
            Order allow,deny
            Allow from all
            AllowOverride all
            # New directive needed in Apache 2.4.3: 
            Require all granted
        </Directory>
        ErrorLog ${APACHE_LOG_DIR}/localsite-error.log
        CustomLog ${APACHE_LOG_DIR}/localsite-access.log combined
</VirtualHost>

Once the config is saved, I enable the new site, and restart Apache

sudo a2ensite localsite.conf
sudo service apache2 restart

The last step is to let my local machine know what IP address to resolve the VirtualHost ServerName value to, in this case localsite.test

sudo nano /etc/hosts

127.0.0.1   localsite.test

Once this is all done, I can browse to http://localhost.test and it will serve the files in the /home/jonathan/development/websites/localsite directory.

Note, if you get a ‘permission denied error’ doing this, the quick way to fix this is to change the user and group that Apache runs as, to your local user.

sudo nano /etc/apache2/apache2.conf

# These need to be set in /etc/apache2/envvars
#User ${APACHE_RUN_USER}
#Group ${APACHE_RUN_GROUP}
User jonathan
Group jonathan

Save that file, restart Apache, and you’ll be good to go.

Adding a SSL layer to a local site

I wasnt sure if the set up of a local, trusted certificate would be any different, and I was pleased to find out this was indeed the case.

Creating the new local Certificate Authority

Once mkcert is installed, the first thing I needed was to create and install the new local certificate authority. Fortunately this only needs to be done once.

mkcert -install

Once you’ve installed the CA, you can issue site certificates against it. I like to place all my site certificates on one place like ssl-certs

mkdir ssl-certs
cd ssl-certs

Then it’s time to create the certificates.

mkcert localsite.test

This creates a localsite.test.pem certificate and a localsite.test-key.pem key, which is used in the Apache SSL config for the site.

Side note, I’ve started using .test for my local domains, because Chrome doesn’t seem to like my use of .local domains until I tell it to. Earlier this year I discovered this is because it’s reserved for link-local host names that can be resolved via the Multicast DNS name resolution protocol. So I switched to .test. Thanks to Andrey Savchenko for pointing this out to me.

Setting up the certs for a local site

First step was to enable the SSL module for Apache. This also needs to only be done once.

sudo a2enmod ssl

Next, I needed to create an SSL version of the local site virtual host config. I started by copying the existing default-ssl.conf and making my changes

cd /etc/apache2/sites-available/
sudo cp default-ssl.conf localsite-ssl.conf
sudo nano localsite-ssl.conf

It’s actually pretty similar to a standard VirtualHost config, except for the checking if the SSL module is installed, the VirtualHost domain and port, and stuff from SSLEngine down. As you can see the certificate and key are specified in the SSLCertificateFile and SSLCertificateKeyFile entries respectively

<IfModule mod_ssl.c>
	<VirtualHost _default_:443>
                ServerName localsite.test
		ServerAdmin webmaster@localsite.test

		DocumentRoot /home/jonathan/development/websites/localsite

		<Directory "/home/jonathan/development/websites/localsite">
            #Require local
            Order allow,deny
            Allow from all
            AllowOverride all
            # New directive needed in Apache 2.4.3: 
            Require all granted
        </Directory>

		ErrorLog ${APACHE_LOG_DIR}/localsite-error.log
		CustomLog ${APACHE_LOG_DIR}/localsite-access.log combined

		SSLEngine on

		SSLCertificateFile	/home/jonathan/ssl-certs/localsite.test.pem
		SSLCertificateKeyFile /home/jonathan/ssl-certs/localsite.test-key.pem

		<FilesMatch "\.(cgi|shtml|phtml|php)$">
				SSLOptions +StdEnvVars
		</FilesMatch>
		<Directory /usr/lib/cgi-bin>
				SSLOptions +StdEnvVars
		</Directory>

	</VirtualHost>
</IfModule>

Once the SSL config is created, I enable it.

sudo a2ensite localsite-ssl.conf

I can then restart Apache, and the SSL secured version of the local site is enabled.

This is something I’ve wanted to get set up for the longest time, so a massive thanks to Filippo Valsorda for creating mkcert.

Categories
Book Development Freelancing Laravel WordPress

11 steps to getting the most out of your freelance developers

Working with Freelance Developers
Working with Freelance Developers

A handy guide for clients working with freelance developers so nobody gets hurt…

Working with freelancers can be, for some, the equivalent of playing with a loaded gun. It can work out, but there are times when it can really affect your business and your life. As a client, you need a handy guide to working with freelance developers to ensure that every person working on the project comes out on top.

Step 01: A clear view

You need to understand your product and its requirements very intricately before you move into a relationship with a freelance developer. You can’t brief something in to someone until you know it really well. This also ensures you have a very clear vision of the final product and will inform all your engagements with your freelancer.

Step 02: Have a basic understanding

You will need some basic knowledge of web and development before you embark on this adventure. Yes, you are hiring a professional to take on your project so theoretically you shouldn’t need to know a thing. The fact is, if you have a modicum of understanding then you will have more realistic ideas around time frames, deliverables and project potential (and the magic Foo of your developer).

Step 03: Budget is everything

Don’t expect your freelance developer to be happy to cut their rates to suit your budget.The work they do is complex and specialised. Instead, be prepared to cut your requirements to fit your budget. That way you are assured of quality work from a reliable developer.

Step 04: Clarify your requirements

This is an extension of Step 01. Why? Because this is the most important step of all – it will cost you money and time if your requirements are vague so spend time on clarifying them. It’s worth it.

Step 05: Develop a clear timeframe

Work closely with your freelance developer to break the project down into achievable phases,each with their own milestones and deliverables. This will ensure that both you and your freelance development team are on the same page and working towards the same goals. This way nobody can say that they didn’t know that X had to be done by Y date…And this includes you providing your development team with the information and materials they need to achieve these goals.

Step 06: Create communication channels

From Slack to Asana to Evernote to Skype – there are plenty of communication and collaboration tools available to help you streamline communication with your freelance developers. Many of these offer timeline and deadline management tools as well, making it really easy for you to track timing and status.

Step 07: Don’t hover

The headline says it all. Science has shown that for every interruption, it takes a person at least 20 minutes to get their concentration back. Every time you interrupt,you slow your project down.

Step 08: Test

Every step, every aspect, every phase – test. Test assumptions, capabilities, developer promises and results. This will ensure that the final product has had most of the kinks ironed out iteratively rather than a messy tangle to unwrap at the end.

Step 09: Feedback

There is bad feedback, there is good feedback and there is great feedback. Learn how to do the last two types of feedback really well. Good feedback is defined as giving the person the information they need to make changes, fix problems, address issues and overcome obstacles with precision. Vague and wishy-washy comments like, ‘Yeah, it doesn’t feel right’ are not helpful. Nor are nasty and antagonistic ones. Nobody puts passion into a project for someone they don’t like.

Step 10: Everything is in writing

From the onset of your project to the phases and timelines to the final deliverables ensure that your project is clearly documented and that all parties have read and signed every document. You do not want to end up at the end of a messy conversation or project with someone saying that something was never clarified.Assume the best, prepare for the worst.

Step 11: Manage expectations

Your developer won’t always be around to leap to your requests or requirements. This is very normal and you may not be their only client. Be patient and trust that they will get back to you and respect your urgency.

Categories
Development Freelancing WordPress

Are you an experienced freelance, full stack developer, who loves building things for WordPress?

Codeable needs people like you!

Do you have a special relationship with the WordPress Codex, dream about coding standards and are able to build your own custom plugins from scratch? 

Do you work well with clients, have amazing communication skills and can solve the most difficult of WordPress customisation problems?

Want to be part of the best WordPress outsourcing platform in the world? Then Codeable wants you!

If you’ve followed this blog over the past few years you will know how joining Codeable changed my life. Well, now is the chance for you to experience the same life changing experience, by applying as a Codeable Expert developer.

Codeable is currently looking for expert WordPress full stack developers who love building elegant plugin or theme customisation solutions for clients around the world. If this is you, and you want to join the #1 outsourcing service for WordPress, then apply today.

P.S. I don’t get anything out of this, other than the satisfaction of maybe helping someone else become part of the Codeable family.

P.P.S if you don’t consider yourself a full stack (hardcore coder) developer and more of a WordPress developer (website builder) then you should also apply. I just happen to know that Codeable is looking for full stack developers at the moment.

Categories
Development Experiences Freelancing Laravel WordPress

The evolution of a work space

It’s amazing how stories mutate. What started as a simple ‘this is my setup’ post, then turned into a ‘what a day in my life looks like’. This morning I woke up and realised it might be more interesting, and less braggy, to look at how, and why, my workstation has evolved in the last two years, since I moved from office worker to freelancer.

A long, long time ago…

First, a little background. In 2011 I moved from being employed to being a combination of self employed (in the business my wife and I run together) and contract worker (at a local web development agency called Reamdigital). This meant I was working half the time from on office and half the time from home. This lead to me purchasing my first ‘developer’ laptop, a 17 inch Dell Vostro with a Core i5 processer, nVidia graphics, 16GB of RAM (manually upgraded) and a 750 GB hard drive. About a year later I upgraded the hard drive to a 500GB SSD and put the 750 GB drive into an external housing, but that laptop lasted me for a good 5 years in that configuration.

This laptop replaced my then current desktop computer, which I had custom built in 2010, while I was still employed at a company. Using my bonus that year I built a mid range gaming computer. The original specs aren’t important, but by the time I purchased the laptop it had the original AMD Phenom II 945 processor, 8GB of RAM, a 128GB SSD boot drive, a Radeon GPU, and a 1TB Hard drive for storage. My monitor was a 23 inch Samsung Syncmaster, which my wife had kindly purchased for me as a birthday present the previous year.

Other peripherals I had purchased for the computer over time included a Logitech gaming mouse, a Logitech 2.1 surround sound set and a Logitech gaming headset. Some years before my wife got me (another present) a Microsoft ergonomic keyboard, after my previous one died.

As this computer was originally built as a gaming rig, when I purchased the Dell laptop I turned this into a media streaming centre, and played the odd game on it in my lounge. Much fun was had with my oldest when I re-discovered the MAME emulator, and we had hours of joy playing the Teenage Mutant Ninja Turtles arcade game together.

The ‘dad-station’ days

So, fast forward to January 2016 and I’m 100% freelance/self employed and working from home with a 1 year old at home all day and a 4 year old at home for the afternoon. Part of the reason I left the agency was to be able to spend more time with my boys, so I had a bright idea.

Scouring the local online classifieds, I found a second hand (this will become a recurring theme in this story) computer stand and set the laptop and monitor up in what I affectionately called ‘the dad-station’. This allowed me to work in the house seated or standing. The standing option was so that I could strap the 1 year old onto my chest and work while he sleeps, or just keep him busy while my wife tries to get some work done, or just take a break for sitting down all the time.

In the picture you can also see the Microsoft keyboard, Logitech  gaming headset and mouse, and the R2D2 bobble head I received from the Reamdigital for my last birthday there.

It was during this time that the first of a few incremental changes happened to my work setup.

Firstly, having never previously worked on the Microsoft keyboard for a full day, I discovered that the so called ergonomic keyboard I had was causing a repetitive strain injury. For whatever reason, the way I use my right little finger on the shift key on the keyboard was leading to the top joint of the finger being slowly bent to the right over time and causing pain. To this day that top section of the finger is not straight when compared to the other hand. 

While I was at Realmdigital someone suggested I look into the Logitech Marathon mouse, which I had done, and discovered it’s not only amazing battery life, but the fact that it uses the Logitech unifying software to connect, meaning you only need one USB dongle to connect multiple devices. When the keyboard starting giving me issues I went searching for a Logitech keyboard that was similar to a laptop keyboard (as I’d never experienced the problem when working on my laptop keyboard) and found a keyboard that was very similar, and also used the unifying software, so I purchased the wireless keyboard and mouse to replace my current gaming set.

Side note, the person I sold the mouse and keyboard to, a friend I know through jiu-jitsu, recently let me know that he is still using them, so I’m glad they found a new home.

At more or less the same time I purchased a second hand 27 inch monitor to replace the 23 inch, and moved from the house into our home office space. I also purchased a Gigabyte laptop stand so that I could have the bottom of the laptop screen at roughly the same height as the bottom of the monitor.

Towards the end of 2017 the Vostro laptop was in need of an upgrade, having served me well for 5 years. I opted for another Dell laptop, this time a Core i7 Dell Inspiron gaming laptop, RAM upgraded to 16GB, and a nVidia GeForce GTX 960M graphics card. It came with a 128GB M.2 SSD and I took the 500 GB SSD from the Vostro and installed it into the Inspiron, dual booting Ubuntu on the 500 GB drive and Windows on the 128 GB. I had a 320 GB notebook drive spare, which I installed in the Vostro and sold second hand to help pay for the Inspiron.

Unfortunately, as the year progressed, and as my workload and stress levels increased, it became obvious that working at home wasn’t productive or beneficial to anyone. My sons, as much as I love them, don’t understand either what a closed door means, or ‘the headphone rule’, and the constant interruptions caused me to start looking for an office space within a few kilometres radius.

In September 2017 I moved into my current office. Here is the original Instagram post I shared when I started in the new space.

What you can see in this image is the 27 inch monitor, the Inspiron laptop on the Gigabyte stand, the wireless mouse and keyboard, and the original gaming headset. As you can see R2D2 moved with me. The desk is a 6 seat dining table that was already in the office and the chair is an AllOffice contract office chair I used at home.

This is what my work space looks like now.

As you can see, quite a bit has changed.

Making the perfect space.

I replaced the dining room table with a second hand adjustable desk that I’ve made slightly higher then a standard office desk, to suit my size. I purchased an AllOffice Accent, which is a cost effective ergonomic office chair. I have definitely noticed the difference in purchasing an ergonomic office chair.

Next to my desk I have a small bar fridge and various coffee making paraphernalia, including a pour over coffee maker for when I want good coffee and a jar of Jacobs for when I just want OK coffee.

The workstation

I upgraded the custom built workstation, to be powered by an MSI x470 gaming motherboard, 6 core AMD Ryzen 5 2600x, 16GB of DDR4 RAM and a Zotac Geforce GTX 1060. OS is taken care of by two 128 GB SSD hard drives dual booting Ubuntu and Windows, with the original 1 TB hard drive and a new one purchase for storage for each OS. This handles every thing I throw at it, including some down time gaming between work sessions.

My peripherals now include a new Dell 27 inch LED, the 7 year old Samsung 23 inch Syncmaster and a Philips 24 inch monitor I picked up second hand recently. My wife is currently using the other 27 inch monitor, as I found the frame around it to be too big when I wanted to add additional monitors. The side monitor stands are a combination of phone books and Dos 6.2, Windows 3.1, and Office manuals I found in the office when I moved in.

You’ll see my R2D2 bobble head stayed, and he’s joined by the Lego Mini-Me I got from WordCamp Cape Town 2017. Next to that is the travel mug we all got as swag from WordCamp Cape Town 2018.

The wireless mouse, keyboard and headset are all the same, and I dug out my Logitech 2.1 surround sound set. I was actually pretty happy to be able to use my speaker set again, as it’s been sitting in a cupboard for almost 7 years now, since the days of the ‘dad-station’. Because I switched from a laptop to a workstation, I had to purchase a separate webcam which, if you’ve not already noticed the trend, is a Logitech one.

Finally I also purchased a Samson mic for meetings and podcast recordings.

I had previously purchased a Griffin stand to replace the Gigabyte one after I moved into the new office, mostly to allow for more space. I keep it around for when I need to use my laptop at the office (mostly to copy something I’ve forgotten to sync to the cloud). In this picture it’s on my desk, but I usually pack it away when I’m not using it.

Operator

My main OS is currently Ubuntu 18.04 LTS, and I generally stick to the LTS version unless something cool is coming out on a newer version. The Windows 10 install is mostly for gaming (those games that don’t work via Steam on Linux) or if I need to test something in a true Windows environment.

Remote work

I still use the Inspiron laptop, mainly when I’m travelling, either for meetings or conferences, or working from home. I took the 128GB SSD out of the laptop for the workstation and installed Ubuntu on the 500 GB SSD as the main OS. At the moment I am considering selling this laptop and replacing it with something lighter, slightly less powerful but with better battery life, as I still do some development on it, but not as much as I before, and definitely not enough to warrant such a powerful laptop.

The Office

The office is 5 minutes drive away from home and my morning commute takes me directly past a Vida, Xpresso and Seattle, so I can mix up my morning coffee flavours.

The office has a wall size street map of the Cape Peninsula, which is a talking point whenever I have video calls with folks from outside Cape Town and provides fun conversations when my 6 year old comes to visit.

There’s also a spare chair, if I ever have physical meetings, or the 6 year old is visiting. I like to keep the rest of the office as tidy as possible, but at the time of this photo there were a few boxes of stuff left over from WordCamp.

Downtime

One advantage of my office is that because it’s actually at the back of my father-in-law’s home office, I get to enjoy the pool whenever the Cape Town weather gets too hot. This is helpful as the office itself has no air conditioning.

It also means that if my children want to visit the grandparents for a swim, all I have to do is make sure I have my costume and towel, and I can join them for some water fun.

And in case you’re wondering, all that is in the bar fridge is some long-life milk for coffee, and a few bottles of water. I leave the beers at home, to be enjoyed on my couch with my family, after a long day 😉

The future

As it stands, I probably won’t make any changes to this setup any time soon. As previously mentioned, I might replace my laptop, but there’s no real need to yet. I will probably only start looking at upgrading the computer hardware in about 5 years.

During that time, the only hardware I might consider upgrading or replacing is my headset, to a wireless option, and possibly replacing the second hand monitors with newer Dell ones. I really like the minimalist build of the Dell monitors, but at around R3000 a piece for new 24 inch models, there’s no real desire to do so.

If I do spend money on the office space in the near future, it will probably be on air conditioning. Currently it can get quite hot in the summer and quite cold in the winter, and comfort is more of a current priority than computing power.

Either that, or a bean to cup coffee maker!

Categories
Development Experiences Freelancing

Completing the beast – the dream of a lifetime come true.

I stumbled across Car Masters: Rust to Riches on Netflix this past week. As a bit of a petrol head I’ve always enjoyed a good car restoration show and I found the ‘upgrade and trade’ business model that was central to the series story line extremely interesting. 

Watching the team from Gotham Garage upgrading and transforming old cars into new, it got me thinking about my own recent upgrade project. I like cars, but I’ll never be the type who restores an old one in my garage as a project. I like cars that are new and shiny and go fast now. What I do like doing for fun, is fixing and upgrading computers.

This is, in part, what lead me to upgrading my old gaming pc and turning it into my current development workhorse. This is also what lead me to finally get something I have wanted for many years, a proper multiple monitor setup.

A few months ago I purchased a new Dell 27 inch LED monitor, and the Zotac graphics card I purchased has support for up to 5 screens. I still have a Samsung 23 inch monitor my wife purchased for me over 7 years ago for the original desktop build, and a few hours of scouring local online classifieds, led to me picking up a Phillips 24 inch monitor to complete the set.

I was able to work on a three monitor setup very briefly using my old Dell 17 inch laptop, which had both an HDMI and VGA output, and I found it very productive, so being able to work this way for the past few months has been amazing.

I don’t think I’ll be doing any upgrades to this set up any time soon, as for now I really feel like I’ve upgraded to my perfect development workstation.

Categories
Development Experiences Freelancing WordPress

This is why you want to become a Codeable Expert Developer

Is the Codeable Expert Developer certificate worth the weight of the digital paper it’s printed on?

In 2016 I certified as a Codeable Expert Developer. I’d already spent a number of years working with freelance platforms such as Upwork and Freelancer but Codeable has stepped out from this crowd to become my preferred platform of choice.

Why?

There are quite a few reasons why Codeable is the kingdom where every developer should hang their hat and here are six of them…

Reason 0ne: You don’t just sign on the line and instantly become a Codeable Expert

Entering into the Codeable world isn’t as simple as filling in a few forms, locating the perfect profile pic and waiting for the work to come to you. The application process tests you on your development knowledge, ability to handle difficult clients and skills in managing complex situations. For Codeable, technical knowledge is essential but customer service is critical. 

Experts have to pass stringent tests to gain access to Codeable – tests that are improved upon daily by the Codeable expert community. You have to know the web, WordPress and development inside and out before you can even be considered. You also have to demonstrate the ability to manage expectations and a willingness to engage in open communication and collaboration.

Codeable Experts are project managers, quality testers, customer relationship managers and so much more. This assures Codeable Experts that they will be connected with genuine clients and it assures clients that they are going to get connected to incredibly talented experts. And everybody knows that this level of skill doesn’t come at cost price.

The Codeable process may be rigorous and complex, challenging your skills and your experience, but it is worth every hurdle and hoop.

Reason Two: Client focused but expert friendly

The founder of Codeable, Tomaz Zaman, jokingly refers to Codeable as the Tinder for WordPress. It’s easy to see why. It connects the best WordPress experts to the best clients and everybody walks away happy and in a new, fulfilling relationship.

This is primarily driven by Codeable’s commitment to making both the customer and the Codeable expert happy. A commitment that’s clear from the moment you apply. Codeable gives every applicant personal attention and team members take the time to explain each part of the application process. They also provide immediate feedback when sent questions or concerns. I dealt with people who cared and who understood that sometimes life got in the way of the application.

Once you’ve been accepted, you need to spend some time getting to know the Codeable process. The entire platform has been designed to provide you with a really strong support structure so you can quickly learn about how to engage with customers and how to deliver the ideal Codeable customer experience.

There is a very delicate balance between the needs of the client and support for the experts and Codeable manages this perfectly.

Reason Three: Defining the ideal customer

There are three things that define a great customer within the Codeable universe:

  1. A great customer is someone who understands that a freelancer is a human being and not just a tool. Developers have lives and families. We get sick and we have to juggle the unexpected moments that life throws at us just like everyone else. Knowing that a customer can understand and accept this makes everyone’s experience so much better.
  2. The customer understands their product or service and can succinctly explain or describe the problem. They make suggestions, not assumptions. You may look at a web page and think that it should be easy for the expert to change the font but you likely don’t understand that perhaps the CSS rules aren’t structured properly or that a font change on the home page will knock on to other parts of the site.
  3. As Codeable experts we pride ourselves on our communication skills but if a client goes quiet, especially when it’s time to mark the project as complete, it can leave a bad taste. A communicative customer is wonderful to work with.

Reason Four: Codeable creates collaboration

Codeable doesn’t limit you to the Codeable workroom system. Once a project has been funded you can use any communication tool that you and the customer prefer. That said, the Codeable workroom system has some nifty tricks and treasures hidden in its depths that add enormous value to client communication.

  1. The Credentials Vault – you can share sensitive information, such as site logins, with relevant experts.
  2. The File Storage System – you can upload images, documents, video tutorials and other file objects for easy, shared access.
  3. The Live Chat System – this is also replicated as emails to both the customer and the expert so that communication is seamless and easy. The only thing missing is a voice option…

Reason Five: Collaboration really is key

There is one thing that Codeable doesn’t have…Expert Wars. On this platform the experts aren’t competing, they’re helping. It’s more like a distributed family that steps in to ensure that clients always get the best out of their chosen expert.

Codeable is the first platform I’ve experienced that has captured the true heart of the community-driven ethos of the open source platforms we use.

Reason Six: The value of Codeable

The fact that we, as Codeable Experts, are not in competition with one another makes this one of the best platforms in the world. The expert community is perhaps the biggest reason why I am passionate about Codeable and its potential. We help one another on projects, give each other advice when entering into pre-hire discussions, and share expertise on the forums. It is open access to the most impressive group of WordPress experts in the world. You are constantly surrounded by intelligent people who can teach you something new every day.

Last year I had the opportunity to meet up with a group of my fellow Codeable Experts at WordCamp Europe 2018 and it was like meeting up with old friends.

Codeable has also taught me that the knowledge and experience I have is invaluable. If you work with the right clients you don’t have to kill yourself to make a living. Since joining Codeable in 2016, my income potential has doubled and I have been able to do things I’ve never done before. I built the perfect development workstation, I took time off without worrying about my next project and I learned new technologies while taking on exciting new projects.

Some tasty tips for Codeable success…

If you want to enter into the world of Codeable, then here are four top tips that will help you get in, get involved and get insight from brilliant Codeable minds…

  1. Know WordPress inside and out. You don’t need to be a core contributor, although that would help, but you do need a good understanding of WordPress APIs, hooks and core fundamentals.
  2. Understand web development in general – a good grasp of this will come in handy as clients will often have requirements to connect their WordPress sites to third party applications and systems.
  3. Be a problem solver – the ability to install a WordPress theme and a bunch of plugins isn’t enough. You need to create custom themes or plugins and have the ability to extend those. You must have a higher than average skillset in creating custom solutions for WordPress.
  4. Customer collaboration skills – you need great customer service and a healthy attitude towards project management and communication. At Codeable you don’t win projects based on price – you need to be prepared to go the extra mile during new project discussions and to provide value to new customers.




Categories
Development Freelancing WordPress

Slides from my talk at @wordcampjoburg #WCJHB

The slides from my freelancing talk at WordCamp Johannesburg

Categories
Development Freelancing

On Ubuntu 18.04, Installing MySQL Does Not Set the Root Password.

MySQL Root Password
MySQL Root Password

One of the things I love about using Ubuntu as my primary operating system is that I can have quickly set up a ‘bare metal’ LAMP development environment. While I unusually run my client websites inside on of my custom Vagrant boxes, for working on personal projects or plugin/theme customisation everything’s much faster when it’s able to use the full power of the machine I’m working on.

After I switched back to a computer as my every day workstation, I came across a weird little issue with installing MySQL. Usually during the install process it asks me to set a root password, but this time it did not. This meant that I wouldn’t be able to access the database using the root user. Not a huge issue, as I could create another user to access any database, but as it’s a local install, connecting as the root MySQL user is just much easier.

As it turns out, on Ubuntu installs running MySQL 5.7 or later, the root  user is set to authenticate using the auth_socket plugin rather than using a  password. Thankfully the folks over at Digital Ocean have released an article which explains this information and provides the steps to switch the root user authentication from auth_socket to using a password.

UPDATE: As it turns out, this was not the only issue I was having, turns out the MySQL install was also corrupt somehow. Fortunately the internet is a wonderful place, and I found some instructions on how to completely remove all traces of MySQL server, and start again.

sudo dpkg -P mysql-server mysql-server-5.7
sudo apt-get autoremove
sudo apt-get clean
dpkg -l | grep -i mysql
sudo rm -rvf /var/lib/mysql
sudo apt-get install mysql-server


		


		
		


			

		


		
	


	






	



	


		
			

				Categories
				

					Development Freelancing WordPress				

			


			
The importance of WordPress website optimisation with Justin Frydman

		


			

		


		
	





	


		


			Website optimisation
				
Website optimisation


				
		


	


	
	


		


			
Build it. Theme it. Watch it fail. Or not. If you know how to optimize.


Few things are as frustrating as a website slower than molasses going uphill.  Even fewer people stick around to see whether the website was worth waiting for in the first place. There are plenty of other websites in the great online sea and if yours is slow visitors will just go somewhere else.


Website optimisation is the key to online success. It really is. So, to pin it down and get clarity around the issues that influence it, I spoke to Justin Frydman. Justin is a full stack web developer, systems administrator and (in his words) ‘passionate problem solver’ and since I joined Codeable he’s become one of my go to guys with regards to website optimisation. Justin and I had a chat about the how, the why and the what of website optimisation…


JB: Why is website optimisation so important?


JF: The short answer is that people hate slow websites. It doesn’t matter if you’re selling a product, trying to increase reader conversion or gain leads that result in sales. A slow website is going to impact your goals significantly. 


There are a lot of studies that prove this point but one of the most popular is how Google found that a .5 second loading variable cost them a 20% dip in traffic. While your business may not match the sales of a giant like Google, removing roadblocks to potential sales makes sense. Right?


Considering how many people use their mobile devices to shop online it is even more important to focus on web optimisation now than ever before. Any slowness on your site is magnified on mobile. These devices have slower hardware and connectivity and will load far more slowly than the desktop. 


JB: What are the top three worst and best WordPress themes in terms of performance (themes or plugins that affect site performance)?


JF: It’s the themes that try to ‘have it all’ that tend to suffer from performance degradation. The more that a theme does in each page load, the harder the server has to work to serve up your page. There are ways you can hide these shortcomings from your visitors such as using caching methods or other techniques but you did ask for a list. Here it is…


The worst three themes:


    

  1. Avada
    2. 

  2. Divi
    3. 

  3. Flatsome
    4. 



The best three themes:


    

  1. Custom built and tailored to your needs. This way you don’t have more or less than YOU need.
    2. 

  2. Many of the themes built on the Genesis Framework
    3. 

  3. The Beaver Builder theme for a visual builder
    4. 



JB: What are the factors that influence website optimisation? 


JF: There are numerous factors that can affect your website’s performance. It’s about ensuring that each of them is as good as possible so they add up to having a truly fast loading website.


01: Host


You must have a good host with a good stack (server software) that is properly configured to serve WordPress as fast as possible. A great host doesn’t have to cost a fortune but if you’re spending less than a cup of coffee a month on your host, well, you’re probably getting what you pay for. It’s also important to ensure your server is as close as possible to your target market. The closer it is to your visitors, the faster your website will be.


02: Plugins


Every plugin you add to your website has the potential to slow it down. Not all WordPress plugins are created equal. Many are developed without performance in mind. So, a single plugin could perform a taxing database query that adds seconds to your page loading. 


If you have too many plugins it will complicate the technical debt and debugging of your site. This will make it harder to track down any problem plugins. Some can add bloat to your database as time goes by so the slowing down of your site won’t show until your database queries take seconds instead of milliseconds. Ensure you have a staging website and thoroughly test and vet every new plugin before you use it.


03: Themes


Themes that include a lot of JavaScript can visually slow things down on the front-end of your website. Some CPU intensive JavaScript can really slow older computers to a crawl. Depending on when that JavaScript is loaded, it can even render block your website.


Themes that make heavy use of animations can look slow to the visitor even if they aren’t. It’s also worth noting that the heavier themes need a lot more time to process a page before it can even be rendered. The longer it takes to process a page, the longer things are loading before the website is visually drawn in the browser.


04: Images


Using images that haven’t been optimised (and using many of them) increases loading times. Images can be compressed, saving up to 80% in file size without compromising on quality. The less the browser has to download, the faster your website. Sliders with 10 images or large background images can increase page size significantly. So, to optimise your website, consider each image’s purpose on the page and ensure the dimension and file sizes are appropriate.


05: Videos


Fully loading videos will destroy your website metrics and often cause a laggy experience. Use videos sparingly and make decisions based on the data you collect. If a video really is converting sales, then it is probably worth keeping.


06: Adverts


While ads are often needed to help you make a living, they can really slow things down. Even once they are fully loaded they can slow scrolling and the functionality of the website, especially on slower devices.


07: CDN


A Content Delivery Network (CDN) can help in serving your static assets (images, JavaScript and CSS) to your visitors at speed. Often this lightens the load on your server as well.


JB: How can you test your website’s performance?


JF: There are a number of online tools to help you with website optimisation and performance. That said, the grades don’t always align with a faster website. If you are shooting for straight As that doesn’t actually mean you will end up with a visually faster loading website. 


The Page Load Time Google Chrome Extension is an interesting tool but it tracks fully loaded time, including JavaScript that is running after your website has rendered. In my opinion, the goal is to show your visitor your website as quickly as possible. If things are going on in the background that aren’t affecting user experiences then they are not a priority.


Here are some steps you can take to website optimisation:


Step 01: Your browser


Really use your website, logged in and logged out. Does it feel fast? Is the initial load pretty fast? What about clicking on additional pages? How about the WordPress dashboard? 


Human testing goes a long way towards website optimisation as it is humans who use your site.


Step 02: Pingdom 


Not all items in the Performance Grade can or should be fixed. It’s important to understand this report in detail but what should matter to you the most are: Load Time, Page Size and Requests. The ultimate goal is to get these as low as possible. Increasing the grades is a bonus and only IF they don’t affect the ultimate metric – Load Time – negatively. 


I’ve seen websites taken from a C to an A but at the cost of 400ms. It’s just not worth adding that extra loading time to increase a score.


Step 03: Gtmetrix


The recommendations here must be properly analysed by an expert GTmetrix tracks Fully Loaded Time. This considers the background scripts running – if they are running after the page is visually drawn in the browser that’s not a big deal, however, if your page is waiting for them to load before it shows your site then you have a problem. Ideally, you want to get Fully Loaded Time, Total Page Size and Requests as low as possible. This may involve removing items you don’t need on your site. 


Step 04: Google PageSpeed Tools Insights


Until recently, this test didn’t even show your actual website speed and still doesn’t for many websites. What this does is make suggestions around how you can improve your speed. Keep in mind that these are suggestions and may not result in lowering the key speed metrics mentioned earlier. Some of these suggestions can be complex and expensive to solve and the payoff may not be worth the effort. Google has a FAQ that explains a lot of these elements in more detail.


Want to get your hands on Justin? Need a bit more website optimisation expertise? 


Click here, hire Justin, and fix your problems…


		


		
		


			

		


		
	


	






	



	


		
			

				Categories
				

					Development Freelancing WordPress				

			


			
Setting up the PHP Code Sniffer with WordPress Coding Standards Integration for PHPStorm on Ubuntu 18.04

		


			

		


		
	





	


		


			
		


	


	
	


		


			

(aka the longest blog title I’ve probably ever written).





Recently I reinstalled upgraded my laptop to Ubuntu 17.10 (Artful Aardvark) Ubuntu 18.04 Bionic Beaver. I’ve been wanting to upgrade since it was released in October to try out the updated Gnome interface since Ubuntu officially dropped the Unity interface for the latest release. Usually I stick with the LTS releases but the draw to try out the new, shiny thing was too much.  I prefer running on the latest stable LTS release so as soon as 18.04 came up I upgraded. 17.10 was a solid release and I enjoyed working on the Gnome shell again, so it was a no brainier when the LTS came out.





As I have adopted PHPStorm as my development IDE this meant I had to set up the PHP Code Sniffer and WordPress Coding Standards integration again. I remember this being a bit of a pain when I did it on my 16.04 install.





The Jetbrains documentation about WordPress Development using PhpStorm (specifically the section on  the coding standards) was written back in 2015 and the issues I had were mainly due to different paths for newer PHP/PEAR versions, so I thought I would document the updated process here.





Step 1) Install PHP Code Sniffer via the PEAR package




sudo pear install PHP_CodeSniffer





I could probably have done this using either the PEAR package or by using the Composer package but I found that the Jetbrains document refers to the location of the Code Sniffer sniffs using the PEAR method and I already had PEAR installed, so it was easier for me to use this method. At some later stage I might try the Composer method.





Step 2) Determine the location of the PHP Code Sniffer Standards





In Ubuntu 17.10 18.04 with a default PHP 7.1 7.2 install the Standards are located in the following path:




/usr/share/php/PHP/CodeSniffer/src/Standards





Step 3) Clone the WordPress Coding Standards GitHub repository





In this case I simply cloned this repository to the root of my home directory.




git clone -b master https://github.com/WordPress-Coding-Standards/WordPress-Coding-Standards.git





Step 4) Copy the relevant Coding Standard to the PHP Code Sniffer Standards location determined at Step 2





I copy all the available WordPress Coding Standards, and merely enable WordPress-Extra for my projects. I am thinking about enabling WordPress-VIP for some extra fun, but I’m not sure I’m brave enough to be shouted at by my IDE…




cd ~/WordPress-Coding-Standards
sudo cp -r WordPress /usr/share/php/PHP/CodeSniffer/src/Standards/ 
sudo cp -r WordPress-Core /usr/share/php/PHP/CodeSniffer/src/Standards/ 
sudo cp -r WordPress-Docs /usr/share/php/PHP/CodeSniffer/src/Standards/ 
sudo cp -r WordPress-Extra /usr/share/php/PHP/CodeSniffer/src/Standards/ 
sudo cp -r WordPress-VIP /usr/share/php/PHP/CodeSniffer/src/Standards/





As of 2.0.0-RC1, the WordPress VIP standards have been deprecated.





I also realised recently I could merely create symlinks, thereby automatically updating the Coding Standards every time I pull the latest release from GitHub




cd /usr/share/php/PHP/CodeSniffer/src/Standards/
sudo ln -s /home/jonathan/WordPress-Coding-Standards/WordPress WordPress
sudo ln -s /home/jonathan/WordPress-Coding-Standards/WordPress-Core WordPress-Core
sudo ln -s /home/jonathan/WordPress-Coding-Standards/WordPress-Docs WordPress-Docs
sudo ln -s /home/jonathan/WordPress-Coding-Standards/WordPress-Extra WordPress-Extra






Step 5) Enable PHP Code Sniffer with WordPress Coding Standards in PHPStorm





First step is to enable PHP Code Sniffer in PHPStorm. To do so you’ll need to know where phpcs is installed. Run the following from your command line to find out.




which phpcs





Mine is located at /usr/bin/phpcs.





In PHPStorm, go to your Settings screen (File->Settings or CTRL+ALT+S) and navigate to Languages and Frameworks -> PHP -> Code Sniffer. Next to the Local Configuration click the browse button and enter the path to phpcs in the PHP Code Sniffer (phpcs) path field. Hit Validate to make sure PHPStorm can find it, then click Ok.





Next you will need to enable the WordPress Coding Standards. Back to the Settings screen navigate to Editor -> Inspections, scroll down to PHP and open the tree. Then scroll down to PHP Code Sniffer Validation and tick the box next to it. In the box that appears to the right when you select PHP Code Sniffer Validation hit the little refresh button and then choose your WordPress Coding Standard of preference and click Ok.





Remember to do this last bit for each new (or existing) WordPress project as you can have different Code Sniffer rules set for each project type (for example if you’re working on any non WordPress projects, like Laravel).