DEV Community: Helen Kent

A day in the life of a Junior Front End Engineer

Helen Kent — Tue, 08 Jun 2021 19:48:34 +0000

I joined Purplebricks in October 2020 as a Junior Front End Engineer. Having worked as a Primary School Teacher for 10 years prior, I was absolutely ready for a change! I completed a full stack JavaScript development bootcamp with the School of Code in Birmingham at the start of 2020, and am now in my 7th month with Purplebricks. I can wholeheartedly say that embarking on a career change was definitely the right decision for me—I feel like a brand new person!

My days at Purplebricks can be quite varied, and depending on my calendar, can either be fairly meeting heavy, or pretty open—giving me a good chance to get stuck into some work. As I’m writing this on a Tuesday, we’ll go with a regular Tuesday.

8.45 — 9.15: Starting the day
I usually switch on between 8:45 and 9:00. I use this time before standup to catch up on my Slack messages, emails and check any outstanding PRs (Pull Requests) to see if I have any comments I need to resolve.

9.15—9.30: Squad standup
This is the time for our daily standup. Due to a re-shuffle, I’m about to move squad, but my current team meet at this time everyday on Teams to talk through our sprint backlog and find solutions to any problems and blockers. I enjoy our daily check-ins, and I think 9:15 is a good time to have them as it allows team members who need to do the school run to get back in time. Our squads are made up of Product Managers, UX, UI and Content Designers, QA Engineers (Automated and Manual) and Front End and Back End Engineers, so there is a great mix of people that I get to work with.

9.30 — 10.00: Reviewing PRs
The Front End team are responsible for reviewing each other’s code to ensure any errors are caught and best practices are followed. I’m trying to learn as much as I can each day, so if I have a bit of time in between meetings, I’ll often have a look through the Front End slack channel and read through some of the other engineers’ PRs to approve them. I’ll often ask questions if there are parts of the code I don’t understand, as I’m not quite able to make handy suggestions for code improvements yet!

10.00 — 11.00: Sprint Review
As today was the end of our sprint, we had our Sprint Review meeting. Key stakeholders and other members of the Digital team join us for a meeting where we run through the goal for our sprint, and what we achieved over the last 2 weeks. This is a good opportunity to get comfortable speaking about your work in front of a slightly larger audience. For most Sprint Reviews, I will add details of my contribution to the slide deck and then explain what the problem was that I was solving, usually accompanied by before and after visuals to aid comprehension.

11.00—12.00: 121 Meeting
Straight after our Sprint Review I have my fortnightly 121 meeting with my Engineering Manager. In order to prepare for this meeting, I have a reminder that pings at the end of each day — it reminds me to add to my achievements and notes page so that I have items to talk through during the meeting. I really appreciate having these regular catch-ups, as it keeps a focus on my progression. I’m working towards completing my Junior 1 skills matrix, so this is a chance to talk through what else I can add to it, if anything can be ticked off, and if my manager has suggestions for how I can achieve a particular success criteria. I’m not too far from completing Junior 1 now! 🥳.

12.00—13.00: Lunch time strolls
I usually have a walk around the Tamworth Castle Grounds at lunch and eat just after. Today was lemon & thyme chicken with broccoli. Delish!

13.00—14.00: Sprint Retrospective
Immediately after lunch it’s time for another sprint ceremony. This time it was my squad’s Sprint Retrospective. Our UX Designer, Dylan, has been running these sessions and he mixes it up pretty much every time — it’s always a nice surprise to find out what he has planned for us! This week it was ‘Mad, Sad, Glad & Shoutouts’ week. We use a digital whiteboard tool, mural.co, to collaborate and add notes about the things that made us feel mad, sad and glad for this sprint. Sprint Retros are a great chance to air frustrations, share successes, say thank you and make improvements ready for the next sprint.

14.00 — 17.30: Time to code
This is the first chunk of the day that I’ve had to get stuck into some code. During this time I usually have a Spotify playlist on quietly in the background. I find that time seems to fly when I’m working on code and I really enjoy it. I do a lot of Googling and sometimes reach out to other Front Enders to ask for advice if I come across challenges that require a little extra knowledge.

I’ve been really fortunate at Purplebricks that everyone I’ve come into contact with has been so lovely and helpful. My teammates are always around and happy to answer questions or give suggestions. I’m also lucky enough to have a couple of weekly ‘code chats’ — one with a Senior Front End Engineer, Josh, and one with a Mid Front End Engineer, Dan. With Josh, we’re diving into React hooks, and with Dan we talk about random things from my ‘I want to know this’ list. Over the last couple of weeks, we talked about Webpack and built the beginnings of a React project without ‘create-react-app’ using Webpack, and this week we’re going to talk about how one of our pipelines works — so all quite varied!

Whilst I’ve been at Purplebricks, I’ve worked on a good variety of different tasks. When I started, my first few PBIs (Product Backlog Item) were copy changes to the main marketing website to update our guidance on COVID-19. These were nice, small changes that helped me get to know the PR processes. Since then, I’ve worked on making changes to linting tools (and having to correct 900+ errors along with them), made my own toggle component for our shared component library, fixed bugs, contributed to a new app, and much more.

Most recently, I’ve been working on updating the UI for a section of our legacy codebase, ‘Uber’. I found this very challenging, as it is written with KnockoutJS and Razor files —frameworks that are totally different to everything I’ve learned so far!

I’ve really enjoyed my first seven months with Purplebricks. I joined at an exciting time for the Digital team amidst lots of positive changes. I’m looking forward to continue learning as much as I can, and seeing where I’ll be in another seven months time!

Bootcamp final project 🥳

Helen Kent — Tue, 19 May 2020 21:51:16 +0000

My Final Project

As part of my full stack 16 week development bootcamp we spend the final 4 weeks working on a team project. I was in a team of 3. Jodie, Mel and I built a Bootcamper Network App for alumni and current school of code bootcampers to connect and share details of their roles etc. We loved building this app together and worked in sprints of 5 days to firstly meet our MVP and then achieve some of our stretch goals.

Demo Link

