DEV Community: Taliesin

Finding the job you want

Taliesin — Fri, 01 Apr 2022 15:24:42 +0000

## Introduction

Wow, you made it to part three! Or you just found this blog with no idea it's part of a series. If that is the case, allow me to enlighten you.
As mentioned, this is part three of a three-part blog series. I am writing from my experience as a self-taught developer and giving some advice on what I consider are the main challenges of being a web developer.
This part continues from part two, where I discuss working in your first job. Here I will discuss progressing in your career and finding the job you want to get.

Money vs Lifestyle

This question came to me fairly recently, and I think it’s a question most developers will have to ask themselves in their career. Do you choose work that will pay much better, or do you choose a job in which you will be more comfortable that has more benefits.

As I mentioned in the first blog in this series, I got into web development for the freedom it could offer. Although, of course, money does play a part in that, I can now afford to travel more. But I still need to be free enough to travel.

This question will have a different answer for you as your priorities in life could be much different e.d. you may have a family or a passion you wish to pursue other than coding. For example, I heard of someone recently that became a dev, only to fund their pilot training, and I have a friend who only wants to work 3 or 4 days a week to focus on their music.

Sum up

Ask yourself what you want from your work
Consider your position in life
Decided what you prioritise

Learning new skills

In this industry, I think it's always important to learn something new. Not only because tech is constantly changing but for your progression too.

The decision to learn a particular skill should not be taken lightly. The worse thing would be to learn something to then never use it. This has happened to me early in my career, and now whenever I start to learn a new skill, I make sure it's something I will be able to utilise, either for getting a new job or personal projects.

I think you shouldn't worry about pushing back against doing work that will be required you to learn something new that is of no interest to you or you will not use in the future.

Sum up

Never get complacent in the indestry
Think about it before you commit to learning a new skill
Try to avoid learning things you don’t need or want to learn

Job agencies / recruiters!

