Forem: Katie Adams

Animated list with sliding background

Katie Adams — Tue, 16 Feb 2021 08:35:50 +0000

On Twitter recently, I announced the creation of my first ever codepen! 🎉

The point of the codepen was to solve a problem I encountered in a Vue project, wherein I'd been tasked with creating an animation I'd never done before. The brief was a pill-like shape that was animated to slide between items when a new one is selected (see the above codepen). CSS animation is not my strong suit; simultaneously learning Vue 3 and the composition API made an already new thing seem even more daunting.

Hence the codepen. My intention was to strip the process back and attempt to achieve the intended result for with good ol' plain JavaScript. And it seemed to work!

So how did it look once I'd translated it back into Vue? Well, it looked like this:

Let's dive a little further in and see what's happening.

The HTML is relatively straightforward to any Vue veteran. We've got an unordered list with a series of list items. Each list item is populated with the name of a Pokemon (lovingly taken from the PokeAPI. There's a couple of wrapper div tags, predominantly for styling but one of them houses the ul and a span that will act as our coloured pill element.

<span
        id="categoryBackground"
        role="presentation"
        class="transition-all duration-300 ease-in-out z-0 absolute rounded-full bg-red-700"
      />

This funky little dude is going to zoom around behind the various list items, happily animated and colourful. Note the role attribute too, letting screen readers know that this is just for show.

Styling is done in Tailwind so I won't delve into that any more than is necessary.

So: the meaty stuff. The nitty gritty. The Javascript. Tasty stuff.

import { ref, computed } from "vue";

This line brings in some of the Composition API 'stuff' that is available in Vue 3. I recommend reading Dan Vega's post on the Ref and there's also some good documentation on Computed Refs too. Long story short, they're reactive. So if you find yourself using data from the VueX store where the content might change frequently, then your data should reflect it when we use these variable types.

The beauty of the computed variable type is that it is reactive (just like the ref) but it also keeps an eye on the data that it depends on. So when that dependent data changes, it updates itself! Pretty cool, right?

In our setup() function, we define a few reactive variables:

An array of categories, filled with Pokemon names
selectedCategoryName, a self-explanatory string
selectedCategoryElement
categoryBackground, which just returns our little decorative span element from the DOM
selectedCategoryElement will also return a DOM element but it does so using the selectedCategoryName to make sure it's picking up the element with the matching id.

We'll come back to the selectedCategoryElement variable. It uses a function that is worth going over first:

function updateCategoryBackground(category) {
      selectedCategoryElement = document.querySelector(
        `#category${category.name}`
      );
      if (selectedCategoryElement && categoryBackground.value) {
        categoryBackground.value.style.width =
          selectedCategoryElement.scrollWidth + "px";
        categoryBackground.value.style.height =
          selectedCategoryElement.scrollHeight + "px";
        categoryBackground.value.style.left = selectedCategoryElement.offsetLeft + "px";
      }
    }

This is our updateCategoryBackground() function. This bad boy works the magic we're looking for with this animation. Firstly, it updates our selectedCategoryElement variable with the DOM element of the clicked category. Then, provided that this new element actually exists and that our decorative span was successfully found too, it updates the stylings of the latter to match the former! So if the Bulbasaur button is clicked, then our pill-shaped doodad will be told what size the button is and where it is, and he'll rush to copy.

Thanks to the Tailwind classes on the decorative span, any transformations that occur on it - such as changes in size or position - are animated in an ease-in and ease-out fashion. Stupidly simple stuff but possibly not for someone who's never done it before.

So when does the updateCategoryBackground() function even get called? Well, we've got another function called selectedCategoryChanged(). Take another look at the unordered list in our template:

@click="selectedCategoryChanged(category)"

Each list item has an click event handler that uses - you guessed it - the selectedCategoryChanged() function. This function updates the name of the selected value, thus updating the computed functions that rely on it. Then it calls the updateCategoryBackground() function to move our funky little pill around the screen!

I purposefully left the selectedCategoryElement variable until last because it does a couple of different things.

Vue.nextTick(() => {
        updateCategoryBackground(
          categories.value.find(
            (cat) => cat.name === selectedCategoryName.value
          )
        );
      });

As you can see, it calls the updateCategoryBackground() function but is encapsulated in this Vue.nextTick() arrow function. The nextTick() function pushes back when the code runs. It waits until the DOM has rendered. This is important because the updateCategoryBackground function updates the style attribute of our decorative span. It's important that we know it will even be there to receive our update, otherwise we'll get a whole range of error messages.

Lastly, it returns the selected category from the DOM to ensure we have a default value when the app is first loaded. In this case, "Bulbasaur".

And that's it!

There's obviously a lot of ways this can be expanded to include different features and include different stylings. For instance, you can quite easily switch this up to include the usage of the Vuex store!

Let me know if you use this elsewhere or have a play yourself. It'd be great to see what improvements or changes get made!

Configuring the Storyblok Bridge in TypeScript

Katie Adams — Wed, 14 Oct 2020 15:56:37 +0000

If you've not worked with Storyblok before: go away. Do it. Supplement your technological arsenal with something unexpectedly fantastic. You won't regret it, I promise. I thoroughly recommend it.

I've given a very, very brief description below of what Storyblok is and what it does well. This article looks specifically, however, at the Storyblok Bridge and how to configure it in Typescript, as opposed to Javascript. As such, the article assumes you have a project set up and simply need to convert the JavaScript boilerplate code into TypeScript.