Bootcamper Network App
Our app is live for now but we are planning to continue to work on it whilst we wait for the job offers to role in...!
We did a live demo last week, so if you're interested, please have a watch (we start at about 16 mins into the vid)

Link to Code

SchoolOfCode / Bootcamper-Network-App-React

React front end for Bootcamper Network Mobile App - final School of Code bootcamp project for Team Jomellen

School of Code Bootcamper Network App

Final project for team Jomellen

Jodie Neville, Mell Kay & Helen Kent

Faced with the problem of a distributed network of current bootcampers and alumni, team Jomellen decided to bring everyone together with our Bootcamper Network App. School of Code bootcampers past and present can all now login to the app and share their career progress with each other. This enables other bootcampers to see all SoC affiliated companies easily. Bootcampers can also share (privately, with only the SoC team) their job satisfaction rating, allowing the team to reach out to support the bootcamper with a new job hunt.

Click here for the live site hosted on Netlify

How to use (only if you're from the School of Code!)

Click the link above and login with your Google account.
Create an account.
Investigate the app!

Installation

Clone or download this repository and the back…

View on GitHub

SchoolOfCode / Bootcamper-Network-App-Back-End

Express server, nodejs back end for Bootcamper Network App - final School of Code bootcamp project for Team Jomellen

School of Code Bootcamper Network App - Back End

Final project for team Jomellen

Jodie Neville, Mell Kay & Helen Kent

Faced with the problem of a distributed network of current bootcampers and alumni, team Jomellen decided to bring everyone together with our Bootcamper Network App. School of Code bootcampers past and present can all now login to the app and share their career progress with each other. This enables other bootcampers to see all SoC affiliated companies easily. Bootcampers can also share (privately, with only the SoC team) their job satisfaction rating, allowing the team to reach out to support the bootcamper with a new job hunt.

Click here for the live site hosted on Netlify

How to use (only if you're from the School of Code!)

Click the link above and login with your Google account.
Create an account.
Investigate the app!

Installation

Clone or download this repository…

View on GitHub

How we built it

We used React to build the front end and we decided to build it as a progressive web app so that we could have one code base that worked flexibly across all devices. We built it mobile first, but currently it only looks nice on mobile...we still need to work on desktop sizes!
We chose to use google firebase for user authentication
We used the meet up pro api to pull in local tech events. We discovered we needed to use OAuth2 to interface with the api. This was a giant faff and took us a long time to get to grips with, but we did it!
We used the google maps api to embed little maps for company locations, i really like this!
We challenged ourselves to learn a bit more about AWS so used RDS and elastic beanstalk for our database and for hosting our back end. Elastic beanstalk has a really nice cli that let us deploy our back end code easily quite early on.
We used nodejs and express for our server as we knew it and felt very comfortable with it.

Additional Thoughts

We're really proud of our app. There is still more we'd like to do (push notifications, fixing the edit form patch request, adding form validation, private messaging) but after 12 weeks of learning and 4 weeks of building I think we did a great job and i'm really proud of it!

Thank you for letting me share our app!

Weeks 11-16 - The School Of Code Bootcamp

Helen Kent — Tue, 19 May 2020 21:21:13 +0000

What we've learnt

Web Sockets & socket.io
Using a development server (ngrok)
Web scraping
To 'always code as if the person who ends up maintaining your code is a violent psychopath who knows where you live'
Form refactoring
Form validation
Firebase user authentication
useReducer in more detail
Recursion (functions that call themselves)
DevOps and back end talk from the Economist
Intro to AWS (S3, EC2, IAM Roles...)
Docker & Containers
Software development life cycle
Gatsby
TDD, BDD, decision tables
Cucumber, Jenkins, Selenium & Cypress
MongoDB & NoSQL intro
GraphQL intro
Progressive Web Apps
Creating an NPM package
Python intro
Making an Alexa skill (we made a bootcamper randomiser!)
SASS
Figma
My persona for user stories
UI libraries for React (material UI & bootstrap)
The twelve factor app
Devops talk from PM Connect
Intro to kubernetes
Hyperautomation
OAuth2 (during project build)
AWS RDS & elastic beanstalk (during project build)

How I feel

Elated! We finished the School of Code bootcamp last week and I can't quite believe its over! During weeks 11-16 we had another couple of weeks of learning and then for the last 4 weeks Jodie, Mell and I formed team Jomellen and we built a Bootcamper Network App.

We decided to use React to build it mobile first as a PWA so we had one code base but so it had the flexibility to be used on all devices. We chose to use AWS RDS & elastic beanstalk with an express server for our backend as we wanted to challenge ourselves to learn more about AWS and I'm really glad we did. It was tricky at times but I really feel that I'm more prepared to use AWS in the real world now. We used firebase for authentication and we interfaced with the google maps api, a postcode convertor api and the meet up api (the OAuth2 process for this was longgggg but i'm glad we did it!). One of my smallest but most exciting little wins was using this beautiful little npm package to format our db timestamps for our messaging component into whatsapp style '2 mins ago' snippets - it was so easy and looked much better.

The code for our project can be found on my github - front end / back end.

On Thursday 14th May we presented our project for demo day. I was a bit gutted to have not experienced real demo day as it should have been - in front of an audience of roughly 100 possible employers - but it is what it is and it probably meant it was less nerve wracking. We'll save the post-demo-day celebrations for after lockdown! Every group worked so hard and did a brilliant job. If you'd like to watch our demo, it starts at around 16 mins into the video:

Where I'm at

Well, I've had a few days to relax after an intense 4 months. I've had a few lovely walks, lie ins and done some gardening and now I'm ready to get back to it! I want to build my portfolio and I think i'm going to use Gatsby as its quite like React but its for static sites and I'd like to learn a bit more about it. Before that though i'm going to finish a responsive css course that i'm half way through as I'd like my portfolio to be super responsive.

I'm also going to keep working on our Bootcamper Network App. I'd like for the forms to be a bit more beautiful and they need validation. We need to decide on a way for it to work so that only SoC bootcampers/staff can sign up to the app. We'd also like to build in push notifications and private messaging. Login via linkedin might be worth looking at too (we did originally want to do this but found out that there is a 2 week wait for applications and that wasn't ideal for a 4 week build!)

On top of the portfolio and sharpening up the bootcamper app I'd like to try some css artwork, i've seen a few tutorials online - i'd like to follow a few and then make my own css delights!

Where I want to be

I would like a job...soon if possible! I have every faith that Jack from Spinks and everyone at SoC are doing whatever they can to present what opportunities there are out there to us - it's just going to take longer than normally would do. I might need to find a job to tide me over in the mean time (slightly excited about the possibility of working in a giant amazon warehouse!) But I will be making sure my skills stay sharp so i'll be ready for any opportunity should it arise.

Thank you for reading my blog! If you have any questions about the bootcamp or my experience please send me a message!
Twitter / LinkedIn / GitHub

How to use Storybook JS with React - a basic tutorial

Helen Kent — Wed, 01 Apr 2020 21:22:06 +0000

Storybook is a fancy tool that allows you to test your React components on their own. This means you can see how your components behave without any interaction from anything else within your app. Storybook has lots of different features...but this is a basic tutorial and I won't be going into them! You can see a good example of how Storybook works here - it is how airbnb uses it to test its calendar/date components. Different components are listed on the left hand side and you can see them working in the window on the right.

This tutorial is best for developers who are familiar with React, if you've not used it yet, bookmark this and learn some React first!

How to install and use Storybook

1) Use npx create-react-app your_app_name to create your React app. Don't forget to cd into your app.

2) Reorganise your folders so you've got a components folder within src. I always like to clear out the React app too!

