DEV Community: Lynne Finnigan

I'm a frontend developer. Or am I?

Lynne Finnigan — Tue, 29 Jan 2019 21:56:03 +0000

As a frontend developer, I've always found it difficult to draw the line between what is considered to be frontend and backend development. Apparently I'm not alone in this!

My first job in a digital agency involved me working with HTML, Sass, and Coffeescript to build websites that match as closely as possible to the designs provided by the design team. In addition to this, I would work with Ruby on Rails, which our custom CMS was built on, to pull through data into the views.

I had a great mentor in that job, who taught me so much about Sass and code organisation, which I'm still very passionate about today (I can't thank you enough Simon!). As a junior I was thrown in at the deep end, and for me it was the best way to learn.

In my mind, this was a frontend developer's role, and it felt clearly defined at the time.

A new chapter

In 2015, I moved to a different digital agency. The frontend developers wrote HTML, Sass, and some JavaScript, and then passed it all on to the backend developers to hook up to the CMS.

Things have changed a lot since then, and now our frontends work with the CMS and C# Razor markup, as well as React and Vue when required. But it seems that since frontend frameworks have gained more popularity, the definition of what a frontend developer actually does has become even more blurry.

Other people can sometimes struggle to know which tasks are frontend and which are backend. Sometimes I feel as though people don't entirely realise the amount of work that is involved in frontend development.

We're in a sort of hybrid role that works between designers and backend developers to make sure your website looks awesome and performs well.

It also becomes difficult when recruiting new frontend developers. As a company, we pride ourselves on building websites that match our designs as closely as possible. People will literally tell me if an icon is a few pixels out. And I know what you're thinking, but that's not a bad thing. It has made me better at my job and the smallest changes like that can have a massive effect on the final product. Everyone in the company knows this. It's a team effort and it's constructive. No one takes it personally. Everybody cares deeply about what we're creating.

The difficulty in recruiting a new frontend is that we need someone who is extremely capable with HTML, Sass, styling, and the design side of things - but also a great JavaScript developer. And it seems that they are more divided than ever these days.

The questions I have for the dev community are:

Does anyone else struggle with this, or is it just me? 😁
As a frontend developer, what do you consider your role to be? How would you define it?
Do you feel that the title 'frontend developer' is appropriate for the vast amount of skillsets it covers?
Have you had similar experiences in terms of recruitment, and finding someone with the same expectations in the role?

I think it's an interesting discussion and I have heard of instances where frontend developers feel under-appreciated because people "don't really know what they do". Also for the sheer amount of skills they are expected to know, in comparison with backend development.

What are your thoughts on this?

I'm attending my first dev conference in 2019! Tips?

Lynne Finnigan — Wed, 19 Dec 2018 20:53:44 +0000

I'm excited to be attending my first developer conference in February next year, Frontend Developer Love 2019!

I can't wait to go, there are some great speakers at the event.

As this is my first conference, I'm not sure what to expect. Does anyone have any tips? I'm hoping to get some good photos, take lots of notes, and hopefully write a few blog posts about the experience.

5 CSS tips you didn't know you needed

Lynne Finnigan — Wed, 28 Nov 2018 22:53:39 +0000

Having worked in web development agencies over the years, I've picked up some tips and tricks along the way. There are some things that I use day to day, that I barely even think about. Some of them are fairly standard, and others are a bit more unusual, but all of the snippets and examples below are things that I've used on client websites.

Transitions

By default on all of the websites I build, I always add a CSS transition on the links and buttons for their hover state. It just adds a nice effect on hover, and takes away from that harsh/abrupt change when you interact with a button or link.

// Background colour transition
transition: background 0.2s ease-in-out;

For a button I'd most likely add the transition for the background colour as shown above, for a link I'd set the transition property to all (transition: all 0.2s ease-in-out) which could allow me to transition the hover colour and border for example.

I also never use text-decoration: underline. You don't have much control using that, whereas you can use a bottom border to get a much nicer effect. Padding allows for better spacing, and you can even transition or animate the border if you'd like.