Now that the introductory waffle is out of the way, I welcome you, weary traveller. Come share the warmth of my Mac as it tries to join a Teams meeting. Stay a while and rest, and I shall tell you the tale... of the Storyblok Bridge.

What is Storyblok?

Storyblok is a Headless CMS that structures its content as Bloks - reusable components containing fields (i.e. text, image, markdown, another Blok, etc) - that can be inserted into a page and edited at will.

What makes Storyblok special, however, is its Live Editor. Unlike any other CMS, changes made to the content are visible on the webpage as they happen.

That's right: thanks to the power of the Storyblok Bridge, we can see these changes happening right in front of our eyes.

I could warble away about the wonders of Storyblok for time immemorial but I shall digress for now. After all, your content editors will not write any code but we will. That's why you're here after all!

The Code

A project that I worked on recently leveraged Storyblok with Nuxt.js. As you can imagine, the concept of Bloks (reusable components) lends itself very well to Vue and thus Nuxt. However, this is not a tutorial about how to make that kind of project; Storyblok has several of their own. They even offer starter code for a lot of frameworks!

The boilerplate code for Nuxt, however, is written in JavaScript. So what if we don’t want JavaScript? What if we want her stricter, stronger cousin?

TypeScript Storyblok Bridge

Ta da! A Storyblok Bridge connection made with TypeScript:

As you can see, the code performs exactly the same as it would in JavaScript. It has no extra or different functionality but is simply a less error-prone version.

Let's dive deeper.

Exploring the Code

Vue 3.0 and the Composition API

The TypeScript code makes use of the Composition API from Vue 3.0. One of these is the Ref function. You can see this is imported with the Vue 3.0 lifecycle hooks at the top of the file:

import { defineComponent, useFetch, useContext, ref, onMounted } from '@nuxtjs/composition-api'

`onMounted` and `$storybrige.on()`

The onMounted function is where most of the functionality occurs. Within this, we're calling the $storybridge.on() function.

