Bits and Pieces

We solve a real-world challenge in a client project where we create a page that queries a large amount of GraphQL data within Gatsby in an organised method.

This post shows how to get a truly bespoke developer experience that gives your clients control whilst using the latest frameworks and tools available.

Return of Jack! With a new name, new business and new course at University, I am returning to my personal brand with full-power!

Gutenberg is a new WordPress editor that has divided the community more so than the debate of whether pineapple should be allowed on pizza!

ShareUp Soton 5 went excellent, the residency ShareUp crew turned up ready to show off what they've made and set some content goals for the coming weeks.

I am still in shock and awe at the presence of the WebP file type. The benefits the image provides can be achieved by any developer using a fallback!

WebP lossy images support transparency, are on average 25-34% smaller than JPEG images and 26% smaller in comparison to PNG images.

I often upload presentations for those who couldn't attend or attendees of events I talk at. I ran a little experiment on how to compress presentations.

Growth hacking is a buzz word term that is linked to the promotion of a product or service. To me, growth hacking is marketing but by uncommon methods.

Winchester Creatives is an event hosted in the heart of Winchester by 'Studio Republic'. I presented there in June on a topic that I feel passionate around.

The colours applied to the abstract piece of art named 'The Hive' follow a candy theme, the colours are light, joyful and glow gently.

I love the simplicity of the loading screen design for one of my favourite games Rocket League. So why not create a codepen dedicated to the screen itself?

Magnet Stand was constructed using various shapes that have become distorted and transformed into fluid objects, covered in pink and purple gradients.

On the 24th of May, I decided to go and visit Solent University to attend the poster day of those studying courses related to computing.

For what feels like it's been months of coding and learning, it is finally over (all within a month). My website is ready to go live!

Before I run the tests and compare it against the original results, I first reflect on what the original goal of this project was.

It is time to test the website outside of the Google Chrome browser and see how well the CSS fairs across the primarily used browsers.

In this post, I will be talking about how I have rebuilt my website for Desktop, this will also cover laptops, PCs, tablets, etc.

I will show you how I rebuilt my homepage to become mobile first both in the number of requests required and overall file size.

My personal website centres around imagery more than the average website. If only there was a way I could add automation of keeping the file size low...

Plugins, after looking at the current build of my website, it is easy to get tunnel vision on the theme of my WordPress site

When I start any project, I like to have a blank canvas from which I can build upon. My personal website was no exception.

I thought that before beginning the rebuild of my website, it'd be best to outline some of the key goals that I want to achieve as part of the process.

Welcome to my 10 part series of posts on how I improved the performance of my website, in this post I will be covering a table of contents on what to expect

Third Chance is an abstract piece of art I created using images of sunsets and distorting them beyond repair. This piece of art draws a line in the sand.

This piece of art, titled 'Carnage' was constructed using a stock photograph of a volcano that has been distorted beyond recognition.

After hibernating through winter, ShareUp returned in full force with a high turnout from attendees for ShareUp 4.

Natural Clutch is the second liquid-styled poster I have created using the liquify tool on Adobe Photoshop. Prepare for a tutorial soon.

Mowgli is an illustration I created using vector lines and distorting them with zig-zag effects, the name Mowgli itself is random and unrelated to the work.

Eye Candy is the first liquid-styled poster I have created using methods I had learnt from Skillshare. I may do a tutorial on how to achieve this effect.

My latest website Webjack.co.uk is where I showcase the projects that I've been working on in the past, that I see as of some significance.

Apocalypse Gang is a mixture of both liquify effects and vector graphics. One of my personal favourite pieces due to the candy-like rainbow colours.

I got to attend WPBournemouth, WordPress Bournemouth is an informal and friendly meet up for WordPress users, enthusiasts, and professionals.

I was fortunate to attend the 'All Day Hey!' event in Leeds during April 2017. The event is an all day conference around the subject of website development.

4 hours sleep, 10 hours on the train and 4 coffees into my day and I decided to discuss style and how we can create our own style.

