DEV Community: Laura Jane

My top tips for your first 3 months in a new tech role: An HONEST article.

Laura Jane — Thu, 21 Jan 2021 20:21:43 +0000

Introduction

For some 2020 saw the rise in remote working, zoom fatigue, and the feeling of 'Groundhog day'.

For others it saw the end of one career and the beginning of another in Tech.. I am one of those people. You may recall seeing my first ever article on DEV - About my transition from childcare to web development at 29.

If I told you that having 3 months of hard learning, understanding, and stress whilst trying to get my head around the concepts of web development would lead me to a fantastic job as a designer with a company I love... Would you believe me?

.... I wouldn't believe me either, but it's true, Through hard work, dedication, and passion for something I love more and more each day, I got there & it was so worth it!

This is me on my first day at my new job - Do I look like im nervous and anxious in this photo?.... Because I was so scared, and I really felt the imposter syndrome kick in - I didn't sleep all night!:
(I'm in my favourite T-Shirt also!)

So what has the first 3 months of my first role in tech been like?

I'd be lying to you if I said it was a walk in the park unless that park was Jurassic park then yes; I've driven myself crazy trying to absorb all of the information, But it has been a great learning experience so far, all the same, An experience I cant wait to continue; From learning all about my role right through to daily tasks, trying to get things right, and working in a team as well as independently, I am loving every second of my new career!

Do you have any advice for new employees?

Of course, that's the main reason I'm writing this article, to give you an insight and some tips/advice about surviving your first few months, Here are some of my top tips:

1. You Don't need to apologize for learning.

...As the title says the first few weeks of onboarding were tough, there were lots to learn & preferred ways of doing tasks, and I found and still do find myself constantly apologizing for getting something wrong, I would stress and worry when I didn't need to - It’s normal to get something wrong, your learning & adapting.

2. You still need to take that break.

It’s OK to take a break: For the first week, I was so scared of asking to finish or to grab my lunch. I’m not even sure why. They are completely normal things to do.

3. Be kind to your posture.

It's recommended that you stand up and stretch every 1hr for around 5-10 mins to avoid damaging your posture. You're on a computer on average 6hrs a day. Be kind to your posture, stand up and take a stretch, you'll be amazed at how much this can also help your mental health too. Doing this daily really helps me feel refreshed and less of a screen goblin.

4. Google is there to provide answers... Use it!

I am always googling entities when I am designing, ask me to insert links or images - Fine - a pound or ‘&’ sign. Nope. Half of the links on my recurrent searches are purple, and I cringe every time I see them. We all know we can use Google to help us solve problems and provide answers, including the simplest ones, so use it, that's what it's there for - I think it helps you develop those particular soft skills called 'problem solving, initiative and solution-focusing' don't you?

5. Don't be afraid to ask for help!

I was not able to layer images at all and sat staring at my screen because I didn’t want to admit I was struggling, but after asking for help, I was on a zoom call straightaway being given some pointers on how to do it, and it was a HUGE relief. I felt silly for asking for help the first few times - I still do! especially when it's something so minor - But it's all part of the learning process, your company will expect you to ask questions!

6. Soft skills are just as important as your technical skills!

Soft skills are just as important as your technical skills, empathy, understanding & co-operation are 3 of my top skills for new employees, (aside from just being a nice person of course!) if you co-operate, and bounce of your colleagues, it will make your new role a little less daunting! - Just because a colleague may do something one way, it doesn't mean your way is wrong, it just opens your mind to additional knowledge and options on those particular tasks/area.

7. Take your time

A good job is better than a rushed job, taking your time and going at your own pace will help prevent feelings of stress and an 'I can't do this' attitude.

Conclusion

The few weeks/months of being in a new job are always difficult as you adapt, but just remember you're there for a reason - That company hired you & that's what I have to tell myself every day - So own that role!

Thank you for reading my article, to all those beginning their new roles, congratulations, and good luck.

To those beginning your Web Development journey - You have got this (Feel free to bookmark this article when your time comes!)

Time Management: Why we should make this a priority

Laura Jane — Fri, 09 Oct 2020 10:03:28 +0000

Introduction

Time... Time... Time... a word we hear a lot of, but also something we don't have a lot of, how many times have you said 'It's on my to-do list', 'i'm on it' or even 'Don't worry we have the time'.

But in all honestly, do you ever stop and think if you do actually have the time, the time to do what you said you were going to do, or if you are just saying it in the hope you might actually find a way to fit it in.

In this article I am going to discuss time-management, how I manage my own time between being a parent, studying, and working, along with some tips to help you try to manage your time effectively.

Your a parent, student, and you work too, there is no way you can do it all!

Actually, yes there is, you will know yourself whether your a parent or not, that there is always a way to manage your time effectively, whether it is the use of wall calendars for important events/tasks or for the most digital-focused individuals, Google calendars/events.

Finding the right balance for the things in your life that require the most attention is admittedly so hard in the beginning - You find yourself contemplating every decision you make, whether it's working that extra 30 minutes past your work finish time to get that task complete, which will make your company happy, but then you miss out on having tea together with your family...

How would you handle that situation? what would your response be?...

I found that looking at my schedule for the week and fitting in where I could spare time for even a little task - something as simple as writing this article, without it affecting my family time, was hard.

I felt guilty for opening up my laptop daily when I needed to attend a tutorial or finish an assignment, or even just to tweak a project, especially when my children would approach me, and it soon became the norm for them to say 'Mum is doing work again' - It hurt, it really did, and when they first said it, it made me contemplate the decision I made to move into tech, I'm not going to lie it was tough.
Especially when certain tasks/events were running into valuable family time.

I began to feel overwhelmed, worried, and anxious all of the time, and felt like I had overcommitted to a lot more things than I had time for. It's a situation I vowed never to be in again.

So, How did I resolve It?

In the beginning, my mind felt all over the place, I struggled to fit everything in, so I ordered a planner from Amazon and cleared everything in my schedule for the following night and worked out what I could do and when.

I soon realized I wasn't going to be able to please everyone - and I had to make cuts somewhere, most of all learning to say NO, which is something I really dislike doing and feel awful about.

I also sat down with my children and explained to them why I was doing what I was doing, and began trying to include them in little computer-related activities, so they could see some fun from the thing I spent most of my time on, along with explaining the end goal - Which was to earn more money so we could do nice things.

I felt that something so simple, and explanation, was all they needed.
Maybe they were confused as to why I was always busy, but after that, they seemed happy and accepting, and didn't ask me again after that why I was working.

I put all my tutorials on the calendar which resides on my office wall right in front of me, so I could glance up quickly to see what I could do, where. I included all of my children's, my social, life admin, and studying activities. This made it SO much easier to manage, and I suddenly felt organized once id finished it (3 hours later!) - It honestly so felt so good.

I am really good friends with a few of the ladies on Twitter, and we have all been so busy recently, but we know this and always check in with each other when we can, which always helps if your having a bad day or you need some moral support.

Some tips to help you manage your time effectively:

Prioritise:

Prioritizing things took many sacrifices I must admit.

I thought what was more important?
That TV program I had been eager to watch, or the Assignment, which wasn't due in until next month, but I could make a start on now?
Step back and think about your current free time before committing, there is no worser feeling than saying yes then having to cancel later.

ASK FOR HELP!

This goes without saying, but if you are struggling don't be afraid to reach out, its hard at the beginning, but it gets easier, once you gather that support network - it becomes invaluable. Something as simple as asking someone to read over your code to see if there is anything you have missed can give you that new and different perspective.

Take that break:

Take a 5/10 minute break from your task to think and reflect, not to mention just to give yourself a quick reset. it is really important to keep yourself feeling fresh, and preventing that burnout. It can work wonders trust me!

Learning to code... CAN WAIT!

If you are struggling to grasp some concepts of coding or are just feeling tired, take an extended break and do something you enjoy doing, it really helps. Having a day or week off isn't going to affect your progress, and we all are on our own individual journeys, It's not a race!

I really hope, as with all of my articles, that it reaches and helps at least one person.

Thank you for reading!

How to use Twitter to your advantage when starting out in Web Development

Laura Jane — Tue, 22 Sep 2020 10:09:31 +0000

Introduction

When deciding to embark on my coding journey, I knew nothing about the value of 'Tech Twitter', of course, I'd heard of Twitter, but I never knew the extent of utilising this social platform to your advantage, not to mention the help & support it brings you in the process.

'Joining Tech Twitter... Yikes!'

When I decided to become an active part of Twitter, I honestly never expected to be welcomed so warmly by individuals I had never met before, see, I have very bad social anxiety (You would not think it!) and I really struggle to make new friends in real life, limiting myself to just 2 close ones - The fear of being ridiculed or rejected is real, and yes, you can't please everyone, and not everyone will like you, but I have learned from like minded people going down the same road that... IT IS OK!

Taking the leap... GULP!

I remember posting my first question to an audience of around 500 followers, I had been wanting to ask this question 1 month earlier when I had around 250 followers, and for the reasons above, I didn't, so I ended up scouring the internet for TWO HOURS for the help needed to solve it, (which I didnt manage to find...) So I carried around this unresolved question with me for FOUR weeks... and do you know what that question was?

How do I update my Github ReadME?

Yes, that was it, just that, and as I clicked tweet, I felt the nerves kick in. Would people laugh at me? Would I look less knowledgeable for asking what seems now, such a straightforward question, I never even considered that posting that question might actually help someone else that may be wondering the same. I must have contemplated about 5 times, deleting that tweet.

Even writing about it now makes me think back to how I felt, that feeling of fear. My first question to the tech community.

BUT... the response was so positive! Many people replied with links to their own Github readme's for inspiration and viewing, it was inspiring and such a huge boost to my confidence and morale, I received so many positive responses, and I could finally take a breath!

Using Twitter to YOUR advantage

You don't just have to ask questions to benefit from Twitter, Aside from being a really welcoming and friendly community, there is also a vast and varied amount of knowledge available in one place, and I often find that if I am not following someone that is knowledgeable in the area I am needing help in, that recommendations are often given, providing your Twitter feed with a lot more variety. I have gained invitations to specific discord channels, which prove very useful for me.

So how can you benefit from Twitter?

Interact and engage in tweets and threads

This goes without saying, but I found a lot of useful resources and information from these and engaging with other followers, even if it just to wish someone a good day, this is a vital tip for benefitting and using your account to your advantage.

DONT BE AFRAID TO ASK QUESTIONS!

This is sometimes easier said than done, but once you ask that first question you won't go back, there are so many people that love helping others (Myself included!) and you may find that you receive replies giving you lots of different ways to carry out a task, for example, one way might work easier for you, but another way suggested may work best for someone else -
You never know who might be reading the answers to your questions and was wondering about the same thing!

If you know the answer... Reply with your answer anyway!

But why? The question has clearly been answered...

Yes, that may be so, but like above, contributing to someone's question may give a completely different way of carrying out a task - all beneficial in the long run, not to mention that it also embeds and secures your knowledge and learning in that particular area. Your reply may reach a follower not on your list, which in turn provides them with useful information - In effect, we are just creating one big tech circle, and we are picking up anyone and everyone along the way, to guide us and join in with our community.

Try creating your own content

I began blogging on DEV, to begin with, about things I had learned along the way and created tutorials for those that struggle with the tricky fundamentals in certain languages/frameworks, I find that writing down what I want to say - putting pen to paper - before writing my tutorials, makes it more accurate as I have time to think about the content and the jargon I will be using, and how I can make it user friendly for example.
In these tutorials, I included code snippets and 'try it yourself' activities so beginners could understand those fundamentals easily in a simple way. My content received lots of positive feedback and if I can help at least one person with my tutorials I know I've achieved what I set out to do.

If you learn something, whether it's centering a div, or a handy little tip or trick you've picked up... Try blogging about it or creating a thread! They are so beneficial and will really help you secure your knowledge by writing about it for others, but at the same time helping yourself! it's a win-win!

Conclusion

I often think of Twitter as a 'Social StackOverflow' - lighthearted, but you can also find some hidden gems on there in terms of information, knowledge and opportunities, not to mention gaining new friends, for me personally, Twitter has been a lifesaver in terms of finding the information or resources (Aside from Google of course!) I need to progress and achieve in my coding journey.

It goes without saying that we all need to be kind to each other on social media, whether you agree with a tweet/reply or not, we need to remember that there is a human with feelings behind that account, and it would not be professional to direct any negativity onto their tweets or content - We are all on the same journey ultimately

To all the people beginning your journey into Web Development, yes it can be daunting, yes it can be tough, but you've got this!

Welcome and good luck!

Learning how to code?... Check out some of the best sites/resources to help you... FOR FREE!

Laura Jane — Thu, 17 Sep 2020 09:36:19 +0000

With so many ways to learn web development in 2020, and with some amazing resources, I LOVE seeing others succeed, So I have compiled a list of some of the best sites I have used that have really helped me learn to code, and the best part is they are FREE!... Who doesn't love free stuff?!

There are some great resources, from visual, coding along & reading, there is something for everyone!

This is my original thread on my Twitter page: you can follow me there @Miss_lorsx

Lors ♥️

@miss_lorsx

Some of the best sites I learned to code, practice and gain knowledge from - FOR FREE

Thread. 🧵

14:12 PM - 15 Sep 2020

565 2058

FreeCodeCamp

I LOVE this website, with so many certifications and projects to learn and practice this, freecodecamp really helped me learn the basics of programming, and in a way that was really easy to understand - At the end of each section, there are projects for you to complete and add to your portfolio - bonus! - Quincy and the team do an amazing job of helping more people get into tech! Find it Here

Fun-Javascript-Projects

Chris Dixon has produced a site dedicated to helping you learn Javascript, HTML & CSS all rolled into one, by creating 5 amazing projects, you can again add to your portfolio, to make them your own, you can even change the colours/text/layout if you wish - easy to follow too! check it out Here

Traversy Media Youtube channel

Brad and the team do a fantastic job of helping you get started when learning to code, I am a sucker for handwritten notes and this channel really helped me to carry on doing that, whilst being able to view on the screen what was being taught, what's great is that with these types of tutorials, is that you can rewind them if you need too! Check it out Here

10 JavaScript projects in 10 hours

A great way to practice what you have learnt so far, Florin does an amazing job in this video, I have just started this & so far it is proving really useful to put my knowledge to action! Check it out Here

The Practical dev aka DEV

This site has provided me with so many blogs and articles, that have helped me grow as a developer, they are very committed to open source, and also adding value to the ecosystem which is just awesome! Check them out Here

The Tech Twitter DEV community

There are so many accounts on Twitter, too many to name in fact, that provide so many different areas of tech, and ultimately content in that particular area. CSS, API's, Python, you name it, you will find accounts based on them!

Daily.DEV

Programming news to your browser? This is the extension you didn't know you needed until now. The guys behind this extension for Chrome support open-source - Which is amazing, you can even add your most visited sites, for all your go-to coding & resources! Find it Here

w3schools/MDN docs & StackOverflow

Reference and solution sites - Great for understanding fundamentals in depth! check them out here
MDN
StackOverflow
w3Schools

Coolors.co

Coolors provide a range of colours that you can contrast and change to make your sites more accessible to the user, check them out Here

WeStryve

Up and coming tech community site, where developers help developers. edit and post blogs in specific areas to help others on their journey! Check it out Here

VS code editor

Write your own code, and push to Github, perfect for creating your own projects, and then storing them. Add extensions to make your coding journey easier! Find it Here

Reading Books

Check out my article on using books as an additional learning resource Here for some great recommendations

Please feel free to add your own resources to this thread and help others in the DEV community succeed on their learning journey! Thank you!

JavaScript: ['I', 'need', 'arrays']

Laura Jane — Tue, 15 Sep 2020 12:15:19 +0000

Introduction

In this article, I am going to be covering the Array's section of JavaScript.

Array's & Functions were by far the hardest parts of JavaScript for me to learn.

Using handwritten notes is a great way for me personally to help myself remember the basics, not to mention using them to write the articles to help you remember them too!

Let's begin...

Array's

Arrays are a way to make list's in JavaScript, they can store any data types, such as string's, numbers & booleans arrays are ordered just like lists - so are given a position by number.

Creating an Array

One way to create an array is to use an array literal - This means we can create an array by wrapping it in square brackets [] - As I mentioned previously, arrays can hold any data type, whether it be data of the same value or data with different values.

Here I have used 3 string elements in my array:

When I log this array to the console, it will return the given elements within the square brackets.

Accessing elements

Each element has a designated numbered position within the array, this is known as its index. We can access individual elements/items via their index.

We must remember that Arrays in Javascript are zero-indexed which mean the positions start from 0 rather than 1 So, the first element in my array will be 'Puppies' and its position is 0, 'Programming' is 1 and 'Netflix' is 2.

Here is the code for you to try yourself, what does the console log?

const hobbies = ["Puppies", "Programming", "Netflix"];

const listItem = hobbies[1];

console.log(listItem);

You can also access individual characters in a string, you can do this by using bracket notation and the number of the index you wish to access.

For example:

Updating Elements

So we have learned how to access elements inside an array or string... What now? Well, what if we want to update it's value once we have accessed it? No problem!

In the below example, I have declared 3 social platform elements, but I want to change Facebook to Instagram, as I prefer to use this platform more.

The piece of code social[1] = 'Instagram'; tells the computer that we want to change the element at position 1, and replace it with 'Instagram at that position instead.

Arrays using let & const

As you may be aware by now, variables can be declared using let and const keywords - if you declare a variable using the let keyword, you can reassign these, later on, however, variables declared with const mean they cannot be reassigned.

however, if a variable is declared with the const keyword remain mutable - which means that we can change the contents of the array, but we cannot reassign a new array or a different value.

You can read more about mutable arrays Here

The `.length` property

A property of an array, is length this is a built-in property - it simply returns the number of items in that particular array. We can access the .length property just like we do with strings.
Here we use the dot notation to link with the property name.
We then log this to the console to return the number of items in our array.

The console will output '3' as there are 3 elements in this array.

See below example:

More built-in array methods...

.push() method: The .push() method allows you to add items to the end of an array.

See below:

We call the push method like we would a function, because it is, and this way we use it correctly on an array!
This method mutates an array by adding elements to it!

.pop() method: This method removes the last item of an array, so if I was to log the above piece of code to the console using this method, it looks like I wouldn't have to clean the kitchen after all!

There are many more array methods that we can use, which are all just as useful, and very handy to know about. You can find them here

Arrays and functions...

So we have covered how to mutate or change an array, but what if we wanted to change an array inside of a function? What do you think might happen?

When you pass an array into a function, if the array is changed (or mutated!) inside this function, the change will be kept up outside the function too! This concept of arrays may also be described as a pass-by-reference too, this is because the function is being passed a reference to where the variable is being stored.

Here is an example below, I have broken the snippet down into sections, so you can understand it more easily.

Nested Arrays... Yikes!

As if arrays weren't already hard enough to understand, what if I told you, you can store an array, inside of another array... Sounds complicated right?

Well don't worry it isn't as scary as it sounds, I'm going to break it down for you, so it is easier to understand. These are known as nested arrays, think of it as a present - the array inside is the gift and the array nesting it is the wrapping paper. ( although I wouldn't quite class arrays as gifts!)