app.$storybridge.on('input', (event: StoryblokEventPayload)...

This acts like a listener for events, of the type StoryblokEventPayload.

`StoryblokEventPayload`

The StoryblokEventPayload type is an interface exposed through the index.d.ts file that can be found in the Storyblok-Nuxt module. This file is imported at the top of the script tag.

import 'storyblok-js-client/dist/index'

You can view this file for yourself by navigating to the storyblok-nuxt folder within node_modules and looking in the dist directory.

Detecting Changes

Within the $storybridge.on() function, we're detecting an event such as input, published, or change, and then handling the action accordingly.

Input

When detecting any form of input, we're testing whether the event ID of our project's content matches the event ID of the changed content on Storyblok. If this is true, then the two contents are matched up.

if (event.story.id === story.value.id) {
   story.value.content = event.story.content
}

Change or Published

If the changes are saved or 'published', then we force a reload of the currentRoute to manually refresh and update our view to the latest version.

app.$nuxt.$router.go({
   path: app.$nuxt.$router.currentRoute,
   force: true
})

Conclusion

And that's it! There was a bit of head-scratching about the what type to make some of this code, specifically the StoryblokEventPayload event. We also had some fun with getters when accessing the value of the story ref, using the new Composition API.

However, this code will now hopefully help anyone in a similar predicament and save you some time too.

Storyblok possesses a multitude of great features for both little and large scale projects. I've listed a few down below, and I seriously recommend that you check them out if you're able. They're doing some pretty awesome things.

Cool Storyblok Features

Live Editor
Image Service (Through their Image API, a 3.5MB image was passed to my app as a ridiculously tiny 25KB image and then automatically cached, improving page load speeds insurmountably).
Support for many, many frameworks
They are a huge backer of VueJS
Custom plugins (You can customise a Blok's fields entirely to your specifications. Imagine a custom built dropdown menu populated with options FETCHed from an API).

If this is helpful, please let me know with a comment or by reaching out on Twitter. I'd love to see what you're creating with Storyblok, especially if this code has been useful to you.

My Portfolio: Rate and Review

Katie Adams — Mon, 17 Aug 2020 15:00:22 +0000

Baby Got Backstories

Ah, my first website. When I was but a bairn (an 18 year old bairn with a metric ton of fairy lights and crippling social anxiety - but a bairn nevertheless!)

'Twas a first-year university assignment, in a class called Web Concepts. For the sake of brevity, I shall describe the website I produced simply as 'a bit shit'. Whilst it was technically acceptable - responsive, fast, accessible - the design and UX left something to be desired. It lacked personality. It was bland and uninteresting. The graphic design was poor (I was not nor am I now an artist).

To give myself some credit, I'd arrived at university with very little programming experience. It consisted of little more than an Avengers: Age of Ultron game I'd created with Visual Basics.

As well as that, there were elements of the assignment which demanded time and focus be drawn away from the site as a whole.

For instance, my lecturer insisted that to demonstrate my skills, I ought to have a <canvas> element with an animated story playing upon it. Admittedly, such a task was not high on my list of priorities this time around.

(If you must know, the story I produced was that of a Pink Balloon at a Blue Balloon party. Naturally, she felt isolated until she floated her way into the gaze of another Pink Balloon. I've been fending off calls from Spielberg ever since.)

But alas, I digress.

All of this is a way for me to say in a round about way (in a swirly whirly kind of way, if you like) that I've come leaps and bounds in web development. I'm now feeling pride in the things I create.

In the last few years, and particularly during quaratine, my knowledge of web design principles, current web trends, new web technologies, and many other helpful concepts has improved exponentially.

I've settled firmly into the knowledge that the role of Front-end Developer is the role for me. And I can't wait to really get stuck in.

To Boldly Go Where Everyone Has Gone At Least Once Before (Probably)

So without further ado, welcome to my website!

As far as I'm concerned, this is merely the beginning of my portfolio. The basis. The foundation. Imagine my portfolio as an infant: toddling around the interweb, its tubby, infantile fists reaching out for purchase. They protrude from some disgustingly vibrant and questionably matched clothing that I, their adoring mother, decided were 'quite sweet'.

If you're willing and able, I'd love to hear what you think. Whether it pertains to accessibility or responsiveness or something else entirely, I'd really appreciate any feedback you'd care to share.

Even if it's positive! Cure my Imposter Syndrome with repeated validation and positive affirmations. Whatever floats your boat, really!

Feedback I've had

I've shared my portfolio in a few other avenues too and this is some of the feedback I've already had:

Move the skills section further up the homepage. The site is already indicative of who you are; show them what you can do.
Looking clean! Super slick on mobile too.
Have a more prominent 'Contact Me' call-to-action on mobile.

Please feel free to leave a comment below and let me know what you think. I wait anxiously behing my keyboard to either cry out in despair, jump for joy, or...

Nope, I think that's pretty much it. No inbetweens.

Thank you in advance!

WasteAway: An Android Recycling App

Katie Adams — Mon, 20 Apr 2020 14:42:01 +0000

University has been a long, four-year journey but I'm finally nearing the end.

And I've just published my first ever mobile app.

Over the last few weeks, I've been learning React Native as part of my final year project at Staffordshire University. It's been gruelling and tough and at times I've had no motivation at all. Nevertheless, she persisted. If you're that way inclined, you can read the code logs that I produced over the entire process. They're not exactly page turners; I read a lot of research papers for several months whilst designing this app and it shows. They do, however, document my entire thought process for the creation of this application.

Now, after many months of blood, sweat, and tears, WasteAway is on the Google Play Store - and I need help.

My dissertation is focused around the climate crisis and how to reduce household impact on it. WasteAway was designed to encourage household recycling, using the principles of Gamification to do so. Users can earn points by recycling everyday household items and entering the global leader board to compete for the top spot.

I'm in need of Android users to download and test the app. Currently, I've got a small pool of friends and peers who are using the app daily and reporting bugs but the more the merrier.

The website specifies the criteria for participation so please check it out. I've also listed the steps to participate below:

Download the application from the Google Play Store.
Fill out the Preliminary Questionnaire.
Use the application for at least 7 days.
If you experience any problems, errors, or bugs, please report them using the Bug Report Form.
Once you've completed the minimum test period, fill out the Application Review Questionnaire.
Testing will end on the 27th of April. Please ensure your bugs are reported and that an Application Review Questionnaire has been filled out by then.

I'm so excited to see my creation on the Google Play Store; 'Watch This Space' as TeaCosy Creations will absolutely be making and publishing more apps where I'm able. I've definitely caught the bug. It's a little surreal to see an app that I've created on a store with so many actual developers. Currently, I'm suffering from some childlike giddiness.

WasteAway may be a little rough around the edges but I'm looking to polish it in the second iteration of development. Please, if you're willing and able, consider helping me do so. I'd really appreciate it.

Development Environment: Windows or MacOS?

Katie Adams — Sat, 11 Jan 2020 22:07:14 +0000

Perhaps it's just me; I have no preference at all. I can flip between Catalina and Windows 10 like a acrobat in the circus. It's as close as I will come to being an acrobat in any sense, I assure you.

However, I'm genuinely curious: which environment do you prefer as a developer?

The question truly occured to me when I was redesigning my portfolio. Using the excellent site Unsplash for a placeholder background began to show a pattern. A lot of the images that appeared for the result 'web development' contained Macbooks. It wasn't familiar to me - nor was it indicative of my development experience.

I've invested a lot into my Windows setup but that's because I also spend my time playing some big ol' games. Many of my peers, however, exclusively work on Macbooks. I oft wonder if it would be worth the investment one day.

So what made you choose one way or another? Is it the software that's available? The aesthetic and appearance? The hardware? The ease of use?

Or are you like me? Have you no preference at all? And why is that? Personally, I worked as an IT technician for 12 months; I was hands-on with the guts of both Apple devices and others. By the end of the year, I was comfortable with most Operating Systems.

I'm not necessarily looking for a definitive answer but, like mine, more anecdotal, personal experiences. So: why do you prefer your environment?

Arrested (Web) Development - Part 3

Katie Adams — Sun, 24 Nov 2019 15:09:01 +0000

Click here for the last part of this series:

Arrested (Web) Development - Part 2

Katie Adams ・ Oct 14 '19

#web #html #css #vanilla

It's been a busy few weeks for this web developer. My partner is recovering from surgery, I passed another Microsoft Office Specialist exam - this time for Powerpoint 2019 - and my deadlines are getting ever closer; I even decided to start learning Swedish! ('Kvinnan läser och talar svenska')

My brain feels about ready to burst - and my skull has regretfully informed me that this would not be advisable.

So, to try and unwind, I've set myself the challenge of producing another post in this series. And this time: it'll be real nerdy.

Arrested Web Development: Part 3

Archive of our Own

For those of you who weren't active in the fanfiction community at any point, then you might need a little bit of background on what Archive of our Own (AO3) is. I can unashamedly say that I was a fanfiction writer/reader for many years and am happy to be your guide.

AO3 is an open-source fanfiction publication website, run by the Organisation for Transformative Works (OTW). OTW describe themselves as "a nonprofit organization, established by fans in 2007, to serve the interests of fans by providing access to and preserving the history of fanworks and fan culture in its myriad forms".

I want to preface this article by saying that I have an incredible amount of respect for the team behind AO3. It is run by dedicated volunteers and solely survives on yearly donation drives. It's a credit to them and their site that every year they meet their targets through fan support alone.

A major perk of AO3 that I discovered very early-on in my developing career was the option to skin the site. It wasn't something I'd truly seen applied outside of Tumblr (is my nerd side showing yet?) so I was intrigued and began to play.

It is within the context of skins that I will be discussing AO3's site design in this post. Every aspect of the site that I suggest improvements for, I will apply. No empty comments. I'll make the change I want to see and show you the code to do it.

Over the last few months, I've been polishing an AO3 skin of my own that I imaginatively called 'Moderno'; it's purpose is to give a more modern web look for AO3. This is the skin I will use to make changes.

At the end, I will link to a GitHub repository with the CSS for Moderno in full. If you want to apply the skin to AO3 yourself, then the code will be freely available. Equally, if you want to fork the repository and suggest changes or code that I've missed, please do so.

In no way do I expect the developers to perform any of the changes I've suggested (should they ever discover this post). A complete site overhaul is a massive amount of work and they already do so much by keeping the site working as flawlessly as they do.

And so, with all of the preliminary information out of the way, let's get started!

The Best Bits

Where to begin?

The font choice for AO3 is predominantly 'Times New Roman'. An absolute classic. The choice for a serif font makes for easy legibility and gives the site the air of a classic novels. A stylistic choice, for sure, but I'll get into that a bit later.

The readability for the typography around the site is pretty good: high-contrast between the font and the backgrounds. In fact, the accessibility score for the whole site is pretty decent.

Google Lighthouse scores it at 78 out of 100. Search Engine Optimisation scores a whopping 100 and Best Practices reaches 93. The area that apparently needs a little improvement is the site's performance; this is likely on account of the jQuery that's used in place of a Javascript Framework.

In-text links are clearly highlighted with underlines, solid or dotted.

The site's brand is also clear throughout the whole site, with its signature shade of red appearing in borders, headings, and highlights.

As much as I could gush about the site, I do want to get onto the things I changed with 'Moderno'. That's why many of you are reading, no?

A lot of the style choices on AO3 are as a result of building a style. As I mentioned, the serif font emulates an Austen-style book. However, for the modern web, this isn't always preferable. The site itself feels dated.

There are techniques used in the site design that have since moved on.

For instance, a lot of grey is used on the site to differentiate between sections.

There are also a lot of sharp corners, hard edges, and 3D styled buttons. Most of these I am able to address with a skin.

Firstly, I will delve a little further into the typography. As well as 'Times New Roman' there are elements of the site that also use the sans-serif font: 'Lucida Grande'. The use of multiple fonts was the first thing I fixed, setting everything to 'Lucida Grande' as the more modern font of the two.

Next, I looked at colour usage. Dark grey backgrounds are used in sections like the menu dropdowns; this can reduces accessibility by using dark text over the top of a dark background, reducing contrast. In Moderno, this is amended by simply changing the background colour to #fff.

#header .menu,
#small_login,
#header .dropdown:hover .current + .menu {
  background: #fff;
  box-shadow: 14px 21px 15px -17px rgba(0,0,0,0.75);
  border-radius: 0px 0px 3px 3px;
}

It is the dropdown menu that is coloured and each menu item is left transparent. A box-shadow behind the dropdown menu makes it appear into as though the menu item is above the rest of the site. It's a little trick improves the usability of the site. Lastly, I rounded the corners of the dropdown a little using the border-radius CSS. This makes the menu appear a little more modern with not a lot of code.

The last trick I applied to the dropw down menu is some animation. Rather than highlight which menu item is being hovered over with a partially transparent colour, I decided to use the transition property.

#header .menu li {
  border: none;
  transition: border 100ms linear;
}

When the user hovers over a menu item, the left-hand side of the menu item slides in with a red border.

The final result of the dropdown menu looks like the below:

My next task was tackling the use of textures throughout the site. A common web trend at the moment is smooth clean colours in graphics. The footer on AO3 and the navigation bar have a textured red background that looks a little dated on the 2019 web space.

Rather than just apply a solid colour to these sections, I did a couple of different things to shake things up.

Firstly, I made the header of the website sticky. Something I have personally experienced as a user is that I will be browsing search results, not find the fanfiction I'm looking for, and want to search something else. When on mobile, scrolling all the way back up to the top feels quite tedious, quite quickly.

#header {
  position: sticky;
  top: 0;
  box-shadow: 5px 0px 18px #888888;
  background: #fff;
  z-index: 1;
}