In the recent months, page speed is something that I have become rather interested in. Not only because of the effect it has on SEO but also UX.

Recently I had attended HackSoton, a day for anyone who wants to be inspired by how technology can help produce fun and innovative ideas.

The original photograph used before being manipulated was that of a piece of sellotape under a microscope at a 10x view. It created a cool bubble effect.

Lucky Me was made using several vector shapes, sliced up into triangles and with gradients applied. I also applied some light noise to lower sharpness.

With a photograph of a dandelion, I used the Adobe Illustrator image trace tool to produce outlines based on lighting, I then applied a tonne of distortion.

The task set by briefbox was to create a signup form using basic information like name, address, email, date of birth, and so on.

5% is a poster that is meant to reflect the current state of mental health internationally. 1 in 20 of the population suffer from depression problems.

I took on the challenge of designing a fluid landing page that can be tailored to any wedding invitation website landing page.

I felt inspired to have a go at creating my own animation. Loading glass is a simple five-second animation that I have created in Adobe After Effects.

It had been a while since my last codepen, so I decided to create a simple CSS loader. I want to see what else I can produce using pure CSS techniques.

Made with a thread of string, frayed apart. Cicely is microscopic art made with a friend, who's middle name is Cicely, and therefore dedicated to her.

Fai is an interesting illustration made using an SVG maze generator to produce outlines, these outlines are then given brush effects and colouring.

The concept behind "With Love" is a simple mobile application, sparking the old flame that has long been forgotten in the dating world.

When I first started developing for the world wide web, I was very close minded about how browsers read my code. All browsers have differences reading code.

Image compression is something that I definitely overlooked when I had passed my beginner phase of development for the web.

If YouTube is your only source of knowledge, then you are never going to be too far ahead of the crowd, you will need to be looking around for resources.

To celebrate the opening of West Quay's food court, West Quay hosted the 'festival of light' exhibition which boasted beautiful displays.

An informative talk at Solent university about the journey from both a student and employers perspective and how a work placement was created.

Fortunately, I was given the opportunity to attend Reasons.London on behalf of Moov2 and have a mental refresh of what it means to be a creator.

This starting class will discuss documentation, and how it allows you to understand the full potential of your code and the functions available to you.

Machine pressure is the product of an animation project I've been working on, the aim of which was to make a perfectly looping GIF image.

Bokeh is an animation that I have created using footage of microscope recordings of fruit and kaleidoscope effects in Adobe After Effects.

In this video, I will be going over my personal favourite text editor program and the options/benefits you have when using it.

M4K3 is a representation of dark emotions pushing forward a creative and productive mind, always making to subdue emotions.

'Howwouldyouknow?' is an abstract piece of art, similar to the Rorschach Test it shows ink blot effects that may resemble silhouettes to individuals.

After a long day of work, I went on a photography shoot to get some long exposure shots of traffic close to the city centre of Southampton city.

Eyes Closed, decorative pebbles mixed with X-Ray effects, the piece shows that even when others aren't judging, you cannot prevent yourself from judging.

'Backtoback' is one of my favourite pieces of art, with a strong burn from the centre of an eye figure to the fray caused by the feathers.

'INDO44' is one of my favourite pieces of scanography, even the simplest items can create an almost historic ruin effect when manipulated in Photoshop.

'MGMA-25' was made using a photograph of holly leaves that I had taken in the woodlands when experimenting with time-lapse filming.

'IIAH98' was made using several jewellery accessories aimed at steampunk themed jewellery. The outcome is a dystopian mess of cogs and machinery.

'Farewell to the Airground' is a title to a set of photographs taken in the South of Wales, during my studies at Swansea Metropolitan University.

I made a music video for a local producer in Southampton that goes by the name 'Wilf Hertz'. The video was made using microscopic footage of a strawberry.

I bought some flowers with the sole intention of using them for my scanography projects, the outcome is beautiful, I even put them in a vase afterwards.