To access the nested arrays, we can use bracket notation alongside the index value, as we have done previously.

Thank you for reading: My next article will be on Loops in Javascript.

Adding a Twitter timeline to your website: 4 easy steps.

Laura Jane — Sat, 12 Sep 2020 17:28:01 +0000

Originally posted on my Twitter page via a thread.

Lors ♥️

@miss_lorsx

If you have a social/blog page on your personal site.

Why not add your Twitter timeline to it via an API. - Super easy!

You can even just add the follow button that links to your profile. (Sorry about my pictures!)

Have a great evening!

THREAD 🧵 👇

19:12 PM - 09 Sep 2020

I have been learning more and more everyday about HTML & JS.

I am very active on Twitter and wanted to incorporate my Twitter feed on to my personal portfolio site, I managed to do this in 4 easy steps (Lucky for us - Twitter produce the code snippet for you, to insert into your HTML body via a & script tags)

Check it out here:

1 - Head on over to Twitter & from the drop-down menu, choose which option you would like to display on your page, it can either be a single tweet, a collection, a handle or a profile.

Here, I've selected the collection option, to display a list of my tweets which are accessible by scrolling up and down.

2 - An option will be given to either display an embedded timeline, or Twitter buttons. Select the one you wish to use - the embedded option displays tweets in list order, whereas the Twitter buttons just display a follow/tweet button linked to your profile.