3) Install storybook with -npx -p @storybook/cli sb init --type react_scripts This will install a .storybook folder and in your src folder, a stories folder.

4) Now you can take a look at the storybook interface - run it with the command npm run storybook and it'll load up in your browser, usually on localhost:9009.

5) In your components folder, make a folder called 'Button' and make an index.js file for it. Paste in the following code to make a button component:

import React from "react";
import CSS from "./Button.module.css";

function Button({ text, color = "##FFFF00" }) {
  return (
    <button style={{ backgroundColor: color }} className={CSS.button}>
      {text}
    </button>
  );
}
//I have passed in props for text and color (with a default value)

export default Button;

6) Make a css file for your button and style it as you'd like. I've used css modules so name it Button.module.css
Feel free to copy and paste the following:

.button {
  border-radius: 25px;
  border: black solid 2px;
  font-size: 1em;
  padding: 10px;
  margin: 3px;
}

7) You will need to create a js file for each component you make. It's best to keep these files in your components folder. When storybook was installed you were given a ready-made story file for your button component. Move this from your stories folder in src into your button component folder. Remove the '1-' from the front of your file.

8) In Button.stories.js remove import { Button } from "@storybook/react/demo" and replace it with import Button from "../Button/index" to link to your Button component.

9) The code below is how I adapted/added to the button story. Each 'export const' is a different 'test' for the same button component. You can see they have been given different text, background colours, props etc. Each one is shown separately in storybook as you can see in the video below the code. If you find your tests aren't rendering as you would expect, then you will need to adapt your button component.

import React from "react";
import { action } from "@storybook/addon-actions";
import Button from "../Button/index";

//this imports your component and gives it a title to show in storybook
export default {
  title: "Button",
  component: Button
};

export const Text = () => (
  <Button onClick={action("clicked")} text="Hello Button" />
);

export const Emoji = () => (
  <Button
    onClick={action("clicked")}
    text={
      <span role="img" aria-label="so cool">
        😀 😎 👍 💯
      </span>
    }
  />
);

export const Login = () => <Button text="Login" color="lightgreen" />;

export const Logout = () => <Button text="Logout" color="lightgreen" />;

export const BlueButton = () => (
  <Button onClick={action("clicked")} text="HelloBlue" color="Lightblue" />
);

Try using storybook to really put your components to the test!

Weeks 7-10 - The School Of Code Bootcamp

Helen Kent — Mon, 30 Mar 2020 22:02:24 +0000

So quite a lot has changed since my last blog! We've learnt a lot more, experienced our first project week and now we're all doing the bootcamp remotely because of coronavirus.

What we've learnt

Proptypes and default props for React
More conditional rendering
A lot more working with React on mini projects including with express back ends.
Animating buttons
Lean StartUp Methodology
React Router
Github milestones, issues and using story points & planning poker
More github - branching off
REST API's (Talk from Talis)
More in-depth look at dev tools in chrome
Cookies - adding to get requests
Postgres and pgAdmin
Environment Variables
Setting up logging in and out
Using bCrypt for passwords
Express session
PG Simple
Wrappers in React
Hosting projects on netlify & heroku
Local storage and session storage
JWT's (Json Web Tokens)
React classes & converting a react hooks app to classes.
useEffect, useCallBack, useContext, useRef, useReduce, useLayoutEffect
How to sort out git conflicts locally.
More react router
Composition
React Storybook
How to write CV's - great talk from Matt Rose

How I feel

Working remotely: We're getting used to doing the bootcamp remotely. I think we'd all prefer to be at SoCHQ. It was lovely to be together, I miss our social lunchtimes and chatting things through in person but we're managing well with zoom and still having our daily stand ups and squats. We've discovered hivemind - where if one of us is struggling with something, we can share our screen and all work together to find the error. We couldn't do this quite so easily in person so this has been a nice surprise. It's great getting to experience working from home and to know that I can actually do it. There is the huge advantage of no commute - loving that!

We were gutted to find out our trip to the Google offices was cancelled, but they sent goodie bags and we all got more excited than we probably should've been...free stuff, woo!

Project Week: Project week went well. I didn't expect to learn QUITE so much and mostly it was about team and project work. We definitely over stretched ourselves and we could've used our time more wisely to plan in more detail. I'll definitely be doing a few things differently for our final project.

Where I'm at