.link {
    transition: border 0.2s ease-in-out;
    border-bottom: 1px solid transparent;
}

.link:hover {
    border-color: blue;
}

Background overlay

Say you have some text, positioned absolutely on top of an image. But the background image is too bright, making the text unreadable. You could add another div in there somewhere to create a dark overlay behind the text, however this is not great and adds an extra empty div that is not really necessary.

Pseudo-elements to the rescue!

Using the :before element means we can also apply it if a certain class is added to the div for instance. Below is an example of how I would achieve this overlay background:

The key part in the above code is setting your overlay colour, and opacity level. This can be any colour, I've just used black and white as an example:

//Black overlay - 0.5 opacity
background: rgba(0,0,0,0.5);

//White overlay - 0.2 opacity
background: rgba(255,255,255,0.2);

Multi-line underline effect

The pen below is something that may or may not be useful to people, but it is something I was asked to do on a client website. It allows the ability to have a bold underline effect which will span across a sentence to the length of that sentence, even if it's wrapped over multiple lines.

Even if this doesn't apply to your design, or requirements. It can also be used for things such as a link hover effect like the one shown below:

Sticky elements

Need an element to stick on scroll, but don't want to use JavaScript, or a plugin, or the height of your content is dynamic and likely to change? position: sticky is your friend.

position: -webkit-sticky;
position: sticky;
top: 0px;