Being a developer will mean you will probably get harassed by many recruiters (that's been my experience working in the UK anyway). I've had good, bad and annoying ones.

I've heard a few stories of people getting miss-sold jobs, which has happened to me in the past. I've had recruiters call and message me 2 or 3 times a day and try and push me into new positions I'm not sure about taking. So now I err on the side of caution when dealing with them.

But on the other hand, they can be instrumental in helping you get the position you want. Recruiters know what and what not to say. They can also save you time by communicating with the company, lining up interviews, and getting information.

The thing to keep in mind is they want you to take the job even if it's not quite what you want, and they will try to sell it to you as much as they will sell you to the company. So it's probably better to find work by going directly to the company or through friends if you can or find a good recruiter you can trust.

Sum up

Recruiters can be useful for saving yo time and selling you skills
Be cautious if a recruiter is overly pushy
always remember they are trying to sell you the job

Conclusion

I hope you have enjoyed my blog. I have been talking about things from my experience, which if you want to know more about me, check out my first blog in this series. If you have liked this, please check out the other blogs we have written on our company website, where we have tutorials and other bits talking about developer life.

My experience being in your first dev job as a self-taught developer

Taliesin — Mon, 31 Jan 2022 15:14:17 +0000

Introduction

This blog talks about my experience and advice on what I consider the main challenges in your first dev job.

This is part two of a three-part blog series where I am talking about the main points of being a dev from my perspective of a self-taught web developer.

The first two months

A picture I share on instagram from my first day as a developer

My first job was working for a company that built browser-based software for the shipping industry. I started as a frontend only dev but ended up becoming full stacked. I was fortunate to have some lovely colleges that mentored me a lot in the first few months.

From my experience, the first two months were just about learning the ropes. How to use git properly, get used to the code base, and interacting with other devs. It may be a different story working for an agency, where you would probably be expected to build things quicker and have less opportunity to learn new skills in your own time.

At this point, you will want to get used to your working environment by learning the do and don’ts of working in this industry, learning about your company and learning the process of doing your job.

Sum up

The first two months is just about learning the basics
No one will expect you to do an amazing job straight away
Don’t worry about trying to impress at this point

Imposter syndrome

It’s a black sheep, get it?

Imposter syndrome is the feeling of self-doubt, and somehow you don’t deserve or belong in the position you find yourself in.

I read about imposter syndrome before I even started as a developer. Being a self-taught dev who has never attended higher education gave me imposter syndrome as soon as I started.

Getting used to working with other people was the main thing. Before I got my first job, the only time somebody else read my code was when I was showing it off in personal projects or code challenges. Now everything I wrote was getting reviewed. This would make me very nervous every time I would commit my work.

The best way to get over this, I believe, is to remember no one is perfect, and everyone you are working with are in the same boat as you. Talk to your colleagues and be honest about what you do and don’t know. For sure, they will understand because they have been in the same position, whether it was at uni or their first dev job. However, you must overcome this feeling to help with your personal development, for reasons I will talk about in the next section.

Sum up

Be honest about your skill level.
Everyone is in the same boat.
Your colleges have been in your situation before.
Don’t let imposter syndrome hinder you from reaching your goals.

Personal development is key

Replace "dangerous person" with most "best-tist developer".

In my opinion, the main focus in your first job should be your personal development as a developer. You are essentially going from a junior or intern skill level to a mid-weight level because when you get to that point, you will have so many more options in your career (This I will talk about in part three).

The best way to do this is by learning from your peers. This is why it is essential, to be honest about your skill level and overcome that imposter syndrome I mentioned in the last section. If you don't know something, say it to your colleagues or ask for help directly. There will always be someone willing to show you or help you.

Another thing you can do; when another more senior dev is reviewing your pull request, ask them to be as brutal as possible, don't let anything slide. This might be frustrating at first, but it will help you become a better developer. And people respect someone willing to learn from them.

Sum up

Your focus should be personal development
Always ask for help and ask colleges to be brutal on pull requests
People respect someone willing to learn and not overly cocky and proud

Conclusion

I hope you have enjoyed this blog. Please check out the other two blogs in this three-part series. Much of what I said is from my personal experience, and I know it is just my opinion. My goal here is to give some advice and hopefully help someone going through what I went through.

From a self taught developer to first web dev job

Taliesin — Mon, 24 Jan 2022 14:32:54 +0000

Introduction

This is a three-part blog series where I would like to talk about what I consider to be the essential points when being a self-taught developer. I will talk about some positives, negatives and some advice from my experience.

My personal experience

I couldn’t find a picture of me when I started learning, so heres me in Vietnam the year before

This blog is part one, where I will be talking about self-teaching yourself code to getting your first job.

Firstly let me introduce myself. My name's Talie and I work at Pixelhop. I have been a full-stacked web developer for 3 years and have worked for 3 different companies.

I started learning to code when I was 23. When I wasn’t sure what to do with my life. I was staying in Bangkok and messing around on my second hand computer, learning a bit of HTML. I found it quite satisfying, and decided to go back to England and focus on learning it properly. Not knowing if I would ever really be able to get a job. Four years later and I believe that was the best decision of my life.

The reason I decided to start coding, was mainly for the freedom I thought could be achieved from working in this industry. I had no interest in working in an office and initially wanted to live a nomadic life as freelancer.

I have never been to university, and taught myself how to code over the course of a year before I got my first job. One of the great things about this industry is, in my experience, companies and colleagues don't care about whether or not you have attended higher education.

The importance of notes

My old notes from when i first started learning JavaScript

Notes notes notes! For me, this is the most crucial part when learning to code. It's the basis of all your learning and will help you when studying to get that first job and even after you have started.

If I could go back to when I first started learning, I would start with focusing on taking notes well. The ability to note something down in your own words, quickly and clearly, is really powerful.

Trying to memorise things you don't fully understand will lead to frustration. Something I know from experience.

When you start out, noting everything you learn will really help you. No matter how basic it may seem and you will find yourself referring back to those notes every time you forget something until you start memorising it.

This is also massive help if you ever take a break from learning. You can continue from where you left off and refer to your notes when you come back.

Sum up

Note as much as possible (literally, everything when you are first starting out).
Don't try memorising anything. That will come naturally.
Use some noting software to make it easier, for example; Notion or OneNote.

Your path

As I was learning, I didn’t spend enough time to fully understand what I needed to learn and to what level. If I had really planned out a path before getting stuck in, I think I would have saved a lot of time and energy.

So what do I mean by finding your path? I mean the things you learn, i.e. Javascript, PHP, design. Should be in line with your end goal.

I know what you're thinking, "well, duh", but I believe this is too often overlooked.

We should remember, as self-taught developers, we don't have anyone to keep us disciplined and tell us what to learn and in what order. I had found myself learning something that I later found out was out of date, Cough cough.. jQuery or something that could be done by a language that I already know Cough cough.. PHP.

Before learning anything new, I recommend really thinking about what you want your goal to be, i.e. becoming a backend dev or full stacked dev. Research what your desired goal requires by looking at job descriptions or finding out what the most common and up to date tech is being used for a specific job.

Having a fixed path will save you a lot of time (trust me) and keep you motivated because you will be sure you are going in the right direction.

Sum up

Stick with your choice and follow your path to the end.
Consider your strengths and weaknesses, i.e. Are you more visual or technical?
Stick with what you already know and go deep with it, e.g. Don't go and learn Python to build an API if you already know Nodejs.
Spend time planning and don't jump into anything without being sure.

Your goal

A picture I posted online when I first got a second screen, I remember feeling so chuffed that i had got to this position.

Now we have spoken about choosing your path; the natural next thing should be what your end goal should be?

I want to say that this will probably not be apparent right from the beginning. It will take some time and research.

I decided to start coding mainly for the freedom I believed could be achieved from working in this industry. I had no interest in working in an office and just wanted to live a nomadic life as a freelancer.

It wasn't until I did my research and found out getting clients was not as easy as I thought and the best way to learn from people is to work next to them in an office. So after that, my goal changed and getting an office job actually became my main focus.

It would also help to consider your position in life, i.e. when you should start working? For example, starting at a junior position, intern or getting clients. Of course, this will depend on what position you are in personally. Ask yourself; if you have the time to work towards a junior role rather than wasting time trying to apply for intern positions. Or would it be better to try and find some work on the weekends as you are busy most of the week?

Sum up

Think about what you want to get out of learning to code, i.e. become freelance, get a stable office job or maybe just for a personal project.
Keep in mind that your goal will not be the end, e.g. getting a job. Maybe don't think 'what do i need to do to get this specific junior role' instead think 'How would i get to a mid-weight position as so & so dev'—making your initial goal to get a junior position.

Personal Projects

One of my first personal projects

Personal projects are the best tool for you as a self-taught dev.

It's the most meaningful way to show off your skills. You can put any old guff on a CV or complete a code challenge where you print out a sequence of numbers. It might seem impressive. But it's nothing compared to an actual functioning app with a purpose and more realistic to what you will actually be doing.

They are also the only way to show your non-dev friends and family something cool that you can do with your skills. Perhaps even convince them, all this wacky computer stuff you have been working on does have a purpose after all.

For me, that's what really got me hooked on development. Instead of thinking, "there should be an app for that" or "someone should make a website like this", I consider that an idea and start to think of ways I can make it.

Sum up

Try to be original. It's easy to follow a tutorial on making a to-do app or whatever. But its a lot more impressive if you come up with a functional or fun idea yourself.
Start small.

Conclusion

Thanks for reading part one of my three part bog series. I hope you gain something from this, I have made a lot of mistakes in the past and I hope to passed on some of my knowledge.

Please check out the other blogs in this series when they are out and check out some of our other blogs on our website.

Mouse tracking eye using Vue 3, VueUse and CSS

Taliesin — Thu, 28 Oct 2021 13:41:21 +0000

Introduction

In this blog, I will be showing you have to make a mouse-tracking eye component using Vue 3, VueUse and a sprinkle of CSS. This eye-catching component will make a quirky addition to your future projects.

Firstly let's break the eyes, my name is Taliesin, and I work at Pixelhop. I made this for our Halloween special project we at Pixelhop made called trick-or-treat.

If you would like to get your eyes on the whole code example, please find it here.

Readers are recommended to have a basic understanding of Vue 3 using the composition API, also not recommended for anyone with Ommetaphobia or if you have anything against terrible eye puns. So if we see eye to eye, let's crack on.

Summary

So, to summer-eyes, for this to work, we will need to have an SVG of an eye with the pupil to one side. We are then just going to set the transform rotate property to point the pupil in the direction of the mouse as it moves.

Project setup

If you already have a project and an eye SVG ready, you can roll your eyes on to the next section. But if you're like the alien called Alen and missing an eye, here I will just be setting up a basic Vue 3 project and setting the foundation of what we are making.
So first, we want to set up a basic Vue 3 project. The easiest way to do this is using npx and the Vue CLI by running the following command.

npx @vue/cli create mouse-tracking-eye

Select the default vue 3 preset

Choose your dependancies manager (I'm using npm)

cd into the folder and install the dependancies

cd mouse-tracking-eye/ && npm i

We can now remove all the bits the vue cli gives us that we don't need. First, remove the components and assets folders. Then in the App.vue, we should remove all the base stuff it gives us. You are just left with the template, script and style tag.

I am using the <script setup> syntax, which you can read about here and typescript because why not.

<!-- App.js -->
<template>
</template>

<script lang="ts" setup>
</script>

<style>
</style>

Now we need to eye up the template, I'm using the SVG I used for our Halloween project. Add a div and give it a class of container, then paste the SVG inside the container div.

<!-- App.ts > temaplate -->
<div class="container">
  <svg
    viewBox="0 0 33 33"
    fill="none"
  >
      ...
  </svg>
</div>

Centre the eye and add a black background, so the eye stands out with a bit of CSS.

/* App.js > style */

.conatainer {
  background-color: black;
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
}
.eye {
  height: 3rem;
}
body {
  margin: 0;
  height: 100vh;
}

Spec-tacular! Now, if you run your project, you should have an eye in the middle of your screen and a black background.

Mouse tracking functionality

This section will focus on getting the eye to follow the mouse.

As previously mentioned, we will be using the vueuse library. Vueuse is a super helpful function library for Vue 3 with a few functions that will simplify this. So let's install it:

npm i @vueuse/core

Import the functions we need into our app and we might as well import the function we need from Vue as well.

<!-- App.vue > script -->
import {
  useMouse, useWindowSize, debouncedWatch, throttledWatch,
} from '@vueuse/core';
import {
  ref, onMounted,
} from 'vue';

Eye eye, now we got those imported, we can start using them. The first two we will use are useMouse and useWindowSize.
useMouse returns the x and y of the mouse position, and useWindowSize returns... You guessed it, the window size width and height.
So just under the import, add the following:

// App.vue > script
const { x: mouseX, y: mouseY } = useMouse();
const { width, height } = useWindowSize();

Next we need to get the eye location on the screen, to do this add a ref to the SVG in the template. So it will be something like this.

<!-- App.vue > template -->
<svg
  ref="eye"
  viewBox="0 0 33 33"
  fill="none"
>
...
</svg>

and now we can reference it in the script, we just need to add a ref variable with null as its starting value.

// App.vue > script
const eye = ref(null as Element | null);

Side note: If you are using a setup function inside a regular script tag, make sure you add the ref to the return object, or it will not work.

Now define the eye location reference

// App.vue > script
const eyeLocation = ref<DOMRect | undefined>(undefined);

Here I am setting the eye location inside the onMounted function we import from vue earlier.

// App.vue > script
onMounted(() => {
  eyeLocation.value = eye?.value?.getBoundingClientRect();
});

We also want to set the eye's location when the screen size is changed because depending on where it is this might move the eye. To achieve this we can use the debounceWatch
To summarise what happening here; we are watching for a change in the window height and width and for a change and running a debounce function when it does.

// App.vue > script
debouncedWatch([width, height], () => {
  eyeLocation.value = eye?.value?.getBoundingClientRect();
}, { debounce: 200 });

Great, now we've now we've got an eye on its location, let's get the ball rolling and actually make the eye move.

// App.vue > script
const rotationDegrees = ref(0);

throttledWatch([mouseX, mouseY], ([x, y]) => {
  if (eyeLocation.value) {
    const radianDegrees = Math.atan2(x - eyeLocation.value.right, y - eyeLocation.value.top);
    rotationDegrees.value = radianDegrees * (180 / Math.PI) * -1 + 180;
  }
}, { throttle: 1000 / 60 });

So if you got an eye for this sort of thing, then you'll be able to understand it, but if you're like a blind Bambi and have no-eye-deer. Don't worry; I'll give a quick summary of what's happening;

Firstly, we define the ref rotationDegrees which will be the number of degrees we need to rotate our eye. Next, we are using the throttledWatch function to watch the mouse location, then set the rotationDegrees.

First, it gets the radianDegrees using the Math.atan2 function; read more here. Basically, it receives the radian between the eye location and the mouse. I am using the top and right locations of the eye, but depending on where your eye's pupil is pointing, you may need to use a different location. Then we convert the radian into degrees we can use to rotate the eye.

This function is then throttled to 60 times per second as we don't need to run this more than that as most screens only run a 60 hertz anyway.

Now all we need to do is set the transform rotate property to the SVG and you'll really be turning some eyes.

<!-- App.vue > temaplate -->
<svg
  ref="eye"
  :style="`transform: rotate(${rotationDegrees - 40}deg) translateZ(0)`"
  viewBox="0 0 33 33"
  fill="none"
>
...
</svg>

Side note: You may need to do what I did by adding or subtracting a few degrees if your eye is not pointing precisely left or right.

Conclusion

Because we are getting the eye location on mounted and screen size change, you can place your eye anywhere on the screen, and it will still work.

I hope you enjoyed this mini tutorial, and it helps you create some fun projects. Feel free to send us your creations. I would love to eye them up. You can find our contact details at https://www.pixelhop.io/contact/.

If you are interested to see the original eye, I made and our Halloween special project, check it out here: https://trick-or-treat.pixelhop.io/.

Please keep your eyes peeled for our new blogs at https://www.pixelhop.io/writing/ or sign up for our newsletter.

See you later 👋