In this example, I used position: sticky but be sure to check caniuse.com as there are a few bugs on modern browsers with this, as well as just being completely unsupported on IE.

I've also added another box-shadow to the header so that, much like the menu dropdown, the illusion is given of the header floating above the site.

#header .primary {
  background: #990000;
  box-shadow: none;
}

The resultant appearance looks like the below:

The calmer background of the navigation bar improves the contrast and readability of the white text on it.

You'll also notice that as well as redoing the font in the rest of the site, I also restyle the Archive of Our Own logo using the 'Impact' font. It draws the eye more to the logo and was just my personal choice.

Back to the footer! I applied a gradient to this section, as opposed to a solid colour. This is to avoid bland colour usage across the site. I also put in a boxshadow. However, this one I set to be inset.

#footer {
  box-shadow: 0px 5px 30px #282828 inset;
  background: linear-gradient(135deg, #990000 0%,#750000 52%,#4a0000 100%);
}

This gives the illusion that the footer is underneath the main site. This creates a page-like appearance, paying homage to the classic 'novel' style of the original site.

Lastly, I looked at the search bar and the buttons, which had 3D effects applied to them. The search button specifically had the styles below attached to them.

#header #search .button {
  background: #fff;
  color: #000;
  border-radius: 2px;
  box-shadow: none;
  height: 1.6em;
}