This was incredibly handy for me when I had to have a sidebar stick next to an accordion element. Because of the accordion opening and closing, I would have had to calculate the height or use some other complicated method, when position: sticky just worked straight away. The only thing I've found to look out for is that it doesn't work when the body element is set to overflow: hidden, and is not supported in IE11 (it just doesn't stick, and Edge is fine).

Prevent highlighting

Being able to select text on a website is fairly standard and expected, however I've found occasionally that the user can click multiple times on an element (for example a carousel arrow) and it selects/highlights the element.

To prevent this, you can use the following snippet:

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

If you got this far, thanks for reading! I hope this comes in handy for some people and I hope to do some further posts with some more day to day snippets if that is of interest to anyone.

Follow me on twitter and instagram for more dev related stuff!

My SCSS setup within a Vue CLI 3 project

Lynne Finnigan — Sat, 08 Sep 2018 11:15:53 +0000

I never realised that I had lost some of my passion for development until Vue.js came along. I'm still learning, but it has made coding fun again for me. I've played with it on and off for a little while, and now I'm working on building my own website from scratch again using Vue.

One of the hardest things to get my head around was the project structure. It's something not very many tutorials cover. Eventually I pieced it together, and came across my next problem. SCSS.

I couldn't find a lot of information on how people usually handle their use of global styles, and also styles within each component. I had an idea of how I wanted to do it, but no idea how to actually achieve it. If you're in a similar situation, I hope this article helps in some way.

So here's how I create a Vue CLI 3 app from scratch...

Creating the app

Assuming you have Vue CLI 3 installed, run the following command in the terminal to launch the Vue Project Manager in your browser.

vue ui

If you don't have it installed yet, here is the documentation you need.

To create an app, simply click the create button at the top of the screen in the Vue Project Manager. This will then take you through various steps which you would normally have to do in the terminal, and allow you to save your settings as a preset. Handy!

For my projects I tend to choose the following options:

Package manager: Yarn
Preset: Manual (for the first project)
Features: Babel, Router, CSS Pre-processors, Linter/Formatter
History mode: on
Pre-processor: SCSS/SASS
Linter/Formatter: ESLint + Prettier (Lint on save)

Then click Create Project and it will create your app. You should now have a basic Vue.js project. You can run this by going to the tasks tab in the Vue Project Manager and clicking on serve to launch your site locally.

Setting up our styles

First of all, create a folder within the src folder named styles. This is where we will store all of our SCSS for the app. In this folder, create a file that will be used for your global styles e.g. global.scss

In the Vue Project Manager, go to the Plugins tab and click on the Add plugin button. We want to install a plugin called vue-cli-plugin-style-resources-loader.

Once this has installed, it will add a file to the root of your project called vue.config.js

Go to vue.config.js and add the following code, replacing the stylesheet name/path with whatever you have named your scss file for your global styles.

const path = require("path");

module.exports = {
  pluginOptions: {
    "style-resources-loader": {
      preProcessor: "scss",
      patterns: [path.resolve(__dirname, "./src/styles/global.scss")]
    }
  }
};

Now, all of the styles from global.scss will be available across the project and within components. Normally my SCSS file structure looks something like this to begin with:

I have basic rich text styles within _base.scss, and variables, typography, etc are all stored in their respective folders as partials. These are then imported into the global stylesheet like this:

@import "setup/normalize.scss";
@import "setup/typography.scss";
@import "setup/variables.scss";
@import "setup/mixins.scss";

@import "basics/base.scss";
@import "basics/layout.scss";
@import "basics/links.scss";
@import "basics/buttons.scss";

I also have a folder within the styles directory for components. Each component I create in Vue will have it's own scss partial. A useful feature of Vue.js is that you can add styles within the Vue component file, and these can be scoped so that they will only render if that specific component is rendered on the page.

Now that we're all set up, adding styles to a component is easy. Here is how it would look in my component Example.vue

<template>
  <div>
    <h1>I am a component!</h1>
  </div>
</template>

<script>
export default {
  name: Example
}
</script>

<style lang="scss" scoped>
@import "../styles/components/example.scss";
</style>

Inside the _example.scss file you would have access to all the variables/typography/mixins and anything else you have added in your global styles. You could also write it out inside the style tag like this, with $c-title being our global variable name for the title colour:

<style lang="scss" scoped>
h1 {
  color: $c-title;
}
</style>

However, I prefer to keep all of the styles in one place overall (the styles folder & sub folders), with the file names named the same as the component itself. This makes it easier to find and for other people to work with.

This has been a long(ish) article, so if you've made it this far, thanks for reading! I hope this helps in some way. Have fun with your Vue projects and create something awesome!

How do you gain a deep understanding of your code?

Lynne Finnigan — Sat, 09 Jun 2018 10:53:24 +0000

Everyone has different ways of learning, and I've read a few interesting articles on here about it. Some people are very visual learners, some like to sketch things out, read articles, or watch videos.

My question is: if you have a topic you want to learn, and you want to know everything there is to know about it, and gain a deep knowledge and understanding of it, where do you start? What is your process?

I find that some articles I'm reading are relatively opinionated, or not written with beginners in mind. They can sometimes skip over the structure/architecture of a project and why it is this way. Video tutorials are good but make me follow an example project, which I can't always apply to my own work.

I suspect it really is just 'trial and error' and building up that understanding over time. But I'm just curious. I'm fascinated by people who can tell me how and why things work, when often I feel like I just 'know enough to do the job'.

It's hard to explain but it's not so much about writing the code, or the syntax. It's the overall concept of how things tie together and why things are done in a certain way.

6 Reasons to use Vue.js

Lynne Finnigan — Sun, 15 Apr 2018 12:30:41 +0000

Cover image by Clément H on Unsplash

I recently started working with Vue.js, and so far it has been one of the most enjoyable frameworks to learn. It’s very easy to set up and you can build something simple very quickly. I have had a so much fun with it recently, and felt the need to write this post and share some of the reasons I think people should give it a try!

Simplicity

Adding Vue to an existing web project is relatively simple. You can start coding very quickly without having to know anything about JSX, ES2015, or build systems to get started. As long as you are familiar with HTML and JavaScript, you can read their guide and build something basic within a day, which is a big advantage in a fast-paced development team where you may have to pick up something quickly.

Flexibility

With Vue, you can write an app very quickly and run it straight from the browser, or you can build a complex application using ES6, JSX, components, routing, bundling etc if you want to.

It can handle the many different ways in which you might want to use it. It is also flexible enough that it accommodates for different ways of writing your code, for example, you can write a template in HTML, or in Javascript, or you can use JSX.

It gives you the freedom to structure your application in a way that suits you, there is no ‘right’ way.

Comprehensive documentation

The Vue documentation is very detailed, easy to understand, and includes various code examples. It also has a good, growing community of developers that can offer help when needed.

Can be used for simple and complex applications

For larger, more complex applications you can use Vuex for state management and routing. A key difference between using Vuex and using Redux/Flux with React for example, is that Vue’s companion libraries are officially supported and kept up to date with the core library. Redux and Flux came from the React community and is not tied to React.

Transition effects

During the transition process, Vue adds and removes classes on components/elements. It has 6 different classes which you can then customise in Sass to handle timing, and the start/ end styles of the transition.

It is fun!

I have personally had so much fun learning to use Vue. Coding can be frustrating at times, but with Vue whenever I learn how to do something new it is exciting. They have made learning a JavaScript framework incredibly enjoyable and rewarding.

Summary (TL;DR)

In summary, here are some of the advantages of using Vue.js:

It is a stable progressive framework
Easy to learn and understand
Simple and flexible
Uses MVVM architecture
Comprehensive documentation available
Focus on organisation / project architecture
Can be used for simple and complex applications
State management is simple and intuitive
Provides a number of ways to use transition effects
It is a lightweight framework in comparison to React or Angular (around 20-30kb in size)
It is fun!

Originally posted on http://www.lynnefinnigan.com/blog/

Colour coding with SCSS each loops

Lynne Finnigan — Mon, 13 Nov 2017 23:14:13 +0000

Often my job requires me to create modules that a user can add and customise from a CMS. In many cases, they like to have control over the background colour of the module to fit with their brand colour palette.

I wanted to share the way in which I generally write this in SCSS, as some people might find it useful.

Here is an example of the html for the module they can add. They can select the background colour in the CMS and it comes through as a class name on the module, e.g. "green".

<section class="module green">
  <p>Content goes here</p>
</section>

In the SCSS file we can create a list of the colours called $brand-colors. Inside each bracket we have a string (the colour class name from the CMS), and the hex value or colour variable name, separated by a comma. You can add as many values as you like in here, but for this example I'll stick with two.

$brand-colors: ("red",$c-red),("green", #008000),("blue",#0000ff);

.module {
  @each $color in $brand-colors {
    &.#{nth($color,1)} {
      background-color: nth($color,2);
    }
  }
}

We can then declare an each loop, nested inside the styles for the module, which loops through each $color inside our list of $brand-colors.

The first part of this - &.#{nth($color,1)} - is referencing the first value inside our brackets within the $brand-colors list. So for this example, if we were to write this out the normal way, it would look like this:

.module {
  &.red {}
  &.green {}
  &.blue{}
}

The next part - background-color: nth($color,2); is referencing the matching variable or hex code within each set of brackets. Note that this doesn't need to be wrapped in #{}.

With an each loop like this, you can save a lot of time and many, many lines of code. It might seem like overkill for 2 or 3 colours, but this way also makes it easy to scale up if they decide they want more colours added in the future. The example I've used is for colour coding, but this can be used in various different ways, with different values/options.

I hope this is helpful in some way! Feel free to share ideas of how you might use this in a project.

For more reading: http://thesassway.com/intermediate/if-for-each-while

Advice on training junior developers

Lynne Finnigan — Sat, 16 Sep 2017 13:10:09 +0000

Hi!

I work as a front-end developer, and have recently found myself in the position of mentoring and training a new junior front-end developer.

I'm relatively good at dealing with people on a personal level, but in terms of training and teaching good coding practices, I haven't really had to do this kind of thing before.

I thought it would be an interesting discussion in the Dev community, to find out what other people's experiences are with this kind of thing. As a developer, taking on a role that involves managing another person can be daunting. At the moment I find that I just want to be as helpful as possible. How do you start to transfer knowledge and experience that you've gained over years?

Here are a few questions that I'm curious to know:

What is the best piece of advice you were given as a junior developer?

Have you ever had a 'mentor' of some kind?

Do you have any preferred methods of teaching development work to another person?

Discuss!