The curriculum is definitely still getting harder and harder. I certainly feel that we're being put through our paces. I probably need to relax a bit more, not get frustrated with being so confused about things and trust the google magic.
We worked in small teams to make a game last week. Murray and I made an online version of Ring of Fire so drinking game deprived people can play remotely with friends. We're really happy with the result and it was actually put to the test on a Friday eve zoom social! I've begun to improve it by adding media queries for different screen sizes. We began working with a quiz API last week so Liv and I are working together to make a nice little quiz app - that's going well. I've also designed my portfolio, just got to start making that.

Where I want to be

I need to spend more time going over what we learn during the day. I had a bit of a slump as we first went remote (too much screen time in the day) but I'm getting back into the swing of things now. I want to make good progress with our quiz app, make my portfolio and work on understanding the bits and bobs from each day that I don't quite get in the evenings.

Weeks 4-6 - The School Of Code Bootcamp

Helen Kent — Tue, 03 Mar 2020 21:17:54 +0000

It feels like I wrote my last blog post around 6 months ago. Nope, it was just 3 weeks but we've crammed so much in! We've enjoyed hearing from a variety of guest speakers over the last three weeks. Narj from BJSS talked about her career and her current role, Wendy from West Midlands Police talked about preventing cyber crime, Theo Millward talked about how technology has revolutionised his business, David Hore talked about computational linguistics at Fluence and Martin Reynolds from Advanced talked to us about his DevOps role. It's brilliant hearing from so many different people within tech and i'm quite surprised at the number of tech companies in and around Birmingham.

What we've learnt

Again, SO MUCH.

Databases, using Google Cloud Platform to host our first DB
Making DBs with SQL and writing SQL queries
Postgres - linking up our server to our DB
CRUD (Create, read, update, delete)
REST API's
HTTP request methods - (we made some fancy pokemon requests with these!)
Used Jest for testing
CSS Variables
Used the express generator to set up a server
We made our own codewars style kata and wrote tests for it (ours was called 'Microwave Mayhem')
A bit more about scope in js.
Iffes - immediately invoked function expressions
Closures (one function closing over another)
Began learning React
React components, JSX, Babel, transpiling, Webpack
Conditional rendering of components
Using state to control things in react
SVGs and changing their size with buttons and state.
Deployment - continuous iteration and continuous deployment
Creating a react app with npx create-react-app
The useEffect function
We made a shopping list react app and a Pokemon search react app
How to understand problems and break them down to begin solving them
More testing in react with beforeEach and afterEach
Custom hooks (we made a counter)
We learnt about Agile and the different ways it can be implemented (scrum, kanban, extreme programming, waterfall)
CSS modules
Typechecking with PropTypes
Animating a button with onAnimationEnd
Lean start up methodology
React router

How I feel

I feel quite astounded at the amount we've learnt. I really enjoyed weeks 4 and 5 but found week 6 (the first proper week we spent learning React) exceptionally hard. I think it was quite an emotional week for a lot of us as we battled feeling quite inadequate and at times unable to even think of how to begin solving a problem. I think I also felt so frustrated with myself that I forgot other simpler things we'd previously learnt. I started to think that I wasn't destined to 'get' React...but after receiving help from my fellow bootcampers and after having lots of supportive chats with each other, it somehow slowly started to sink in on Friday afternoon whilst putting together our Pokesearch app. It was lovely to feel a little more in control of what we were doing!

I'm really loving being with such a lovely, supportive group of people. We have energisers everyday around 3pm which help wake us up a little during the afternoon slump. Energiser highlights include mini golf, floor ping pong, the sock game, backwards Mario Kart+squats and Ben's invention 'Binny-Pong-Quizzy-Song' - a quiz game where you get the chance to answer a question if you manage to throw the ball in the bin and the quiz question is delivered by Ben, singing it to a well known tune that you've also got to get. Skills. The bootcampers and I are still enjoying lunchtime walks around Digbeth and Friday night social sessions!

Where I'm at

I'm happier with react now than last week and I think I could manage simple React projects with a lot of googling and lots of planning. A couple of the other bootcampers and I have begun a side project to get more experience with managing something as a small team from start to finish. We've been learning about using github for project management (milestones and issues) so we're going to practice using that too. I feel like I've got a good basic understanding of a fair amount of front end and back end but I think we could do with some consolidating and putting the two together now.

I went to the brum.js meet up a week or so ago with a few other bootcampers and found the networking and open discussion session really helpful. It was lovely to meet people from the Bham tech scene and particularly enjoyed speaking to Tom from Purple Bricks about his team. I'm looking forward to more meet ups in the next few weeks.

Where I want to be

I would like to get more confident with React and remind myself about back end (it feels like so long ago that we did it!) Our side project will help with that as well as what we're doing during the day at SoC.
We've got our first project week coming up in week 8. I'd like to make sure we use all of the different things we've been taught, stick to best practice and deliver a good MVP by the end of the week - also hoping I'm able to contribute well for both front end and back end. 🤞🏼

The first 3 weeks - The School of Code Bootcamp

Helen Kent — Sun, 09 Feb 2020 21:29:53 +0000

On the 20th January I joined 23 other eager bootcampers for our first day on the School of Code bootcamp. I had intended on writing a blogpost each week but three weeks have flown by and here we are! I read lots of the SoC blogposts while I was researching the bootcamp and I really liked the format of Jaskaran Sarkaria's weekly blogs, so i'm pinching it!

What we've learnt so far

So, so, so much. We have gone through a fair amount of html & css. I've really enjoyed the CSS tasks as I love seeing what we're working on improve as we learn. We've learnt about the history of JavaScript, about arrays and their methods, objects, for & while loops, functions, different variables and their scope. We learnt about the DOM and how to use it to make changes to our webpages with JS. We learnt more about github and used it with our pair programming partner for an afternoon hackathon. Last week we learnt about APIs and used used fetch to get Kanye quotes and random dog pics into our sites! We began using node, npm and used express to create our own server. We learnt about object oriented programming, and at the end of week 3 we used get and post requests to display and update Pokemon data!

How I feel