The contrast and readability was improved by designing a button with black text on white background. The search bar underwent a similar redesign:

#header #search .text {
  background: white;
  box-shadow: none;
  border-radius: 2px;
}

You'll see as well that I've edited the border-radius for both. Initially, there were no discernible corners; now there are nice rounded corners, emulating the corners that I implemented on the menu dropdowns. A nice modern approach that is neither a sharp corner nor a totally round end.

The result is displayed below:

The placeholder beneath the search bar appears when you begin typing in the search bar. This had a dark grey background initially but was amended to match the rest of the site design, with white background and black text.

#site_search_tooltip {
  background: #fff;
  border: 0.75px solid #ccc;
  border-radius: 2px;
}

There's plenty of honourable mentions within the CSS that I wrote, but I didn't want this article to go on too long. For instance, there was nothing wrong with the hovering transition on the submit button - however, I did amend this to include a fun, colourful little animation as the background.

#header #search .button:hover {
  color: #fff;
  border: none;
  background-image: url('https://art.pixilart.com/0fe65fb08e889f4.gif');
  background-size: cover;
}

Without tidying up a little of the HTML and using a framework to handle the site's content generation, there's not much flexibility with the site's layout. Where there is, it would require creating a site with a complete overhaul of the CSS which - as I said - is time-consuming and more effort than I've been willing to put into the project at the current moment. That being said, I feel like there's so much potential with the site.

I hope that you enjoyed seeing some of the changes I made, and that it inspired you to make a skin of your own! If you'd like to contribute to 'Moderno' or see the latest version of the code, checkout the GitHub repo containing the CSS for the AO3 skin.

kitella1 / AO3-Skin-Moderno

The CSS code required for a complete re-skin of Archive of Our Own

AO3-Skin-Moderno

The CSS code required for a complete re-skin of Archive of Our Own

Welcome to Moderno!

If you're visiting this repository, chances are you've read the 3rd installment of 'Arrested (Web) Development' on Dev.to. If not, welcome anyway!

The CSS code included in this repository can be pasted into the skin editor of AO3 to give the site a more fresh, modern appearance.

Feel free to fork the repository and make any improvements or updates. Together we can build a great thing.

How do I make a skin?

If you've never created a skin on AO3 before, fear not. It's very simple to do. Simply log in to your AO3 account and find the 'Skins' option from the menu on the right-hand menu of your Dashboard. The URL will look something like the link below: https://archiveofourown.org/users/[yourUsername]/skins

From within this menu, locate the 'Create Site Skin' button and et voila…

View on GitHub

Do let me know if you decide to contribute anything; perhaps I'll do a continuation of this post, highlighting some of the gret community contributions that have been made.

In the meantime, see you in the next part of this series!

Arrested (Web) Development - Part 2

Katie Adams — Mon, 14 Oct 2019 12:14:17 +0000

Click here for the last part of this series:

Arrested (Web) Development - Part 1

Katie Adams ・ Sep 23 '19 ・ 6 min read

#web #html #css #vanilla

Caffeine. It's the staple of any developer's lifestyle; I can't even count how many loyalty card apps I have on my phone (that's a lie - I can and it's 5).

Caffe Nero is a personal favourite of mine. Their app makes it easy to order from any of their establishments; simply connect the app to your card, scan the QR code, and the stamp will automatically be applied to a digital loyalty card.

I'll clarify now: I am not sponsored by Caffe Nero nor is this post.

Now, when I originally started the ideas for this post, I was using an older version of the mobile app. Since then there's been an update so - curses! - a lot of the improvements were actually made.

Let's take a look at them.

Arrested Web Development: Part 2

Caffe Nero - Mobile App

On the older version of the app, each section of the app - the loyalty card, the available offers, etc - were split into cards that could be swiped between.

The use of cards as a design was fun. Swiping between them felt natural and was easy to if you were only using the phone with one hand. Even now, in the updated version, all of the controls are along the bottom of the screen which benefits the user in the same way.

Another perk is the design of the app. In the previous version, the background was of a coffee shop chalkboard; whilst pleasing and relevant to the app's purpose, it left the visual appearance feeling a little busy. In the new app, it's now a beautiful dark grey slate. It adds a nice level of contrast that improves accessibility and allows for clear differentiation between sections of the app.

In a similar vein, the font used throughout the app is legible and equally contrasts well against the varying aspects of the app. This supports my final compliment of the app: there is a strong brand throughout. The colour scheme is clear with the signature blue as the primary colour and accented by the gold that's used in any iconography and linked texts.

So where does it lack?

None of the concerns I found do not obviously detract from the usability of the app. For instance, something I noticed in the previous versions of the app and in the current one regards with image aspect ratios.

On the previous version of the app, one of the cards displayed an image anchored to the top.

On phones with larger screens, as is now becoming commonplace, the image becomes distorted.

The splash screen as the app loads on the new version acts in a similar way.

Now, there are two ways to solve this. On a webpage, it's very easy to keep the aspect ratio of an image the same. On your image tag, specify the size of the image using the height and width attributes. Then, using CSS, set the width of the image:

 #imgName
{
   width: 100%; 
   height: auto;
}

