Photo Flick – A Free Stock Photography Tool

Photo Flick is a free stock photography app I designed and developed so I could source free stock images for my website, blog, and social media. The tool uses the API of Pexels, Pixabay and Unsplash to bring all their free stock photos into one consolidated app.

After entering a keyword of their choice, the user is presented with a selection of images in a masonry grid. I went with this structure as it shows as many images to the user as possible within the limitations of available screen space. Each image comes with a suitable description and link which allows the user to go to the suitable platform to download a higher resolution version of the image.

Photo Flick – Free Stock Photography – DK Web Solutions

From a technical perspective, the app was built using PHP to go to the suitable photo API, collect the information and then generate the suitable HTML for the masonry grid to assemble. The app was developed using lazy loading so that the page can be loaded as quickly as possible by loading the images when they are required rather than all at once. The entire application is fully responsive so the user has a great experience on all devices.

It was a proud moment when the tool got previewed on the reputable publication Web Designer Depot as part of their design tools of the month series.

Responsive Typographic Scale Generator

I created the typographic scale tool because I wanted to speed up the design process by making it easier to select a typographic scale. As the scales have a lot of science behind them, applying a typographic scale would improve the quality of my own designs going forward.

Responsive Typographic Scale Generator – DK Web Solutions

The application was designed to be very simple to use by allowing users to select a scale in a dropdown and JavaScript generates a visual typographic scale below. The visualisation allows users to examine each individual step in the scale and work out which scale would be the best fit for their website.

Responsive Typographic Scale Generator – DK Web Solutions

The final major part of the application that I developed was the code preview where developers can grab the CSS code for the selected scale. I wanted to make something that would improve the designer / developer handover by allowing designers to generate a typographic scale and then provide developers with a code sample to give the development phase a head start. The CSS uses CSS clamp, which means the font sizes are responsive and adjust to the device of the user.

Utility Tools

There are a handful of smaller tools that I put together for digital professionals to complete every day tasks in a more efficient way.

Bulk URL Slug Converter

Bulk URL Slug Converter – DK Web Solutions

For SEOs, a common task is to convert a regular piece of text into formatted text that is suitable for a URL. For example, the title of a page could be “The Best Product Ever Made” and the URL slug would be “the-best-product-ever-made”.

The slug tool converts the text using JavaScript and makes the text lower case, changes the spaces with hyphens. In addition, I created a regex to select and then remove any special characters.

An added bonus is that the tool converts the text on more than one line, meaning a series of page titles can be converted in bulk.

There were a couple of notable things I learned making this tool. The first was to use JavaScript to ensure that both textboxes maintain the same height when new text is added or they are resized manually. Second, a was able to broaden my understanding of regex, which can be useful in future development or SEO work.

CSS Clamp Generator

CSS Clamp Generator – DK Web Solutions

As discussed in the typographic scale tool review, CSS clamp is used to make font sizes responsive and adjust the size of the screen. The gradual increase in font size is known as fluid typography and ultimately allows users to get a bespoke experience that is tailored to their device.

The CSS clamp values are generated in the typographic scale tool, however, there are times where an adjustment is required and the clamp calculation should use different values. The CSS clamp tool lets the user enter a range for both the font size and screen width to generate a custom clamp value.

I am better at English than Maths, so creating the calculation for the clamp values with JavaScript was quite a challenge. After conducting some research, I managed to put together a formula in a script that takes the values from the user and then provides a code sample for the user to copy and paste into their project.

I documented the process of coming up with the CSS clamp formula in a quick explainer blog post. The CSS clamp tool later formed the basis for the larger Responsive Typographic Scale Generator.

SEO Considerations and Google SERP Featured Snippets

Finally, I want to mention some of the SEO work that was done along with the tools. Each of the tools required an FAQ section to handle some of the most common questions that users may have regarding the tool.

Google SERP Featured Snippets – DK Web Solutions

Each question and answer uses the FAQ structured data schema so that the tools can appear as a featured snippet on Google. This way, the pages of the website receive some organic traffic and the overall domain authority is boosted.

It was great to see some modern SEO in action and having the desired effect. It was beneficial to research some of the theory of the concepts behind the tools was beneficial for me to broaden my own understanding.

Overall, it was great to create a suite of tools that are useful to digital professionals working in design, development and SEO. The experience designing and developing web applications can be taken into future commercial projects.