The last three weeks have been brilliant and intense. I'm starting to get used to feeling the complete frustration of not being able to solve a problem. We had a couple of very hard days during the first two weeks and I was quite hard on myself which didn't help. Having spoken to past bootcampers, my mentor, other developers and my cohort pals, I'm definitely not alone in feeling quite lost sometimes and I'm getting to grips with knowing how to deal with the frustrations. It's important to remember we're still very new to everything and to have faith that things will be sinking in even when it might not feel like it. I am absolutely loving learning with the rest of our cohort. I've found their support invaluable and I've enjoyed helping others when I can. I am absolutely not missing spending my lunchtimes marking books, instead I've been enjoying social time and our daily walks around Digbeth. The School of Code bootcamp certainly has not disappointed at all so far. As well as the learning and code tasks it's been really helpful to have our daily standup recaps(including daily squats!) and we've had some brilliant guest speakers.

Where I'm at

I'm happy with how each day is going. I've gotten into a good rhythm with note-taking and coding along as we're taught. I feel like I'd be able to explain what most of the code we've come across does if I was shown it again, however I definitely would not be able to use it all if I was asked to. I'm enjoying our daily Codewar sessions. Most level 8KYU katas are doable although some are still fairly challenging.

Where I want to be

I'd like to continue to develop my confidence with JS on the front end. I've been going through notes and codewars at home but I think working on a project would be a better use of my time this week.

Really looking forward to this week. More back end and databases are coming up!

Watch and Code: Javascript

Helen Kent — Sun, 12 Jan 2020 21:48:37 +0000

Notes from the watchandcode.com Practical JavaScript course.

I've started Gordon Zhu's watchandcode.com Practical Javascript course. In the course you work on building a todo list, so here are some of the commands and notes about them so I remember them!

Its best to work in chrome. Open a new tab (about:blank) and right click and choose inspect then click on console.

How to store the to do list:

var todos = ['item 1', 'item 2', 'item 3']

todos is the name of my variable.
The items are in an array. Which is like a list of items.

How to display the to do list:

console.log('My to do list:', todos)

Console.log() prints whatever is in the brackets.
You can join items between the brackets.
If you put quotation marks it prints whatever is inside them.
As todos isn't in quotation marks it prints out the contents of the variable.

Adding new todos:

todos.push('item 4')

You can add items to the array by calling the variable and 'pushing' another item to the end of the array.
When you press enter, the console returns the number of items in the array.

Changing an item in an array:

todos[0] = 'item 1 updated'

To edit the array item you call the variable and in square brackets put the item number you want.
Computers start counting at zero so item number one is item 0.
Then you just put what you want the new value to be after an equals sign in quotation marks.

Deleting an item in the array:

todos.splice(0, 1)

Call the array and then use splice
To use this you need brackets.
The first number is the position at which you start deleting, the second number is how many items you delete.
In this example, you just delete the first item in the array.

Codecademy - CSS 7: Typography

Helen Kent — Wed, 08 Jan 2020 23:26:38 +0000

What i've learnt from the typography lesson of Codecademy's CSS course.

Typography is the art of arranging text on a page.

Font-family

This property changes the font of a particular element.
Default font is Times New Roman if none is specified.
When the typeface (font) is more than one word you must put it in quote marks.

h1 {
  font-family: "Courier New";
}

Font-weight

This property can make text bold if you set it to:

p {
  font-weight: bold;
}

The default is usually 'normal' but if you definitely don't want something to be bold or if you want to make something not bold, you can set the value to normal instead.
Alternatively, some fonts can be given a numeric value for their font-weight. The values are in multiples of 100 from 100 up to 900.
It is useful to note that:
- 400 is the default font-weight of most text.
- 700 signifies a bold font-weight.
- 300 signifies a light font-weight.

Font-style

You can use font-style to italicise text. Values can either be italic or normal(which is the default)

h3 {
  font-style: italic;
}

Word-spacing and letter spacing

You can increase the spacing between words and letters with these properties.
- word-spacing -The default amount of space between words is usually 0.25em.
- letter-spacing - technical term for adjusting this is called tracking.

h1 {
  word-spacing: 0.3em;
  letter-spacing: 0.01em
}

You can also use pixels (px) for word-spacing and letter-spacing.

Line-height

Line heights can take one of several values:
- A unitless number, such as 1.2. This number is an absolute value that will compute the line height as a ratio of the font size.
- A number specified by unit, such as 12px. This number can be any valid CSS unit, such as pixels, percents, ems, or rems.
Generally the unitless number is preferred as it is based on the font size so if that is changed, the line height would readjust itself accordingly.

.banner p {
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  line-height: 1.4;
}

Text-transform

You can make text all uppercase or all lowercase using this property. Values are either uppercase or lowercase.

h1 {
  text-transform: uppercase;
}

Text-align

You can align text on a webpage using this property. As a default all text is aligned to the left.
Values for this property are:
- left - aligns text to the left hand side of the browser.
- center - centers text.
- right - aligns text to the right hand side of the browser.

h1 {
  text-align: right;
}

Serif and Sans-serif

Fallback fonts

For fonts to show up on a webpage they need to be installed on a users computer. If they're not, you can set fallback fonts that are more likely to be available as a back up option.

h1 {
  font-family: "Garamond", "Times", serif;
}

The rule above says, to use garamond for the h1, but if that isn't available use times and if that isn't available, use any serif font. The times and serif fonts are the two fallback fonts.

Linking fonts - google fonts