This width: 100% sets the width to match that of its parent, meaning it will stretch to fill if necessary. As a result, if the image is on a screen turned horizontally or is displayed on a wider screen like a tablet, this will be taken into account. Hooray for responsive design! However, you can set this value to whatever you want.

The important part is height: auto. This uses the aspect ratio (determined from the height and width attributes you defined earlier) to make the image as large as it can be without stretching. Et voila!

If you're using an image as a background image - see the splash screen for the newer version of the app - then consider using the background-size property. Using background-size: auto will allow the aspect ratio to remain the same but your image might disappear off of the side of the screen. Alternatively, you can set it to background-size: contain; this constrains the image to the width of the parent completely but will leave white space underneath if it isn't tall enough to fulfil it.

So there you go! Not as much to go on as I'd originally intended. Kudos to the developers behind the app for such a fantastic update. If you ever want to give me free tea, just reach out. ;)

If you have anything to add to the discussion or any apps/websites you want me to take a look at, just let me know in the discussion section. In the meantime, see you soon!

Win for the Week: What have you achieved?

Katie Adams — Sat, 12 Oct 2019 22:52:26 +0000

This week, I took the first of many Microsoft Office Specialist exams - and thankfully passed! I got a swanky badge with the Microsoft Word logo on it that I promptly fastened to my lanyard, the iconic shade of blue clashing wonderfully with the BB-8 themed neckwear; there was a noticeable skip in my step walking home. That skip translated nicely into some very swish dance moves I performed last night in a celebratory night on the town.

Next week, I've scheduled to take the Powerpoint MOS exam. :)

I've also begun working for the first time with Bulma. After fighting a little bit with command-line installation (a technique I'm not especially confident in), I finally managed to set up a template webpage with Bulma and VueJS. I can't wait to get started on that project!

So I want to know: what's been your win this week? Maybe it was as big as receiving a well-earned promotion or making the career change you'd been delaying for too long? Or perhaps it was something smaller but just as important. Perhaps you finally managed to walk the dog past that one bank of the river and not be dragged into the muddy water (I am absolutely speaking from horribly frigid experience[s]).

Let's spread the love: give yourselves a pat on the back in the comments below.

Arrested (Web) Development - Part 1

Katie Adams — Mon, 23 Sep 2019 14:12:04 +0000

Sunshine, seasides, and sandy beaches: that was how I spent my birthday this year. Months of savings took me all the way to Mallorca, where I tried squid for the first time and nursed copious amounts of my new favourite thing: Prosecco Sangria (recipe below). 'Twas absolute bliss.

As I write this, however, I'm sat in a soggy little city at the heart of the West Midlands. A change of scenery, to put it mildly. It was on the train journey back from Manchester Airport that I concocted the idea for this new series. Those of you following me on Twitter will already know what it entails:
// Detect dark theme var iframe = document.getElementById('tweet-1167804280553844736-338'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1167804280553844736&theme=dark" }

My intentions for this series are simply to be kind and constructive. This will not become a platform to put-down other developers or their work. Rather, I want it to be a way of pointing to real-world examples of code and saying: 'I like this but I'd do it differently - and here's how.'

With that in mind, the logical first candidate for this series is: myself.

The fairest way to start this process is to prove that I fully intend to be able to take what I will be 'dishing out', and also to enjoy my most laughable website.

So sit back, relax, and prepare for some good ol' fashioned cringeworthy web design. Courtesy of Yours Truly.

Arrested Web Development: Part 1

My First Website

The scenario was simple: create a website about yourself. My first ever portfolio, if you will. My most extensive use of HTML 'in the real world' at the time had been tinkering with my Tumblr blog's theme.

This was the result:

Now, there are many ways I could tear this website apart (and I have in the subsequent years). However, as promised, I will remain kind and constructive, even to my former self, who I must give some slither of credit for cobbling such a thing together without a lick of technical knowledge to her name.

The first thing I will say is that there are plenty of things going on behind-the-scenes that I'm pleased about.

All the images have alt tags with accessible and helpful image descriptions.

<img src="images/2004-square.jpg" width = "170" height = "170" alt = "a picture of Katie Adams as a young child, wearing aviator glasses and a pearl necklace">

Not only do alt tags keep a website accessible, it can also improve SEO (Search Engine Optimisation).

For some context, this image was taken during a primary school assembly, in which I played the role of a meteorologist. My mother rose to the challenge of dressing me thusly. At the time, I believe it must've been endearing and adorable for the gathered parents and faculty. Now when I do this, however, I'm 'out of date' and 'no longer need to attend school assemblies'.

Back on topic! All of my images resize based on the screen size of the device upon which it is being viewed. I also have multiple versions of my images in varying quality to accommodate for differing screens. The latter is achieved using the picture tag, and the source tag in conjunction with the srcset attribute.

<picture>
<source srcset = "images/2004.jpg" media="(min-width: 990px)">
<source srcset = "images/2004-crop.jpg" media="(min-width: 768px)">
<img src="images/2004-square.jpg"  width = "170" height = "170" 
alt = "a picture of Katie Adams as a young child, wearing aviator glasses and a pearl necklace">
</picture>

Each image has also been compressed. This improves the loading time of the webpage on mobile phones and other, smaller devices.

Did you know?

The average user will leave your site if it has not loaded within 10-20 seconds. Scarier than this, the first 3 seconds appear to be vital for 40% of users, who will leave if site processing is any longer.