3 - One of my favourite parts of this, is the ability to customise it and make it more accessible to the user, and to fit in with your website design/layout. There is a light/dark option along with height/width, you can even choose a particular language for your timeline to be displayed in! Cool huh?

4 - Once customised, This is the super easy bit! An individual code snippet is produced for you to copy and then paste into your site's HTML body, wherever you want to display it! - All done!

Thank you for reading my article!

(JavaScript Functions) => {Let's Learn};

Laura Jane — Fri, 04 Sep 2020 11:02:57 +0000

As I revise the fundamentals of JavaScript and other languages/frameworks, I write mini-articles to help you remember the basics. In this article, we will be looking at Javascript functions, how to call them & their uses.

Introduction

JavaScript is hard enough as it is to understand, and I found myself trying to remember EVERYTHING! - I soon discovered this isn't possible, and opted to focus on remembering the key points instead.
If you saw my desk, you would find that I have hundreds of sticky notes scattered around with key points on. In case this sounds messy, I can assure you that they are luckily colour coded depending on the language or framework.
These are what I use to help me write my tutorial articles, which hopefully help you, as you start your journey in Web Development.

So let's begin!...

The definition of a JavaScript function

A JavaScript function is defined as a block of code that can be reused, this code then brings together a group of statements and performs a specific task.

Function Declaration's

Sure, there may be many ways to create a function in Javascript, but one simple way to create a function is to use a function declaration. You may have already learned about, or at least heard of variable declarations at the start of learning JavaScript, along with the Var, Let and Const keywords, and how these 'attach' value to a variable name.
In this case, a function declaration attaches a value to a function or an identifier.

A function declaration has 3 parts:

The Function keyword
The function name or identifier - These should be followed by parentheses.
A function body, or the block of statements - This is needed to execute the task (As mentioned at the beginning!) - and should be enclosed within curly braces.

I have included an example below to show you a function declaration, in this snippet, you can see there is:

A keyword named function - (Red)
The function name/Identifier - (Pink)
The function body - (Green/yellow)

Calling a function

In the example above, you can see that a function declaration has assigned the function to an identifier. If you input the above code into the console and run it, you will notice that the message will not be displayed to the console.

Try it for yourself:

function sayHello() { console.log("Hello Everyone!"); }

You might be wondering why?
This is because the function declaration does not ask the code to run - instead it simply just tells us that the function exists. The only way a function will execute, or run, is if we call it first.

To do this, we type the function name or identifier followed by parentheses, this function call executes the function body/statements within the curly braces. Functions can be called as many times as you like.

See below example, calling the function like so, will now display the message "Hello Everyone!" to the console:

Now try it for yourself & see what the console logs:

sayHello();

Parameters and arguments

The functions we have previously created ran a task without any input, but some functions can take input and use them to execute a task.
When declaring a function, we can specify the parameters.
These parameters allow functions to accept an input, and then run a task based on said inputs.
We use parameters as a 'placeholder' for input/information, which will then be passed back to the function when it is called.

Here is an example of the parameters below:

The parameters are located within the parentheses, and are declared as 'Width' and 'Height' - Inside the function body, however, these are just normal variables. The width and height parameters currently act as placeholders for the given values - These will then be multiplied together.

When we want to call a function that includes parameters, we will have to first specify a value within the parentheses that comes after the function name, when values are passed to the function, these are then called arguments.

Arguments are passed to the function as either a variable or a value. I have broken down the below code snippet - Hopefully, this will be easier to understand.

Default Parameters

a new feature added to ES6 (which is a major update to JS providing lots of new features mainly focusing on simplicity and readability!) Is the ability to use default parameters - These allow the parameters we have previously learned about to have a value that is already decided (or predetermined!) In case an argument isn't passed to a function or it returns undefined when called. See below example:

By using default parameters we are taking into consideration the situations when an argument isn't passed to the function when it is expecting one.

Return

The computer will run through a function's code when we call it, and then sum up the result of this, returning the value undefined See below an example of how we can return the output:

Using the return keyword, we can now capture our output, which will not then return the undefined error.

To pass this information back from the function call, we need to use a return statement, using the return keyword as stated above, followed by the value we want to return.

Types of functions

There are 3 types of functions we can use these are:

Helper functions -

A return value of the function inside of another function is called helper functions, this is because a function can then be called within another function, making code easier to view, and ultimately debug if needed.

Arrow functions -

During the update of JavaScript (ES6) a shorter way to write functions was introduced - these were called Arrow functions otherwise known as thefat arrow - These take away the need to use the function keyword whenever a new function is created, instead parameters are included inside the parentheses and an arrow - => is added that is pointed towards the function body which is wrapped in the curly braces.

Concise body arrow functions -

There are several ways to change the arrow function syntax - this is one of the arrow functions we can use. See documentation here for an in-depth explanation.

Arrow functions

Function expressions

Another way we can define a function is to use a function expression - to do this, we need to define a function inside of the expression, we use the function keyword in this type of expression, the identifier is usually missing - This is known as an anonymous function - An expression is usually stored in a variable so we can refer to it.

To declare a function expression - we need to declare a variable to make the variable's name - be the name of your function, we would usually use the const keyword for this as the value is unlikely to change.
Assign the variable value as an anonymous function by using the function keyword accompanied by parentheses, parameters and a set of curly braces, which as we know contain the function body.
To run the expression, we then write the name of the variable where the function is stored followed by parentheses, enclosing any arguments being passed to the function.

See below example:

MJML: The responsive email language.

Laura Jane — Fri, 28 Aug 2020 10:12:25 +0000

Introduction

This article is short, sweet and is just an overview of some of the basics I have learned about this language. I have provided some links for you to view more about MJML and check it out for yourself.

MJML is otherwise known as Mailjet Markup Language An email responsive language I hadn't heard of up until recently.. and yes, it may not be one that is used or talked about frequently, but it is a little hidden gem that produces email templates and takes away the pain of coding a responsive email.

You may be familiar with these type of emails, for example, if a user is on a mailing list, they may receive a generic subscription email, or it could even be a shopping invoice, MJML was designed with reponsiveness in mind.

See below snippet of an email template that I have created, this is a mock shopping invoice.

MJML can be installed via an extension to a code editor (VS code, for example) or you can use the live editor [https://mjml.io/try-it-live] to make changes, which will update in real-time, allowing you to view and correct errors instantly.

UI/UX (User interface & User experience) can also be viewed and checked by clicking the computer screen icon or the mobile icon to display what the email will look like on both screens, you can even view the HTML for the code you have created.

I personally love this option, as it allows me to update accordingly if part of the email isn't displayed properly on either device. This code can also be added to Github as a project if you wish - providing real-life examples and projects for potential employers.

See below:

I have provided some of the code used to create part of the mock email template - The best part of MJML, is that you can still add HTML tags into the code along with Google fonts & CSS, meaning you can still add your own flair and creativity to the email template, not to mention changing the colour/design layout making it more UI/UX friendly.

See below example:
See how everything is nested within a tag, this makes for tidy code.

I have added comments to the relevant sections, so if anyone was to view my code they would be able to scan and find the sections required easily.

In the below example, I have created a table, that shows items purchased, along with columns displaying a shipping/billing address, this displays well on both a mobile and a computer. (Checked using the tabs as mentioned above!)

At the bottom, I've added a footer containing contact details which when clicked, take you to the relevant form for contacting the company.

MJML Syntax

Components

https://mjml.io/documentation/#components

Standard head components

https://mjml.io/documentation/#standard-head-components

Standard body components
https://mjml.io/documentation/#standard-body-components

Community components

https://mjml.io/documentation/#community-components

Conclusion

Information on MJML can be found on [https://mjml.io/] I found their website very useful when learning about this language and it really helped me understand it.

Think of it like HTML.. but easier! (Is that even possible?!)

Operators/Conditional statements: if (youUnderstand) {'Great!'} else {'Read on'}

Laura Jane — Fri, 21 Aug 2020 20:16:51 +0000

First of all, let me just apologise for the blog title layout..
How else was I going to grab your attention and help you to understand Operators and Conditional Statements?

This is my 4th blog post on DEV, I am beginning to write about what I have learned, or gone over again, as it really helps me to learn and embed the fundamentals, whilst also helping others on their journey!

This article is covering the basic Operators, and Conditional statements in JavaScript.

Conditional statements... Is that you?..

Every day we are making decisions, it could be an easy one like wether to have a tea or a coffee, or an unpopular one for example, wether or not to deploy on a Friday. We call these in Javascript, If, else statements: If we decide to have a coffee, then we would make one and enjoy, if not we would opt for the tea. A conditional statement checks certain conditions, and then executes the code accordingly based on these conditions.

What happens IF?...

Firstly, lets talk about IF statements, think of these as the top layer of a cake, and as we dive into else and if else statements - these will become our other layers..

We often base our decisions (or conditions!) on something simple, if its Monday, we might work, or if we are tired, we may take a break and rest. In JavaScript, we can execute this based on a condition. see an example of an if statement below:

else if, else if.. Im confused!

Its completely ok to be confused as you begin learning about conditional statements - They are quite tricky to learn to begin with, the else if statement always comes before the else statement (This is our reliable statement.. You will find out why when you reach that section!) These statements are the middle layers of our cake, you can add as many of them as you like, to make your code as easy, or as complex, as you'd like. This is an example of an else if statement:

Anything Else?

Actually yes, there is.. else statements, these are added to an if statement, so that if the condition within an if statement, resolves to false then this block of code will execute instead - We could call it a reliable statement (should all your previous code render false- you know you have always got a statement to fall back on!)
Here's an example:

Hello... This is your operator, how may I help you?

There are three types of operators we can use for Conditional statements These are:

Logical Operators
In Javascript, when we work with conditional statements we use values that are Boolean - This means that the value will either be 'True' or 'False'. There is a certain operator that work directly with these values, this is known as a Logical Operator there are 3 we can use:

&& - The and operator: This operator checks that both conditions are true. when using this operator, both statements must be true resulting in the block executing and therefore printing to the console, however, if either condition is false the condition will overall render false and result in execution of the else block.

|| - The Or operator: This operator allows for a bit more flexibility in conditions, it allows for any of the statements within a code block to be true in order to successfully execute and print to the console.

(!) - The Not operator: Also known as the bang operator, this takes a true value, and passes back a false value - to put it simply, it returns the opposite of what is intended to be printed to the console.
Below is an example of Logical operators in action:

Comparison Operators

These are pretty self explanatory, and quite straightforward to use in conditional statements, there are 6 types of this operator.
These work by comparing the values from left to right.

< - Less than
> - Greater than
<= - Less than/or equal to
>= - Greater than/or equal to
=== - Is equal to
!== - Is not equal to

Ternary operator

A ternary operator simplifies an if..else statement like below, these can be used for conditions which return either true or false:

True or false... Tough call!

In this section Im going to talk about truthy or falsy values So we have talked about boolean values, so what about non-boolean types? Good question!
Sometimes you might just want to check if a particular variable exists, but not actually assign it a value.

So let's look at non-boolean types

Non-boolean types include:

Strings
Numbers

Take the above conditional statement - the if statement will execute as the of the variable slicesOfPizza will return true as it has been given a non-falsy value.

Which values are falsy? Lets find out!

- 0
- Empty strings like "" or ''
- null which means there is no value at all
- undefined - when a variable isnt given a value
- NaN or Not a Number

The second statement will return false as it's value is an empty string! Yipee - Looks like your getting that dog!
Hooray for that particular empty string huh?

Truth or false assignment... Yes really!

Pssst, If you bring together what you know so far about logical operators - I will let you in on a little secret. There is a shortcut you can use! JavaScript will assign a truthy variable to the value if you use the or operator which if you remember is the || syntax.

Remember, statements check the left condition first!
Heres an example:

Switch statements

else if statements are great if we want to check more than one condition. - Thats great but surely there must be a shorter way to write these condtions you say?

Your totally right - they are called switch statements

A switch statement give us an alternative syntax than we can use to check multiple conditions and keeps our code looking clean and readable, helping us identify bugs or syntax errors quickly to resolve them.
Example below:

The break keyword instructs our computer to stop running the code block and to exit, meaning the computer wont continue to check for any more cases or execute any futher code within that block, without the break keyword the code will continue to run without breaking, meaning all blocks of code will run regardless or wether they are correct.

Conclusion... Yes finally!

This is just a basic summary on conditional statements and operators, it is always best to keep practising in order to understand these, but articles definitely help too!

If you made it this far... Thank you so much!

Follow me on Twitter: @miss_lorsx for updates on new blog posts coming soon!

Learning to code: What have you achieved so far?

Laura Jane — Mon, 17 Aug 2020 19:09:58 +0000

So your learning Web Development huh?..
what are your current achievements to date?
Share them in the comments below & I will pick some to share on my Twitter (@miss_lorsx)!
I love seeing others succeed, this is what spurs me on..

My victory..

...Is continuing to code now for just over 4 months, and not giving up, it has been an amazing journey that I can't wait to continue, I have watched tutorials, challenges and created some simple, beginner's CSS creations via Codepen, all through recommendations from the wonderful DEV community!

We all love achievements, wether they are big or small - so lets share them & spread some positivity!

Learning Web Development: Using books as an additional resource.

Laura Jane — Sat, 08 Aug 2020 15:06:38 +0000

Lors ♥️

@miss_lorsx

Call me old fashioned: but are there any good books on programming that are paper/hardback?

Want to continue learning but just sometimes away from a screen..

Thank you! 😃🌸

13:57 PM - 29 Jul 2020

7 90

In the above tweet, I reached out to the Twitter DEV community in search of an alternative way to learn Web Development.. Resource books! I really didn't want to spend 100% of my time glued to the computer; Straining my eyes or damaging my back, but nor did I want to sacrifice any signicant learning & progress (especially as a newbie!) by taking that extended break.

I dont know about you, but I find myself at a loss when I'm not at my computer, I feel like I should be working on a project, or watching a tutorial, this feeling occurs more when I know I need to take a break from the screen and recharge. I enjoy reading as a whole, So when I reached out to the #DEVcommunity.

They did not disappoint.

This is my current read, It's called HTML&CSS: Design and build websites by Jon Duckett

These are just some of the best web development books highly recommended by Twitter users:

Thinking In Java - Bruce Eckel
CSS in depth - Manning.com
Responsive Web Design with HTML5 and CSS - Ben Frain
My fellow Dev Jack Domleo wrote a fantastic review, find it here: (https://jackdomleo.dev/blog/book-review-responsive-web-design-with-html5-and-css-by-ben-frain)
HTML & CSS
Javascript & jQuery - Jon Duckett

(my current read!)
You don't know JS - Kyle Simpson
The clean coder - Robert C.Martin

The list is endless!

It is important to take a break away from the screen, but if you find yourself wanting to continue learning, resource books are a great way to do so!

Do we always have to rely on our computers to learn the fundamentals of Web Development? Absolutely not!

CSS Selectors: Let's talk basics

Laura Jane — Wed, 05 Aug 2020 13:08:12 +0000

Introduction

Lors ♥️

@miss_lorsx

I don’t know who needs to hear this;

But mixing up the correct selector when targeting Classes & ID’s is ok.

Honestly, it’s something I’ll have to live with now, because I’ve done it 1000 time’s and I still forget. 🤦🏼‍♀️

Good day. 😃
#DEVCommunity

16:08 PM - 01 Aug 2020

6 25

Note: This is for absolute beginners

I dont know how many times I have found myself googling 'CSS selectors' and even now, I still find myself mixing up how to target CLASSES and ID's with selectors when using CSS, So lets glance over the basic ones, most commonly used in the world of CSS styling.

Upon posting the above tweet, I found many others agreeing, so I wanted to talk about something that seems to confuse even the most confident of developers.

Before you read on, here is a mini list of terms you will come across in this article.

Selectors

These are patterns that we can use, to select the element we want to style.

Element

This selects all HTML elements based on It's element name EG Div, Paragraph, header etc.

Class

A class element uses a specific class that we are able to target, and ultimately style EG:

ID

This selector uses the ID attribute of a HTML element to target a specific element. EG

Cascading Style Sheet

Also known as CSS, describes how HTML elements should be displayed on a website or other media. It can control and alter multiple layouts at once, saving a lot of work and time In the process.

Where can we use selectors?

Selectors are used to target specific ID's or classes; they tell the web browser which HTML elements should be selected, to have the given CSS rule/value applied to them.
We can use 2 specific selectors ( ‘.’ & ‘#’) to change the CSS of an element, by targeting them.

Types of Selector:

(.) - Period or full stop; This targets a class, and will apply any modified changes to that particular element.

(#) - Hash sign; These are used to target a specific element with a unique ID.

Note: Its important to get these the correct way round when you are targeting elements, because if not, the changes made in the stylesheet will not apply. (Trust me, Its ok if you get these mixed up to begin with, It has taken me some time to get it right myself!)
Selectors should be displayed like this:

Additional selectors can be used to change the appearance of various rules created.

Some of these include:

Asterix:

The Asterix selector will select every HTML element on the page and style them EG:

Grouping Selector:

As the name suggests, the grouping selector changes the style of particular elements (Div, Paragraph,Header etc..) that have been selected specifically by the user.
EG:

Hopefully this mini-article will help grasp some of the basics reagrding CSS selectors.

I’m planning to go more in depth about @media & targeting paragraphs in another article; So watch this space! 😃

DEV Community: Laura Jane

My top tips for your first 3 months in a new tech role: An HONEST article.

Introduction

So what has the first 3 months of my first role in tech been like?

Do you have any advice for new employees?

1. You Don't need to apologize for learning.

2. You still need to take that break.

3. Be kind to your posture.

4. Google is there to provide answers... Use it!

5. Don't be afraid to ask for help!

6. Soft skills are just as important as your technical skills!

7. Take your time

Conclusion

Time Management: Why we should make this a priority

Introduction

Your a parent, student, and you work too, there is no way you can do it all!

So, How did I resolve It?

Some tips to help you manage your time effectively:

How to use Twitter to your advantage when starting out in Web Development

Introduction

'Joining Tech Twitter... Yikes!'

Taking the leap... GULP!

Using Twitter to YOUR advantage

So how can you benefit from Twitter?

Try creating your own content

Conclusion

Learning how to code?... Check out some of the best sites/resources to help you... FOR FREE!

FreeCodeCamp

Fun-Javascript-Projects

Traversy Media Youtube channel

10 JavaScript projects in 10 hours

The Practical dev aka DEV

The Tech Twitter DEV community

Daily.DEV

w3schools/MDN docs & StackOverflow

Coolors.co

WeStryve

VS code editor

Reading Books

JavaScript: ['I', 'need', 'arrays']

Array's

Creating an Array

Accessing elements

Updating Elements

Arrays using let & const

The .length property

More built-in array methods...

Arrays and functions...

Nested Arrays... Yikes!

Adding a Twitter timeline to your website: 4 easy steps.

(JavaScript Functions) => {Let's Learn};

Introduction

Function Declaration's

Parameters and arguments

Default Parameters

Return

Types of functions

Function expressions

MJML: The responsive email language.

Operators/Conditional statements: if (youUnderstand) {'Great!'} else {'Read on'}

Conditional statements... Is that you?..

What happens IF?...

else if, else if.. Im confused!

Anything Else?

Hello... This is your operator, how may I help you?

True or false... Tough call!

Truth or false assignment... Yes really!

Switch statements

Conclusion... Yes finally!

Learning to code: What have you achieved so far?

My victory..

Learning Web Development: Using books as an additional resource.

CSS Selectors: Let's talk basics

Introduction

I dont know how many times I have found myself googling 'CSS selectors' and even now, I still find myself mixing up how to target CLASSES and ID's with selectors when using CSS, So lets glance over the basic ones, most commonly used in the world of CSS styling.

Before you read on, here is a mini list of terms you will come across in this article.

The `.length` property