Google has a huge library of free fonts for you to use.
Go to fonts.google.com and search for what you want.
Click the little plus button for the detail and customise to select which styles you want.
You can minimise the little window to add other styles to your list (it's a bit like adding things to a shopping cart)
Or you can go back to the embed tab.
Copy and paste the html link into the header of the html file as in the example below.
You will then be able to use the font in your css file.

Alternatively, you can link to the fonts in your CSS file. You need a different link for this.
To get the link, put the direct url of the font into your browser e.g. https://fonts.googleapis.com/css?family=Space+Mono:400,700/
Copy the /* latin */ @font-face link to the top of your CSS file for each font style that you want. Like this:

Hosting a font

As an alternative, we could host the font with our site files instead of depending on another site.
Plenty of font sites now help to do this e.g. Font Squirrel
You need to have the font saved in your directory.
You still add the links to the top of your CSS file, instead this time they're relative links to the font file in your directory.
You add a format for each file to specify which font to use. Different browsers support different font types, so providing multiple font file options will support more browsers.

@font-face {
  font-family: "Glegoo";
  src: url(../fonts/Glegoo-Regular.ttf) format('truetype');
}

In the example above, the font-family is given the name Gleegoo for you to refer to in your CSS.
You can then link to multiple formats of the same font to support different browsers.
Truetype fonts are older so support older browsers.
WOFF2 (Web open font format 2) is currently the best as it offers small file sizes and better performance so if you can, include a woff2 file.
In the example below, lots of different browsers have been supported.
(I'd like to know if there is an order that these files are chosen by the browser or do they automatically load the best one they can handle?

Codecademy - CSS 6: Colours

Helen Kent — Tue, 07 Jan 2020 22:12:28 +0000

What i've learnt from the colours lesson of Codecademy's CSS course.

Colors in CSS can be described in three different ways:
- Named colors — English words that describe colors, also called keyword colors
- RGB — numeric values that describe a mix of red, green, and blue
- HSL — numeric values that describe a mix of hue, saturation, and lightness
When you style an elements colour you can either style the foreground colour or the background colour. You would use these properties for this:
- color - this property styles an element’s foreground color.
- background-color - this property styles an element’s background color.
There are many different colours to choose from...here are just some!

Hex

Hexadecimal colours can be used. These are 3 or 6 digit numbers that begin with a hash character. The numbers and letters represent values for red, blue and green.

.green {
  background-color: #8FBC8F;
}

RGB

As an alternative to hex colour codes, RGB codes can be used. There isn't a right or wrong choice, its a matter of personal preference. However its best to stick to one format throughout your CSS.
The first number represents the amount of red, the second is green, and the third is blue.

h1 {
  color: rgb(23, 45, 23);
}

HSL

Another colour scheme is HSL or hue-saturation-lightness.
HSL is laid out similarly to RGB except the numbers mean different things.
The first number represents the degree of the hue, and can be between 0 and 360. The second and third numbers are percentages representing saturation (intensity of the colour) and lightness respectively (50% is about normal lightness). Here is an example:

.box {
color: hsl(120, 60%, 70%);
}

The first number is the hue and it refers to an angle on the colour wheel below.
HSL is useful because you can change things like the lightness by changing one number, rather than affecting each number in the code.

Opacity and Alpha

You can change the opacity of elements so they show the elements beneath them.
You can adapt your RGB and HSL properties to include an opacity value that is called an alpha.
To change the HSL you add an a onto the property and a fourth value.

color: hsla(34, 100%, 50%, 0.1);

To change the RGB you also add an a onto the property and a fourth value.

color: rgba(234, 45, 98, 0.33);

The alpha values can be between 0 and 1. Zero is completely transparent and one is opaque. Half transparent is 0.5.
You can think of the alpha value as, “the amount of the background to mix with the foreground”. When a color’s alpha is below one, any color behind it will be blended in. The blending happens for each pixel; no blurring occurs.
Alpha can only be used with HSL and RGB, not hex or named colours.
There is a value for completely transparent which is equivalent to rgba(0, 0, 0, 0) which is:

color: transparent;

Codecademy - CSS 9: Advanced Grid

Helen Kent — Mon, 06 Jan 2020 22:11:02 +0000

What i've learnt from the advanced grid lesson of Codecademy's CSS course.

This lesson covered:
- grid-template-areas
- justify-items
- justify-content
- justify-self
- align-items
- align-content
- align-self
- grid-auto-rows
- grid-auto-columns
- grid-auto-flow
- implicit and explicit grids
- grid axes
It took me a while to get my head around this and i'm not 100% sure how it works...

Grid-template-areas

This property allows you to name sections of your web page to use as values in your grid-row-start, grid-row-end, grid-col-start, grid-col-end, and grid-area properties.
This property is declared on the grid container.
Read through the code below:

HTML
<body>
  <div class="container">
    <header>
      <h1>Header</h1>
    </header>
    <nav>
      <h1>Nav</h1>
    </nav>
    <section class="left">
      <h2>Left</h2>
    </section>
    <section class="right">
      <h2>Right</h2>
    </section>
    <footer>
      <h1>Footer</h1>
    </footer>
  </div>
</body>

.container {
  display: grid;
  max-width: 900px;
  position: relative;
  margin: auto;
  grid-gap: 10px;
  grid-template-areas: "header header"
                        "nav nav"
                        "left right"
                        "footer footer";
  grid-template-columns: 200px 400px;
  grid-template-rows: 150px 200px 600px 200px;
}

h1, h2 {
  font-family: monospace;
  text-align: center;
}

header {
  background-color: dodgerblue;
  grid-area: header;
}

nav {
  background-color: beige;
  grid-area: nav;
}

.left {
  background-color: dodgerblue;
  grid-area: left;
}

.right {
  background-color: beige;
  grid-area: right;
}

footer {
  background-color: dodgerblue;
  grid-area: footer;
}

The code above creates this:
The grid-template-areas values in speech marks specify the number of rows (4 in this example, one for each set of speech marks) and for each row, how many columns the items take up. The third row is set as "left right" because in one row there are two columns, one taken up by the item "left" and one taken up by "right"

Overlapping Elements

You can specify, using grid-area and its values, that elements can overlap each other.
If this happens, you can use the property z-index to state which element will be on top etc.
In the code below, it is set up so that there is a grid with 8 rows and 6 columns. There are three items in the container - info, services and an image.
The grid-area values state the gridlines at which the item starts and finishes

.container {
  display: grid;
  grid-template: repeat(8, 200px) / repeat(6, 100px);
}

.info {
  grid-area: 1 / 1 / 9 / 4;
}

.services {
  grid-area: 1 / 4 / 9 / 7;
}

img {
  grid-area: 2 / 3 / 5 / 5;
  z-index: 5;
}

This would look like the image below and it would put the image on top.
I tested the z-index value from 1-10 and it always put the image on top - would like to know why this happened if anyone can help please!

Justify-items

There are two axes in grid layout. The column (or block) axis and the row (or inline) axis.
The justify-items property aligns elements along the row/inline axis and it accepts the following values amongst others:
- start - aligns items to the left
- end - aligns items to the right
- center - aligns items to the centre
- stretch - stretches items to fill the grid
This property is declared on the grid container.

main {
  display: grid;
  grid-template-columns: 250px 250px;
  grid-template-rows: repeat(3, 450px);
  grid-gap: 20px;
  margin-top: 44px;
  grid-auto-rows: 500px;
  justify-items: center;
}

Justify-content

You can also position a grid within its parent element.
You can use justify-content to position the entire grid along the row axis. It accepts these values amongst others:
- start — aligns the grid to the left side of the grid container
- end — aligns the grid to the right side of the grid container
- center — centers the grid horizontally in the grid container
- stretch — stretches the grid items to increase the size of the grid to expand horizontally across the container
- space-around — includes an equal amount of space on each side of a grid element, resulting in double the amount of space between elements as there is before the first and after the last element
- space-between — includes an equal amount of space between grid items and no space at either end
- space-evenly — places an even amount of space between grid items and at either end
This property is declared on the grid container.
In the example below, there is a grid that is 1000px wide but it only has two columns that total 600px. So there is 400px of unused space. You use justify-content to specify where the grid is placed within that large space.

HTML
<main>
  <div class="left">Left</div>
  <div class="right">Right</div>
</main>

CSS
main {
  display: grid;
  width: 1000px;
  grid-template-columns: 300px 300px;
  grid-template-areas: "left right"; 
  justify-content: center;
}

Align-items

Align-items works very similarly to justify-items, except it is aligning the items from top to bottom within the grid space, rather than from left to right.
Some of the values (amongst others) that are accepted are:
- start — aligns grid items to the top side of the grid area
- end — aligns grid items to the bottom side of the grid area
- center — aligns grid items to the center of the grid area
- stretch — stretches all items to fill the grid area
This property is declared on the grid container.

main {
  display: grid;
  grid-template-rows: repeat(3, 400px);
  align-items: center;
}

Align-content

Align-content works very similarly to justify-content, except it is aligning the grid within the grid container from top to bottom, rather than left to right.
Some of the possible values align-content accepts are:
- start — aligns the grid to the top of the grid container
- end — aligns the grid to the bottom of the grid container
- center — centers the grid vertically in the grid container
- stretch — stretches the grid items to increase the size of the grid to expand vertically across the container
- space-around — includes an equal amount of space on each side of a grid element, resulting in double the amount of space between elements as there is before the first and after the last element
- space-between — includes an equal amount of space between grid items and no space at either end
- space-evenly — places an even amount of space between grid items and at either end
As before, if the grid container is for example, 1600px, but the grid has 3 rows of 400px each, there are an empty 400px. You can use align-content to state where the grid goes within this space from top to bottom.
This property is declared on the grid container.

main {
  display: grid;
  height: 600px;
  rows: 200px 200px;
  grid-template-areas: "top"
                       "bottom"; 
  align-content: center;
}

Align-self and justify-self

These two properties allow you to align (top to bottom) or justify (left to right) the elements in the individual grid boxes.
If you use these properties they overrule justify-items and align-items.
They take the values start, end, center and stretch amongst others.
These properties are declared on the grid items.

.a {
  align-self: end;
}

.c {
  justify-self: start;
}

Implicit vs Explicit Grid

So far we've been specifying the sizes of the grids which is ok for some sites.
Sometimes this will not be any good - e.g. on an online shopping site where a customer searches for a product, a different number of results will be brought back each time.
If more items are returned for the grid, something called the implicit grid takes over.
The default behaviour for this is that items fill up rows first and add new rows as necessary.
New grid rows will only be tall enough to contain the content within them.
Its important to know how to change this default behaviour.

Grid-auto-rows and grid-auto-columns

These properties allow you to specify the size of rows and columns that are added implicitly.
They accept the same values as grid-template-rows and grid-template-columns (px, %, fr, repeat())
This property is declared on the grid container.

Grid-auto-flow

This property allows you to set how the extra grid items are rendered - whether they are added to new rows or new columns.
It accepts these values:
- row — specifies the new elements should fill rows from left to right and create new rows when there are too many elements (default)
- column — specifies the new elements should fill columns from top to bottom and create new columns when there are too many elements
- dense — this keyword invokes an algorithm that attempts to fill holes earlier in the grid layout if smaller elements are added
You can pair the values like this grid-auto-flow: column dense;
This property is declared on the grid container.

That's it for advanced grid on codecademy!

EDIT: I don't know if it's mega cheating to use this, but I found it and don't want to forget it - design a grid and set out the divs and ask for the code... https://cssgrid-generator.netlify.com/

Codecademy - CSS 8: Grid Essentials

Helen Kent — Sun, 05 Jan 2020 21:27:42 +0000

What i've learnt from the grid essentials lesson of Codecademy's CSS course.

The grid method is another way of laying out elements on a web page.
This lesson will include the following grid properties to create grid layouts:
- grid-template-columns
- grid-template-rows
- grid-template
- grid-template-area
- grid-gap
- grid-row-start / grid-row-end
- grid-column-start / grid-column-end
- grid-area
To set up a grid you need a grid container (parent) and grid items (children) - the grid container applies overarching styling and positioning.
To turn an HTML element into a grid container you must set its CSS display property to grid (if its a block level grid) or inline-grid (if its an inline grid). After that you can assign other properties to lay it out.

HTML:
<body>
  <div class="grid">
    <div class="box a">A</div>
    <div class="box b">B</div>
    <div class="box c">C</div>
    <div class="box d">D</div>
    <div class="box e">E</div>
    <div class="box f">F</div>
    <div class="box g">G</div>
  </div>
</body>

CSS:
.grid {
  border: 2px blue solid;
  width: 400px;
  height: 500px;
  display: grid;
}

By setting width and height properties it means that the grid will always be that size no matter the size of the browser. If you delete these properties the grid will increase or decrease in size if the browser is made bigger or smaller (i think!)

Grid-template-columns

By default grids have just one column. We use grid-template-columns to define the number of columns.
Eg. grid-template-columns: 100px 200px - these values are each the width of a column and as there are two values, it knows there will be two columns.
values can be given in px or as % of the total grid width.
The values can be a mixture of px or %

The grid from the code above would look like this:

If you add the grid-template-column CSS:

.grid {
  border: 2px blue solid;
  width: 400px;
  height: 500px;
  display: grid;
  grid-template-columns: 100px 50% 200px
}

It changes to:
so the grid items still stay in that order and go from left to right.
some items are outside the grid boundaries but this will apparently be fixed later!

Grid-template-rows

Works pretty much identically to grid-template-columns...except for rows! The rows are defined as a percentage of the grids total height.
In the example below the first two rows are fairly similar heights and the last one is pretty small in comparison.

.grid {
  display: grid;
  border: 2px blue solid;
  width: 400px;
  height: 500px;
  grid-template-columns: 100px 50% 200px;
  grid-template-rows: 40% 50% 50px;
}

Grid-template

You can forget the first two properties and use this if you like!

  grid-template: 200px 300px / 20% 10% 70%;

The first two values for this property specify the number and height of the rows, the values after the slash specify the number and width of your columns.

Fraction

We've already seen that values for rows and columns can be given as px and % (codecademy said em and rem can also be used, i had to google these and kind of understand them, but not going to go into them here!)
fraction was also introduced for grid as a way of sectioning off the rows/columns without them going over the grid limits.

grid-template: 2fr 1fr 1fr / 1fr 3fr 1fr;

In the example above, there are still 3 rows (the first set of values) but the grid height is split into four. The first row gets 2 quarters of this, the last two rows get 1 quarter each.
The width of the grid (second set of values) is split into 5 equal parts, the first and last column will be 1 fifth of the width each, the second column will be 3 fifths of the width.
fractions can also be mixed with px and % units.

Repeat function

Rather than specify each row/column value you can use the repeat function.

 grid-template-columns: repeat(3, 100px);

In the above example there will be 3 columns of 100px each.

grid-template-rows: repeat(5, 1fr);

It can also be used with fraction, so here there would be 5 rows of equal height.
The second parameter of the repeat function can have multiple values e.g:

grid-template-columns: repeat(2, 20px 50px)

Here there would be four columns. The first and second would be 20px and 50px and the 3rd and 4th would also be 20px then 50px.

Minmax function

You might sometimes want your rows/columns to have a min or max size due to what is contained within it. E.g. a 100px image should not be in a grid box smaller than 100px.

.grid {
  display: grid;
  grid-template-columns: 100px minmax(100px, 500px) 100px;
}

In this example, the first and third columns will stay as 100px. The second column can't go smaller than 100px or larger than 500px but it can vary between these values if the overall grid resizes.
For this example to work you need to remove the grid width property (see first example in this post)
If you do this then make your browser window larger, the other columns will get bigger when the minmax column reaches its max size.

Grid-gap

You can use grid-gap to give space between the rows and columns in your grid.
The gaps are just in-between rows and columns and not at the top/bottom/sides.

.grid {
  display: grid;
  width: 320px;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 15px;
}

These gaps are included in the grid width. Say the grid width was 320px and there are two gaps between the three columns. That leaves 300px for the three columns which are 1fr each = each column is 100px.

-The column and row gaps can be specified in separate properties like above or you can put them in the same property grid-gap

grid-gap: 20px 5px;

Here, the row gaps would be 20px and the column gaps would be 5px.

Grid items

So far, grid items have just taken up space in one square of our grid. E.g. in the image below items A, B, C and E take up more than one row and C spans more than one column too.

Grid-row-start & grid-row-end

Using these properties you can make grid items take up several rows like in the image above.
The values that you give these properties are the gridlines, not the grid rows.

.item {
  grid-row-start: 1;
  grid-row-end: 3;
}

Therefore, the item above would take up two rows. It would start on row 1 and end on row 2. (Think of these values as the gridlines either side of the item.

Grid-row

You can use the shorthand of grid-row to replace using both of the properties above. The example below gives exactly the same output (number before the slash is row start and after the slash is row end.
These properties include any grid-gap that is included in the css.

.item {
  grid-row: 1 / 3;
}

Grid-column and span

The properties above also exist for column and work in exactly the same way.
Instead of specifying an end column or row you can use span
In the example below, item 'b' starts in column 2 and spreads across 6 columns. and it starts in row 2 and takes up 3 rows.

.b {
  grid-column: 2 / span 6;
  grid-row: 2 / span 3;
}

Grid-area

You can refactor the code above further by just using grid-area instead.
The values are set in this order:
1. grid-row-start
2. grid-column-start
3. grid-row-end
4. grid-column-end
Span can still be used.

.a {
  grid-area: 5 / 1 / span 2 / span 2;
}

Example

Example code using the properties above and the output it gives.

HTML

<body>
  <div class="grid">
    <div class="box a">A</div>
    <div class="box b">B</div>
    <div class="box c">C</div>
    <div class="box d">D</div>
    <div class="box e">E</div>
  </div>
</body>

CSS

.grid {
  display: grid;
  border: 2px blue solid;
  height: 500px;
  width: 500px;
  grid-template-columns: 25% 25% 2fr 1fr;
  grid-template-rows: 200px 200px;
  grid-column-gap: 15px;
  grid-row-gap: 10px;
}

.box {
  background-color: beige;
  color: black;
  border-radius: 5px;
  border: 2px dodgerblue solid;
}

.a {
  grid-column: 1 / span 2;
  grid-row-start: 1;
  grid-row-end: 3;
}

The code below gives the same output, but it has been refactored to use the properties that are more concise (right word??)

.grid {
  display: grid;
  border: 2px blue solid;
  height: 500px;
  width: 500px;
  grid-template: 200px 200px / 25% 25% 2fr 1fr;
  grid-gap: 10px / 15px;
}

.box {
  background-color: beige;
  color: black;
  border-radius: 5px;
  border: 2px dodgerblue solid;
}

.a {
  grid-area: 1 / 1 / span 2 / span 2;
}

That's it! Advanced grid next...