The icons on the site are all SVGs too (yes, including that horrible lightbulb logo). As well as this, the selected option from the navigation bar at the top is clearly highlighted using a box-shadow. Perhaps it is not the most attractive way to highlight it but it cannot be disputed that it's obvious the user is on the 'Home' page.

As a middle point, I did not include Modernizr in my site (as was recommended by the brief). If I'm being brutally honest, it was because I didn't understand how it worked and ran out of time to learn. The feedback I received, however, did note that I'd achieved a similar effect with Javascript.

In my HTML documents, I inserted a p tag noting that JavaScript was turned off. My first line of JavaScript removed this tag from the DOM. Something to consider when it comes to learning new tools/features: you may understand it better than you give yourself credit for.

Now onto the less pleasing things. Hoo boy, where do I begin?

The colour scheme could use a lot of work. In theory, it works well - the white text on the dark green background, for instance, is clear and legible - but any good designer will agree that the nuances of balancing accessibility and attractiveness are not so callously implemented.

Were I to update the site and create something more aesthetically pleasing, the easiest way to do so would be to declare variables in the CSS files. Variables will store any values you give them; in this case, it would be the hex codes for our colour scheme, making any future amendments easy to implement throughout the whole site.

In a trivial project such as this, variables can be declared at the top of the CSS file so changes cascade down.

:root {
  --mainColour: #76BC46;
  --accentColour: #C14868;
}

.nav {
  background-color: var(--mainColour);
}

If you're using other frameworks, however, be sure to find the best method for the project. For example, CSS preprocessors like SASS and SCSS might be worth looking at. I recently utilised SCSS in a VueJS project; it involved creating a variables.scss file and declaring global values inside, like font-family values and hex codes for my colour scheme. When I inevitably wanted to update these at a later date, I was only changing code in one place!

Advice: remain consistent with your variable names to maintain clean code. No swapping from camel case to hyphenated names halfway through a project! You'll thank yourself later.

The nav bar at the top of the webpage is sticky too, which means that when the user scrolls down, it remains at the top of the page. There is plenty of debate on how best to achieve this effect. I settled on using position:fixed on my navigation bar, sectioning off my page content into a div, and lowering it pushing it beneath my navigation bar changing the margin-top value.

It is not the worst way to achieve this effect but there is one that reduces the amount of code rendered.

#navBar
{
  position: sticky;
}

Now, it is very easy to use the position:sticky CSS, as I didn't. However, it is not currently as widely-supported. At least, not as much as position:fixed. I will allow people much cleverer than I to debate the best practice here.

There is a lot more that I could delve into for this article, the writing process for which was made much easier by having the developer herself to talk to (though it did earn me a few strange looks at the library). Future articles will be trimmed into bitesize nuggets of knowledge.

If you can suggest alternatives to the advice I've given, or wish to contribute to this personal roasting session, leave me some feedback! It can only make me better.

And lastly, as promised:

Prosecco Sangria Ingredients

Prosecco
Orange Juice
Fanta
Fresh Fruit
Ice

Don't ask me for the proportions. I still haven't figured them out and fear I never will.

Jack Of All Trades or Master of One?

Katie Adams — Thu, 27 Jun 2019 10:59:18 +0000

One of these days, I'll write a Dev.to article that isn't just thought dumping onto a page. However, today is not that day!

I pride myself on being a sponge for knowledge. Recently, however, I've been taking a little break from reading around and trying new languages to give my brain a well-earned pitstop. Picture my brain somewhere warm and sunny, with its sandal-clad feet propped up in a deck chair and a glass of ice-cold lemonade getting it's hand slick with condensation. (Do not question how my brain developed limbs and apparently a working digestive system.)

Whilst taking a few days to myself, a question appeared in my head that I've been unable to shake: is all of this extra learning doing me any good?

The more I read about interview practices and techniques, I realise how much I flounder when asked technical questions by people who purport to know a great deal more than me. The thought of going into interviews and being quizzed on my abilities makes me incredibly nervous.

Now some of this can be put down to imposter syndrome, of course, but I must also accept a degree of responsibility . I'm a lot more confident in my programming abilities than I was two years ago but still know that I might not appear the most proficient when quizzed in a time-sensitive situation.

I've also never truly known what I've wanted to do.

For instance, I love video game design and Development - because I love stories and characters and art and music. I want to be part of the process that brought my favourite games before me.

I also love web development. The feeling I get when I've designed a beautiful and responsive site that is also accessible and functional? I imagine it's how a peacock feels when they've just had their feathers done at the local peacock salon.

Software engineering gives me great joy too. Mobile apps, web apps, programs - you name it, I want to know how to make it!

I have something of a childlike wonder for creation, for making things and being able to say 'look, I did this!'

But where does it end? Where do I stop and realise I have to settle for one?

How long before my 'breadth of knowledge' begins to be described as a 'lack of advanced expertise'?

Has anybody ever had the same dilemma? Whether it's about you or a colleague, friend, or family member: I'd love to hear your thoughts. No matter what side of the interview table you were on, how do you handle this type of CV?

How To Balance Personal and Professional Projects

Katie Adams — Fri, 21 Jun 2019 14:32:38 +0000

We've all heard the phrase 'work-life balance'. It's a topic that lots of incredibly clever people on this site delve into regularly. I've seen lots of excellent commentary and discussion about how best to balance the 9-to-5 with the activities that allow us to wind-down.

However, what I personally struggle with, is winding down in general.

As my partner will attest, he once came home late and found me passed out over my keyboard, compiler listing errors that filled the page. (This was approximately 2AM so usage of 'late' in place of 'early' is up for debate.)

