RSS
 

Archive for the ‘Website Development’ Category

Rewriting mobeigi.com with React

20 Jul 2020

Learning React

Recently I have spent some time learning React as it is the front end library of choice at my workplace Atlassian. Learning React was quite easy and intuitive. I used a handful of resources and one I’d like to heavily recommend to beginners is React.js Essential Training by Eve Porcello. Previously, all of my websites had been written in PHP and while I am very comfortable with PHP and do enjoy writing it. However, I do see the immense value in writing reusable components and the benefits of conditional rendering.

React Pros

Here are the things I like about React:

  • Reusable components
  • Conditional rendering (for performance and user experience, also no more custom XMLHttpRequest (XHR) requests
  • Typescript integration (find bugs by devs at compile time rather than by customers at runtime)
  • Flexible and powerful styling options (inline styling, styled components, css modules)
  • Helpful addon packages that just work (axios, react router)
  • API driven architecture (decoupling front end and back end using API’s)
  • React Developer Tools addon provides some nice features such as profiling

React Cons

Some things that bothered me (nothing major though!):

  • Lot of boilerplate code to get a simple app running (although create-react-app (CRA) helps with this).
  • Tracking down errors can be very tough
  • Harsh linting rules (use more relaxed linting rules or else you won’t be able to use best practices at times!)

Rewriting mobeigi.com

To fully appreciate React I rewrote my website (landing page) from scratch in React.

The source code is available here:
https://github.com/mobeigi/mobeigi.com

It is a pretty simple site with only a few features:

  • Standing landing page with links to social networks
  • A page to show off my trading history
  • A popup dialog to download my Resume (password protected)
  • A link to my blog

In the end I was able to reproduce a clone of my original website in React.

Both the new and old versions looked almost identical:

mobeigi.com React Rewrite Side by Side

mobeigi.com React Rewrite Side by Side Mobile

Differences include:

  • New website addressed some styling issues (such as button onhover text not contrasting with button background colour)
  • New website is properly responsive using rem for sizing and em for padding (old website was partially responsive using pixels for sizing).
  • And not much else!

Finally, I decided to use Lighthouse from the Google Developer tools window to analyse my website to see the performance before and after the change.
The desktop profile was used.

Old Website:
Lighthouse Old Mobeigi.com Website

New Website:

Lighthouse New Mobeigi.com Website

So overall not a huge difference for such a small website but a step in the right direction.

 
No Comments

Posted in Website Development

 

WordPress: Regexp and Post Views Counter Plugin

28 Nov 2015

Unfortunately, the WordPress theme I am using did not show any views for each post. While I already had an analytics account, I wanted to display the number of total unique views on my website.

I quickly found a plugin called the Post Views Counter by Dfactory. I installed it and configured it so I could use the shortcode it produced ([post-views]) in my theme.  However, the shortcode was formatted and the output contained some HTML that I simply did not need.

To demonstrate, let me print out the shortcode in this post:

1,315

The output from above (if you view source) is:

Note: The 0 will obviously be different (to match the views this post has).

I intend to use PHP regexp to get rid of all of the html and leave only the view count so I can put it into my theme. However, I first need to print out the shortcode within <pre></pre> tags because I suspect there is some whitespace in it.

So I use the follow PHP code to test:

Here we are using the WordPress function  do_shortcode to print out the content.
The results from inspecting the page source are:

Great so we now know what the actual output looks like. Now we can write the simple regexp we are going to use. I recommend using a regexp tester such as this one (http://www.phpliveregex.com/) so you can test the pattern as you go.

I ended up using the following pattern:

I used the s flag so that newlines were also matched.

Finally, I performed a match to get the view count:

 
4 Comments

Posted in Website Development