Stigma was the result of experimenting with different pieces of software and photographs or photocopies of abstract acrylic paintings.

Virtue reminds me of old carpets you would often find people disregard. I happen to find those carpet patterns beautiful and this art piece follows suit.

A place for all developer job fields to learn something new and apply it to their day in, day out jobs.

Moov2 took part in the BIMA Digital Day at Itchen College, the day focused on getting IT students involved with the digital world.

As the title says the image was composed of a microscopic shot of a marble ball I had cracked. The image was then manipulated to give a symmetrical result.

Get tired of opening your browser every time you want a colour for your flat or material designs? Fear not, the solution has been made!

Hopefully, in the future, we will see other uses of creating media queries for SVGs. Now we are aware of media queries and SVGs capability when combined.

To kick off my new CSS Shorts series, I will be looking at how to create a circle with pure CSS and HTML.

I was recently invited to Solent University to give a talk on employability, university and how to achieve a work placement.

A couple of new faces, a couple of new ideas and a couple of drinks were the perfect combinations for a pool of creativity and discussions.

The 1st ShareUp Soton was a great success! With a load of interesting discussions around content creation from creative individuals in the local area.

It is believed from many sources that the optimal characters read per line falls under somewhere between 50 - 60. Find out how to fit that target with CSS!

Molten was made using the glitch processing toolbox, I imported an image into the 'drawing generative' process and created some groovy textures.

The abstract experimentation titled 'Stretched Space' was made by various distortion techniques, manipulating a photograph of a microscope view of a button.

Simply titled 'Strawbone', this abstract piece of art was made using the microscopic footage of a strawberry that was finely sliced.

Groggy is an ugly piece of art that I made with a strong headache, mainly due in part to my medicine. I made it as a distraction from a headache.

On a Sunday afternoon, I pulled the trigger and purchased a microscope that uses my smartphone with. The following Monday I recorded the following footage.

In the UK there are over 11 million people with some form of disability (Disability facts and figures, 2014). That is over 15% of the overall population.

The task set by Daily UI was to 'Hint: Design a Flash Message with both the outcome for an error and success. Is it for a sign-up form?'

The task set by Daily UI was to "Design a social share button/icon and be mindful of the size, imagery, placement, and purpose for sharing."

The task set by Daily UI was to "Design a music player. Consider the controls, placements, imagery such as the artist or album cover, etc."

The task set by DailyUI was to design a 404 page. Some aspects to think about were 'does it suit the brand's style? Is it user-friendly? (It's up to you!)'

The task was to design settings for something. Is it for security or privacy settings? Game settings? What is it and what's important? (It's up to you!)

In this tutorial, I will share with you the most powerful tool in Adobe Illustrator, the transform tool! I use this tool to create complicated shapes.