Stereotypical student behaviour, perhaps. However, since then, I've heard reiterated many times how important it is to have side-projects, to practice programming outside of the daily grind. Of course I'm all for personal/professional development but my question is: where does it end?

One of my favourite things to have learnt during my placement year is that leaving work at the door feels wonderful. Having worked at a boarding school, I've been constantly shocked and amazed at the culture there. Whether it's being available via e-mail 24/7 or being expected to work 6 days a week, regularly, from 7am until 11pm, there was a persistent desire to be contributing your role whenever required.

Does programming demand the same dedication?

Is it not the delight of home life to be an escape from work? To come home at the end of the day and be able to do something unrelated to your career for a change?

For instance, one of my passions is creative writing. I've published several pieces of fiction over the last 2 years, one of which was 200,000 words long (roughly the same length as Moby Dick). Does this not contribute towards my portfolio, albeit differently to pursuing a new coding language? Is it something I should list on my CV or is it - simply put - irrelevant?

Does it not enhance my portfolio despite not being related specifically to my line of work?

I've also started working on a Raspberry Pi-based project. Developing software for my local animal shelter is a way I can stay involved with my community and also develop my skills. Yet it's very difficult to come home after a day in front of one screen and convince myself to look at another. Especially when the alternative is picking up my guitar or reading a book or walking my dog.

So why is there a need to constantly be busy? With the topic of ergonomics and bettered work environments (both inside and outside of work) being a very hot topic, is it not worth experimenting with other projects? The benefits for not working all hours of the day is surely evident, no?

Hobbies and passions outside of work are great for relaxing and turning your brain off. You can return to work the next day feeling rested. Calmer. Looking at code with fresh eyes.

My mother's often said how sitting with a puzzle for an hour before bed helps her unwind; the simple act of sifting through misshapen cardboard and slotting them together leaves her in a better head space for work the next day.

My sister enjoys adding to her sketchbook outside of work. In fact, she's produced some incredible drawings of comic book characters and local wildlife on account of her dedication to it.

Even my father, a paramedic, finds time to play his Xbox outside of twelve hour shifts and career development training.

However, none of them are programmers. Is it simply a burden of the business? Should we not have pursued programming if we didn't want to be doing it all the time? Are we allowed to have interests outside of our technological bubble?

For the record: personal and professional development, I believe, is absolutely crucial to anybody looking to develop their career. Even now, I'm swapping the HDMI cable on my monitor so I can make some progress with my Raspberry Pi.

However, equally, as somebody about to enter the workforce, I do worry about the culture being developed that might be off putting to new developers or ultimately lead to exhausted, less-efficient programmers.

This post has posed more questions than answer, purely because I do not have any. Being a year away from graduating university, I'm not sure I've got enough experience in the world of work to try and suggest solutions - yet.

However, I've had enough of a taste of employment to know that these are questions I want answered.

Employers and employees: what do you think? I'd love to know how you work - and how you stop.

SOLVED: Raspberry Pi Permissions

Katie Adams — Fri, 03 May 2019 10:57:00 +0000

Hello folks!

I'm looking for some help with a Raspberry Pi project I'm working on.

It's a Raspberry Pi 3 Model B+ running Raspbian and Apache server. Everything to do with Apache is up and running - as in I can see the generatde index.html file and edit it in Geany with the gksudo command.

However, my next step is to set up the rest of the web app within the /var/www/html folder. I cannot seem to do this because of permissions. The folder is owned by root and has a group of root.

I've scoured the web and StackOverflow but can't seem to find any solution that either:
A) is the definitive best practice for security
B) make sense to a Raspbian newbie like me
C) works

I decided to pose my question here. What is a secure way to grant myself editing rights to the /var/www/html folder that doesn't violate security rules? Any sort of explanation that you could offer with regards to what the command is doing too would be very appreciated. I'd like to know what's going on so I can learn from it. XD

Forem: Katie Adams

Animated list with sliding background

Configuring the Storyblok Bridge in TypeScript

What is Storyblok?

The Code

TypeScript Storyblok Bridge

Exploring the Code

Vue 3.0 and the Composition API

onMounted and $storybrige.on()

StoryblokEventPayload

Detecting Changes

Input

Change or Published

Conclusion

Cool Storyblok Features

My Portfolio: Rate and Review

Baby Got Backstories

To Boldly Go Where Everyone Has Gone At Least Once Before (Probably)

Feedback I've had

WasteAway: An Android Recycling App

Development Environment: Windows or MacOS?

Arrested (Web) Development - Part 3

Click here for the last part of this series:

Arrested (Web) Development - Part 2

Katie Adams ・ Oct 14 '19

Arrested Web Development: Part 3

Archive of our Own

The Best Bits

kitella1 / AO3-Skin-Moderno

The CSS code required for a complete re-skin of Archive of Our Own

AO3-Skin-Moderno

Welcome to Moderno!

How do I make a skin?

Arrested (Web) Development - Part 2

Click here for the last part of this series:

Arrested (Web) Development - Part 1

Katie Adams ・ Sep 23 '19 ・ 6 min read

Arrested Web Development: Part 2

Caffe Nero - Mobile App

Win for the Week: What have you achieved?

Arrested (Web) Development - Part 1

Arrested Web Development: Part 1

My First Website

Did you know?

Prosecco Sangria Ingredients

Jack Of All Trades or Master of One?

How To Balance Personal and Professional Projects

SOLVED: Raspberry Pi Permissions

`onMounted` and `$storybrige.on()`

`StoryblokEventPayload`