Latest Updates
December 28 2023
Finally got around to fixing the News RSS feeds. It turns out the signature of the feeds had changed. Not a difficult fix, but a bit time consuming. Who does that anyway?
June 12 2022
It's been a while! This site has been rebuilt with NextJS. It went live back in January 2022 but there were quite a few things that needed fixing and I haven't had much time to work on this. This morning I added a fix for the syntax highlighting in the code blocks. It turns out that NextJS needs a little help for Prism to work correctly.
September 09 2020
Replaced the NEWSApi feeds with RSS feeds. The first feed comes from CBC - World News. The NEWSApi was fun to work with but the production version of this website required an expensive license, so the alternative was to use freely available RSS feeds which of course meant rewriting the NEWS section.
December 03 2019
The Code Snippet's pages were looking a little long and I wanted to bring the focus to the stage area where the widget lives. I added a 'Read More...' button to show/hide the detailed description. When the detailed description is showing, there is another button to 'Show me the code'. Less clutter is better I think.
November 29 2019
Added an new code snippets widget: Weather App
November 23 2019
The unnecessary footer was removed. The "latest updates" where moved to the top nav. On mobile, the icons were replaced with text descriptions. A background color for the modal was added.
November 18 2019
The top nav item "Code" now maintains active state when navigating to individual snippets pages.
November 10 2019
Refactored the Pizza Pie project. The pie now has 8 slices (not 10) and 'Starting Over' no longer causes a full page refresh.
November 07 2019
Added this modal to keep track of what is new here - and when it was added. These notes come from the repos' commits file.
November 06 2019
Converted the site to React hooks where possible. This is a big refactoring project but results in a more readable and maintainable codebase.
November 03 2019
Added Google Site Tag to index.html - time to get onboard with Google Analytics for this site!
October 31 2019
Added the Random Password Generator to the Code section.
October 18 2019
This site is now a PWA (Progessive Web App). Check it out on your mobile device and add it to your homescreen!
October 16 2019
Dark mode has been added! Click on the sun (or moon) icon in the top navigation menu - enjoy! Your settings are saved to localStorage.
September 07 2019
Tweaks to the Todo List styling for Safari on iOS.
September 03 2019
Added a FontAwesome icon for the delete button on the Todo List - the CSS wasn't cutting it!
September 02 2019
Added react-helmet as a dependency to add unique titles to the pages. Hover over the tab in your desktop bowser to check it out. Another insightful recommendation from the Lighthouse audit tool in Chrome.
August 30 2019
Added the Pagination Project (complete with Google Maps) to the Code Snippets page.
August 04 2019
Added a zoom-out effect on scroll to the hero images (section landing pages) and tweaked some accessibility colour contrasts.
July 23 2019
Added a colour changer for the list title and counter for the Apple styled Todo List.
July 18 2019
Added code badges to the cards on the Code Snippets page.
June 26 2019
Fixes to the mobile nav menu for iPad(Pro).
June 24 2019
Resolved issues with the Netlify Contact Form.
June 24 2019
Initial commit!!!

Home Page

Welcome

Thank you for visiting my website.

I am a Front End Web Developer in Toronto and I have been building websites for more than 10 years. My background is making websites with HTML, CSS and JavaScript from Photoshop mockups. I have worked with PHP, mySql, Wordpress, jQuery and many other technologies. When mobile devices arrived, I learned responsive web design with fluid grids as well as the importance of web standards, cross browser compatibility and accessibility.

With the arrival of task managers such as Gulp and Grunt, minifying CSS and Javascript as well as optimizing images was no longer a chore and the benefits of faster load times became obvious using these techniques. Flexbox and CSS Grid gave us the ability to design web pages in ways that we could never have imagined. At any rate, the industry has moved on and new technologies have appeared. React, Angular, Vue and Gatsby are just a few that are changing the way we now present content blazingly fast.

Staying on top of the latest technologies and techniques is challenging but I want to keep building websites using the latest and greatest. This site is built using React - a JavaScript library for building user interfaces.

So what's here?

The first thing to understand about React is that it is component based. This makes it easy to build reusable elements.

You can design simple views for each state of the application and React will update and render only the components that are affected when the state changes. That's one way that React seems to load so quickly - it only reloads the piece of the page that has changes and not the whole page.

This is not a tutorial, but other concepts such as state and props are important to understand. When I was building the mobile menu I wanted to add an animation to the hamburger menu. Simply attaching an event listener to an element with getElementById no longer works the way it used to be done. You need to setState for that element so that when an event is clicked for example, the state is changed and the element is re-rendered adding a class.

I have tried to explain more on this in the Code Snippets Section.

Code Snippets Section

In this section I have converted some past side projects written in HTML, CSS and Javascript.

The original code is shown in the syntax highlighting sections - usually one section for each. For the syntax highlighting I used Prism which is a lightweight, extensible syntax highlighter. Check out the Prism website to learn more.

If you want to see how the original snippets worked, you can copy/paste from the snippets into separate files (i.e. index.html, styles.css and scripts.js) and run them in a browser.

There is a short explanation as to what was required to convert the snippet for use with React at the top of each snippet's page.

News Feeds Section

I have always added a news feeds section to my site.

In React we can use the Fetch API or even a node package such as axios to fetch JSON data from the Internet and display it on our site.

For the news feed on this site I am pulling the data from the News API.

Turns out the NewsAPI was way too expensive for this site, so I'm pulling some RSS feeds from the CBC. Thanks CBC!

Contact Form Section

Every website should have a contact form, even a simple one.

I am hosting this site with Netlify and they provide a (mostly) simple way to add a contact form.

Go ahead - send me a message. I promise to get back to you.