The task was to design a user profile and be mindful of the most important data, names, imagery, placement, etc. (It's up to you!)

The task was to design an app icon. What best represents the brand or product? Or is it incredibly unique? Does it look great at a distance?

The task was to design a calculator. Standard, scientific, or speciality calculator for something such as a mortgage? (It's up to you!)

The task was to create a landing page and to consider important landing page elements (call-to-actions, clarity, etc.) (It's up to you!)

The task was to design a credit card checkout form or page. I was sure not to forget important elements such as the numbers, dates, security numbers, etc.

The task was to design a sign up page, modal, form, app screen, etc. I chose to create an app screen for finding the quickest route from A to B.

As per a weekly scheduling, the 3rd pack for Textured Thursdays is now available for download, included are a preview and download for the pack.

As per a weekly scheduling, the 2nd pack for Textured Thursdays is now available for download, included are a preview and download for the pack.

Which is better? Sass or SCSS? Find out the advantages and disadvantages as well as strong recommendation to decide.

Find out what re:cognition has to offer, this fun weekend focused on experimenting with natural interaction and cognitive services.

Colourgrain is one of my personal favourite pieces of art, the combination of vinyl like textures and a muted pastel colour tone combine amazingly.

Onslaught is the product of a photograph sourced from Unsplash of a fireplace, this photograph was then run through pixel processing effects and coloured.

Nepta reminds me of a liquid honey-like substance, however, the colours are almost the opposite of the colour yellow and bring a sea like essence to it.

Sass is a file extension that converts into CSS and allows for a new, and most will agree improved way of coding for CSS.

Update on moving property, changing jobs, changing topics. It's all happening and find out why and what is going to come as a result.

In this tutorial video, I explain how to modify colours that are being applied to objects. You can even import colour themes to your illustrations.

In this video, I will show you how to find and easily import colour themes into your Adobe Illustrator projects using Adobe libraries.

Welcome to my first logo tutorial, where I will be covering how to produce a hexagon logo! Let me know what you think after watching!

In the 4th episode of CSS secrets, I will show you how to remove the ugly default anchor styles applied to your links by browsers.

In this speed art, titled 'Collision'. I create a mesmerising animation using 3D modelling software and then flattening the animation to a 2D perspective.

With easy google fonts I will show you how you can modify the typography elements on your wordpress website live.

A collection of the best cloud generated artwork made with Adobe Photoshop and Adobe After Effects. I keep my symmetrical style applied to all images.

In this piece titled 'Shape Shift', I manipulate cloud effects. I have done a few animated versions and felt like showing the process of the production.

Feel restricted to the default wordpress login page? Want to inject some change in to your website and create some unique difference?

Want to improve your SEO for your Wordpress website? You can now with a simple plugin.

'Divide' was put together using a nebula effect and mirrored with multiple effects including displacement maps to give it a unique look and feel.

The perfect solution to adding a favicon is with RealFaviconGenerator!

In this episode I will be going over how to keep your Wordpress database secure using the WP-DB-Backup plugin.

This is the first time that I have transferred my illustrator knowledge in to after effects successfully.

Ever wanted to quickly and easily add your own team page to a wordpress website?

In this episode I will be going over the basics of the Jssor Slider plugin for Wordpress.

A little speed art of a cloudy themed poster I made in Adobe Illustrator. The whole process is played back at about 5x the normal speed.

The box model in CSS3 is one of the main foundation principles. It is essential for positioning content correctly and creating precise designs.

In this episode of CSS secrets, I look at box sizing and how it can help fix your CSS positioning and in one line of code, you can solve calculations.

In this first episode of CSS secrets, I cover the !important rule that plays a big role in the specificity of code and how rules work with one another.

Just a simple poster I made in a few minutes, to accompany the A3 poster I also made an animation for the poster.

Continuing from the previous episode, we will now add background images

In Summer of 2016, I visited the Southampton Common Park with a friend to relax. She had decided to bring a camera to let me get some photographs.

Continuing from the previous episode, we will now add background images.

Original Okami poster design done by myself, Jack Davies.

In this video I discuss the importance of designing for web devices over the option of designing for screen sizes.

Learn how the basics of how CSS code is written, with the use of selector items, class names and ID names.

Free giveaway for a free smoke styled brush. Best used in Adobe Illustrator CS3 and above. Great for creating abstract illustrations and vectors.

Learn how to remove all default browser CSS, these styles allow you to code CSS without worrying about how the browser will add its own predefined styles.

Information and Communication Technology (ICT) students from Gower College Swansea have been recognised as two of Wales' most promising computer wizards.

Learn how to link a CSS 3 file to your HTML 5 document.

A free to download A3 mandala poster with strong vibrant colours.

I had seen many animations on Dribbble and Behance of uploading user interfaces and felt inspired to design a user interface. I

In this series I will be explaining the many different aspects of CSS and how to use CSS to code a website.

Vintage Ensembles are a new clothing store that love anything boutique and require a website. They follow a trend that is vintage clothing and accessories.

Simply titled 'Southampton Docks', this photo is a reminder of a milestone. I was alone when taking the picture, but I was never alone at Southampton.

In this episode we will be looking at how to validate any code you have created in HTML 5. Using the W3C Validator we can seek out any errors or warnings.

In this episode we will be looking at how you can add comments to your code for yourself or other to understand how your code works.

In this episode we will be looking at how you can add comments to your code for yourself or other to understand how your code works.

The sixth part of a series focusing on HTML 5, how to setup the foundations of any web page. Throughout the series we will develop a basic understanding of coding conventions, web page optimization and how to code a basic website.

The fifth part of a series focusing on HTML 5, how to setup the foundations of any web page.

Want to find out what are the latest website design and development trends of 2016? In this short video I explain the most popular trends that you will need

Meetdraw is a great place for designers, techys and all round computer geeks. Read my summary on my experience with Meetdraw.

A piece of art, titled 'foxes' that I made in Illustrator. I made the shapes myself and apply my own style, watch the video to find out how it is done!

In this video, I will show you how to create a mobile navigation menu for a responsive website. The navigation will be implemented, only using CSS code!

In this episode we will be looking at how to link between with the anchor element. This element will allow you to target internal and external web pages

In this episode we will be looking at how to add your very own images to your website! As well as this, I briefly go over accessibility issues.

In this episode we will be looking at how and why 'Heading' and 'Paragraph' tags are used.

In this episode we will be looking at the basic foundations and how to layout the code of a website.

In this video, I will be explaining how to make adaptive images for use on a website. This will be done using Adobe Photoshop CC and the actions tool.

I will explain how to use SVG renders as code in an HTML document and show DOM the CSS manipulation available to you when you have imported the SVG code.

This is an extra video in the 'Making a Responsive Photography Portfolio Website' series. In this episode, I cover jQuery plugins for your website.

The final piece of the puzzle for creating a responsive portfolio. With adaptive images, you can increase load time and lower bandwidth used by servers.

The final step to making your website fully responsive! Episode 4 looks at how you can implement media query breakpoints to the existing website.

I will show you how to use flexible units and apply it to the website so far! Then moving on to aligning the images correctly using flexbox.

We will focus on flexible units such as %, vm, vh and how you can apply them to the project. Flexible units are important for responsive designs.

The first in a set of several videos which focus on creating a photography portfolio for yourself. We will focus on adding images, making them responsive.

The final outcome of sitting in front of my computer for 50 minutes and playing around in Adobe Illustrator CC. View the article for the full video.

Since the appearance of the hamburger menu, there have been large debates that span across the internet. Does it negatively impact the UX of a design?

I decided to go and purchase myself some 40cm x 50cm frames and print off some of my favourite pieces of artwork to hang up in my room!

As part of valentines day, I had a go at making a love-themed poster, most arts along this theme are cheesy so I used the chemical compound of Serotonin.

So this one took me a couple of hours but I am happy with the results! The tapestry mandala vibe is a strong part of my decor, so it was fun to make my own.

This CSS animation was inspired by LevelUpTuts and focuses on manipulating the stroke of the polygon object to create a cool looking animation.

This is a little codepen I made using HTML5 and SASS to compile the CSS. It doesn't use any images or javascript, and the animation is made using CSS.

This time I created an illustration in Adobe Illustrator and then tried to animate it using after effects, still need some practice but good starting point!

No Face is meant to resemble a blank canvas, awaiting personality or traits to be projected to form an individual persona or character.

A combination of both 3D models in Cinema 4D, brought into Poser, mixed with Adobe Illustrator, The Woman Line Art Posters are my favourite posters to date.

I've always loved the Bauhaus aesthetic, clean, minimal and sans-serif fonts. I thought I'd give following the style a try and make a poster.

Just a little line art piece I did of a deer! Not the greatest at adding colours, but I'm practicing! A great practice of symmetry and vectors.

I love messing around and learning line art. 'Broken Planets' is a poster I made on a dull Sunday afternoon to keep myself busy!

Feel free to check out my new report publication on the use of responsive web design and specifications of how to use it to its full potential.

An Illustration I made playing around with circles, lines and my favourite transform effects. Let me know what you think in the comments!

I have finally finished redesigning my logo. To make it look more sleek and understandable I have refined it from an abstract and obscure concept.

'Subliminal' is an abstract art piece I made while studying how to make zig-zag patterns in Adobe Illustrator! Feel free to download and use wherever.

As it was coming to the end of 2015, I decided to set myself some ambitious new years resolutions. The resolutions focus on design and growth.

In most industries when we see the change we rejoice in the new technologies that are found and how they may benefit humans and their lives.

Flat design is a design trend that has become one of the biggest trends of the last few years among the web design community.

Took me approximately 2 hours to do this mandala at A4 size, hopefully, I get good enough to print my own tapestry mandala soon!

Following on from the concepts of patterns and symmetry, I applied smart objects in Adobe Photoshop to show how easy symmetry is to achieve.

I admit that I sometimes fall in the common design pitfall of new designers which is to focus mainly on aesthetics and making everything look amazing!

Lotus Flower, created with Adobe Illustrator. This vector graphic was one of my first experiments using Adobe Illustrator CC.

Never ending repeating pattern that is available as an Illustrator file, Photoshop file and PNG image file. All download links can be found in the article.

Felt like making a quick mockup of a website loading screen/header. The logo was made in illustrator with shapes, fonts and texture packs.

I've always wondered how animators achieve the effect of text being animated to look as if it is being written, in real time. This animation is the result.

CSS column layouts are a great way of setting up a specific & fluid structure for a website. The beauty of it is that it requires very little code to work.

Fortunately, I was given the opportunity to visit a presentation given by Dan Thomas from Moov2 at Southampton Solent University.

'Routine Session' is the product of my beginner phase of attending the gym. I found myself running into common issues with several mobile applications.

Inspired by the previous UI (user interface) that I have created as part of my university course, I designed Aperture Photography.

New Logo/Watermark. Might make revisions in the future but will be using this for now onwards! If you are wondering why I've used it, it has my initials.

When contacting someone from either mobile or desktop devices, you simply press the contact icon and 3 methods will display, email, call and text.

The best blend project can be found in full on my Behance profile page. Best blend is a hypothetical coffee business looking for a brand identity.

A detailed stylesheet for the 'Best Blend' side project I've been working on. Great for if future developments or designs were to be made for the business!

Logo for a hypothetical coffee shop project called 'Best Blend'. The full project can be found on my Behance profile, along with other assets.

As part of my website design and development my course, I developed a television login interface. The task was part of my 'Interactive Design' unit.

Just a simple illustration I did, I tried to focus on adding some sort of lighting principal to the design. Perhaps it could be used as a mobile wallpaper?

Trends are a complicated subject when it comes to critiquing designers work, many designers see trends as a great thing to base their work upon.

Let me start off by saying that I know this isn't a premium icon pack standard, but it is my first icon pack and I really enjoyed making them.

The volume control interface design focuses on displaying the current volume, as well as warning the user when they decide to play music anywhere above 75%

A super simple geometric microphone icon. I thought the icon I had developed for my geometric icon pack deserved its own poster graphic.

When it comes to design, it is not only important but more so essential to have a good plan made before any production begins.

It managed to rack up a staggering 2000 views so far! I appreciate the feedback everyone has given and please if you have any feedback I'd love to hear it!

I had the idea at night when walking back from the gym to produce a loading icon for a web page made purely of SVG and CSS graphics and animation.

I experimented with double exposure actions in Adobe Photoshop and came up with a woodland crossed with a bear. It's a cool effect that I can use in future

I've always loved the aesthetic of pixelating art. After doing some research I found it was easier than I originally though with photoshop resizing.

I decided to go on a quick photo shoot, which led to this personal favourite image of mine. Simply titled 'Orange Flower'.

My partner and I decided to go for a walk to Penllergare woods so that she could show me a woodland that was tucked away, right under my nose.

Welcome to my new website, this is the first post on my live discussion section. Come check out what I've made and learn what you can make!