Create Digital podcast editing for video website, designed with WordPress. It has a clean fresh look which the client wanted. Lot’s of video examples of work edited for clients.
To showcase YouTube podcasting videos. Make it easily contactable for clients who want video podcast editing services like what create-digital.co.uk offer.
Ability to add blogs for SEO to drive clients who want to hire an editor. The market for audio only podcasts who are transitioning to video is now huge and podcast owners will be transitioning their audio podcast to video to upload to YouTube and need video podcast editors.
Retro Money Beef is a side project aimed at building a whole CRM inside of WordPress.
Design
The design of the site came together from a few resources. My go-to for inspiration is always dribbble.com and I quickly found some great pieces that directed me to this pastel soft design.
This piece on Dribbble called Pastel paradise informed me on the typeface and along with another piece I decided to go with “blobs” that moved as it would add some interest with the animations on the frontend.
@uxgoodies on Instagram brought me closer to the colours I wanted to use, although a bit too much saturation, they formed the basis of my multi-accent design.
I was told about a platform for selling called Skeleton and really liked what they had done with images on their site. Wrapping them in a polaroid frame would add a sense of ‘Retro’ to my theme so decided to borrow their aesthetic ques.
As you can see from the initial design, I pretty much went with this look with a few changes as I went along.
Implementation
A user can signup on the front of the website and can then manage all their orders and user info from /accounts.
Once Signed up a user is created in WordPress with a role of ‘Customer’ and extra fields can be added including phone number and address. This is all done from a custom Plugin I created which can be found here.
The plugin registers a ‘Customer’ role and creates a custom post type of the same name so admin can log in, create, edit and delete customers from the admin panel.
An admin can then call or email directly with link clicks and can see the status of the order directly in the customer table.
The table itself was created with WP_LIST_TABLE to keep the look of WordPress Stock.
Clicking a customer leads you to their individual page where you can update their details. This will soon be available on the frontend for a customer to update themselves.
Another plugin I created for this project was the orders plugin. This plugin lets you create orders using ACF and the repeater field to log items sent in.
Every package will have its unique ID starting with the customer’s ID and hyphenated with the order number, for example, 84-1 will be user 84’s first package.
At the moment I am tying orders to customers with a field on the right-hand side, this way when I look at Customer 84, their orders will show up below to click on.
There is lots of scope to expand on this project, creating user profiles on the frontend is just one thing to come. Various tweaks will happen shortly including adding labels to the form (to get that 100% Accessibility score in Lighthouse), maybe using a modal to display the form in the first place and separating JS files for AJAX forms on the backend/frontend.
All this should help get me closer to 100 across the board on the lighthouse Desktop audit.
The project was interesting and really got me to dig deeper into WordPress and create some custom plugins.
Installed globally you can then run the command create-theme and you will be presented with two options, WordPress or WooCommerce. You can then give the theme a name and initialise with git and install dependencies if you want.
The program will create the files with your theme name in all necessary files and copy them to the new theme directory.
It will also setup the necessary parameters for gulp using a .json file and replacing the placeholders with the themename including the proxy for the live reload. I work within Flywheel so I match my Flywheel name to my theme so the proxy is the same.
The WordPress template includes a medium.com style blog single page and a clean mobile responsive menu. I feel these two things can be standardised so having these setup ready is such a time saver.
When the theme is finished installing I use the node notifier package to use the inbuilt notification centre to tell me all is done.
Future updates for the CLI will include plugin structures and of course a gulp setup and more in-depth look at the theme in general for the WooCommerce template.
Reading a lot into Stoicism recently I thought it would be great to create a quote generator as I wanted to try out CSSTransitions.
After googling Stoic API I found an NPM package that I could install, so I started with that. Digging through the node_modules folder for it, I realised it was importing a JSON file with arrays of quotes. The problem with this I found was that the author and quote for each were part of one long string. I spent a little time re-arranging the data into objects and separating out the authors and then importing the JSON file myself.
A simple app like this means I get to put a lot more emphasis on the details and the design. I searched dribbble for quotes and found a few images to take inspiration from, both by Igor Levin.
Using the colour scheme and idea for a speech bubble I created a div with a before pseudo element to act as the speech bubbles tail. The colour scheme reminded me of a festival I had been involved in and it’s original colour scheme, looking back with archive.org I managed to find the site and used the textures from it as my backgrounds.
These styles mixed with google’s ‘Roboto’ font gave me the finished look of the page.
Using CSSTransitions was, however, a little trickier. When you click for a new quote, a new element is added to the dom, before the existing one has managed to fade out. Even with delays added, it will still appear in the tree first. To rectify this, you can position the component absolutely so it appears on top of itself. This, however, means the ‘New Quote’ button would still be in the flow of the page, but the bubble would not be, sending the button to the top. The problem being that the div takes it’s size dynamically from the quote length, so without a solid height the button below is guesswork, as a result, I swapped it to the top.
Created in React this app uses the MERN stack. It takes GET, POST and DELETE requests to the express server all handled by Redux actions and reducers.
Each item is then stored in the Mongo database, taking in a name, date and id using UUID to make managing the components easier on the front end. When the objects are rendered I then parse the time and split into days, hours and minutes, displaying them in order as they come to the list item component.
The final view is built using the article tag into cards.
For the inputs on the modal, Safari does not accept ‘date’ and ‘time’ types, causing formatting and ultimately errors to the database. To cope with this I used an NPM package called React DatePicker, which gave me a nice UI for picking time and dates.
I am the study group leader at freeCodecamp, which is the biggest non-profit coding curriculum in the world. We organise weekly meetups along with special events. At freeCodeCamp Oslo, we try to bring a deep sense of community, togetherness. Like many FCC groups, we have a lot of expats, people who have moved to Norway, away from friends and family, and this community helps many people, including myself, get out there and meet other developers and form relationships.
On Saturday the 14th July, freeCodeCamp Oslo had our first hackathon, but in the spirit of togetherness, we decided to make our hackathon non-competitive. It was more of a hack-on-a-thing. We have lots of people who are very new to coding and wanted them to feel they could participate and learn something along the way.
Leading up to the hackathon, we decided whether we were going to make it a one- or two-day event over the space of a weekend, based on feedback from the group. After securing a venue thanks to Marek, one of our admins, at the amazing Explorer HQ in the centre of the city, we decided to ask our campers for ideas for the project. In total, we had 7 ideas, and the week before the event we looked at how feasible they were for us in the 12 hours we had. We finally settled on making a web app where users could see if any students were studying around them and had added an invite to the map to welcome collaboration, alternatively they could post their location for others to join their study session.
Starting at 10am at Explorer HQ, we had a few introductions and decided on how to split the tasks. We had many beginners to web development amongst us, all of whom were either, happier contributing to a frontend or interested in learning it, leaving myself to pick up the slack on the backend.
Explaining how to create a modal with a semi-transparent background.
The main problem we had was that we were unable to use frameworks like React to keep secret our API calls as many of the team haven’t used anything like that before, so we decided on HTML & CSS for a static frontend using jQuery to make the AJAX requests. We would also use Bootstrap 4, which would allow quick prototyping, and having a good set of docs would help the frontend come together. Another one of our admins Ekaterina was in charge of more of the client-side Javascript and with Marek would oversee the general frontend development.
The repo was created by Howie, another admin for freeCodeCamp Oslo, and after permissions were granted we started work. The frontend team dived into the Google Developers docs and quickly displayed a map on the frontend. The backend was going to use NodeJS with MongoDB and Express, so first an NPM init was done along with installing Express, Mongoose, Body Parser and a few other packages, within an hour and a half we had our API working. While waiting for the frontend, we were able to test the API using Postman to GET and POST data from and to our database.
After lunch, also kindly sponsored by Explorer HQ, we made a few incremental changes for database entries, but most of the work was for Javascript on the frontend, making sure we could send our GET and POST requests from there, and soon our minimal viable product was finished.
It was great working in a team, which none of us had really done before, with Ekaterina telling us all off for pushing to master multiple times. We hosted the site on Heroku, and the database was hosted with MLab, so after a long day, we had a usable product which we couldn’t be more happy with. There were still things to work on, but our MVP was achieved. The next day I remedied our open API somewhat by using Passport to add Facebook authentication. Also as a team, we added a few fixes to the site.
Altogether the experience was great, working as one big team of 8 people helped make the environment friendly and brought everyone together which was our aim. I implore you to try it yourself and setup a non-competitive hackathon for your group.
Original starting out as a page for my social media (Instagram & Youtube) I decided to make two similar pages with different content, creating from that this page.
Design
The vibe of the site was to be friendly, non-pushy and try hard with happiness and fun sprinkled in there. I had a few websites that I pulled inspiration from. As I build a new page I often walk my way down the page first finding a good header or hero style and building from there. For this website I saw a really nice diagonal hero image and decided to do something similar.
From this, I took the diagonal the burger menu (but not the slide-out navigation) and the highlight text style. Merging this style header with an old archived version of Devtips’ website that presented a video alongside the text, and the colour scheme was close to my branding colour from my avatar.
Finally, I remembered a great artist come developer called Mackenzie Child used to create background doodles and was inspired by these to fill out the white half of the hero image.
I created my own doodle by hand drawing with my mouse things like hamburger menus, git forks, curly brackets and semicolons. Along with my avatar image, this was the basis of my hero section and the foundations of my site.
About me section design has always been my nemesis, my first few attempts were lacking, but I couldn’t work out the best way to do it. First was a centrally aligned circle image and text, which had no real excitement about it. the second faired better, although it had no image. I liked the justified text although aware its a no-no in terms of readability.
In stepped my friend Rosie Manning I asked her for some advice on why my design sucked, and this was her response.
She had nailed it, using the diagonal line to carry the theme across. The next section would have been different depending on whether this was richardcodes.com or this profile. RichardCodes would have had cards for tutorials I did on YouTube, where views could get the relevant files for the projects. On this profile it becomes the Project section with GitHub, URL and view icons for each project. I added a filterable list so that I could tag projects with keywords and the user can see different things I had done.
The social media section came next which hovered over the footer. The footer I took from an old iteration of my portfolio and I used the social media section again from the first website I took inspiration from, Making it work as Instagram and contact instead of Twitter and blog as their site did.
The Code
I had decided to use WordPress as my backend for my portfolio, Over the last few months and various projects I had started to get a proficiency with it. So the first step was to code the website statically and then I would do a conversion to a WordPress theme.
I’m not a huge fan of hamburger menus on desktop, however I came up with the idea to have a standard top menu list nav that appears once the menu icon is clicked, on mobile this would change to a veritcal one, this took a little work but the outcome was great.
There was a lot of interesting uses of :after pseudo-elements to create things like the yellow half section for the hero image, using skew and translate to create a crisp line, Making the whole thing an image would not do. This was the first website I really used SVGs on, trying to give a low burden on bandwidth coupled with the sharpest of images. Some of these were embedded directly into the code so I could alter fill colours on hover (social media links).
The card section was created using flexbox and I will inject the images for them into the div background, this way I can use background-size: cover to make any image fit nicely and not cut or overflow into text sections.
The Instagram section would use the public version of Instagrams API to pull the last posts from my Instagram feed along with their URL to use in the anchor tags. Using the Fetch API to do this and make it really clean.
I then worked on some simple animations using keyframes in CSS. making the yellow skewed section slide from the left to reveal the background doodle wallpaper before the contents of the hero image faded in. The about me section got a fade in and slight move from the right to the left of the screen as the page scrolled to the area where it became visible. The project cards also faded in when the section came into focus one after another and finally the social media section moved down to its seated position.
The animations were a result of adding classes that triggered the animations in javascript. Mostly triggered by the location of the scroll on the page. This also added classes to the menu links in the nav bar when at that section.
Some fun javascript
Knowing I was going to change the backend URL from the regular WordPress one (for security from bots). I decided to add a konami code so I could have a redirect to a longer URL. Try it… UP, UP, DOWN, DOWN, LEFT, RIGHT, LEFT, RIGHT, B, A, ENTER.
Converting to WordPress
Once the site is statically made I then convert to a WordPress theme. I use Local by Flywheel to set up my WordPress environment, it creates a database and WordPress install aswell as firing up a local server, if you’re using MAMP still, stop it! Check out these guys. I will then go to Underscores and create a blank theme template, this theme adds a lot of the regular scripts and pages you need to get started, it’s a lifesaver for sure.
I will then gut the header and footer files and add into them my HTML that will be on every page header and footer. Next, I will create a template page for my home page and thrown in all my HTML and import my header and footers into the top and bottom of that file. At this point my website will almost be there, I need to then make sure my scripts are all enqueued correctly and copy my images etc into the right place in the assets folder.
The main WordPress specific things I need are project section and loops for my cards. I create a Projects custom post type with a script and add it as a plugin and then use Advanced Custom Fields to add things like Github URL, view page URL etc. Once I can create projects I can loop through them and display them on the frontend.
The filtering is a different matter altogether. For this I will need to make AJAX calls and this has to be done in javascript, so now I will need to use the WordPress API. Thankfully the API is not too bad to use and after including Advanced Custom Fields into the API list I can get everything I need. When I click on a filter It fires an API call swapping out the ‘ID’ for the one that matches that category (HTML, WordPress, Pug etc). I added a loader while it waits to return the data.
The usual clean up and a few caching and optimisation things later and my new website is ready to be loaded up with projects.
Working together with Omni Web Design in Leeds I was tasked to design and create Tomas George’s new website. Here’s a video from founder Michael Oxley about the Project.
Tomas’ old page was a mix of leadpages using WordPress to aggregate them. As you can see below his page didn’t instil trust into potential customers and that was one of the major things we wanted to do here.
Tomas came with examples of what he wanted to achieve and with a nice list, these included two main websites that he wanted to emulate. One of these was Tai Lopez and in particular his hero section and social media bar.
There’s a lot of clutter on Tai’s site so we stripped down the navigation for a simpler one and recreated a taller hero image with a close replica to the social media bar.
One of the main focuses of the website was to be able to link straight to Udemy. This would enable Tomas to get more of a cut of profits from Udemy rather than the percentage he gets from users already being on the site. He liked the cards from Joe Pary’s website that displayed information from Udemy.
The cards were a little clunky and with no margins aesthetically they could be better. I redesigned the cards and gave Tomas a more conventional 3 card layout with flex-box. Using a Udemy plugin I managed to pull most of the data I needed and modified it using the Udemy docs to pull in student numbers, and all Tomas needed to do was add a shortcode with the course ID to display the card from the backend.
Similar to Tai’s site we replicated a social media section with widget cards.
Using Advanced Custom Fields and Custom Post Types, I created a resources backend page where Tomas could add his affiliate links easily and these would then show on his resources page.
Completing the website with a custom newsletter form which sends information directly to his Mailchimp list.
Working with Andrew I was tasked to create a website which he could update easily and also hit many of the sales triggers to sell products to his potential customers. Andrew also needed a private area where his clients could get exclusive content from him.
We first started with the design, after receiving a photo from Andrew of a recent photo shoot he’d done, it became clear of the colour scheme we would choose. Andrew was very keen on making the page convert and I implemented his ideas as we went. We decided on a simple one field email capture form which saved to a mail chimp list so he could run his campaigns from there.
MailChimp email capture.
Again I utilised Advanced Custom Fields to create much more editable content for Andrew, giving him control over his hero, about and promo sections on the front-page.
The services section on the site were created using a custom post type, allowing Andrew to add more as time goes on and they would automatically be displayed for him on the frontend, he could access these on the backend with a new post category.
Services menu item for custom post types
I created the same type of component for the testimonials section so Andrew could add new people and they would display for him in the footer.
Andrew wanted the ability to blog and a simple contact form that would email him. These are very simple interactions with WordPress using the built in posts feature and Contact Form 7 Plugin.
Something new to me was creating a members area. After some research I chose a plugin called Members, this would allow me to set roles for users and limit them from certain posts and pages, ultimately blocking them from the VIP area if not logged in.
They were also greeted by a custom login screen, so they wouldn’t have to view the WordPress login or backend making for more of a branded experience.
Working with the YouTube API I created a simple app that has a main video and a clickable playlist underneath. All information is pulled from a playlist I specified using YouTube’s API. The project was originally created using jQuery however, I updated the project and converted everything to React.
Here is a video I made that was picked up by freeCodeCamp on their YouTube channel for the original project.
When I converted to React I used Create React App to create my app then moved on to spliting out my components.
Along with the JSON I receive back, I also get a page token, allowing me to create a load more button at the bottom to keep the weight of the data down when clicked the fetch function is called again and the DOM re-rendered. The next page token was stored in the state along with the current video, so then when a playlist Item is clicked the video updates.
It was an interesting project to take it from HTML, CSS and Javascript/jQuery to a React App, some bits became easier with react, others became a bit more tricky.
